Add display_name support for users in backend and frontend

This commit introduces the `display_name` field to the user model. It updates database migrations, API endpoints, and the admin panel to handle this field. Additionally, the `display_name` is now shown in the TopBar and WinnerBadge components, improving user experience.
2026-02-06 12:09:21 +01:00
parent 4a012b7345
commit 3a66c0cf74
7 changed files with 140 additions and 26 deletions
--- a/backend/app/main.py
+++ b/backend/app/main.py
@@ -86,6 +86,14 @@ Very small, pragmatic auto-migration (no alembic).
 - supports old schema (join_code/chip_code) and new schema (code/chip)
 """

+    # --- users.display_name ---
+    if not _has_column(db, "users", "display_name"):
+        try:
+            db.execute(text("ALTER TABLE users ADD COLUMN display_name VARCHAR DEFAULT ''"))
+            db.commit()
+        except Exception:
+            db.rollback()
+
    # --- users.theme_key ---
    if not _has_column(db, "users", "theme_key"):
        try:
@@ -279,6 +287,7 @@ def ensure_admin(db: Session):
                password_hash=hash_password(admin_pw),
                role=Role.admin.value,
                theme_key="default",
+                display_name="Admin",
            )
        )
        db.commit()
--- a/backend/app/models.py
+++ b/backend/app/models.py
@@ -1,3 +1,4 @@
+# backend/app/models.py
 import enum
 import uuid
 from sqlalchemy import (
@@ -34,25 +35,24 @@ class User(Base):
    disabled: Mapped[bool] = mapped_column(Boolean, default=False)
    created_at: Mapped[str] = mapped_column(DateTime(timezone=True), server_default=func.now())

-    # NEW: Theme im Userprofil (damit es auf anderen Geräten mitkommt)
    theme_key: Mapped[str] = mapped_column(String, default="default")

+    # NEW: schöner Name für UI (TopBar / WinnerBadge)
+    display_name: Mapped[str] = mapped_column(String, default="")
+

 class Game(Base):
    __tablename__ = "games"
    id: Mapped[str] = mapped_column(String, primary_key=True, default=lambda: str(uuid.uuid4()))

-    # NEW: Host (nur Host darf Winner setzen)
    host_user_id: Mapped[str] = mapped_column(String, ForeignKey("users.id"), index=True)

    name: Mapped[str] = mapped_column(String)
    seed: Mapped[int] = mapped_column(Integer)
    created_at: Mapped[str] = mapped_column(DateTime(timezone=True), server_default=func.now())

-    # NEW: Join-Code (Kahoot-Style)
    code: Mapped[str] = mapped_column(String, unique=True, index=True)

-    # NEW: Winner (aus Users, nicht Freitext)
    winner_user_id: Mapped[str | None] = mapped_column(String, ForeignKey("users.id"), nullable=True)


@@ -75,18 +75,15 @@ class Entry(Base):

 class SheetState(Base):
    __tablename__ = "sheet_state"
-    __table_args__ = (
-        UniqueConstraint("game_id", "owner_user_id", "entry_id", name="uq_sheet"),
-    )
+    __table_args__ = (UniqueConstraint("game_id", "owner_user_id", "entry_id", name="uq_sheet"),)

    id: Mapped[str] = mapped_column(String, primary_key=True, default=lambda: str(uuid.uuid4()))
    game_id: Mapped[str] = mapped_column(String, ForeignKey("games.id"), index=True)
    owner_user_id: Mapped[str] = mapped_column(String, ForeignKey("users.id"), index=True)
    entry_id: Mapped[str] = mapped_column(String, ForeignKey("entries.id"), index=True)

-    status: Mapped[int] = mapped_column(SmallInteger, default=0)  # 0 unknown, 1 crossed, 2 confirmed, 3 maybe
-    note_tag: Mapped[str | None] = mapped_column(String, nullable=True)  # null | 'i' | 'm' | 's'
+    status: Mapped[int] = mapped_column(SmallInteger, default=0)
+    note_tag: Mapped[str | None] = mapped_column(String, nullable=True)

-    # NEW: Chip persistieren (statt LocalStorage)
    chip: Mapped[str | None] = mapped_column(String, nullable=True)
    
--- a/backend/app/routes/admin.py
+++ b/backend/app/routes/admin.py
@@ -19,21 +19,53 @@ def require_admin(req: Request, db: Session) -> User:
 def list_users(req: Request, db: Session = Depends(get_db)):
    require_admin(req, db)
    users = db.query(User).order_by(User.created_at.desc()).all()
-    return [{"id": u.id, "email": u.email, "role": u.role, "disabled": u.disabled} for u in users]
+    return [
+        {
+            "id": u.id,
+            "email": u.email,
+            "display_name": u.display_name,
+            "role": u.role,
+            "disabled": u.disabled,
+        }
+        for u in users
+    ]

@router.post("/users")
 def create_user(req: Request, data: dict, db: Session = Depends(get_db)):
    require_admin(req, db)
    email = (data.get("email") or "").lower().strip()
    password = data.get("password") or ""
+    display_name = (data.get("display_name") or "").strip()
+
    if not email or not password:
        raise HTTPException(400, "email/password required")
    if db.query(User).filter(User.email == email).first():
        raise HTTPException(409, "email exists")
+
    role = data.get("role") or Role.user.value
    if role not in (Role.admin.value, Role.user.value):
        raise HTTPException(400, "invalid role")
-    u = User(email=email, password_hash=hash_password(password), role=role)
+
+    u = User(email=email, password_hash=hash_password(password), role=role, display_name=display_name)
    db.add(u); db.commit()
    return {"ok": True, "id": u.id}
-    
+    
+@router.delete("/users/{user_id}")
+def delete_user(req: Request, user_id: str, db: Session = Depends(get_db)):
+    admin = require_admin(req, db)
+
+    if admin.id == user_id:
+        raise HTTPException(400, "cannot delete yourself")
+
+    u = db.query(User).filter(User.id == user_id).first()
+    if not u:
+        raise HTTPException(404, "not found")
+
+    if u.role == Role.admin.value:
+        raise HTTPException(400, "cannot delete admin user")
+
+    # soft delete
+    u.disabled = True
+    db.add(u)
+    db.commit()
+    return {"ok": True}
--- a/backend/app/routes/auth.py
+++ b/backend/app/routes/auth.py
@@ -40,7 +40,8 @@ def me(req: Request, db: Session = Depends(get_db)):
    user = db.query(User).filter(User.id == uid).first()
    if not user:
        raise HTTPException(status_code=401, detail="not logged in")
-    return {"id": user.id, "email": user.email, "role": user.role, "theme_key": user.theme_key}
+    return {"id": user.id, "email": user.email, "role": user.role, "display_name": user.display_name}
+    


@router.patch("/password")
--- a/frontend/src/components/AdminPanel.jsx
+++ b/frontend/src/components/AdminPanel.jsx
@@ -7,6 +7,7 @@ export default function AdminPanel() {
  const [users, setUsers] = useState([]);

  const [open, setOpen] = useState(false);
+  const [displayName, setDisplayName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [role, setRole] = useState("user");
@@ -22,6 +23,7 @@ export default function AdminPanel() {
  }, []);

  const resetForm = () => {
+    setDisplayName("");
    setEmail("");
    setPassword("");
    setRole("user");
@@ -32,7 +34,7 @@ export default function AdminPanel() {
    try {
      await api("/admin/users", {
        method: "POST",
-        body: JSON.stringify({ email, password, role }),
+        body: JSON.stringify({ display_name: displayName, email, password, role }),
      });
      setMsg("✅ User erstellt.");
      await loadUsers();
@@ -43,6 +45,16 @@ export default function AdminPanel() {
    }
  };

+  const deleteUser = async (u) => {
+    if (!window.confirm(`User wirklich löschen (deaktivieren)?\n\n${u.display_name || u.email}`)) return;
+    try {
+      await api(`/admin/users/${u.id}`, { method: "DELETE" });
+      await loadUsers();
+    } catch (e) {
+      alert("Fehler: " + (e?.message || "unknown"));
+    }
+  };
+
  const closeModal = () => {
    setOpen(false);
    setMsg("");
@@ -63,14 +75,39 @@ export default function AdminPanel() {

      <div style={{ marginTop: 8, display: "grid", gap: 8 }}>
        {users.map((u) => (
-          <div key={u.id} style={styles.userRow}>
-            <div style={{ color: stylesTokens.textMain }}>{u.email}</div>
+          <div
+            key={u.id}
+            style={{
+              ...styles.userRow,
+              gridTemplateColumns: "1fr 1fr 80px 90px 92px",
+              alignItems: "center",
+            }}
+          >
+            <div style={{ color: stylesTokens.textMain, fontWeight: 900 }}>
+              {u.display_name || "—"}
+            </div>
+            <div style={{ color: stylesTokens.textDim, fontSize: 13 }}>{u.email}</div>
            <div style={{ textAlign: "center", fontWeight: 900, color: stylesTokens.textGold }}>
              {u.role}
            </div>
            <div style={{ textAlign: "center", opacity: 0.85, color: stylesTokens.textMain }}>
              {u.disabled ? "disabled" : "active"}
            </div>
+
+            <button
+              onClick={() => deleteUser(u)}
+              style={{
+                ...styles.secondaryBtn,
+                padding: "8px 10px",
+                borderRadius: 12,
+                color: "#ffb3b3",
+                opacity: u.role === "admin" ? 0.4 : 1,
+                pointerEvents: u.role === "admin" ? "none" : "auto",
+              }}
+              title={u.role === "admin" ? "Admin kann nicht gelöscht werden" : "User löschen (deaktivieren)"}
+            >
+              Löschen
+            </button>
          </div>
        ))}
      </div>
@@ -88,13 +125,21 @@ export default function AdminPanel() {
            </div>

            <div style={{ marginTop: 12, display: "grid", gap: 10 }}>
+              <input
+                value={displayName}
+                onChange={(e) => setDisplayName(e.target.value)}
+                placeholder="Name (z.B. Sascha)"
+                style={styles.input}
+                autoFocus
+              />
+
              <input
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="Email"
                style={styles.input}
-                autoFocus
              />
+
              <input
                value={password}
                onChange={(e) => setPassword(e.target.value)}
@@ -102,6 +147,7 @@ export default function AdminPanel() {
                type="password"
                style={styles.input}
              />
+
              <select value={role} onChange={(e) => setRole(e.target.value)} style={styles.input}>
                <option value="user">user</option>
                <option value="admin">admin</option>
@@ -125,7 +171,7 @@ export default function AdminPanel() {
              </div>

              <div style={{ fontSize: 12, opacity: 0.75, color: stylesTokens.textDim }}>
-                Tipp: Klick auf Item: Grün → Rot → Grau → Leer
+                Tipp: Name wird in TopBar & Siegeranzeige genutzt.
              </div>
            </div>
          </div>
@@ -133,4 +179,4 @@ export default function AdminPanel() {
      )}
    </div>
  );
-}
+}
--- a/frontend/src/components/TopBar.jsx
+++ b/frontend/src/components/TopBar.jsx
@@ -2,6 +2,8 @@ import React from "react";
 import { styles } from "../styles/styles";
 import { stylesTokens } from "../styles/theme";

+const displayName = (me?.display_name || "").trim() || me.email;
+
 export default function TopBar({
  me,
  userMenuOpen,
@@ -18,7 +20,7 @@ export default function TopBar({
          Notizbogen
        </div>
        <div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>
-          {me.email}
+          {displayName}
        </div>
      </div>

--- a/frontend/src/components/WinnerBadge.jsx
+++ b/frontend/src/components/WinnerBadge.jsx
@@ -1,8 +1,26 @@
 import React from "react";
 import { stylesTokens } from "../styles/theme";

-export default function WinnerBadge({ winnerEmail }) {
-  if (!winnerEmail) return null;
+/**
+ * Props:
+ * - winner: { display_name?: string, email?: string } | null
+ *   (oder als Fallback:)
+ * - winnerEmail: string | null
+ */
+export default function WinnerBadge({ winner, winnerEmail }) {
+  const name =
+    (winner?.display_name || "").trim() ||
+    (winner?.email || "").trim() ||
+    (winnerEmail || "").trim();
+
+  if (!name) return null;
+
+  // Optional: wenn display_name vorhanden ist, Email klein anzeigen
+  const showEmail =
+    winner &&
+    (winner?.email || "").trim() &&
+    (winner?.display_name || "").trim() &&
+    winner.email.trim().toLowerCase() !== winner.display_name.trim().toLowerCase();

  return (
    <div
@@ -22,9 +40,18 @@ export default function WinnerBadge({ winnerEmail }) {
    >
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <div style={{ fontSize: 18 }}>🏆</div>
-        <div style={{ color: stylesTokens.textMain, fontWeight: 900 }}>
-          Sieger:
-          <span style={{ color: stylesTokens.textGold }}>{" "}{winnerEmail}</span>
+
+        <div style={{ display: "grid", gap: 2 }}>
+          <div style={{ color: stylesTokens.textMain, fontWeight: 900 }}>
+            Sieger:
+            <span style={{ color: stylesTokens.textGold }}>{" "}{name}</span>
+          </div>
+
+          {showEmail && (
+            <div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>
+              {winner.email}
+            </div>
+          )}
        </div>
      </div>