Add activation-codes and registration. Added tooltips. Added player-score-cache-display in mainpage.

2024-01-17 12:21:48 +01:00
parent 2a8c53ab56
commit 7e3c02e37e
18 changed files with 234 additions and 36 deletions
--- a/templates/register.html
+++ b/templates/register.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    {{ template "header" . }}
+</head>
+<body data-bs-theme="dark" class="h-auto">
+<div class="container-fluid bg-dark mt-5 p-4 rounded-3 text-light text-center" style="max-width: 500px;">
+    <h3>Registrierung</h3>
+    <hr>
+    <form hx-post="/register" hx-target="#register-result" class="position-relative needs-validation" novalidate>
+        <div class="form-floating mb-3">
+            <input class="form-control form-control-lg" type="text" minlength="4" id="username" name="username" placeholder="Username" required>
+            <label for="username">Username</label>
+            <div class="invalid-feedback">
+                Mindestlänge: 4 Zeichen
+            </div>
+        </div>
+        <div class="form-floating mb-3">
+            <input class="form-control form-control-lg" type="password" minlength="8" id="password" name="password" placeholder="Passwort" required>
+            <label for="password">Passwort</label>
+            <div class="invalid-feedback">
+                Mindestlänge: 8 Zeichen
+            </div>
+        </div>
+        <div class="form-floating">
+            <input class="form-control form-control-lg" type="password" minlength="32" maxlength="32" id="code" name="code" placeholder="Aktivierungscode" required>
+            <label for="code">Aktivierungscode</label>
+            <div class="invalid-feedback">
+                Ungültiges Format
+            </div>
+        </div>
+        <button class="btn btn-lg btn-primary mt-4" type="submit"><i class="bi bi-key me-3"></i>Registrieren</button>
+        <a class="btn btn-lg btn-outline-primary mt-4 ms-2 position-absolute end-0" href="/login" data-bs-toggle="tooltip" data-bs-title="Zurück zur Anmeldung"><i class="bi bi-door-open"></i></a>
+    </form>
+    <div id="register-result" class="fs-4 mt-2"></div>
+</div>
+</body>
+<script>
+    (() => {
+        'use strict'
+
+        const forms = document.querySelectorAll('.needs-validation')
+
+        Array.from(forms).forEach(form => {
+            form.addEventListener('submit', event => {
+                if (!form.checkValidity()) {
+                    event.preventDefault()
+                    event.stopPropagation()
+                }
+
+                form.classList.add('was-validated')
+            }, false)
+        })
+    })()
+</script>
+</html>