feat: multi-user auth — per-user spaces, pbkdf2 passwords, session tokens, login page

2026-04-01 08:39:16 +02:00
parent 94dd871031
commit 1466a1529f
7 changed files with 468 additions and 24 deletions
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>tüit Transkriptor — Anmelden</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Overpass:wght@300;400;600;700&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --red: #DA251C;
+      --yellow: #FFD802;
+      --bg: #111;
+      --surface: #1a1a1a;
+      --surface2: #232323;
+      --text: #e8e8e8;
+      --muted: #888;
+      --border: #2e2e2e;
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: 'Overpass', system-ui, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+    .card {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 40px;
+      width: 100%;
+      max-width: 360px;
+    }
+    .logo {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 32px;
+    }
+    .logo-dot { width: 12px; height: 12px; background: var(--red); border-radius: 50%; flex-shrink: 0; }
+    .logo h1 { font-size: 1.1rem; font-weight: 600; letter-spacing: 0.04em; }
+    .logo h1 span { color: var(--red); }
+    .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
+    label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
+    input {
+      background: var(--surface2);
+      border: 1px solid var(--border);
+      color: var(--text);
+      border-radius: 8px;
+      padding: 10px 12px;
+      font-family: inherit;
+      font-size: 0.95rem;
+      outline: none;
+      transition: border-color 0.15s;
+      width: 100%;
+    }
+    input:focus { border-color: var(--yellow); }
+    input::placeholder { color: var(--muted); }
+    button[type="submit"] {
+      width: 100%;
+      margin-top: 8px;
+      padding: 12px;
+      background: var(--red);
+      color: #fff;
+      border: none;
+      border-radius: 8px;
+      font-family: inherit;
+      font-size: 1rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: opacity 0.15s;
+    }
+    button[type="submit"]:hover { opacity: 0.88; }
+    button[type="submit"]:disabled { opacity: 0.5; cursor: default; }
+    #error {
+      display: none;
+      margin-top: 14px;
+      padding: 10px 12px;
+      background: rgba(218, 37, 28, 0.12);
+      border: 1px solid rgba(218, 37, 28, 0.4);
+      border-radius: 6px;
+      font-size: 0.85rem;
+      color: #ff6b6b;
+    }
+  </style>
+</head>
+<body>
+  <div class="card">
+    <div class="logo">
+      <div class="logo-dot"></div>
+      <h1>tüit <span>Transkriptor</span></h1>
+    </div>
+    <form id="login-form">
+      <div class="field">
+        <label for="username">Benutzername</label>
+        <input type="text" id="username" name="username" autocomplete="username" autofocus placeholder="Benutzername">
+      </div>
+      <div class="field">
+        <label for="password">Passwort</label>
+        <input type="password" id="password" name="password" autocomplete="current-password" placeholder="Passwort">
+      </div>
+      <button type="submit" id="submit-btn">Anmelden</button>
+      <div id="error"></div>
+    </form>
+  </div>
+  <script>
+    const form = document.getElementById('login-form');
+    const errorEl = document.getElementById('error');
+    const submitBtn = document.getElementById('submit-btn');
+
+    form.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      errorEl.style.display = 'none';
+      submitBtn.disabled = true;
+      submitBtn.textContent = 'Anmelden…';
+
+      // Read values directly — no innerHTML with untrusted data
+      const username = document.getElementById('username').value;
+      const password = document.getElementById('password').value;
+
+      try {
+        const r = await fetch('/login', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ username, password }),
+        });
+        if (r.ok) {
+          const data = await r.json();
+          sessionStorage.setItem('token', data.token);
+          location.href = '/';
+        } else {
+          const data = await r.json().catch(() => ({}));
+          errorEl.textContent = data.detail || 'Anmeldung fehlgeschlagen.';
+          errorEl.style.display = 'block';
+        }
+      } catch {
+        errorEl.textContent = 'Server nicht erreichbar.';
+        errorEl.style.display = 'block';
+      } finally {
+        submitBtn.disabled = false;
+        submitBtn.textContent = 'Anmelden';
+      }
+    });
+  </script>
+</body>
+</html>