fix: error messages and modify password validation

This commit enhances the user experience in two ways:

1. The feedback messages within the setup1.html file have been updated for both the username and password fields. The new messages better inform users about the rules for valid input— stating that the username must be 3-20 characters long and the password must contain at least eight characters.

2. The password validation process has been adjusted. Now, only the confirm password field gets marked as invalid when the entered passwords don't match. This helps users understand exactly which field needs correction.
This commit is contained in:
Florian Sylvain
2023-08-13 21:40:17 +02:00
parent b414a07f6d
commit a785483220
@@ -46,6 +46,7 @@
type="text" type="text"
value="{{.Username}}"> value="{{.Username}}">
<label for="username">Nom d'utilisateur</label> <label for="username">Nom d'utilisateur</label>
<div class="invalid-feedback">Le nom d'utilisateur doit être compris entre 3 et 20 caractères.</div>
</div> </div>
<div class="form-floating"> <div class="form-floating">
<input class="form-control {{ if .PageError.IsError }} is-invalid {{ end }}" <input class="form-control {{ if .PageError.IsError }} is-invalid {{ end }}"
@@ -55,7 +56,7 @@
required required
type="password"> type="password">
<label for="password">Mot de passe</label> <label for="password">Mot de passe</label>
<div class="invalid-feedback">Les mots de passe ne correspondent pas.</div> <div class="invalid-feedback">Le mot de passe doit contenir au moins 8 caractères.</div>
</div> </div>
<div class="form-floating"> <div class="form-floating">
<input class="form-control {{ if .PageError.IsError }} is-invalid {{ end }}" <input class="form-control {{ if .PageError.IsError }} is-invalid {{ end }}"
@@ -131,11 +132,9 @@
function validatePasswordMatch() { function validatePasswordMatch() {
if (docElems.password.value !== docElems.confirmPassword.value) { if (docElems.password.value !== docElems.confirmPassword.value) {
docElems.confirmPassword.classList.add("is-invalid") docElems.confirmPassword.classList.add("is-invalid")
docElems.password.classList.add("is-invalid")
return false return false
} else { } else {
docElems.confirmPassword.classList.remove("is-invalid") docElems.confirmPassword.classList.remove("is-invalid")
docElems.password.classList.remove("is-invalid")
return true return true
} }
} }