From fd671ceffcdc2f25a94f2dc12d025c6bdef5510b Mon Sep 17 00:00:00 2001
From: a2-imeri <Alfret2.imeri@live.uwe.ac.uk>
Date: Wed, 15 May 2024 19:06:29 +0100
Subject: [PATCH] Finish User Registration
---
MisplaceAI/.gitignore => .gitignore | 1 +
.../static/authentication/js/registration.js | 35 +++++++++++++++++--
.../templates/authentication/register.html | 11 +++---
3 files changed, 40 insertions(+), 7 deletions(-)
rename MisplaceAI/.gitignore => .gitignore (82%)
diff --git a/MisplaceAI/.gitignore b/.gitignore
similarity index 82%
rename from MisplaceAI/.gitignore
rename to .gitignore
index a4537bc..29f259e 100644
--- a/MisplaceAI/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
__pycache__/
**/migrations/*
!**/migrations/__init__.py
+registration
\ No newline at end of file
diff --git a/MisplaceAI/authentication/static/authentication/js/registration.js b/MisplaceAI/authentication/static/authentication/js/registration.js
index ebd1822..246d81e 100644
--- a/MisplaceAI/authentication/static/authentication/js/registration.js
+++ b/MisplaceAI/authentication/static/authentication/js/registration.js
@@ -1,9 +1,12 @@
document.addEventListener('DOMContentLoaded', function () {
+ const username = document.querySelector('#id_username');
+ const email = document.querySelector('#id_email');
const password1 = document.querySelector('#id_password1');
const password2 = document.querySelector('#id_password2');
const togglePassword1 = document.querySelector('#togglePassword1');
const togglePassword2 = document.querySelector('#togglePassword2');
const passwordMatchMessage = document.querySelector('#passwordMatchMessage');
+ const registerButton = document.querySelector('#registerButton');
togglePassword1.addEventListener('click', function () {
const type = password1.type === 'password' ? 'text' : 'password';
@@ -45,20 +48,48 @@ document.addEventListener('DOMContentLoaded', function () {
function checkPasswordMatch() {
if (validatePassword()) {
+ if (password2.value === '') {
+ passwordMatchMessage.textContent = '';
+ return false;
+ }
if (password1.value === password2.value) {
passwordMatchMessage.textContent = 'Passwords match';
passwordMatchMessage.classList.remove('text-muted', 'text-danger');
passwordMatchMessage.classList.add('text-success');
+ return true;
} else {
passwordMatchMessage.textContent = 'Passwords do not match';
passwordMatchMessage.classList.remove('text-muted', 'text-success');
passwordMatchMessage.classList.add('text-danger');
+ return false;
}
} else {
passwordMatchMessage.textContent = '';
+ return false;
+ }
+ }
+
+ function validateForm() {
+ const isUsernameFilled = username.value.trim() !== '';
+ const isEmailFilled = email.value.trim() !== '';
+ const isPassword1Valid = validatePassword();
+ const isPasswordMatch = checkPasswordMatch();
+
+ if (isUsernameFilled && isEmailFilled && isPassword1Valid && isPasswordMatch) {
+ registerButton.disabled = false;
+ } else {
+ registerButton.disabled = true;
}
}
- password1.addEventListener('input', validatePassword);
- password2.addEventListener('input', checkPasswordMatch);
+ username.addEventListener('input', validateForm);
+ email.addEventListener('input', validateForm);
+ password1.addEventListener('input', () => {
+ validatePassword();
+ validateForm();
+ });
+ password2.addEventListener('input', () => {
+ checkPasswordMatch();
+ validateForm();
+ });
});
diff --git a/MisplaceAI/authentication/templates/authentication/register.html b/MisplaceAI/authentication/templates/authentication/register.html
index c8b4694..2a83c57 100644
--- a/MisplaceAI/authentication/templates/authentication/register.html
+++ b/MisplaceAI/authentication/templates/authentication/register.html
@@ -15,16 +15,16 @@
{% csrf_token %}
{% if form.errors %}
<div class="alert alert-danger">
- <ul>
+ <div>
{% for field in form %}
{% for error in field.errors %}
- <li>{{ error }}</li>
+ <p>{{ error }}</p>
{% endfor %}
{% endfor %}
{% for error in form.non_field_errors %}
- <li>{{ error }}</li>
+ <p>{{ error }}</p>
{% endfor %}
- </ul>
+ </div>
</div>
{% endif %}
<div class="form-group">
@@ -68,7 +68,8 @@
<small id="passwordMatchMessage" class="form-text text-muted"></small>
</div>
<div class="form-group text-center">
- <button type="submit" class="btn btn-primary btn-block">Register</button>
+ <button type="submit" class="btn btn-primary btn-block" id="registerButton"
+ disabled>Register</button>
</div>
</form>
</div>
--
GitLab