weitere arbeiten an der UI

2026-03-01 21:45:19 +01:00
parent 5dc408add8
commit 6f4150dbb3
31 changed files with 2532 additions and 2102 deletions
--- a/xxxthegame/src/main/resources/static/activate.html
+++ b/xxxthegame/src/main/resources/static/activate.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>XXX The Game – Aktivierung</title>
+    <link rel="stylesheet" href="/css/style.css">
+</head>
+<body>
+    <div class="card">
+        <h1>XXX The Game</h1>
+        <p class="subtitle">E-Mail-Adresse bestätigen</p>
+
+        <p style="font-size:0.9rem; color:#aaa; margin-top:0.5rem; line-height:1.5;">
+            Du hast eine E-Mail mit einem Aktivierungslink erhalten.<br>
+            Falls der Link nicht funktioniert, gib hier deinen Aktivierungscode ein.
+        </p>
+
+        <label for="uuid" style="margin-top:1.5rem;">Aktivierungscode</label>
+        <input type="text" id="uuid" placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" autocomplete="off" />
+
+        <button class="full-width" id="activateBtn" onclick="activate()">Jetzt aktivieren</button>
+
+        <div class="message" id="message"></div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const params = new URLSearchParams(window.location.search);
+            const email = params.get('email');
+            if (email) {
+                showMessage(`Eine Bestätigungs-E-Mail wurde an ${email} gesendet.`, 'success');
+            }
+        });
+
+        document.addEventListener('keydown', e => {
+            if (e.key === 'Enter') activate();
+        });
+
+        async function activate() {
+            const uuid = document.getElementById('uuid').value.trim();
+            const btn = document.getElementById('activateBtn');
+
+            if (!uuid) {
+                showMessage('Bitte den Aktivierungscode eingeben.', 'error');
+                return;
+            }
+
+            btn.disabled = true;
+            btn.textContent = 'Wird aktiviert…';
+            hideMessage();
+
+            try {
+                const response = await fetch(`/activation/${encodeURIComponent(uuid)}`, {
+                    method: 'GET',
+                    redirect: 'follow'
+                });
+
+                if (response.redirected) {
+                    window.location.href = response.url;
+                } else if (response.ok) {
+                    window.location.href = '/login.html';
+                } else if (response.status === 204) {
+                    showMessage('Code ungültig oder bereits verwendet.', 'error');
+                    btn.disabled = false;
+                    btn.textContent = 'Jetzt aktivieren';
+                } else {
+                    showMessage(`Fehler: HTTP ${response.status}`, 'error');
+                    btn.disabled = false;
+                    btn.textContent = 'Jetzt aktivieren';
+                }
+            } catch (err) {
+                showMessage('Server nicht erreichbar.', 'error');
+                btn.disabled = false;
+                btn.textContent = 'Jetzt aktivieren';
+                console.error(err);
+            }
+        }
+
+        function showMessage(text, type) {
+            const el = document.getElementById('message');
+            el.textContent = text;
+            el.className = `message ${type}`;
+            el.style.display = 'block';
+        }
+
+        function hideMessage() {
+            document.getElementById('message').style.display = 'none';
+        }
+    </script>
+</body>
+</html>