| import { useState } from 'react'; |
| import { Mail, Lock, X, LogIn } from 'lucide-react'; |
| import { LoginCredentials } from '../types/auth'; |
|
|
| interface LoginModalProps { |
| isOpen: boolean; |
| onClose: () => void; |
| onLogin: (credentials: LoginCredentials) => void; |
| isLoading?: boolean; |
| error?: string | null; |
| } |
|
|
| export const LoginModal = ({ isOpen, onClose, onLogin, isLoading, error }: LoginModalProps) => { |
| const [email, setEmail] = useState(''); |
| const [password, setPassword] = useState(''); |
|
|
| const handleSubmit = (e: React.FormEvent) => { |
| e.preventDefault(); |
| onLogin({ email, password }); |
| }; |
|
|
| if (!isOpen) return null; |
|
|
| return ( |
| <div className="fixed inset-0 z-50 flex items-center justify-center p-4"> |
| <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} /> |
| <div className="relative glassmorphism rounded-2xl p-8 w-full max-w-md animate-slide-up"> |
| <div className="flex items-center justify-between mb-6"> |
| <div className="flex items-center gap-3"> |
| <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center"> |
| <LogIn className="w-5 h-5 text-white" /> |
| </div> |
| <div> |
| <h2 className="text-2xl font-bold text-foreground">Login</h2> |
| <p className="text-sm text-muted-foreground">Access your account</p> |
| </div> |
| </div> |
| <button |
| onClick={onClose} |
| className="p-2 rounded-lg hover:bg-accent/50 transition-colors" |
| > |
| <X className="w-5 h-5 text-muted-foreground" /> |
| </button> |
| </div> |
| |
| <form onSubmit={handleSubmit} className="space-y-4"> |
| <div> |
| <label className="block text-sm font-medium text-foreground mb-2"> |
| Email |
| </label> |
| <div className="relative"> |
| <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" /> |
| <input |
| type="email" |
| value={email} |
| onChange={(e) => setEmail(e.target.value)} |
| placeholder="your@email.com" |
| className="w-full pl-10 pr-4 py-3 rounded-lg bg-background border border-input text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-all" |
| required |
| /> |
| </div> |
| </div> |
| |
| <div> |
| <label className="block text-sm font-medium text-foreground mb-2"> |
| Password |
| </label> |
| <div className="relative"> |
| <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" /> |
| <input |
| type="password" |
| value={password} |
| onChange={(e) => setPassword(e.target.value)} |
| placeholder="••••••••" |
| className="w-full pl-10 pr-4 py-3 rounded-lg bg-background border border-input text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-all" |
| required |
| /> |
| </div> |
| </div> |
| |
| {error && ( |
| <div className="p-3 rounded-lg bg-red-500/10 border border-red-500/20 text-red-500 text-sm"> |
| {error} |
| </div> |
| )} |
| |
| <button |
| type="submit" |
| disabled={isLoading} |
| className="w-full py-3 rounded-lg bg-gradient-to-r from-blue-500 to-purple-600 text-white font-medium hover:from-blue-600 hover:to-purple-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2" |
| > |
| {isLoading ? ( |
| <> |
| <div className="w-4 h-4 rounded-full border-2 border-white border-t-transparent animate-spin" /> |
| Logging in... |
| </> |
| ) : ( |
| <> |
| <LogIn className="w-4 h-4" /> |
| Login |
| </> |
| )} |
| </button> |
| </form> |
|
|
| <div className="mt-6 pt-6 border-t border-border"> |
| <p className="text-xs text-muted-foreground text-center"> |
| Admin: tradewithoutstrategy@gmail.com |
| </p> |
| </div> |
| </div> |
| </div> |
| ); |
| }; |
|
|
