Add persistence layer: TOTP auth, game history, restore

- db/ package: async SQLAlchemy engine + Player/Game/Guess models - api/auth.py: passwordless TOTP login (pyotp), session token via socket auth - api/history.py: record guesses/points, DB-backed standings, restore unfinished games on startup, host-only end_game - api/__init__.py: auth-gated handlers, accounts map, rejoin via account - frontend: Auth (QR + code) and History pages, resume/end-game in lobby/table - docker-compose: real PostgreSQL service wired via DATABASE_URL - tests_history.py for the persistence/auth layer; refresh CLAUDE.md Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-23 23:09:50 +02:00
parent beaf142ee4
commit 30c32b7714
24 changed files with 1446 additions and 87 deletions
@@ -0,0 +1,157 @@
+import { useState } from 'react';
+import { QRCodeSVG } from 'qrcode.react';
+import { useGameStore } from '../store/gameStore';
+import { emit } from '../lib/socket';
+
+type Mode = 'login' | 'register';
+
+export default function Auth() {
+  const [mode, setMode] = useState<Mode>('login');
+  const [username, setUsername] = useState(localStorage.getItem('bridzik_name') ?? '');
+  const [code, setCode] = useState('');
+  const registration = useGameStore((s) => s.registration);
+  const setRegistration = useGameStore((s) => s.setRegistration);
+
+  const remember = (name: string) => localStorage.setItem('bridzik_name', name.trim());
+
+  const handleLogin = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!username.trim() || code.trim().length < 6) return;
+    remember(username);
+    emit.login(username.trim(), code.trim());
+  };
+
+  const handleRegisterStart = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!username.trim()) return;
+    remember(username);
+    emit.registerAccount(username.trim());
+  };
+
+  const handleConfirm = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (code.trim().length < 6) return;
+    emit.confirmAccount(username.trim(), code.trim());
+  };
+
+  const switchMode = (m: Mode) => {
+    setMode(m);
+    setCode('');
+    setRegistration(null);
+  };
+
+  return (
+    <div className="max-w-sm mx-auto p-4 pt-10">
+      <h1 className="text-2xl font-bold text-center mb-2 tracking-wide">Bridzik</h1>
+      <p className="text-center text-gray-400 text-sm mb-6">
+        Prihlas sa kodom z aplikacie (napr. Google Authenticator).
+      </p>
+
+      <div className="flex mb-6 rounded-xl overflow-hidden border border-slate-700">
+        <button
+          onClick={() => switchMode('login')}
+          className={`flex-1 py-2 text-sm font-semibold ${
+            mode === 'login' ? 'bg-blue-600 text-white' : 'bg-slate-800 text-gray-400'
+          }`}
+        >
+          Prihlasenie
+        </button>
+        <button
+          onClick={() => switchMode('register')}
+          className={`flex-1 py-2 text-sm font-semibold ${
+            mode === 'register' ? 'bg-blue-600 text-white' : 'bg-slate-800 text-gray-400'
+          }`}
+        >
+          Registracia
+        </button>
+      </div>
+
+      {mode === 'login' && (
+        <form onSubmit={handleLogin} className="flex flex-col gap-4">
+          <input
+            autoFocus
+            type="text"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            maxLength={40}
+            placeholder="Pouzivatelske meno"
+            className="bg-slate-700 text-white rounded-lg px-4 py-2 outline-none focus:ring-2 focus:ring-blue-500"
+          />
+          <input
+            type="text"
+            inputMode="numeric"
+            value={code}
+            onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))}
+            maxLength={6}
+            placeholder="6-miestny kod"
+            className="bg-slate-700 text-white rounded-lg px-4 py-2 outline-none focus:ring-2 focus:ring-blue-500 tracking-widest font-mono"
+          />
+          <button
+            type="submit"
+            disabled={!username.trim() || code.trim().length < 6}
+            className="py-3 rounded-xl bg-blue-600 hover:bg-blue-500 font-bold disabled:opacity-40"
+          >
+            Prihlasit
+          </button>
+        </form>
+      )}
+
+      {mode === 'register' && !registration && (
+        <form onSubmit={handleRegisterStart} className="flex flex-col gap-4">
+          <input
+            autoFocus
+            type="text"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            maxLength={40}
+            placeholder="Zvol si pouzivatelske meno"
+            className="bg-slate-700 text-white rounded-lg px-4 py-2 outline-none focus:ring-2 focus:ring-blue-500"
+          />
+          <button
+            type="submit"
+            disabled={!username.trim()}
+            className="py-3 rounded-xl bg-green-700 hover:bg-green-600 font-bold disabled:opacity-40"
+          >
+            Vytvorit ucet
+          </button>
+        </form>
+      )}
+
+      {mode === 'register' && registration && (
+        <div className="flex flex-col gap-4">
+          <p className="text-sm text-gray-300">
+            Naskenuj QR kod do autentifikacnej aplikacie a opis aktualny kod.
+          </p>
+          <div className="bg-white rounded-xl p-4 flex justify-center">
+            <QRCodeSVG value={registration.otpauth_uri} size={176} />
+          </div>
+          <div className="text-xs text-gray-400 text-center">
+            Alebo zadaj rucne kluc:
+            <span className="block font-mono text-gray-200 break-all mt-1">
+              {registration.secret}
+            </span>
+          </div>
+          <form onSubmit={handleConfirm} className="flex flex-col gap-3">
+            <input
+              autoFocus
+              type="text"
+              inputMode="numeric"
+              value={code}
+              onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))}
+              maxLength={6}
+              placeholder="6-miestny kod"
+              className="bg-slate-700 text-white rounded-lg px-4 py-2 outline-none focus:ring-2 focus:ring-blue-500 tracking-widest font-mono"
+            />
+            <button
+              type="submit"
+              disabled={code.trim().length < 6}
+              className="py-3 rounded-xl bg-blue-600 hover:bg-blue-500 font-bold disabled:opacity-40"
+            >
+              Potvrdit a prihlasit
+            </button>
+          </form>
+        </div>
+      )}
+    </div>
+  );
+}
@@ -1,18 +1,42 @@
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useGameStore } from '../store/gameStore';
+import { emit, socket, setAuthToken } from '../lib/socket';
 import NameModal from '../components/NameModal';
 import RulesModal from '../components/RulesModal';

