Skip to content

Commit 60c91c5

Browse files
vimugdhabatravimugdhabatra
authored
user authentication changes front end (#1717)
2 parents f1d92db + f88019c commit 60c91c5

File tree

2 files changed

+124
-90
lines changed

2 files changed

+124
-90
lines changed

‎home/templates/home/tags/footer.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@
88
{% endfor %}
99
{% if request.user.is_anonymous %}
1010
{% url 'account_login' as login_url %}
11-
{% primary_button title='Log in / Create account' href=login_url icon_path='icons/login.svg' extra_classnames='login-create-account-btn' %}
11+
<!-- {% primary_button title='Log in / Create account' href=login_url icon_path='icons/login.svg' extra_classnames='login-create-account-btn' %} -->
1212
{% else %}
1313
{% comments_moderation_button %}
1414

1515
{% url 'user_profile' as profile_url %}
16-
{% primary_button title='Profile' href=profile_url icon_path='icons/profile.svg' %}
16+
<!-- {% primary_button title='Profile' href=profile_url icon_path='icons/profile.svg' %} -->
1717

1818
{% url 'account_logout' as logout_url %}
1919
{% primary_button title='Log out' href=logout_url icon_path='icons/arrow_icon_left.svg' extra_classnames='logout-btn' %}

‎iogt_users/templates/wagtailusers/users/index.html

+122-88
Original file line numberDiff line numberDiff line change
@@ -148,101 +148,135 @@ <h2>Invite Admin User</h2>
148148
{% block extra_js %}
149149
{{ block.super }}
150150
<script>
151-
document.addEventListener('DOMContentLoaded', function() {
152-
const inviteAdminButton = document.getElementById('invite-admin-button');
153-
const modal = document.getElementById('invite-admin-modal');
154-
const closeButton = document.getElementById('close-modal');
155-
const form = document.getElementById('invite-admin-form');
156-
const inputs = form.querySelectorAll('input');
157-
inviteAdminButton.onclick = function() {
158-
modal.style.display = 'block';
159-
form.reset();
160-
resetErrorMessages();
161-
};
162-
closeButton.onclick = function() {
163-
modal.style.display = 'none';
164-
};
165-
form.onsubmit = function(event) {
166-
event.preventDefault();
167-
resetErrorMessages();
168-
169-
const firstName = document.getElementById('first_name').value;
170-
const lastName = document.getElementById('last_name').value;
171-
const email = document.getElementById('email').value;
172-
173-
let isValid = true;
174-
175-
if (firstName.trim() === "") {
176-
document.getElementById('first_name_error').textContent = "First Name is required.";
177-
document.getElementById('first_name_error').style.display = 'block';
178-
document.getElementById('first_name').classList.add('invalid');
179-
isValid = false;
180-
}
181-
if (lastName.trim() === "") {
182-
document.getElementById('last_name_error').textContent = "Last Name is required.";
183-
document.getElementById('last_name_error').style.display = 'block';
184-
document.getElementById('last_name').classList.add('invalid');
185-
isValid = false;
186-
}
187-
if (!validateEmail(email)) {
188-
document.getElementById('email_error').textContent = "Please Enter A Valid Email Address.";
189-
document.getElementById('email_error').style.display = 'block';
190-
document.getElementById('email').classList.add('invalid');
191-
isValid = false;
192-
}
151+
document.addEventListener('DOMContentLoaded', function() {
152+
const inviteAdminButton = document.getElementById('invite-admin-button');
153+
const modal = document.getElementById('invite-admin-modal');
154+
const closeButton = document.getElementById('close-modal');
155+
const form = document.getElementById('invite-admin-form');
156+
const inputs = form.querySelectorAll('input');
157+
const body = document.querySelector('body');
193158

194-
if (isValid) {
195-
const formData = new FormData(form);
159+
inviteAdminButton.onclick = function() {
160+
modal.style.display = 'block';
161+
form.reset();
162+
resetErrorMessages();
163+
};
196164

197-
fetch("{% url 'invite_admin_user' %}", {
198-
method: 'POST',
199-
body: formData,
200-
headers: {
201-
'X-Requested-With': 'XMLHttpRequest'
202-
}
203-
})
204-
.then(response => response.json())
205-
.then(data => {
206-
if (data.success) {
207-
modal.style.display = 'none';
208-
form.reset();
209-
} else {
210-
for (const [key, value] of Object.entries(data.errors)) {
211-
document.getElementById(key + '_error').textContent = value;
212-
document.getElementById(key + '_error').style.display = 'block';
165+
closeButton.onclick = function() {
166+
modal.style.display = 'none';
167+
};
168+
169+
form.onsubmit = function(event) {
170+
event.preventDefault();
171+
resetErrorMessages();
172+
173+
const firstName = document.getElementById('first_name').value;
174+
const lastName = document.getElementById('last_name').value;
175+
const email = document.getElementById('email').value;
176+
177+
let isValid = true;
178+
179+
if (firstName.trim() === "") {
180+
showError('first_name', "First Name is required.");
181+
isValid = false;
182+
}
183+
if (lastName.trim() === "") {
184+
showError('last_name', "Last Name is required.");
185+
isValid = false;
186+
}
187+
if (!validateEmail(email)) {
188+
showError('email', "Please enter a valid email address.");
189+
isValid = false;
190+
}
191+
192+
if (isValid) {
193+
const formData = new FormData(form);
194+
195+
fetch("{% url 'invite_admin_user' %}", {
196+
method: 'POST',
197+
body: formData,
198+
headers: {
199+
'X-Requested-With': 'XMLHttpRequest'
213200
}
214-
}
215-
})
216-
.catch(error => console.error('Error:', error));
217-
}
218-
};
201+
})
202+
.then(response => response.json())
203+
.then(data => {
204+
if (data.success) {
205+
modal.style.display = 'none';
206+
form.reset();
207+
displaySuccessMessage("Invite sent successfully!");
219208

220-
function validateEmail(email) {
221-
const re = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/;
222-
return re.test(String(email).toLowerCase());
223-
}
209+
setTimeout(() => {
210+
modal.style.display = 'none';
211+
}, 1000);
212+
} else {
213+
for (const [key, value] of Object.entries(data.errors)) {
214+
showError(key, value);
215+
}
216+
}
217+
})
218+
.catch(error => console.error('Error:', error));
219+
}
220+
};
224221

225-
function resetErrorMessages() {
226-
const errorMessages = document.querySelectorAll('.error-message');
227-
errorMessages.forEach(function(errorMessage) {
228-
errorMessage.textContent = '';
229-
errorMessage.style.display = 'none';
230-
});
222+
function validateEmail(email) {
223+
const re = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/;
224+
return re.test(String(email).toLowerCase());
225+
}
231226

232-
const invalidInputs = document.querySelectorAll('input.invalid');
233-
invalidInputs.forEach(function(input) {
234-
input.classList.remove('invalid');
235-
});
236-
}
237-
inputs.forEach(input => {
238-
input.addEventListener('input', function() {
239-
const errorMessage = document.getElementById(input.id + '_error');
240-
if (errorMessage) {
227+
function resetErrorMessages() {
228+
const errorMessages = document.querySelectorAll('.error-message');
229+
errorMessages.forEach(function(errorMessage) {
230+
errorMessage.textContent = '';
241231
errorMessage.style.display = 'none';
242-
}
243-
input.classList.remove('invalid');
232+
});
233+
234+
const invalidInputs = document.querySelectorAll('input.invalid');
235+
invalidInputs.forEach(function(input) {
236+
input.classList.remove('invalid');
237+
});
238+
}
239+
240+
function showError(inputId, message) {
241+
const errorElement = document.getElementById(inputId + '_error');
242+
errorElement.textContent = message;
243+
errorElement.style.display = 'block';
244+
document.getElementById(inputId).classList.add('invalid');
245+
}
246+
247+
function displaySuccessMessage(message){
248+
const successMessage = document.createElement('div');
249+
successMessage.textContent = message;
250+
successMessage.style.cssText = `
251+
position: fixed;
252+
bottom: 10px;
253+
right: 10px;
254+
background-color: #134f5c;
255+
color: white;
256+
padding: 15px 20px;
257+
border-radius: 5px;
258+
z-index: 1001;
259+
font-size: 14px;
260+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
261+
font-weight: bold;
262+
`;
263+
264+
body.appendChild(successMessage);
265+
266+
setTimeout(() => {
267+
successMessage.remove();
268+
}, 1000);
269+
}
270+
271+
inputs.forEach(input => {
272+
input.addEventListener('input', function() {
273+
const errorMessage = document.getElementById(input.id + '_error');
274+
if (errorMessage) {
275+
errorMessage.style.display = 'none';
276+
}
277+
input.classList.remove('invalid');
278+
});
244279
});
245280
});
246-
});
247-
</script>
281+
</script>
248282
{% endblock %}

0 commit comments

Comments
 (0)