Working JS "additional form" form

src/registrar/assets/js/get-gov.js

@@ -230,4 +230,31 @@ function handleValidationClick(e) {
 })();
 
 
+(function prepareForms() {
+  let serverForm = document.querySelectorAll(".server-form")
+  let container = document.querySelector("#form-container")
+  let addButton = document.querySelector("#add-form")
+  let totalForms = document.querySelector("#id_form-TOTAL_FORMS")
+
+  let formNum = serverForm.length-1
+  addButton.addEventListener('click', addForm)
+
+  function addForm(e){
+      e.preventDefault()
+
+      let newForm = serverForm[0].cloneNode(true)
+      let formNumberRegex = RegExp(`form-(\\d){1}-`,'g')
+      let formLabelRegex = RegExp(`Name server (\\d){1}`, 'g')
+      let formExampleRegex = RegExp(`ns(\\d){1}`, 'g')
+
+      formNum++
+      newForm.innerHTML = newForm.innerHTML.replace(formNumberRegex, `form-${formNum}-`)
+      newForm.innerHTML = newForm.innerHTML.replace(formLabelRegex, `Name server ${formNum+1}`)
+      newForm.innerHTML = newForm.innerHTML.replace(formExampleRegex, `ns${formNum+1}`)
+      container.insertBefore(newForm, addButton)
+      newForm.querySelector("input").value = ""
+
+      totalForms.setAttribute('value', `${formNum+1}`)
+  }
+})();
 

src/registrar/forms/__init__.py

@@ -1,2 +1,2 @@
 from .application_wizard import *
-from .domain import DomainAddUserForm, DomainNameserverForm
+from .domain import DomainAddUserForm, DomainNameserverForm, NameserverFormset

src/registrar/forms/domain.py

@@ -1,7 +1,7 @@
 """Forms for domain management."""
 
 from django import forms
-
+from django.forms import formset_factory
 
 class DomainAddUserForm(forms.Form):
 
@@ -15,3 +15,8 @@ class DomainNameserverForm(forms.Form):
     """Form for changing nameservers."""
 
     server = forms.CharField(label="Name server")
+
+NameserverFormset = formset_factory(
+    DomainNameserverForm,
+    extra=1,
+)

src/registrar/models/domain.py

@@ -234,7 +234,7 @@ class Domain(TimeStampedModel):
         """Set the nameservers for this domain."""
         # TODO: call EPP to set these values in the registry instead of doing
         # nothing.
-        pass
+        logger.warn("TODO: Fake setting nameservers to %s", new_nameservers)
 
     @property
     def roid(self):

src/registrar/templates/domain_nameservers.html

@@ -13,11 +13,12 @@
 
   {% include "includes/required_fields.html" %}
 
-  <form class="usa-form usa-form--large" method="post" novalidate>
+  <form class="usa-form usa-form--large" method="post" novalidate id="form-container">
     {% csrf_token %}
-	{{ formset.management_form }}
+    {{ formset.management_form }}
 
     {% for form in formset %}
+    <div class="server-form">
     {% with sublabel_text="Example: ns"|concat:forloop.counter|concat:".nameserver.com" %}
       {% if forloop.counter <= 2 %}
         {% with attr_required=True %}
@@ -27,9 +28,10 @@
         {% input_with_errors form.server %}
       {% endif %}
     {% endwith %}
+    </div>
     {% endfor %}
 
-    <button type="submit" name="submit_button" value="save" class="usa-button usa-button--unstyled display-block">
+    <button type="submit" name="submit_button" value="add_another" class="usa-button usa-button--unstyled display-block" id="add-form">
       <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
         <use xlink:href="{%static 'img/sprite.svg'%}#add_circle"></use>
       </svg><span class="margin-left-05">Add another name server</span>

src/registrar/templates/includes/input_with_errors.html

@@ -29,7 +29,7 @@ error messages, if necessary.
   {% endif %}
 
   {% if sublabel_text %}
-    <p id="{{ widget.attrs.id }}__sublabel" class="text-base">{{ sublabel_text }}</p>
+    <p id="{{ widget.attrs.id }}__sublabel" class="text-base margin-top-2px margin-bottom-1">{{ sublabel_text }}</p>
   {% endif %}
 
   {% if field.errors %}

src/registrar/tests/test_views.py

@@ -1240,6 +1240,28 @@ class TestDomainDetail(TestWithDomainPermissions, WebTest):
         )
         self.assertContains(page, "Domain name servers")
 
+    def test_domain_nameservers_form(self):
+        """Can change domain's namerservers.
+
+        Uses self.app WebTest because we need to interact with forms.
+        """
+        nameservers_page = self.app.get(
+            reverse("domain-nameservers", kwargs={"pk": self.domain.id})
+        )
+        session_id = self.app.cookies[settings.SESSION_COOKIE_NAME]
+        self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
+        with less_console_noise():  # swallow log warning message
+            result = nameservers_page.form.submit()
+        # form submission was a post, response should be a redirect
+        self.assertEqual(result.status_code, 302)
+        self.assertEqual(
+            result["Location"],
+            reverse("domain-nameservers", kwargs={"pk": self.domain.id}),
+        )
+        self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
+        page = result.follow()
+        self.assertContains(page, "The name servers for this domain have been updated")
+
 
 class TestApplicationStatus(TestWithUser, WebTest):
     def setUp(self):

src/registrar/views/domain.py

@@ -5,7 +5,6 @@ import logging
 from django.contrib import messages
 from django.contrib.messages.views import SuccessMessageMixin
 from django.db import IntegrityError
-from django.forms import formset_factory
 from django.shortcuts import redirect
 from django.urls import reverse
 from django.views.generic import DetailView
@@ -13,15 +12,13 @@ from django.views.generic.edit import DeleteView, FormMixin
 
 from registrar.models import Domain, DomainInvitation, User, UserDomainRole
 
-from ..forms import DomainAddUserForm, DomainNameserverForm
+from ..forms import DomainAddUserForm, DomainNameserverForm, NameserverFormset
 from ..utility.email import send_templated_email, EmailSendingError
 from .utility import DomainPermission
 
 
 logger = logging.getLogger(__name__)
 
-NameserverFormset = formset_factory(DomainNameserverForm)
-
 
 class DomainView(DomainPermission, DetailView):
 
@@ -72,7 +69,7 @@ class DomainNameserversView(DomainPermission, FormMixin, DetailView):
         """Formset submission posts to this view."""
         self.object = self.get_object()
         formset = self.get_form()
-        print([form.fields["server"].required for form in formset])
+
         if formset.is_valid():
             return self.form_valid(formset)
         else:
@@ -84,13 +81,11 @@ class DomainNameserversView(DomainPermission, FormMixin, DetailView):
         # Set the nameservers from the formset
         nameservers = []
         for form in formset:
-            print(form.cleaned_data)
             try:
                 nameservers.append(form.cleaned_data["server"])
             except KeyError:
                 # no server information in this field, skip it
                 pass
-        print("Valid form, got nameservers:", nameservers)
         domain = self.get_object()
         domain.set_nameservers(nameservers)