Undo getgov js changes

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

@@ -134,19 +134,10 @@ function _checkDomainAvailability(el) {
   const callback = (response) => {
     toggleInputValidity(el, (response && response.available), msg=response.message);
     announce(el.id, response.message);
-
-    // Determines if we ignore the field if it is just blank
-    ignore_blank = el.classList.contains("blank-ok")
     if (el.validity.valid) {
       el.classList.add('usa-input--success');
       // use of `parentElement` due to .gov inputs being wrapped in www/.gov decoration
       inlineToast(el.parentElement, el.id, SUCCESS, response.message);
-    } else if (ignore_blank && response.code == "required"){
-      // Visually remove the error
-      error = "usa-input--error"
-      if (el.classList.contains(error)){
-        el.classList.remove(error)
-      }
     } else {
       inlineToast(el.parentElement, el.id, ERROR, response.message);
     }
@@ -236,147 +227,205 @@ function handleValidationClick(e) {
   for(const button of activatesValidation) {
     button.addEventListener('click', handleValidationClick);
   }
-
-  
-  // Add event listener to the "Check availability" button
-  const checkAvailabilityButton = document.getElementById('check-availability-button');
-  if (checkAvailabilityButton) {
-    const targetId = checkAvailabilityButton.getAttribute('validate-for');
-    const checkAvailabilityInput = document.getElementById(targetId);
-    checkAvailabilityButton.addEventListener('click', removeFormErrors(checkAvailabilityInput));
-  }
-
-  // Add event listener to the alternate domains input
-  const alternateDomainsInputs = document.querySelectorAll('[auto-validate]');
-  if (alternateDomainsInputs) {
-    for (const domainInput of alternateDomainsInputs){
-      // Only apply this logic to alternate domains input
-      if (domainInput.classList.contains('alternate-domain-input')){
-          domainInput.addEventListener('input', removeFormErrors(domainInput));
-      }
-    }
-    }
 })();
 
 /**
- * Removes form errors surrounding a form input
+ * Delete method for formsets that diff in the view and delete in the model (Nameservers, DS Data)
+ * 
  */
-function removeFormErrors(input){
+function removeForm(e, formLabel, isNameserversForm, addButton, formIdentifier){
-  // Remove error message
+  let totalForms = document.querySelector(`#id_${formIdentifier}-TOTAL_FORMS`);
-  let errorMessage = document.getElementById(`${input.id}__error-message`);
+  let formToRemove = e.target.closest(".repeatable-form");
-  if (errorMessage) {
+  formToRemove.remove();
-    errorMessage.remove();
+  let forms = document.querySelectorAll(".repeatable-form");
-  }
+  totalForms.setAttribute('value', `${forms.length}`);
 
-  // Remove error classes
+  let formNumberRegex = RegExp(`form-(\\d){1}-`, 'g');
-  if (input.classList.contains('usa-input--error')) {
+  let formLabelRegex = RegExp(`${formLabel} (\\d+){1}`, 'g');
-    input.classList.remove('usa-input--error');
+  // For the example on Nameservers
-  }
+  let formExampleRegex = RegExp(`ns(\\d+){1}`, 'g');
 
-  let label = document.querySelector(`label[for="${input.id}"]`);
+  forms.forEach((form, index) => {
-  if (label) {
+    // Iterate over child nodes of the current element
-    label.classList.remove('usa-label--error');
+    Array.from(form.querySelectorAll('label, input, select')).forEach((node) => {
+      // Iterate through the attributes of the current node
+      Array.from(node.attributes).forEach((attr) => {
+        // Check if the attribute value matches the regex
+        if (formNumberRegex.test(attr.value)) {
+          // Replace the attribute value with the updated value
+          attr.value = attr.value.replace(formNumberRegex, `form-${index}-`);
+        }
+      });
+    });
 
-    // Remove error classes from parent div
+    // h2 and legend for DS form, label for nameservers  
-    let parentDiv = label.parentElement;
+    Array.from(form.querySelectorAll('h2, legend, label, p')).forEach((node) => {
-    if (parentDiv) {
+      
-      parentDiv.classList.remove('usa-form-group--error');
+      // If the node is a nameserver label, one of the first 2 which was previously 3 and up (not required)
+      // inject the USWDS required markup and make sure the INPUT is required
+      if (isNameserversForm && index <= 1 && node.innerHTML.includes('server') && !node.innerHTML.includes('*')) {
+        // Create a new element
+        const newElement = document.createElement('abbr');
+        newElement.textContent = '*';
+        newElement.setAttribute("title", "required");
+        newElement.classList.add("usa-hint", "usa-hint--required");
+
+        // Append the new element to the label
+        node.appendChild(newElement);
+        // Find the next sibling that is an input element
+        let nextInputElement = node.nextElementSibling;
+
+        while (nextInputElement) {
+          if (nextInputElement.tagName === 'INPUT') {
+            // Found the next input element
+            nextInputElement.setAttribute("required", "")
+            break;
+          }
+          nextInputElement = nextInputElement.nextElementSibling;
+        }
+        nextInputElement.required = true;
+      }
+
+      let innerSpan = node.querySelector('span')
+      if (innerSpan) {
+        innerSpan.textContent = innerSpan.textContent.replace(formLabelRegex, `${formLabel} ${index + 1}`);
+      } else {
+        node.textContent = node.textContent.replace(formLabelRegex, `${formLabel} ${index + 1}`);
+        node.textContent = node.textContent.replace(formExampleRegex, `ns${index + 1}`);
+      }
+    });
+
+    // Display the add more button if we have less than 13 forms
+    if (isNameserversForm && forms.length <= 13) {
+      addButton.removeAttribute("disabled");
     }
+
+    if (isNameserversForm && forms.length < 3) {
+      // Hide the delete buttons on the remaining nameservers
+      Array.from(form.querySelectorAll('.delete-record')).forEach((deleteButton) => {
+        deleteButton.setAttribute("disabled", "true");
+      });
+    }
+  
+  });
+}
+
+/**
+ * Delete method for formsets using the DJANGO DELETE widget (Other Contacts)
+ * 
+ */
+function markForm(e, formLabel){
+  // Unlike removeForm, we only work with the visible forms when using DJANGO's DELETE widget
+  let totalShownForms = document.querySelectorAll(`.repeatable-form:not([style*="display: none"])`).length;
+
+  if (totalShownForms == 1) {
+    // toggle the radio buttons
+    let radioButton = document.querySelector('input[name="other_contacts-has_other_contacts"][value="False"]');
+    radioButton.checked = true;
+    // Trigger the change event
+    let event = new Event('change');
+    radioButton.dispatchEvent(event);
+  } else {
+
+    // Grab the hidden delete input and assign a value DJANGO will look for
+    let formToRemove = e.target.closest(".repeatable-form");
+    if (formToRemove) {
+      let deleteInput = formToRemove.querySelector('input[class="deletion"]');
+      if (deleteInput) {
+        deleteInput.value = 'on';
+      }
+    }
+
+    // Set display to 'none'
+    formToRemove.style.display = 'none';
+  }
+  
+  // Update h2s on the visible forms only. We won't worry about the forms' identifiers
+  let shownForms = document.querySelectorAll(`.repeatable-form:not([style*="display: none"])`);
+  let formLabelRegex = RegExp(`${formLabel} (\\d+){1}`, 'g');
+  shownForms.forEach((form, index) => {
+    // Iterate over child nodes of the current element
+    Array.from(form.querySelectorAll('h2')).forEach((node) => {
+        node.textContent = node.textContent.replace(formLabelRegex, `${formLabel} ${index + 1}`);
+    });
+  });
+}
+
+/**
+ * Prepare the namerservers, DS data and Other Contacts formsets' delete button
+ * for the last added form. We call this from the Add function
+ * 
+ */
+function prepareNewDeleteButton(btn, formLabel) {
+  let formIdentifier = "form"
+  let isNameserversForm = document.querySelector(".nameservers-form");
+  let isOtherContactsForm = document.querySelector(".other-contacts-form");
+  let addButton = document.querySelector("#add-form");
+
+  if (isOtherContactsForm) {
+    formIdentifier = "other_contacts";
+    // We will mark the forms for deletion
+    btn.addEventListener('click', function(e) {
+      markForm(e, formLabel);
+    });
+  } else {
+    // We will remove the forms and re-order the formset
+    btn.addEventListener('click', function(e) {
+      removeForm(e, formLabel, isNameserversForm, addButton, formIdentifier);
+    });
   }
 }
 
 /**
- * Prepare the namerservers and DS data forms delete buttons
+ * Prepare the namerservers, DS data and Other Contacts formsets' delete buttons
- * We will call this on the forms init, and also every time we add a form
+ * We will call this on the forms init
  * 
  */
 function prepareDeleteButtons(formLabel) {
+  let formIdentifier = "form"
   let deleteButtons = document.querySelectorAll(".delete-record");
-  let totalForms = document.querySelector("#id_form-TOTAL_FORMS");
+  let isNameserversForm = document.querySelector(".nameservers-form");
-  let isNameserversForm = document.title.includes("DNS name servers |");
+  let isOtherContactsForm = document.querySelector(".other-contacts-form");
   let addButton = document.querySelector("#add-form");
+  if (isOtherContactsForm) {
+    formIdentifier = "other_contacts";
+  }
   
   // Loop through each delete button and attach the click event listener
   deleteButtons.forEach((deleteButton) => {
-    deleteButton.addEventListener('click', removeForm);
+    if (isOtherContactsForm) {
+      // We will mark the forms for deletion
+      deleteButton.addEventListener('click', function(e) {
+        markForm(e, formLabel);
+      });
+    } else {
+      // We will remove the forms and re-order the formset
+      deleteButton.addEventListener('click', function(e) {
+        removeForm(e, formLabel, isNameserversForm, addButton, formIdentifier);
+      });
+    }
   });
+}
 
-  function removeForm(e){
+/**
-    let formToRemove = e.target.closest(".repeatable-form");
+ * DJANGO formset's DELETE widget
-    formToRemove.remove();
+ * On form load, hide deleted forms, ie. those forms with hidden input of class 'deletion'
-    let forms = document.querySelectorAll(".repeatable-form");
+ * with value='on'
-    totalForms.setAttribute('value', `${forms.length}`);
+ */
+function hideDeletedForms() {
+  let hiddenDeleteButtonsWithValueOn = document.querySelectorAll('input[type="hidden"].deletion[value="on"]');
 
-    let formNumberRegex = RegExp(`form-(\\d){1}-`, 'g');
+  // Iterating over the NodeList of hidden inputs
-    let formLabelRegex = RegExp(`${formLabel} (\\d+){1}`, 'g');
+  hiddenDeleteButtonsWithValueOn.forEach(function(hiddenInput) {
-    // For the example on Nameservers
+      // Finding the closest parent element with class "repeatable-form" for each hidden input
-    let formExampleRegex = RegExp(`ns(\\d+){1}`, 'g');
+      var repeatableFormToHide = hiddenInput.closest('.repeatable-form');
   
-    forms.forEach((form, index) => {
+      // Checking if a matching parent element is found for each hidden input
-      // Iterate over child nodes of the current element
+      if (repeatableFormToHide) {
-      Array.from(form.querySelectorAll('label, input, select')).forEach((node) => {
+          // Setting the display property to "none" for each matching parent element
-        // Iterate through the attributes of the current node
+          repeatableFormToHide.style.display = 'none';
-        Array.from(node.attributes).forEach((attr) => {
-          // Check if the attribute value matches the regex
-          if (formNumberRegex.test(attr.value)) {
-            // Replace the attribute value with the updated value
-            attr.value = attr.value.replace(formNumberRegex, `form-${index}-`);
-          }
-        });
-      });
-
-      // h2 and legend for DS form, label for nameservers  
-      Array.from(form.querySelectorAll('h2, legend, label, p')).forEach((node) => {
-        
-        // If the node is a nameserver label, one of the first 2 which was previously 3 and up (not required)
-        // inject the USWDS required markup and make sure the INPUT is required
-        if (isNameserversForm && index <= 1 && node.innerHTML.includes('server') && !node.innerHTML.includes('*')) {
-          // Create a new element
-          const newElement = document.createElement('abbr');
-          newElement.textContent = '*';
-          newElement.setAttribute("title", "required");
-          newElement.classList.add("usa-hint", "usa-hint--required");
-
-          // Append the new element to the label
-          node.appendChild(newElement);
-          // Find the next sibling that is an input element
-          let nextInputElement = node.nextElementSibling;
-
-          while (nextInputElement) {
-            if (nextInputElement.tagName === 'INPUT') {
-              // Found the next input element
-              nextInputElement.setAttribute("required", "")
-              break;
-            }
-            nextInputElement = nextInputElement.nextElementSibling;
-          }
-          nextInputElement.required = true;
-        }
-
-        let innerSpan = node.querySelector('span')
-        if (innerSpan) {
-          innerSpan.textContent = innerSpan.textContent.replace(formLabelRegex, `${formLabel} ${index + 1}`);
-        } else {
-          node.textContent = node.textContent.replace(formLabelRegex, `${formLabel} ${index + 1}`);
-          node.textContent = node.textContent.replace(formExampleRegex, `ns${index + 1}`);
-        }
-      });
-
-      // Display the add more button if we have less than 13 forms
-      if (isNameserversForm && forms.length <= 13) {
-        console.log('remove disabled');
-        addButton.removeAttribute("disabled");
       }
-
+  });
-      if (isNameserversForm && forms.length < 3) {
-        // Hide the delete buttons on the remaining nameservers
-        Array.from(form.querySelectorAll('.delete-record')).forEach((deleteButton) => {
-          deleteButton.setAttribute("disabled", "true");
-        });
-      }
-    
-    });
-  }
 }
 
 /**
@@ -386,25 +435,38 @@ function prepareDeleteButtons(formLabel) {
  * it everywhere.
  */
 (function prepareFormsetsForms() {
+  let formIdentifier = "form"
   let repeatableForm = document.querySelectorAll(".repeatable-form");
   let container = document.querySelector("#form-container");
   let addButton = document.querySelector("#add-form");
-  let totalForms = document.querySelector("#id_form-TOTAL_FORMS");
   let cloneIndex = 0;
   let formLabel = '';
-  let isNameserversForm = document.title.includes("DNS name servers |");
+  let isNameserversForm = document.querySelector(".nameservers-form");
+  let isOtherContactsForm = document.querySelector(".other-contacts-form");
+  let isDsDataForm = document.querySelector(".ds-data-form");
+  // The Nameservers formset features 2 required and 11 optionals
   if (isNameserversForm) {
     cloneIndex = 2;
     formLabel = "Name server";
-  } else if ((document.title.includes("DS Data |")) || (document.title.includes("Key Data |"))) {
+  // DNSSEC: DS Data
-    formLabel = "DS Data record";
+  } else if (isDsDataForm) {
+    formLabel = "DS data record";
+  // The Other Contacts form
+  } else if (isOtherContactsForm) {
+    formLabel = "Organization contact";
+    container = document.querySelector("#other-employees");
+    formIdentifier = "other_contacts"
   }
+  let totalForms = document.querySelector(`#id_${formIdentifier}-TOTAL_FORMS`);
 
   // On load: Disable the add more button if we have 13 forms
   if (isNameserversForm && document.querySelectorAll(".repeatable-form").length == 13) {
     addButton.setAttribute("disabled", "true");
   }
 
+  // Hide forms which have previously been deleted
+  hideDeletedForms()
+
   // Attach click event listener on the delete buttons of the existing forms
   prepareDeleteButtons(formLabel);
 
@@ -415,7 +477,7 @@ function prepareDeleteButtons(formLabel) {
       let forms = document.querySelectorAll(".repeatable-form");
       let formNum = forms.length;
       let newForm = repeatableForm[cloneIndex].cloneNode(true);
-      let formNumberRegex = RegExp(`form-(\\d){1}-`,'g');
+      let formNumberRegex = RegExp(`${formIdentifier}-(\\d){1}-`,'g');
       let formLabelRegex = RegExp(`${formLabel} (\\d){1}`, 'g');
       // For the eample on Nameservers
       let formExampleRegex = RegExp(`ns(\\d){1}`, 'g');
@@ -448,16 +510,27 @@ function prepareDeleteButtons(formLabel) {
       }
 
       formNum++;
-      newForm.innerHTML = newForm.innerHTML.replace(formNumberRegex, `form-${formNum-1}-`);
+
-      newForm.innerHTML = newForm.innerHTML.replace(formLabelRegex, `${formLabel} ${formNum}`);
+      newForm.innerHTML = newForm.innerHTML.replace(formNumberRegex, `${formIdentifier}-${formNum-1}-`);
+      // For the other contacts form, we need to update the fieldset headers based on what's visible vs hidden,
+      // since the form on the backend employs Django's DELETE widget. For the other formsets, we delete the form
+      // in JS (completely remove from teh DOM) so we update the headers/labels based on total number of forms.
+      if (isOtherContactsForm) {
+        let totalShownForms = document.querySelectorAll(`.repeatable-form:not([style*="display: none"])`).length;
+        newForm.innerHTML = newForm.innerHTML.replace(formLabelRegex, `${formLabel} ${totalShownForms + 1}`);
+      } else {
+        newForm.innerHTML = newForm.innerHTML.replace(formLabelRegex, `${formLabel} ${formNum}`);
+      }
       newForm.innerHTML = newForm.innerHTML.replace(formExampleRegex, `ns${formNum}`);
       container.insertBefore(newForm, addButton);
 
+      newForm.style.display = 'block';
+
       let inputs = newForm.querySelectorAll("input");
       // Reset the values of each input to blank
       inputs.forEach((input) => {
         input.classList.remove("usa-input--error");
-        if (input.type === "text" || input.type === "number" || input.type === "password") {
+        if (input.type === "text" || input.type === "number" || input.type === "password" || input.type === "email" || input.type === "tel") {
           input.value = ""; // Set the value to an empty string
           
         } else if (input.type === "checkbox" || input.type === "radio") {
@@ -494,7 +567,8 @@ function prepareDeleteButtons(formLabel) {
       totalForms.setAttribute('value', `${formNum}`);
 
       // Attach click event listener on the delete buttons of the new form
-      prepareDeleteButtons(formLabel);
+      let newDeleteButton = newForm.querySelector(".delete-record");
+      prepareNewDeleteButton(newDeleteButton, formLabel);
 
       // Disable the add more button if we have 13 forms
       if (isNameserversForm && formNum == 13) {
@@ -538,3 +612,57 @@ function prepareDeleteButtons(formLabel) {
     }, 50);
   }
 })();
+
+// A generic display none/block toggle function that takes an integer param to indicate how the elements toggle
+function toggleTwoDomElements(ele1, ele2, index) {
+  let element1 = document.getElementById(ele1);
+  let element2 = document.getElementById(ele2);
+  if (element1 && element2) {
+      // Toggle display based on the index
+      element1.style.display = index === 1 ? 'block' : 'none';
+      element2.style.display = index === 2 ? 'block' : 'none';
+  } else {
+      console.error('One or both elements not found.');
+  }
+}
+
+/**
+ * An IIFE that listens to the other contacts radio form on DAs and toggles the contacts/no other contacts forms 
+ *
+ */
+(function otherContactsFormListener() {
+  // Get the radio buttons
+  let radioButtons = document.querySelectorAll('input[name="other_contacts-has_other_contacts"]');
+
+  function handleRadioButtonChange() {
+    // Check the value of the selected radio button
+    // Attempt to find the radio button element that is checked
+    let radioButtonChecked = document.querySelector('input[name="other_contacts-has_other_contacts"]:checked');
+
+    // Check if the element exists before accessing its value
+    let selectedValue = radioButtonChecked ? radioButtonChecked.value : null;
+
+    switch (selectedValue) {
+      case 'True':
+        toggleTwoDomElements('other-employees', 'no-other-employees', 1);
+        break;
+
+      case 'False':
+        toggleTwoDomElements('other-employees', 'no-other-employees', 2);
+        break;
+
+      default:
+        toggleTwoDomElements('other-employees', 'no-other-employees', 0);
+    }
+  }
+
+  if (radioButtons.length) {
+    // Add event listener to each radio button
+    radioButtons.forEach(function (radioButton) {
+      radioButton.addEventListener('change', handleRadioButtonChange);
+    });
+
+    // initialize
+    handleRadioButtonChange();
+  }
+})();