Skip to content

Commit c2e3cd3

Browse files
author
John Pinto
committed
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.
1 parent c9f9769 commit c2e3cd3

2 files changed

Lines changed: 79 additions & 91 deletions

File tree

‎app/javascript/src/shared/createAccountForm.js‎

Lines changed: 79 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,81 @@
1-
import { initAutocomplete, scrubOrgSelectionParamsOnSubmit } from '../utils/autoComplete';
2-
import { togglisePasswords } from '../utils/passwordHelper';
3-
41
$(() => {
5-
initAutocomplete('#create-account-org-controls .autocomplete');
6-
// Scrub out the large arrays of data used for the Org Selector JS so that they
7-
// are not a part of the form submissiomn
8-
scrubOrgSelectionParamsOnSubmit('#create_account_form');
9-
togglisePasswords({ selector: '#create_account_form' });
2+
const createAccountForm = document.getElementById('create_account_form');
3+
4+
if (!createAccountForm) {
5+
return;
6+
}
7+
8+
const emailField = createAccountForm.querySelector('input[type="email"]');
9+
const orgSelect = createAccountForm.querySelector('select[name*="org"]');
10+
11+
if (!emailField || !orgSelect) {
12+
return;
13+
}
14+
15+
let currentDomain = '';
16+
let debounceTimer = null;
17+
18+
// Handle email input changes
19+
emailField.addEventListener('input', function() {
20+
const email = this.value;
21+
22+
if (email && email.includes('@')) {
23+
const domain = email.split('@')[1];
24+
25+
// Only fetch if domain has changed
26+
if (domain && domain !== currentDomain) {
27+
currentDomain = domain;
28+
29+
// Clear previous timer
30+
if (debounceTimer) {
31+
clearTimeout(debounceTimer);
32+
}
33+
34+
// Debounce API calls to avoid too many requests
35+
debounceTimer = setTimeout(() => {
36+
fetchOrganizations(domain);
37+
}, 500);
38+
}
39+
} else {
40+
// Clear organizations if email is invalid
41+
currentDomain = '';
42+
resetOrgSelect();
43+
}
44+
});
45+
46+
function fetchOrganizations(domain) {
47+
fetch(`/api/get-orgs-by-domain?domain=${encodeURIComponent(domain)}`)
48+
.then(response => response.json())
49+
.then(data => {
50+
populateOrgSelect(data);
51+
})
52+
.catch(error => {
53+
console.error('Error fetching organizations:', error);
54+
resetOrgSelect();
55+
});
56+
}
57+
58+
function populateOrgSelect(orgs) {
59+
// Clear existing options
60+
orgSelect.innerHTML = '';
61+
62+
// Add prompt option
63+
const promptOption = document.createElement('option');
64+
promptOption.value = '';
65+
promptOption.textContent = 'Select an organisation';
66+
orgSelect.appendChild(promptOption);
67+
68+
// Add organization options
69+
orgs.forEach(function(org) {
70+
const option = document.createElement('option');
71+
option.value = org.id || org.ror_id;
72+
option.textContent = org.org_name;
73+
orgSelect.appendChild(option);
74+
});
75+
}
76+
77+
function resetOrgSelect() {
78+
orgSelect.innerHTML = '<option value="">Select an organisation</option>';
79+
}
1080
});
81+

‎app/views/shared/_create_account_form.html.erb‎

Lines changed: 0 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -61,86 +61,3 @@
6161
<% end %>
6262
<%= f.button(_('Create account'), class: "btn btn-secondary", type: "submit") %>
6363
<% end %>
64-
65-
<script>
66-
document.addEventListener('DOMContentLoaded', function() {
67-
const createAccountForm = document.getElementById('create_account_form');
68-
69-
if (!createAccountForm) {
70-
return;
71-
}
72-
73-
const emailField = createAccountForm.querySelector('input[type="email"]');
74-
const orgSelect = createAccountForm.querySelector('select[name*="org"]');
75-
76-
if (!emailField || !orgSelect) {
77-
return;
78-
}
79-
80-
let currentDomain = '';
81-
let debounceTimer = null;
82-
83-
// Handle email input changes
84-
emailField.addEventListener('input', function() {
85-
const email = this.value;
86-
87-
if (email && email.includes('@')) {
88-
const domain = email.split('@')[1];
89-
90-
// Only fetch if domain has changed
91-
if (domain && domain !== currentDomain) {
92-
currentDomain = domain;
93-
94-
// Clear previous timer
95-
if (debounceTimer) {
96-
clearTimeout(debounceTimer);
97-
}
98-
99-
// Debounce API calls to avoid too many requests
100-
debounceTimer = setTimeout(() => {
101-
fetchOrganizations(domain);
102-
}, 500);
103-
}
104-
} else {
105-
// Clear organizations if email is invalid
106-
currentDomain = '';
107-
resetOrgSelect();
108-
}
109-
});
110-
111-
function fetchOrganizations(domain) {
112-
fetch(`/api/get-orgs-by-domain?domain=${encodeURIComponent(domain)}`)
113-
.then(response => response.json())
114-
.then(data => {
115-
populateOrgSelect(data);
116-
})
117-
.catch(error => {
118-
console.error('Error fetching organizations:', error);
119-
resetOrgSelect();
120-
});
121-
}
122-
123-
function populateOrgSelect(orgs) {
124-
// Clear existing options
125-
orgSelect.innerHTML = '';
126-
127-
// Add prompt option
128-
const promptOption = document.createElement('option');
129-
promptOption.value = '';
130-
promptOption.textContent = 'Select an organisation';
131-
orgSelect.appendChild(promptOption);
132-
133-
// Add organization options
134-
orgs.forEach(function(org) {
135-
const option = document.createElement('option');
136-
option.value = org.id || org.ror_id;
137-
option.textContent = org.org_name;
138-
orgSelect.appendChild(option);
139-
});
140-
}
141-
142-
function resetOrgSelect() {
143-
orgSelect.innerHTML = '<option value="">Select an organisation</option>';
144-
}
145-
});
146-
</script>

0 commit comments

Comments
 (0)