mirror of
https://github.com/Floriansylvain/RenewCMS.git
synced 2026-08-19 11:43:22 +02:00
Florian Sylvain
7d071ebc2e
This commit introduces a refactoring in various page templates to use a central, common 'head' section, stored under utilsHead.html. This head section contains common metadata, styles, and scripts. This change enhances code reusability and standardizes the head section across different pages for consistent user experience and ease of future potential changes. Also, some minimal adjustments were made in the navigation and link routing for more user-friendly URL paths. Lastly, the server's listening interface was updated to only listen on the localhost.
87 lines
2.5 KiB
HTML
87 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>GohCMS | Connexion</title>
|
|
{{.Head}}
|
|
|
|
<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>Connexion</h2>
|
|
</div>
|
|
<form action="login" 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="username"
|
|
name="username"
|
|
placeholder="Nom d'utilisateur"
|
|
required
|
|
type="text"
|
|
value="{{.Username}}">
|
|
<label for="username">Nom d'utilisateur</label>
|
|
</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">{{.PageError.Message}}</div>
|
|
</div>
|
|
<button id="loginFormButton" class="btn btn-primary" disabled type="submit">
|
|
<span class="loginFormButtonLoading visually-hidden spinner-border spinner-border-sm"
|
|
role="status"></span>
|
|
<span class="loginFormButtonDefault">Se connecter</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const button = document.querySelector("#loginFormButton")
|
|
const inputs = document.querySelectorAll('input')
|
|
|
|
function formFieldsEmpty() {
|
|
return Array.from(inputs).some((input) => input.value === "")
|
|
}
|
|
|
|
function setButtonDisabled() {
|
|
button.disabled = formFieldsEmpty() ? "disabled" : ""
|
|
}
|
|
|
|
function setButtonLoading() {
|
|
button.classList.add("disabled")
|
|
button.querySelector(".loginFormButtonDefault").classList.add("visually-hidden")
|
|
button.querySelector(".loginFormButtonLoading").classList.remove("visually-hidden")
|
|
}
|
|
|
|
function onLoginFormSubmit(event) {
|
|
event.preventDefault()
|
|
setButtonLoading()
|
|
event.target.submit()
|
|
}
|
|
|
|
function onInput(event) {
|
|
if (event.target.tagName === "INPUT") setButtonDisabled()
|
|
}
|
|
|
|
window.addEventListener('submit', onLoginFormSubmit)
|
|
window.addEventListener('input', onInput)
|
|
setButtonDisabled()
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|