{% extends "base_settings_page.html" %} {% block content %} <form id="change_password_form" action="/settings/change_password" method="post"> <div class="form-group"> <label for="currPassword" class="form-label mt-4">Current password</label> <input type="password" name="old_pass" class="form-control" id="currPassword" placeholder="Your current password" required /> </div> <div> </div> <div class="form-group"> <label for="newPassword" class="form-label mt-4">New password</label> <input type="password" name="new_pass" class="form-control" id="newPassword" placeholder="New password" minlength="{{ min_pwd_len }}" /> <div class="invalid-feedback" id="errNewPass"></div> <small class="form-text text-muted">Please choose a password of at least {{ min_pwd_len }} characters.</small> </div> <div class="form-group"> <label for="confirmNewPassword" class="form-label mt-4">Confirm new password</label> <input type="password" class="form-control" id="confirmNewPassword" placeholder="Confirm new password"> </div> <div> </div> <div> </div> <div> </div> <button type="submit" class="btn btn-primary">Change password</button> </form> <script> const form = document.getElementById("change_password_form"); const errPass1 = document.getElementById("errNewPass"); form.addEventListener("submit", (e) => { e.preventDefault(); const pass1 = document.getElementById("newPassword"); const pass2 = document.getElementById("confirmNewPassword"); errPass1.innerHTML = ""; pass1.classList.remove("is-invalid"); if (pass1.value.length < {{ min_pwd_len }}) { errPass1.innerHTML = "Your password must have at least {{ min_pwd_len }} characters!"; pass1.classList.add("is-invalid"); } else if (pass1.value !== pass2.value) { errPass1.innerHTML = "The password and its confirmation are not the same !"; pass1.classList.add("is-invalid"); } else form.submit(); }) </script> {% endblock content %}