diff --git a/src/registrar/assets/src/js/getgov/domain-nameservers.js b/src/registrar/assets/src/js/getgov/domain-nameservers.js deleted file mode 100644 index d59d55b32..000000000 --- a/src/registrar/assets/src/js/getgov/domain-nameservers.js +++ /dev/null @@ -1,39 +0,0 @@ - -function addForm(e, nameServerRows){ - let formspace = document.getElementsByClassName("nameservers-form"); - - function formTemplate(num) { - return ( - `
- -
Example: ns${num}.example.com
- - ` - ) - } - - - 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 \ No newline at end of file diff --git a/src/registrar/assets/src/js/getgov/form-nameservers.js b/src/registrar/assets/src/js/getgov/form-nameservers.js new file mode 100644 index 000000000..74906686d --- /dev/null +++ b/src/registrar/assets/src/js/getgov/form-nameservers.js @@ -0,0 +1,22 @@ +import { showElement, hideElement } from './helpers'; + +function handleAddForm(e) { + let nameserversForm = document.querySelector('.nameservers-form'); + if (!nameserversForm) { + console.warn('Expected DOM element but did not find it'); + return; + } + + showElement(nameserversForm); + + if (e?.target) { + hideElement(e.target); + } +} + +export function initFormNameservers() { + const addButton = document.getElementById('nameserver-add-form'); + if (!addButton) return; + + addButton.addEventListener('click', handleAddForm); +} diff --git a/src/registrar/assets/src/js/getgov/main.js b/src/registrar/assets/src/js/getgov/main.js index ecb6de4a7..637488187 100644 --- a/src/registrar/assets/src/js/getgov/main.js +++ b/src/registrar/assets/src/js/getgov/main.js @@ -1,6 +1,7 @@ -import { hookupYesNoListener, hookupRadioTogglerListener } from './radios.js'; +import { hookupYesNoListener } from './radios.js'; import { initDomainValidators } from './domain-validators.js'; -import { initFormsetsForms, triggerModalOnDsDataForm, nameserversFormListener } from './formset-forms.js'; +import { initFormsetsForms, triggerModalOnDsDataForm } from './formset-forms.js'; +import { initFormNameservers } from './form-nameservers' import { initializeUrbanizationToggle } from './urbanization.js'; import { userProfileListener, finishUserSetupListener } from './user-profile.js'; import { handleRequestingEntityFieldset } from './requesting-entity.js'; @@ -20,7 +21,7 @@ initDomainValidators(); initFormsetsForms(); triggerModalOnDsDataForm(); -//nameserversFormListener(); +initFormNameservers(); hookupYesNoListener("other_contacts-has_other_contacts",'other-employees', 'no-other-employees'); hookupYesNoListener("additional_details-has_anything_else_text",'anything-else', null); diff --git a/src/registrar/templates/domain_nameservers.html b/src/registrar/templates/domain_nameservers.html index a81cac242..11369ed59 100644 --- a/src/registrar/templates/domain_nameservers.html +++ b/src/registrar/templates/domain_nameservers.html @@ -47,35 +47,183 @@ {% if formset.initial and formset.forms.0.initial %} -
- {% csrf_token %} - {{ formset.management_form }} + + {% csrf_token %} + {{ formset.management_form }} -
+ - - - - - - - - - - - - {% for form in formset %} - {% if not forloop.last %} - - - - - - - - - - - - - {% endif %} - {% endfor %} - -
Your registered domains
Name ServersIP addressAction
{{ form.server.value }}{{ form.ip.value }} -
- - - - -
-
- -
- -
- -
-
- - - - {% else %} - -

Add name servers

-
- {% csrf_token %} - {{ formset.management_form }} - {% for form in formset %} -
-
-
- {% with sublabel_text="Example: ns"|concat:forloop.counter|concat:".example.com" %} - {% if forloop.counter <= 2 %} - {# span_for_text will wrap the copy in s , which we'll use in the JS for this component #} - {% with attr_required=True add_group_class="usa-form-group--unstyled-error" span_for_text=True %} - {% input_with_errors form.server %} - {% endwith %} - {% else %} - {% with span_for_text=True %} - {% input_with_errors form.server %} - {% endwith %} - {% endif %} - {% endwith %} -
-
- {% with label_text=form.ip.label sublabel_text="Example: 86.124.49.54 or 2001:db8::1234:5678" add_group_class="usa-form-group--unstyled-error" add_aria_label="Name server "|concat:forloop.counter|concat:" "|concat:form.ip.label %} - {% input_with_errors form.ip %} - {% endwith %} -
-
- -
-
-
- {% endfor %} - {% 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 %} -
- - - -
-
{% endif %} {% endblock %} {# domain_content #}