57 lines
2.1 KiB
HTML
57 lines
2.1 KiB
HTML
|
{% 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 %}
|