feat: password reset #32

2026-08-19 11:43:22 +02:00 · 2024-06-14 13:46:39 +02:00
parent 727418c8e6
commit e4c2230b64
16 changed files with 527 additions and 64 deletions
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>GoCMS | Password reset</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 m-auto form-container">
+        <div>
+            <h1>GoCMS</h1>
+            <h2>Admin account password reset</h2>
+        </div>
+        <form action="request" method="POST" class="mt-5" id="registerForm">
+            <div class="d-flex flex-column gap-4">
+                <div class="form-floating">
+                    <input class="form-control {{ if .PageError.Email }} is-invalid {{ end }}"
+                           id="email"
+                           name="email"
+                           placeholder="E-mail"
+                           required
+                           type="email"
+                           value="{{.Email}}"
+                           onblur="validateEmail()"
+                           {{ if .Email }} disabled {{ end }}>
+                    <label for="email">E-mail</label>
+                </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">Send e-mail</span>
+                </button>
+            </div>
+        </form>
+        {{ if .Success }}
+        <div class="alert alert-success my-4" role="alert">
+            {{ .Success }}
+        </div>
+        {{ end }}
+    </div>
+</div>
+
+<script>
+    const docElems = {
+        form: document.querySelector("#registerForm"),
+        button: document.querySelector("#registerFormButton"),
+        inputs: document.querySelectorAll("input"),
+        email: document.querySelector("#email"),
+    }
+
+    function formSomeFieldsEmpty() {
+        return Array.from(docElems.inputs).some((input) => input.value === "")
+    }
+
+    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 (formSomeFieldsEmpty()) return
+        event.target.submit()
+    }
+
+    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 onInput(event) {
+        if (event.target.tagName === "INPUT") {
+            docElems.button.disabled = !validateEmail() || formSomeFieldsEmpty()
+        }
+    }
+
+    docElems.form.addEventListener('submit', onRegisterFormSubmit)
+    window.addEventListener('input', onInput)
+</script>
+
+</body>
+</html>