Update to Create Account Form.

Moved javascript from app/views/shared/_create_account_form.html.erb to
app/views/shared/_create_account_form.html.erb.

Author: John Pinto

app/javascript/src/shared/createAccountForm.js

@@ -2,9 +2,83 @@ import { initAutocomplete, scrubOrgSelectionParamsOnSubmit } from '../utils/auto
 import { togglisePasswords } from '../utils/passwordHelper';
 
 $(() => {
-  initAutocomplete('#create-account-org-controls .autocomplete');
-  // Scrub out the large arrays of data used for the Org Selector JS so that they
-  // are not a part of the form submissiomn
-  scrubOrgSelectionParamsOnSubmit('#create_account_form');
-  togglisePasswords({ selector: '#create_account_form' });
+  const createAccountForm = document.getElementById('create_account_form');
+
+  if (!createAccountForm) {
+    return;
+  }
+
+  const emailField = createAccountForm.querySelector('input[type="email"]');
+  const orgSelect = createAccountForm.querySelector('select[name*="org"]');
+
+  if (!emailField || !orgSelect) {
+    return;
+  }
+
+  let currentDomain = '';
+  let debounceTimer = null;
+
+  // Handle email input changes
+  emailField.addEventListener('input', function() {
+    const email = this.value;
+
+    if (email && email.includes('@')) {
+      const domain = email.split('@')[1];
+
+      // Only fetch if domain has changed
+      if (domain && domain !== currentDomain) {
+        currentDomain = domain;
+
+        // Clear previous timer
+        if (debounceTimer) {
+          clearTimeout(debounceTimer);
+        }
+
+        // Debounce API calls to avoid too many requests
+        debounceTimer = setTimeout(() => {
+          fetchOrganizations(domain);
+        }, 500);
+      }
+    } else {
+      // Clear organizations if email is invalid
+      currentDomain = '';
+      resetOrgSelect();
+    }
+  });
+
+  function fetchOrganizations(domain) {
+    fetch(`/api/get-orgs-by-domain?domain=${encodeURIComponent(domain)}`)
+      .then(response => response.json())
+      .then(data => {
+        populateOrgSelect(data);
+      })
+      .catch(error => {
+        console.error('Error fetching organizations:', error);
+        resetOrgSelect();
+      });
+  }
+
+  function populateOrgSelect(orgs) {
+    // Clear existing options
+    orgSelect.innerHTML = '';
+
+    // Add prompt option
+    const promptOption = document.createElement('option');
+    promptOption.value = '';
+    promptOption.textContent = 'Select an organisation';
+    orgSelect.appendChild(promptOption);
+
+    // Add organization options
+    orgs.forEach(function(org) {
+      const option = document.createElement('option');
+      option.value = org.id || org.ror_id;
+      option.textContent = org.org_name;
+      orgSelect.appendChild(option);
+    });
+  }
+
+  function resetOrgSelect() {
+    orgSelect.innerHTML = '<option value="">Select an organisation</option>';
+  }
 });
+

app/views/shared/_create_account_form.html.erb

@@ -61,86 +61,3 @@
   <% end %>
   <%= f.button(_('Create account'), class: "btn btn-secondary", type: "submit") %>
 <% end %>
-
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-  const createAccountForm = document.getElementById('create_account_form');
-
-  if (!createAccountForm) {
-    return;
-  }
-
-  const emailField = createAccountForm.querySelector('input[type="email"]');
-  const orgSelect = createAccountForm.querySelector('select[name*="org"]');
-
-  if (!emailField || !orgSelect) {
-    return;
-  }
-
-  let currentDomain = '';
-  let debounceTimer = null;
-
-  // Handle email input changes
-  emailField.addEventListener('input', function() {
-    const email = this.value;
-
-    if (email && email.includes('@')) {
-      const domain = email.split('@')[1];
-
-      // Only fetch if domain has changed
-      if (domain && domain !== currentDomain) {
-        currentDomain = domain;
-
-        // Clear previous timer
-        if (debounceTimer) {
-          clearTimeout(debounceTimer);
-        }
-
-        // Debounce API calls to avoid too many requests
-        debounceTimer = setTimeout(() => {
-          fetchOrganizations(domain);
-        }, 500);
-      }
-    } else {
-      // Clear organizations if email is invalid
-      currentDomain = '';
-      resetOrgSelect();
-    }
-  });
-
-  function fetchOrganizations(domain) {
-    fetch(`/api/get-orgs-by-domain?domain=${encodeURIComponent(domain)}`)
-      .then(response => response.json())
-      .then(data => {
-        populateOrgSelect(data);
-      })
-      .catch(error => {
-        console.error('Error fetching organizations:', error);
-        resetOrgSelect();
-      });
-  }
-
-  function populateOrgSelect(orgs) {
-    // Clear existing options
-    orgSelect.innerHTML = '';
-
-    // Add prompt option
-    const promptOption = document.createElement('option');
-    promptOption.value = '';
-    promptOption.textContent = 'Select an organisation';
-    orgSelect.appendChild(promptOption);
-
-    // Add organization options
-    orgs.forEach(function(org) {
-      const option = document.createElement('option');
-      option.value = org.id || org.ror_id;
-      option.textContent = org.org_name;
-      orgSelect.appendChild(option);
-    });
-  }
-
-  function resetOrgSelect() {
-    orgSelect.innerHTML = '<option value="">Select an organisation</option>';
-  }
-});
-</script>