feat(auth): required login barrier with 1-click demo access and session management

2026-09-21 10:28:08 +02:00
parent 8200857754
commit 4f5ef164c3
6 changed files with 547 additions and 46 deletions
@@ -0,0 +1,113 @@
+{% extends "base.html" %}
+
+{% block title %}Anmelden – Schmankerl{% endblock %}
+
+{% block content %}
+<div class="container narrow">
+  
+  <div class="login-box">
+    <div class="login-header">
+      <div class="login-icon">🥨</div>
+      <h1>Anmeldung erforderlich</h1>
+      <p class="login-sub">
+        Portal: <strong>{{ tenant.name if tenant else 'Schmankerl' }}</strong>
+      </p>
+      <div class="privacy-note">
+        🔒 Aus Datenschutzgründen (DSGVO) sind Bestelllisten und Teilnehmerdaten nur für angemeldete Teammitglieder sichtbar.
+      </div>
+    </div>
+
+    {% if error %}
+    <div class="alert-danger">{{ error }}</div>
+    {% endif %}
+    {% if success %}
+    <div class="alert-success">{{ success }}</div>
+    {% endif %}
+
+    <!-- 1-Click Demo Login Box (For easy review & testing) -->
+    <div class="demo-login-card">
+      <h3>🚀 1-Klick Demo-Zugang</h3>
+      <p class="card-hint">Wähle eine Rolle zum sofortigen Ausprobieren:</p>
+      <div class="demo-btn-grid">
+        <form action="/login/quick" method="POST">
+          <input type="hidden" name="role" value="user">
+          <button type="submit" class="btn-demo">
+            👤 <strong>Mitarbeiter</strong><br>
+            <small>Brotzeit bestellen & Übersicht</small>
+          </button>
+        </form>
+        <form action="/login/quick" method="POST">
+          <input type="hidden" name="role" value="admin">
+          <button type="submit" class="btn-demo admin">
+            👨‍🍳 <strong>Einkäufer / Admin</strong><br>
+            <small>Sammelliste & Kasse verwalten</small>
+          </button>
+        </form>
+      </div>
+    </div>
+
+    <!-- Tab Navigation -->
+    <div class="auth-tabs">
+      <button class="auth-tab active" id="tabLoginBtn" onclick="switchAuthTab('login')">Anmelden</button>
+      <button class="auth-tab" id="tabRegisterBtn" onclick="switchAuthTab('register')">Neu registrieren</button>
+    </div>
+
+    <!-- Login Form -->
+    <form action="/login" method="POST" id="formLogin" class="auth-form">
+      <div class="input-group">
+        <label for="login_email">E-Mail-Adresse</label>
+        <input type="email" id="login_email" name="email" required placeholder="name@firma.de">
+      </div>
+      <div class="input-group">
+        <label for="login_password">Passwort</label>
+        <input type="password" id="login_password" name="password" required placeholder="••••••••">
+      </div>
+      <button type="submit" class="btn-submit">Anmelden</button>
+    </form>
+
+    <!-- Register Form (Hidden by default) -->
+    <form action="/register" method="POST" id="formRegister" class="auth-form" style="display: none;">
+      <div class="input-group">
+        <label for="reg_first_name">Vorname</label>
+        <input type="text" id="reg_first_name" name="first_name" required placeholder="z. B. Anna">
+      </div>
+      <div class="input-group">
+        <label for="reg_last_name">Nachname</label>
+        <input type="text" id="reg_last_name" name="last_name" required placeholder="z. B. Huber">
+      </div>
+      <div class="input-group">
+        <label for="reg_email">E-Mail-Adresse</label>
+        <input type="email" id="reg_email" name="email" required placeholder="anna@firma.de">
+      </div>
+      <div class="input-group">
+        <label for="reg_password">Passwort festlegen</label>
+        <input type="password" id="reg_password" name="password" required minlength="6" placeholder="Mindestens 6 Zeichen">
+      </div>
+      <button type="submit" class="btn-submit">Konto erstellen & anmelden</button>
+    </form>
+
+  </div>
+
+</div>
+
+<script>
+  function switchAuthTab(tab) {
+    const loginForm = document.getElementById('formLogin');
+    const regForm = document.getElementById('formRegister');
+    const loginBtn = document.getElementById('tabLoginBtn');
+    const regBtn = document.getElementById('tabRegisterBtn');
+
+    if (tab === 'login') {
+      loginForm.style.display = 'block';
+      regForm.style.display = 'none';
+      loginBtn.classList.add('active');
+      regBtn.classList.remove('active');
+    } else {
+      loginForm.style.display = 'none';
+      regForm.style.display = 'block';
+      loginBtn.classList.remove('active');
+      regBtn.classList.add('active');
+    }
+  }
+</script>
+{% endblock %}