BasicOIDC/templates/login/password_reset.html

49 lines
1.7 KiB
HTML

{% extends "base_login_page.html" %}
{% block content %}
<form action="/reset_password?redirect={{ _p.redirect_uri.get_encoded() }}" method="post" id="reset_password_form">
<div>
<p>You need to configure a new password:</p>
<p style="color:red" id="err_target"></p>
<div class="form-floating">
<input name="password" type="password" required class="form-control" id="pass1"
placeholder="Password" autofocus/>
<label for="pass1">New password</label>
</div>
<div class="form-floating">
<input type="password" required class="form-control" id="pass2"
placeholder="Password confirmation"/>
<label for="pass2">Confirm new password</label>
</div>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">Change password</button>
<div style="margin-top: 10px;">
<a href="/logout">Sign out</a>
</div>
</form>
<script>
const form = document.getElementById("reset_password_form");
const error_target = document.getElementById("err_target");
form.addEventListener("submit", (e) => {
e.preventDefault();
error_target.innerHTML = "";
const pass1 = document.getElementById("pass1");
const pass2 = document.getElementById("pass2");
if (pass1.value.length < {{ min_pass_len }})
error_target.innerHTML = "Your password must have at least {{ min_pass_len }} characters!";
else if (pass1.value !== pass2.value)
error_target.innerHTML = "The password and its confirmation are not the same !";
else
form.submit();
})
</script>
{% endblock content %}