robin/Dramlog-Prod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: optimize scan flow with WebP compression and fix admin metrics visibility

Browse Source
This commit is contained in:
robin
2025-12-22 10:15:29 +01:00
parent f0588418c8
commit 5e35710b67
19 changed files with 477 additions and 332 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/AuthForm.tsx
View File

@@ -42,15 +42,15 @@ export default function AuthForm() {
};
return (
<div className="w-full max-w-md p-8 bg-white dark:bg-zinc-900 rounded-3xl shadow-2xl border border-zinc-200 dark:border-zinc-800">
<div className="w-full max-w-md p-8 bg-zinc-900 rounded-3xl shadow-2xl border border-zinc-800">
<div className="flex flex-col items-center mb-8">
<div className="w-16 h-16 bg-amber-100 dark:bg-amber-900/30 rounded-2xl flex items-center justify-center mb-4">
{isLogin ? <LogIn className="text-amber-600" size={32} /> : <UserPlus className="text-amber-600" size={32} />}
<div className="w-16 h-16 bg-orange-950/30 rounded-2xl flex items-center justify-center mb-4 border border-orange-900/20">
{isLogin ? <LogIn className="text-orange-600" size={32} /> : <UserPlus className="text-orange-600" size={32} />}
</div>
<h2 className="text-3xl font-black text-zinc-900 dark:text-white tracking-tight">
<h2 className="text-3xl font-black text-white tracking-tight">
{isLogin ? 'Willkommen zurück' : 'Vault erstellen'}
</h2>
<p className="text-zinc-500 dark:text-zinc-400 mt-2 text-center text-sm">
<p className="text-zinc-400 mt-2 text-center text-sm font-medium">
{isLogin
? 'Logge dich ein, um auf deine Sammlung zuzugreifen.'
: 'Starte heute mit deinem digitalen Whisky-Vault.'}
@@ -59,7 +59,7 @@ export default function AuthForm() {
<form onSubmit={handleSubmit} className="space-y-4">
<div className="space-y-2">
<label className="text-sm font-semibold text-zinc-700 dark:text-zinc-300 ml-1">E-Mail</label>
<label className="text-[10px] font-black uppercase tracking-widest text-zinc-400 ml-1">E-Mail</label>
<div className="relative">
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" size={18} />
<input
@@ -68,13 +68,13 @@ export default function AuthForm() {
onChange={(e) => setEmail(e.target.value)}
placeholder="name@beispiel.de"
required
className="w-full pl-10 pr-4 py-3 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl focus:ring-2 focus:ring-amber-500 focus:border-transparent outline-none transition-all dark:text-white"
className="w-full pl-10 pr-4 py-3 bg-zinc-950 border border-zinc-800 rounded-xl focus:ring-1 focus:ring-orange-600 focus:border-transparent outline-none transition-all text-white placeholder:text-zinc-600"
/>
</div>
</div>
<div className="space-y-2">
<label className="text-sm font-semibold text-zinc-700 dark:text-zinc-300 ml-1">Passwort</label>
<label className="text-[10px] font-black uppercase tracking-widest text-zinc-400 ml-1">Passwort</label>
<div className="relative">
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" size={18} />
<input
@@ -83,20 +83,20 @@ export default function AuthForm() {
onChange={(e) => setPassword(e.target.value)}
placeholder="••••••••"
required
className="w-full pl-10 pr-4 py-3 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl focus:ring-2 focus:ring-amber-500 focus:border-transparent outline-none transition-all dark:text-white"
className="w-full pl-10 pr-4 py-3 bg-zinc-950 border border-zinc-800 rounded-xl focus:ring-1 focus:ring-orange-600 focus:border-transparent outline-none transition-all text-white placeholder:text-zinc-600"
/>
</div>
</div>
{error && (
<div className="flex items-center gap-2 p-3 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 text-sm rounded-lg border border-red-100 dark:border-red-900/50">
<div className="flex items-center gap-2 p-3 bg-red-900/10 text-red-500 text-xs rounded-lg border border-red-900/20">
<AlertCircle size={16} />
{error}
</div>
)}
{message && (
<div className="p-3 bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400 text-sm rounded-lg border border-green-100 dark:border-green-900/50">
<div className="p-3 bg-green-900/10 text-green-500 text-xs rounded-lg border border-green-900/20">
{message}
</div>
)}
@@ -104,7 +104,7 @@ export default function AuthForm() {
<button
type="submit"
disabled={loading}
className="w-full py-4 bg-amber-600 hover:bg-amber-700 text-white font-bold rounded-xl shadow-lg shadow-amber-600/20 transition-all active:scale-[0.98] disabled:opacity-50 flex items-center justify-center gap-2"
className="w-full py-4 bg-orange-600 hover:bg-orange-700 text-white font-black uppercase tracking-widest text-xs rounded-xl shadow-lg shadow-orange-950/40 transition-all active:scale-[0.98] disabled:opacity-50 flex items-center justify-center gap-2"
>
{loading ? <Loader2 className="animate-spin" size={20} /> : (isLogin ? 'Einloggen' : 'Konto erstellen')}
</button>
@@ -112,8 +112,9 @@ export default function AuthForm() {
<div className="mt-6 text-center">
<button
type="button"
onClick={() => setIsLogin(!isLogin)}
className="text-sm font-medium text-amber-600 hover:text-amber-700 transition-colors"
className="text-xs font-black uppercase tracking-widest text-orange-600 hover:text-orange-500 transition-colors"
>
{isLogin ? 'Noch kein Konto? Registrieren' : 'Bereits ein Konto? Einloggen'}
</button>