mirror of
https://github.com/Floriansylvain/RenewCMS.git
synced 2026-08-19 11:43:22 +02:00
Florian Sylvain
a785483220
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.
148 lines
4.8 KiB
HTML
148 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
<title>GohCMS | Installation</title>
|
|
|
|
<link rel="stylesheet" href="/static/bootstrap.min.css" type="text/css">
|
|
<script src="/static/bootstrap.min.js"
|
|
type="application/javascript"
|
|
defer></script>
|
|
|
|
<style>
|
|
.form-container {
|
|
max-width: 24rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="d-flex min-vh-100 vw-100 justify-content-center align-items-center text-dark">
|
|
<div class="container">
|
|
<div class="d-flex flex-column gap-5 m-auto form-container">
|
|
<div>
|
|
<h1>GohCMS</h1>
|
|
<h2>Création du compte administrateur</h2>
|
|
</div>
|
|
<form action="register" class="" method="POST">
|
|
<div class="d-flex flex-column gap-4">
|
|
<div class="form-floating">
|
|
<input class="form-control {{ if .PageError.IsError }} is-invalid {{ end }}"
|
|
id="email"
|
|
name="email"
|
|
placeholder="E-mail"
|
|
required
|
|
type="email"
|
|
value="{{.Email}}"
|
|
onblur="validateEmail()">
|
|
<label for="email">E-mail</label>
|
|
<div class="invalid-feedback">L'e-mail doit être un e-mail valide.</div>
|
|
</div>
|
|
<div class="form-floating">
|
|
<input class="form-control {{ if .PageError.IsError }} is-invalid {{ end }}"
|
|
id="username"
|
|
name="username"
|
|
placeholder="Nom d'utilisateur"
|
|
required
|
|
type="text"
|
|
value="{{.Username}}">
|
|
<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 class="form-floating">
|
|
<input class="form-control {{ if .PageError.IsError }} is-invalid {{ end }}"
|
|
id="password"
|
|
name="password"
|
|
placeholder="Mot de passe"
|
|
required
|
|
type="password">
|
|
<label for="password">Mot de passe</label>
|
|
<div class="invalid-feedback">Le mot de passe doit contenir au moins 8 caractères.</div>
|
|
</div>
|
|
<div class="form-floating">
|
|
<input class="form-control {{ if .PageError.IsError }} is-invalid {{ end }}"
|
|
id="confirmPassword"
|
|
name="confirmPassword"
|
|
placeholder="Confirmation du mot de passe"
|
|
required
|
|
type="password"
|
|
onblur="validatePasswordMatch()"
|
|
oninput="validatePasswordMatch()">
|
|
<label for="confirmPassword">Confirmation du mot de passe</label>
|
|
<div class="invalid-feedback">Les mots de passe ne correspondent pas.</div>
|
|
</div>
|
|
<button id="registerFormButton" class="btn btn-primary" disabled type="submit">
|
|
<span class="registerFormButtonLoading visually-hidden spinner-border spinner-border-sm"
|
|
role="status"></span>
|
|
<span class="registerFormButtonDefault">Suivant</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const docElems = {
|
|
button: document.querySelector("#registerFormButton"),
|
|
inputs: document.querySelectorAll("input"),
|
|
email: document.querySelector("#email"),
|
|
password: document.querySelector("#password"),
|
|
confirmPassword: document.querySelector("#confirmPassword"),
|
|
}
|
|
|
|
function formSomeFieldsEmpty() {
|
|
return Array.from(docElems.inputs).some((input) => input.value === "")
|
|
}
|
|
|
|
function isFormValid() {
|
|
return !formSomeFieldsEmpty() && validateEmail() && validatePasswordMatch()
|
|
}
|
|
|
|
function setButtonLoading() {
|
|
docElems.button.classList.add("disabled")
|
|
docElems.button.querySelector(".registerFormButtonDefault").classList.add("visually-hidden")
|
|
docElems.button.querySelector(".registerFormButtonLoading").classList.remove("visually-hidden")
|
|
}
|
|
|
|
function onRegisterFormSubmit(event) {
|
|
event.preventDefault()
|
|
setButtonLoading()
|
|
if (!isFormValid()) return
|
|
event.target.submit()
|
|
}
|
|
|
|
function onInput(event) {
|
|
if (event.target.tagName === "INPUT") {
|
|
docElems.button.disabled = !isFormValid()
|
|
}
|
|
}
|
|
|
|
function validateEmail() {
|
|
const email = docElems.email.value.trim()
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
|
|
|
if (!emailRegex.test(email)) {
|
|
docElems.email.classList.add("is-invalid")
|
|
return false
|
|
} else {
|
|
docElems.email.classList.remove("is-invalid")
|
|
return true
|
|
}
|
|
}
|
|
|
|
function validatePasswordMatch() {
|
|
if (docElems.password.value !== docElems.confirmPassword.value) {
|
|
docElems.confirmPassword.classList.add("is-invalid")
|
|
return false
|
|
} else {
|
|
docElems.confirmPassword.classList.remove("is-invalid")
|
|
return true
|
|
}
|
|
}
|
|
|
|
window.addEventListener('submit', onRegisterFormSubmit)
|
|
window.addEventListener('input', onInput)
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|