114 lines
3.8 KiB
TypeScript
114 lines
3.8 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { Button } from './ui/button';
|
|
import { Input } from './ui/input';
|
|
import { useAuth } from './AuthProvider';
|
|
import { Lock, User, AlertCircle } from 'lucide-react';
|
|
import { useRegisterModal } from './modal/ModalStackProvider';
|
|
|
|
interface AuthModalProps {
|
|
isOpen: boolean;
|
|
}
|
|
|
|
export function AuthModal({ isOpen }: AuthModalProps) {
|
|
useRegisterModal(isOpen, { id: 'auth-modal', allowEscape: false, onClose: () => null });
|
|
const { login } = useAuth();
|
|
const [username, setUsername] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setIsLoading(true);
|
|
setError(null);
|
|
|
|
const success = await login(username, password);
|
|
|
|
if (!success) {
|
|
setError('Invalid username or password');
|
|
}
|
|
|
|
setIsLoading(false);
|
|
};
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 backdrop-blur-sm bg-black/50 flex items-center justify-center z-50 p-4">
|
|
<div className="bg-card rounded-lg shadow-xl max-w-md w-full border border-border">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-center p-6 border-b border-border">
|
|
<div className="flex items-center gap-3">
|
|
<Lock className="h-8 w-8 text-primary" />
|
|
<h2 className="text-2xl font-bold text-card-foreground">Authentication Required</h2>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="p-6">
|
|
<p className="text-muted-foreground text-center mb-6">
|
|
Please enter your credentials to access the application.
|
|
</p>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label htmlFor="username" className="block text-sm font-medium text-foreground mb-2">
|
|
Username
|
|
</label>
|
|
<div className="relative">
|
|
<User className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
id="username"
|
|
type="text"
|
|
placeholder="Enter your username"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
disabled={isLoading}
|
|
className="pl-10"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="password" className="block text-sm font-medium text-foreground mb-2">
|
|
Password
|
|
</label>
|
|
<div className="relative">
|
|
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
id="password"
|
|
type="password"
|
|
placeholder="Enter your password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
disabled={isLoading}
|
|
className="pl-10"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="flex items-center gap-2 p-3 bg-error/10 text-error-foreground border border-error/20 rounded-md">
|
|
<AlertCircle className="h-4 w-4" />
|
|
<span className="text-sm">{error}</span>
|
|
</div>
|
|
)}
|
|
|
|
<Button
|
|
type="submit"
|
|
disabled={isLoading || !username.trim() || !password.trim()}
|
|
className="w-full"
|
|
>
|
|
{isLoading ? 'Signing In...' : 'Sign In'}
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|