diff --git a/MisplaceAI/.gitignore b/.gitignore similarity index 82% rename from MisplaceAI/.gitignore rename to .gitignore index a4537bc1a36c360ab38e5b7b4210248a6f39cfc8..29f259eb6c56168f6900de126a51d7fd1182825e 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 ebd1822bea8d3240f0f9fb51aaf296fbdaa281c5..246d81e07d94ed559ef107c6e61bbc9e8cf14d31 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 c8b4694553afa51333320bad1b4640d8fdebd038..2a83c57889992acd6878d9875823db60051c76ed 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>