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 %} |