Add email invitation system with SMTP configuration and invite token workflow

Implemented comprehensive email invitation functionality for new users. Added SMTP settings management in admin panel with configuration UI for host, port, credentials, sender details, and TLS options. Created invite token system with 48-hour expiration and single-use enforcement. Added mailer module with HTML email templates in German theme styling (radial gradient backgrounds, gold accents, bordered cards). Implemented invite
2026-08-02 10:24:34 +02:00
parent ca4648b25a
commit d96b75ca82
12 changed files with 418 additions and 9 deletions
@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from "react";
+import { api } from "../api/client";
+import { styles } from "../styles/styles";
+import { stylesTokens } from "../styles/theme";
+
+export default function InvitePage({ token }) {
+  const [info, setInfo] = useState(null);
+  const [password, setPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [message, setMessage] = useState("");
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => { api(`/auth/invite/${encodeURIComponent(token)}`).then(setInfo).catch((e) => setMessage("❌ " + (e?.message || "Diese Einladung ist nicht mehr gültig."))); }, [token]);
+  const submit = async (event) => {
+    event.preventDefault(); setMessage("");
+    if (password.length < 8) return setMessage("❌ Das Passwort muss mindestens 8 Zeichen haben.");
+    if (password !== confirm) return setMessage("❌ Die Passwörter stimmen nicht überein.");
+    setSaving(true);
+    try { await api(`/auth/invite/${encodeURIComponent(token)}`, { method: "POST", body: JSON.stringify({ password }) }); setMessage("✅ Passwort gesetzt. Du wirst weitergeleitet …"); setTimeout(() => { window.location.href = "/"; }, 700); }
+    catch (e) { setMessage("❌ " + (e?.message || "Einladung konnte nicht aktiviert werden.")); setSaving(false); }
+  };
+
+  return <div style={styles.loginPage}>
+    <div style={styles.bgFixed} aria-hidden="true"><div style={styles.bgMap} /></div>
+    <main className="hp-invite-card" style={{ ...styles.loginCard, position: "relative", zIndex: 1 }}>
+      <div className="hp-invite-seal">✦</div>
+      <div style={{ color: stylesTokens.textGold, fontWeight: 1000, fontSize: 24 }}>Notizbogen</div>
+      <div style={{ color: stylesTokens.textDim, marginTop: 5 }}>Deine Einladung</div>
+      {info ? <>
+        <div style={{ marginTop: 22, padding: "14px 16px", borderRadius: 14, background: "rgba(233,216,166,.08)", border: "1px solid rgba(233,216,166,.18)", textAlign: "left" }}><div style={{ color: stylesTokens.textMain, fontWeight: 900, fontSize: 18 }}>{info.display_name}</div><div style={{ color: stylesTokens.textDim, fontSize: 13, marginTop: 4 }}>{info.email} · {info.role}</div></div>
+        <form onSubmit={submit} style={{ marginTop: 18, display: "grid", gap: 10, textAlign: "left" }}>
+          <label style={styles.adminFieldLabel}>Passwort setzen<input autoFocus type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Mindestens 8 Zeichen" style={styles.input} /></label>
+          <label style={styles.adminFieldLabel}>Passwort bestätigen<input type="password" value={confirm} onChange={(e) => setConfirm(e.target.value)} placeholder="Passwort wiederholen" style={styles.input} /></label>
+          {message && <div style={{ color: message.startsWith("✅") ? "#baf3c9" : "#ffb3b3", fontSize: 13 }}>{message}</div>}
+          <button type="submit" style={{ ...styles.primaryBtn, width: "100%", marginTop: 5 }} disabled={saving}>{saving ? "Wird aktiviert …" : "Einladung annehmen"}</button>
+        </form>
+      </> : <div style={{ marginTop: 24, color: message ? "#ffb3b3" : stylesTokens.textDim }}>{message || "Einladung wird geprüft …"}</div>}
+    </main>
+  </div>;
+}