Skip to content

Commit c9f9769

Browse files
andreadavanzoandreadavanzo
committed
update form html
1 parent a2aeac2 commit c9f9769

2 files changed

Lines changed: 90 additions & 61 deletions

File tree

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

Lines changed: 61 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,62 @@
11
<%= form_for resource, namespace: 'new', url: registration_path("user"), html: {autocomplete: "off", id: "create_account_form"} do |f| %>
2-
<div class="mb-3">
3-
<%= f.label(:email, _('Email'), class: "form-label") %>
4-
<%= f.email_field(:email, class: "form-control", "aria-required": true) %>
2+
<div class="form rm-form-row">
3+
<div class="col-12">
4+
<%= f.label(:email, _('Email'), class: "form-label") %>
5+
<%= f.email_field(:email, class: "form-control", "aria-required": true) %>
6+
</div>
57
</div>
6-
<div class="mb-3">
7-
<%= f.label(:firstname, _('First Name'), class: "form-label") %>
8-
<%= f.text_field(:firstname, class: "form-control", "aria-required": true) %>
8+
9+
<div class="form rm-form-row">
10+
<div class="col-12">
11+
<%= f.label(:firstname, _('First Name'), class: "form-label") %>
12+
<%= f.text_field(:firstname, class: "form-control", "aria-required": true) %>
13+
</div>
914
</div>
10-
<div class="mb-3">
11-
<%= f.label(:surname, _('Last Name'), class: "form-label") %>
12-
<%= f.text_field(:surname, class: "form-control", "aria-required": true) %>
15+
16+
<div class="form rm-form-row">
17+
<div class="col-12">
18+
<%= f.label(:surname, _('Last Name'), class: "form-label") %>
19+
<%= f.text_field(:surname, class: "form-control", "aria-required": true) %>
20+
</div>
1321
</div>
14-
<div class="mb-3" id="create-account-org-controls">
15-
<%= f.label(:org_name, _('Organisation'), class: "form-label") %>
16-
<%= f.select(:org_id, [], { prompt: _('Select an organisation') }, { class: "form-control" }) %>
22+
23+
<div class="form rm-form-row">
24+
<div class="col-12" id="create-account-org-controls">
25+
<%= f.label(:org_name, _('Organisation'), class: "form-label") %>
26+
<%= f.select(:org_id, [], { prompt: _('Select an organisation') }, { class: "form-control" }) %>
27+
</div>
1728
</div>
18-
<div class="mb-3">
19-
<%= f.label(:password, _('Password'), class: "form-label") %>
20-
<%= f.password_field(:password, class: "form-control", "aria-required": true) %>
29+
30+
<div class="form rm-form-row">
31+
<div class="col-12">
32+
<%= f.label(:password, _('Password'), class: "form-label") %>
33+
<%= f.password_field(:password, class: "form-control", "aria-required": true) %>
34+
</div>
2135
</div>
22-
<div class="mb-3">
23-
<div class="form-check">
24-
<input type="checkbox" id="passwords_toggle_sign_up" class="passwords_toggle" />
25-
<%= label_tag('passwords_toggle_sign_up', _('Show password'), class: 'form-check-label') %>
36+
37+
<div class="form rm-form-row">
38+
<div class="col-12 form-check">
39+
<input class="form-check-input passwords_toggle" type="checkbox" id="passwords_toggle_sign_up" />
40+
<%= label_tag('passwords_toggle_sign_up', _('Show password'), class: 'form-check-label') %>
2641
</div>
2742
</div>
28-
<div class="mb-3">
29-
<div class="form-check">
30-
<%= f.label(:accept_terms) do %>
31-
<%= f.check_box(:accept_terms, "aria-required": true) %>
32-
<%= _('I accept the') %>
33-
<%= link_to _('terms and conditions'), terms_path %>
43+
44+
<div class="form rm-form-row">
45+
<div class="col-12 form-check">
46+
<%= f.label(:accept_terms, class: 'form-check-label') do %>
47+
<%= f.check_box(:accept_terms, "aria-required": true, class: "form-check-input") %>
48+
<%= _('I accept the') %>
49+
<%= link_to _('terms and conditions'), terms_path %>
3450
<% end %>
3551
</div>
3652
</div>
53+
3754
<% if Rails.configuration.x.recaptcha.enabled %>
38-
<div class="mb-3">
39-
<%= label_tag(nil, _('Security check'), class: "form-label") %>
40-
<%= recaptcha_tags %>
55+
<div class="form rm-form-row">
56+
<div class="col-12 form-check">
57+
<%= label_tag(nil, _('Security check'), class: "form-label") %>
58+
<%= recaptcha_tags %>
59+
</div>
4160
</div>
4261
<% end %>
4362
<%= f.button(_('Create account'), class: "btn btn-secondary", type: "submit") %>
@@ -46,37 +65,37 @@
4665
<script>
4766
document.addEventListener('DOMContentLoaded', function() {
4867
const createAccountForm = document.getElementById('create_account_form');
49-
68+
5069
if (!createAccountForm) {
5170
return;
5271
}
53-
72+
5473
const emailField = createAccountForm.querySelector('input[type="email"]');
5574
const orgSelect = createAccountForm.querySelector('select[name*="org"]');
56-
75+
5776
if (!emailField || !orgSelect) {
5877
return;
5978
}
60-
79+
6180
let currentDomain = '';
6281
let debounceTimer = null;
63-
82+
6483
// Handle email input changes
6584
emailField.addEventListener('input', function() {
6685
const email = this.value;
67-
86+
6887
if (email && email.includes('@')) {
6988
const domain = email.split('@')[1];
70-
89+
7190
// Only fetch if domain has changed
7291
if (domain && domain !== currentDomain) {
7392
currentDomain = domain;
74-
93+
7594
// Clear previous timer
7695
if (debounceTimer) {
7796
clearTimeout(debounceTimer);
7897
}
79-
98+
8099
// Debounce API calls to avoid too many requests
81100
debounceTimer = setTimeout(() => {
82101
fetchOrganizations(domain);
@@ -88,7 +107,7 @@ document.addEventListener('DOMContentLoaded', function() {
88107
resetOrgSelect();
89108
}
90109
});
91-
110+
92111
function fetchOrganizations(domain) {
93112
fetch(`/api/get-orgs-by-domain?domain=${encodeURIComponent(domain)}`)
94113
.then(response => response.json())
@@ -100,17 +119,17 @@ document.addEventListener('DOMContentLoaded', function() {
100119
resetOrgSelect();
101120
});
102121
}
103-
122+
104123
function populateOrgSelect(orgs) {
105124
// Clear existing options
106125
orgSelect.innerHTML = '';
107-
126+
108127
// Add prompt option
109128
const promptOption = document.createElement('option');
110129
promptOption.value = '';
111130
promptOption.textContent = 'Select an organisation';
112131
orgSelect.appendChild(promptOption);
113-
132+
114133
// Add organization options
115134
orgs.forEach(function(org) {
116135
const option = document.createElement('option');
@@ -119,7 +138,7 @@ document.addEventListener('DOMContentLoaded', function() {
119138
orgSelect.appendChild(option);
120139
});
121140
}
122-
141+
123142
function resetOrgSelect() {
124143
orgSelect.innerHTML = '<option value="">Select an organisation</option>';
125144
}

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

Lines changed: 29 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,41 @@
11
<%= form_for resource, as: 'user', namespace: 'signin', url: user_session_path, html: {id: "sign_in_form"} do |f| %>
2-
<div class="form-control mb-3">
3-
<%= f.label(:email, _('Email'), class: 'form-label') %>
4-
<%= f.email_field(:email, class: 'form-control', "aria-required": true) %>
2+
<div class="form rm-form-row">
3+
<div class="col-12">
4+
<%= f.label(:email, _('Email'), class: 'form-label') %>
5+
<%= f.email_field(:email, class: 'form-control', "aria-required": true) %>
6+
</div>
57
</div>
6-
<div class="form-control mb-3">
7-
<%= f.label(:password, _('Password'), class: 'form-label') %>
8-
<%= f.password_field(:password, class: 'form-control', "aria-required": true) %>
8+
<div class="form rm-form-row">
9+
<div class="col-12">
10+
<%= f.label(:password, _('Password'), class: 'form-label') %>
11+
<%= f.password_field(:password, class: 'form-control', "aria-required": true) %>
12+
</div>
913
</div>
10-
<div>
11-
<%= link_to _('Forgot password?'), new_password_path('user') %>
14+
<div class="form rm-form-row">
15+
<div class="col-12">
16+
<%= link_to _('Forgot password?'), new_password_path('user') %>
17+
</div>
1218
</div>
13-
<div class="form-check mb-3">
14-
<%= label_tag 'remember_email', class: 'form-check-label' do %>
15-
<%= check_box_tag 'remember_email' %>
16-
<%= _('Remember email') %>
17-
<% end %>
19+
<div class="form rm-form-row">
20+
<div class="col-12 form-check">
21+
<%= label_tag 'remember_email', class: 'form-check-label' do %>
22+
<%= check_box_tag 'remember_email', class: 'form-check-input' %>
23+
<%= _('Remember email') %>
24+
<% end %>
25+
</div>
26+
</div>
27+
<div class="form rm-form-row">
28+
<div class="col-12">
29+
<%= f.button(_('Sign in'), class: "btn btn-secondary", type: "submit") %>
30+
</div>
1831
</div>
19-
<%= f.button(_('Sign in'), class: "btn btn-secondary", type: "submit") %>
20-
2132
<% if Rails.configuration.x.shibboleth.enabled %>
2233
<% if session['devise.shibboleth_data'].nil? %>
23-
<p class="text-center fontsize-h4">- <%= _('or') %> -</p>
24-
<div class="form-control mb-3">
25-
<span class="d-grid">
34+
<div class="form rm-form-row">
35+
<div class="col-12">
2636
<% target = (Rails.configuration.x.shibboleth.use_filtered_discovery_service ? shibboleth_ds_path : user_shibboleth_omniauth_authorize_path) %>
2737
<%= link_to _('Sign in with your institutional credentials'), target, method: :post, class: 'btn btn-secondary' %>
28-
</span>
38+
</div>
2939
</div>
3040
<% else %>
3141
<%= f.hidden_field :shibboleth_id, :value => session['devise.shibboleth_data']['uid'] %>

0 commit comments

Comments
 (0)