feat: password reset #32

This commit is contained in:
Florian Sylvain
2024-06-14 13:46:39 +02:00
parent 727418c8e6
commit e4c2230b64
16 changed files with 527 additions and 64 deletions
@@ -1,70 +1,82 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>GoCMS | Login</title>
{{.Head}}
<title>GoCMS | Login</title>
{{.Head}}
<style>
<style>
.form-container {
max-width: 24rem;
}
</style>
</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 m-auto form-container">
<div>
<h1>GoCMS</h1>
<h2>Login</h2>
</div>
<form action="login" method="POST" class="mt-5" id="loginForm">
<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="Username"
required
type="text"
value="{{.Username}}">
<label for="username">Username</label>
</div>
<div class="form-floating">
<input class="form-control {{ if .PageError.IsError }} is-invalid {{ end }}"
id="password"
name="password"
placeholder="Password"
required
type="password">
<label for="password">Password</label>
<div class="invalid-feedback">{{.PageError.Message}}</div>
</div>
<button id="loginFormButton" class="btn btn-primary" disabled type="submit">
<div class="d-flex flex-column m-auto form-container">
<div>
<h1>GoCMS</h1>
<h2>Login</h2>
</div>
<form action="login" method="POST" class="mt-5" id="loginForm">
<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="Username"
required
type="text"
value="{{.Username}}">
<label for="username">Username</label>
</div>
<div class="form-floating">
<input class="form-control {{ if .PageError.IsError }} is-invalid {{ end }}"
id="password"
name="password"
placeholder="Password"
required
type="password">
<label for="password">Password</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">Log in</span>
</button>
</div>
</form>
<form action="register" method="get" class="mt-2 w-100">
<button class="btn btn-link w-100" type="submit">
Don't have any verified account? Register here.
</button>
</form>
</div>
role="status"></span>
<span class="loginFormButtonDefault">Log in</span>
</button>
</div>
</form>
<div class="d-flex gap-2 my-2 w-100">
<a href="register" class="btn btn-outline-secondary w-100" type="submit">
First setup? Register
</a>
<a href="register/reset/request" class="btn btn-outline-secondary w-100" type="submit">
Forgot password
</a>
</div>
{{ if .Success }}
<div class="alert alert-success my-4" role="alert">
{{ .Success }}
</div>
{{ end }}
</div>
</div>
<script>
const button = document.querySelector("#loginFormButton")
const inputs = document.querySelectorAll('input')
const form = document.querySelector("#loginForm")
const form = document.querySelector("#loginForm")
function formFieldsEmpty() {
return Array.from(inputs).some((input) => input.value === "")
}
function isFormValid() {
return !formFieldsEmpty() && validateEmail()
}
function setButtonDisabled() {
button.disabled = formFieldsEmpty() ? "disabled" : ""
button.disabled = isFormValid() ? "disabled" : ""
}
function setButtonLoading() {