88 lines
4.3 KiB
TypeScript
88 lines
4.3 KiB
TypeScript
// 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 {
|
|
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">
|
|
Staff Login
|
|
</h1>
|
|
<p className="text-center text-zinc-500 text-sm font-medium mb-8">
|
|
Enter staff 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>
|
|
);
|
|
} |