Switched to typescript instead of javascript

2026-03-11 00:17:15 +01:00
parent 4751f18ee6
commit 368dc41172
20 changed files with 550 additions and 263 deletions
@@ -0,0 +1,84 @@
+// frontend/src/pages/Login.tsx
+
+import { Loader2, Volleyball } from 'lucide-react';
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import api from '../services/api';
+
+interface TokenResponse {
+    access_token: string;
+    token_type?: string;
+}
+
+export default function Login() {
+    const [loading, setLoading] = useState<boolean>(false);
+    const [error, setError] = useState<string | null>(null);
+    const navigate = useNavigate();
+
+    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        setLoading(true);
+        setError(null);
+
+        const formData = new FormData(e.currentTarget);
+
+        try {
+            const res = await api.postForm<TokenResponse>('/auth/token', formData);
+            localStorage.setItem('volleyToken', res.access_token);
+            navigate('/');
+        } catch (err) {
+            setError('Invalid credentials.');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="min-h-screen flex items-center justify-center bg-zinc-50 dark:bg-zinc-950 p-4 transition-colors">
+            <div className="w-full max-w-md bg-white dark:bg-zinc-900 rounded-3xl shadow-xl border border-zinc-200 dark:border-zinc-800 overflow-hidden">
+                <div className="p-8">
+                    <div className="flex justify-center mb-8">
+                        <div className="p-4 bg-orange-600 rounded-2xl shadow-lg shadow-orange-600/30 rotate-12">
+                            <Volleyball className="text-white" size={40} />
+                        </div>
+                    </div>
+
+                    <h1 className="text-2xl font-black text-center text-zinc-900 dark:text-white tracking-tight mb-2">Admin Access</h1>
+                    <p className="text-center text-zinc-500 text-sm font-medium mb-8">Enter administrative credentials</p>
+
+                    {error && (
+                        <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 text-xs font-bold uppercase tracking-wide rounded-xl text-center border border-red-100 dark:border-red-900/50">
+                            {error}
+                        </div>
+                    )}
+
+                    <form onSubmit={handleSubmit} className="space-y-6">
+                        <div className="space-y-2">
+                            <label className="text-[10px] font-black uppercase tracking-[0.2em] text-zinc-500">Username</label>
+                            <input name="username" placeholder="Username" required className="w-full bg-zinc-50 dark:bg-zinc-950 border border-zinc-300 dark:border-zinc-800 p-4 rounded-2xl dark:text-white outline-none focus:border-orange-500 transition font-bold" />
+                        </div>
+
+                        <div className="space-y-2">
+                            <label className="text-[10px] font-black uppercase tracking-[0.2em] text-zinc-500">Password</label>
+                            <input name="password" type="password" placeholder="••••••••" required className="w-full bg-zinc-50 dark:bg-zinc-950 border border-zinc-300 dark:border-zinc-800 p-4 rounded-2xl dark:text-white outline-none focus:border-orange-500 transition font-bold" />
+                        </div>
+
+                        <button
+                            type="submit"
+                            disabled={loading}
+                            className="w-full bg-orange-600 hover:bg-orange-500 text-white py-5 rounded-2xl font-black uppercase tracking-[0.2em] text-xs shadow-2xl shadow-orange-600/30 transition active:scale-95 mt-4 flex justify-center items-center gap-2"
+                        >
+                            {loading ? <Loader2 className="animate-spin" size={18} /> : 'Authenticate'}
+                        </button>
+                    </form>
+                </div>
+
+                <div className="bg-zinc-50 dark:bg-zinc-950/50 p-4 text-center border-t border-zinc-200 dark:border-zinc-800">
+                    <Link to="/" className="text-[10px] font-black uppercase tracking-widest text-zinc-400 hover:text-orange-600 transition">
+                        Back to Dashboard
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+}