-type ModalState = { mode: 'create' } | { mode: 'join'; gid: string } | null;
-
 export default function GameList() {
+  const navigate = useNavigate();
  const games = useGameStore((s) => s.games);
-  const [modal, setModal] = useState<ModalState>(null);
+  const account = useGameStore((s) => s.account);
+  const [showCreate, setShowCreate] = useState(false);
  const [showRules, setShowRules] = useState(false);

+  const handleLogout = () => {
+    localStorage.removeItem('bridzik_token');
+    localStorage.removeItem('bridzik_player');
+    setAuthToken(null);
+    useGameStore.getState().logout();
+    // Drop the authenticated server-side session for this connection.
+    socket.disconnect();
+    socket.connect();
+    navigate('/auth', { replace: true });
+  };
+
  return (
    <div className="max-w-md mx-auto p-4 pt-8">
-      <h1 className="text-2xl font-bold text-center mb-6 tracking-wide">Bridzik</h1>
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-bold tracking-wide">Bridzik</h1>
+        <div className="flex items-center gap-3 text-sm">
+          <span className="text-gray-400">{account?.username}</span>
+          <button onClick={() => navigate('/history')} className="text-blue-400 hover:text-blue-300">
+            Historia
+          </button>
+          <button onClick={handleLogout} className="text-gray-400 hover:text-white">
+            Odhlasit
+          </button>
+        </div>
+      </div>

      <div className="flex flex-col gap-3 mb-6">
        {games.length === 0 && (
@@ -20,7 +44,11 @@ export default function GameList() {
        )}
        {games.map((g) => {
          const full = g.players.length >= 4;
-          const unavailable = full || g.started;
+          const isMember =
+            !!account && g.players.some((p) => p.player_id === account.player_id);
+          const canResume = g.started && isMember;
+          const unavailable = !canResume && (full || g.started);
+          const label = canResume ? 'Pokracovat' : full ? 'Plna' : g.started ? 'Zacata' : 'Vstup';
          return (
            <div
              key={g.gid}
@@ -35,10 +63,12 @@ export default function GameList() {
              </div>
              <button
                disabled={unavailable}
-                onClick={() => setModal({ mode: 'join', gid: g.gid })}
-                className="px-4 py-1.5 rounded-lg text-sm font-semibold bg-blue-600 hover:bg-blue-500 disabled:opacity-40 disabled:cursor-default"
+                onClick={() => (canResume ? emit.rejoinGame(g.gid) : emit.registerPlayer(g.gid))}
+                className={`px-4 py-1.5 rounded-lg text-sm font-semibold disabled:opacity-40 disabled:cursor-default ${
+                  canResume ? 'bg-green-700 hover:bg-green-600' : 'bg-blue-600 hover:bg-blue-500'
+                }`}
              >
-                {full ? 'Plna' : g.started ? 'Zacata' : 'Vstup'}
+                {label}
              </button>
            </div>
          );
@@ -46,8 +76,8 @@ export default function GameList() {
      </div>

      <button
-        onClick={() => setModal({ mode: 'create' })}
-        className="w-full py-3 rounded-xl bg-green-700 hover:bg-green-600 font-bold text-lg"
+        onClick={() => setShowCreate(true)}
+        className="w-full py-3 rounded-xl bg-green-700 hover:bg-green-600 font-bold text-lg mb-3"
      >
        + Vytvorit novu hru
      </button>
@@ -61,13 +91,7 @@ export default function GameList() {

      {showRules && <RulesModal onClose={() => setShowRules(false)} />}

-      {modal && (
-        <NameModal
-          mode={modal.mode}
-          gid={modal.mode === 'join' ? modal.gid : undefined}
-          onClose={() => setModal(null)}
-        />
-      )}
+      {showCreate && <NameModal onClose={() => setShowCreate(false)} />}
    </div>
  );
 }
@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useGameStore } from '../store/gameStore';
+import { emit } from '../lib/socket';
 import { leaveGame } from '../lib/leaveGame';
 import { computePlayable } from '../lib/gameRules';
 import Hand from '../components/Hand';
@@ -68,6 +69,11 @@ export default function GameTable() {
  const activePlayerName = players.find((p) => p.order === active_player)?.name ?? '';

  const handleLeave = () => leaveGame(navigate);
+  const handleEnd = () => {
+    if (window.confirm('Naozaj ukoncit celu hru pre vsetkych?')) {
+      emit.endGame(gameStatus.gid);
+    }
+  };

  return (
    <div className="max-w-lg mx-auto p-3 flex flex-col gap-3 pb-6">
@@ -77,9 +83,16 @@ export default function GameTable() {
          <span>Seria {series_number} / Kolo {round_number + 1}</span>
          <span className="ml-2 text-gray-500">({cards_in_round} kopok)</span>
        </div>
-        <button onClick={handleLeave} className="text-xs text-gray-500 hover:text-gray-300">
-          Odist
-        </button>
+        <div className="flex gap-3">
+          {myOrder === 0 && (
+            <button onClick={handleEnd} className="text-xs text-red-400 hover:text-red-300">
+              Ukoncit hru
+            </button>
+          )}
+          <button onClick={handleLeave} className="text-xs text-gray-500 hover:text-gray-300">
+            Odist
+          </button>
+        </div>
      </div>

      {/* Turn indicator */}
@@ -0,0 +1,97 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useGameStore } from '../store/gameStore';
+import { emit } from '../lib/socket';
+
+function fmtDate(iso: string | null): string {
+  if (!iso) return '—';
+  const d = new Date(iso);
+  return isNaN(d.getTime()) ? '—' : d.toLocaleString('sk-SK');
+}
+
+export default function History() {
+  const navigate = useNavigate();
+  const history = useGameStore((s) => s.history);
+  const detail = useGameStore((s) => s.gameDetail);
+  const setGameDetail = useGameStore((s) => s.setGameDetail);
+
+  useEffect(() => {
+    emit.getPlayerHistory();
+    return () => setGameDetail(null);
+  }, [setGameDetail]);
+
+  // --- detail view ---
+  if (detail) {
+    return (
+      <div className="max-w-md mx-auto p-4 pt-8">
+        <button
+          onClick={() => setGameDetail(null)}
+          className="text-sm text-gray-400 hover:text-white mb-4"
+        >
+          ← Spat na zoznam
+        </button>
+        <h1 className="text-xl font-bold mb-1">Detail hry</h1>
+        <p className="text-xs text-gray-400 mb-4">{fmtDate(detail.created_at)}</p>
+
+        <div className="bg-slate-800 rounded-xl overflow-hidden text-sm">
+          <div className="grid grid-cols-[auto_1fr_auto_auto] gap-2 px-3 py-2 text-xs text-gray-400 border-b border-slate-700">
+            <span>S/K</span>
+            <span>Hrac</span>
+            <span className="text-right">Tip</span>
+            <span className="text-right">Body</span>
+          </div>
+          {detail.rounds.map((r, i) => (
+            <div
+              key={i}
+              className="grid grid-cols-[auto_1fr_auto_auto] gap-2 px-3 py-1.5 border-b border-slate-700/50 last:border-0"
+            >
+              <span className="text-gray-500">
+                {r.series_number}/{r.round_number}
+              </span>
+              <span className="truncate">{r.username ?? `#${r.player_id}`}</span>
+              <span className="text-right font-mono">{r.guess}</span>
+              <span className={`text-right font-mono ${r.won ? 'text-green-400' : 'text-gray-500'}`}>
+                {r.points}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  // --- list view ---
+  return (
+    <div className="max-w-md mx-auto p-4 pt-8">
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-xl font-bold">Moja historia</h1>
+        <button onClick={() => navigate('/')} className="text-sm text-gray-400 hover:text-white">
+          Spat
+        </button>
+      </div>
+
+      {history.length === 0 && (
+        <p className="text-center text-gray-500 py-6">Zatial ziadne odohrane hry.</p>
+      )}
+
+      <div className="flex flex-col gap-3">
+        {history.map((g) => (
+          <button
+            key={g.gid}
+            onClick={() => emit.getGameDetail(g.gid)}
+            className="text-left bg-slate-800 hover:bg-slate-700 rounded-xl px-4 py-3"
+          >
+            <div className="flex items-center justify-between">
+              <span className="text-sm text-gray-200">{fmtDate(g.created_at)}</span>
+              <span className="text-sm font-semibold text-green-400">{g.my_points} b.</span>
+            </div>
+            <p className="text-xs text-gray-400 mt-1 truncate">{g.players.join(', ')}</p>
+            <p className="text-[11px] text-gray-500 mt-0.5">
+              {g.ended_at ? 'dohrana' : 'nedohrana'}
+            </p>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}