BasicOIDC/templates/settings/change_password.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>&nbsp;</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>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</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 %}