feat: complete email verification flow

This commit is contained in:
Florian Sylvain
2024-05-15 19:16:55 +02:00
parent aabdbfae95
commit a35e7c4283
13 changed files with 228 additions and 124 deletions
@@ -1,32 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>GohCMS | Setup</title>
{{.Head}}
<title>GohCMS | Setup</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 gap-5 m-auto form-container">
<div>
<h1>GohCMS</h1>
<h2>Verify your email</h2>
</div>
<p>An e-mail with the validation link was sent to the address you just registered.</p>
<button id="finalSetupFormButton" class="btn btn-outline-primary" type="button">
<span class="finalSetupFormButtonLoading visually-hidden spinner-border spinner-border-sm"
role="status"></span>
<span class="finalSetupFormButtonDefault">Cancel</span>
</button>
</div>
<div class="d-flex flex-column m-auto form-container">
<div>
<h1>GohCMS</h1>
<h2>Verify your email</h2>
</div>
<p>An e-mail with the validation link was sent to the address you just registered.</p>
<p>If you misspelled the address or just didn't receive any e-mails, please check your spams or cancel the
account creation.</p>
<form action="" method="post" class="d-flex">
<button class="btn btn-outline-primary w-100" type="submit">
<span class="visually-hidden spinner-border spinner-border-sm"
role="status"></span>
<span>Cancel</span>
</button>
</form>
</div>
</div>
<script>
const button = document.querySelector("button")
function setButtonLoading() {
button.classList.add("disabled")
button.querySelector("button > span + span").classList.add("visually-hidden")
button.querySelector("button > span:first-child").classList.remove("visually-hidden")
}
window.addEventListener('submit', setButtonLoading)
button.addEventListener('click', setButtonLoading)
</script>
</body>