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>
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user