84 lines
3.1 KiB
TypeScript
84 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Button } from "./ui/button";
|
|
import { Input } from "./ui/input";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card";
|
|
import { useAuth } from "./AuthProvider";
|
|
|
|
export function LoginForm() {
|
|
const { login, register } = useAuth();
|
|
const [nickname, setNickname] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [isRegister, setIsRegister] = useState(false);
|
|
const [error, setError] = useState("");
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setError("");
|
|
setLoading(true);
|
|
const fn = isRegister ? register : login;
|
|
const err = await fn(nickname, password);
|
|
if (err) setError(err);
|
|
setLoading(false);
|
|
};
|
|
|
|
return (
|
|
<Card className="w-full max-w-md mx-auto border-cyan-700/30 shadow-2xl shadow-cyan-900/20">
|
|
<CardHeader className="text-center">
|
|
<div className="text-4xl mb-2">🤡💥</div>
|
|
<CardTitle className="text-2xl font-mono text-cyan-300 tracking-wider uppercase">
|
|
BaraBingo
|
|
</CardTitle>
|
|
<CardDescription className="text-slate-500 font-mono text-xs">
|
|
{isRegister ? "SUB CREW REGISTRATION" : "SUB NETWORK LOGIN"}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-mono text-slate-500 uppercase tracking-wider">Nickname</label>
|
|
<Input
|
|
placeholder="e.g. DrunkEngineer69"
|
|
value={nickname}
|
|
onChange={e => setNickname(e.target.value)}
|
|
required
|
|
minLength={2}
|
|
maxLength={20}
|
|
className="font-mono"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-mono text-slate-500 uppercase tracking-wider">Password</label>
|
|
<Input
|
|
type="password"
|
|
placeholder="••••••"
|
|
value={password}
|
|
onChange={e => setPassword(e.target.value)}
|
|
required
|
|
minLength={4}
|
|
className="font-mono"
|
|
/>
|
|
</div>
|
|
{error && (
|
|
<div className="text-red-400 text-xs font-mono bg-red-950/30 border border-red-800/30 rounded-md p-2">
|
|
⚠ {error}
|
|
</div>
|
|
)}
|
|
<Button type="submit" className="w-full font-mono" disabled={loading}>
|
|
{loading ? "Connecting..." : isRegister ? "▶ REGISTER" : "▶ LOGIN"}
|
|
</Button>
|
|
<button
|
|
type="button"
|
|
onClick={() => { setIsRegister(!isRegister); setError(""); }}
|
|
className="w-full text-center text-xs text-slate-600 hover:text-cyan-400 transition-colors font-mono cursor-pointer"
|
|
>
|
|
{isRegister ? "Already have clearance? Login" : "Need a badge? Register"}
|
|
</button>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|