stuff so far

src/registrar/assets/src/js/getgov/domain-nameservers.js

@@ -0,0 +1,39 @@
+
+function addForm(e, nameServerRows){
+    let formspace = document.getElementsByClassName("nameservers-form");
+
+    function formTemplate(num) {
+        return (
+            `<fieldset class="usa-fieldset"> 
+            <label class="usa-label" for="given-name">Name server ${num} </label>
+            <div class="usa-hint" id="gnHint">Example: ns${num}.example.com</div>
+            <input
+              class="usa-input usa-input--xl"
+              id="given-name"
+              name="first-name"
+              aria-describedby="gnHint"
+            />
+        </form>`
+        )
+    }
+
+     
+    if(nameServerRows.length > 0){
+        for(let i = 0; i < 1; i++){
+            formspace.add(formTemplate(i + 1))
+        }
+    }
+    else{
+        formspace.add(formTemplate(nameServerRows.length + 1))
+    }  
+}
+
+export function domainNameServers() {
+    let addButton = document.querySelector("#nameserver-add-form");
+    let nameServerRows = document.querySelectorAll("nameserver-row");
+    addButton.addEventListener('click', addForm(nameServerRows));
+   
+}
+
+// need a listener for save and cancel to hide the form when clicked
+// add function to add rows to the table after submiting form

src/registrar/templates/domain_nameservers.html

@@ -32,36 +32,38 @@
   {% endif %}
   {% endblock breadcrumb %}
 
-  <h1>DNS name servers</h1>
-
+  <div>
+    <h1>Name Servers</h1>
+    
+    <button type="button" class="usa-button" id="nameserver-add-form">
+      Add name servers
+    </button>
+  </div>
   <p>Before your domain can be used we’ll need information about your domain name servers. Name server records indicate which DNS server is authoritative for your domain.</p>
 
-  <p>Add a name server record by entering the address (e.g., ns1.nameserver.com) in the name server fields below. You must add at least two name servers (13 max).</p>
-
-  <div class="usa-alert usa-alert--info">
-    <div class="usa-alert__body">
-      <p class="margin-top-0">Add an IP address only when your name server's address includes your domain name (e.g., if your domain name is “example.gov” and your name server is “ns1.example.gov,” then an IP address is required). Multiple IP addresses must be separated with commas.</p>
-      <p class="margin-bottom-0">This step is uncommon unless you self-host your DNS or use custom addresses for your nameserver.</p>
-    </div>
-  </div>
+  <p>Add a name server record by clicking "Add name servers". You must add at least two name servers (13 max).</p>
 
   {% include "includes/required_fields.html" %}
 
-  <form class="usa-form usa-form--extra-large nameservers-form" method="post" novalidate id="form-container">
+  <form class="usa-form usa-form--extra-large nameservers-form display-none" method="post" novalidate id="form-container">
     {% csrf_token %}
     {{ formset.management_form }}
-    {% for form in formset %}
-    <fieldset class="usa-fieldset">
-      <label class="usa-label" for="given-name">Name server {{forloop.counter}} </label>
-      <div class="usa-hint" id="gnHint">Example: ns{{forloop.counter}}.example.com</div>
-      <input
-        class="usa-input usa-input--xl"
-        id="given-name"
-        name="first-name"
-        aria-describedby="gnHint"
-      />
-  </form>
-    {% endfor %}
+
+
+
+    <table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked display-none">
+      <caption class="sr-only">Your registered domains</caption>
+      <thead>
+        <tr>
+          <th scope="col" role="columnheader">Name Servers </th>
+          <th scope="col" role="columnheader">Action</th>
+        </tr>
+      </thead>
+      <tbody>
+        <!-- AJAX will populate this tbody -->
+      </tbody>
+    </table>
+
     <!--
     if no data in formset: 
       build 2 blank forms
@@ -73,6 +75,7 @@
 
       build a table of records using for form in formset-1
 
+      
 
             <table .......>
               <thead>....</thead>
@@ -149,12 +152,6 @@
     </div>
     {% endfor %} -->
 
-    <button type="button" class="usa-button usa-button--unstyled usa-button--with-icon" 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>Add another name server
-    </button>
-
     {% comment %} Work around USWDS' button margins to add some spacing between the submit and the 'add more'
     This solution still works when we remove the 'add more' at 13 forms {% endcomment %}
     <div class="margin-top-2">

src/registrar/views/domain.py

@@ -758,8 +758,10 @@ class DomainNameserversView(DomainFormBaseView):
 
         # Ensure at least 3 fields, filled or empty
         if len(initial_data) == 0:
-            while len(initial_data) < 2:
+            while len(initial_data) < 1:
                 initial_data.append({})
+        else:
+            initial_data.append({})
 
         return initial_data
 
@@ -771,6 +773,7 @@ class DomainNameserversView(DomainFormBaseView):
         """Adjust context from FormMixin for formsets."""
         context = super().get_context_data(**kwargs)
         # use "formset" instead of "form" for the key
+        print(context)
         context["formset"] = context.pop("form")
         return context