Spaces:
Sleeping
Sleeping
| import React, { useState } from 'react'; | |
| import { Button } from './Button'; | |
| import { Input } from './Input'; | |
| import { useAuth } from '../../contexts/AuthContext'; | |
| import { Loader2, Mail, Lock, AlertCircle } from 'lucide-react'; | |
| import { Modal } from './Modal'; | |
| export const AuthModal = ({ isOpen, onClose, onSuccess }) => { | |
| const [isSignIn, setIsSignIn] = useState(true); | |
| const [email, setEmail] = useState(''); | |
| const [password, setPassword] = useState(''); | |
| const [loading, setLoading] = useState(false); | |
| const [error, setError] = useState(null); | |
| const [showSuccess, setShowSuccess] = useState(false); | |
| const { signIn, signUp, signInWithGoogle } = useAuth(); | |
| const handleSubmit = async (e) => { | |
| e.preventDefault(); | |
| setLoading(true); | |
| setError(null); | |
| try { | |
| const result = isSignIn | |
| ? await signIn(email, password) | |
| : await signUp(email, password); | |
| if (result.error) throw new Error(result.error.message || 'Authentication failed'); | |
| // Success handling | |
| if (isSignIn) { | |
| if (onSuccess) onSuccess(); | |
| onClose(); | |
| } else { | |
| setShowSuccess(true); | |
| } | |
| } catch (err) { | |
| console.error('Auth error:', err); | |
| setError(err.message); | |
| } finally { | |
| setLoading(false); | |
| } | |
| }; | |
| const handleGoogleSignIn = async () => { | |
| try { | |
| const result = await signInWithGoogle(); | |
| if (result?.error) throw new Error(result.error.message || 'Google sign-in failed'); | |
| } catch (err) { | |
| console.error('Google Auth error:', err); | |
| setError(err.message); | |
| } | |
| }; | |
| if (showSuccess) { | |
| return ( | |
| <Modal isOpen={isOpen} onClose={onClose} title="Check Your Inbox!"> | |
| <div className="text-center py-4 space-y-4"> | |
| <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto"> | |
| <Mail className="text-blue-600" size={32} /> | |
| </div> | |
| <div> | |
| <p className="font-bold text-lg mb-2">Verification Link Sent</p> | |
| <p className="text-gray-600 mb-4"> | |
| We sent a confirmation link to <span className="font-bold">{email}</span>. | |
| Click it to activate your account and start roasting! | |
| </p> | |
| <p className="text-xs text-gray-400"> | |
| Check your spam folder if you don't see it. | |
| </p> | |
| </div> | |
| <Button onClick={onClose} className="w-full btn-brutal-primary justify-center"> | |
| Got it! | |
| </Button> | |
| </div> | |
| </Modal> | |
| ); | |
| } | |
| return ( | |
| <Modal | |
| isOpen={isOpen} | |
| onClose={onClose} | |
| title={isSignIn ? "Sign In to Roast" : "Join the Roast Club"} | |
| > | |
| <div className="space-y-4"> | |
| {error && ( | |
| <div className="bg-red-50 text-red-600 p-3 text-sm border-l-4 border-red-500 flex items-start gap-2"> | |
| <AlertCircle size={16} className="mt-0.5" /> | |
| <span>{error}</span> | |
| </div> | |
| )} | |
| {/* Google Login */} | |
| <button | |
| type="button" | |
| onClick={handleGoogleSignIn} | |
| className="w-full flex items-center justify-center gap-2 bg-white border-2 border-brutalist-black p-2 font-bold hover:bg-gray-50 transition-colors" | |
| > | |
| <img src="https://www.svgrepo.com/show/475656/google-color.svg" alt="Google" className="w-5 h-5" /> | |
| Continue with Google | |
| </button> | |
| <div className="relative flex py-2 items-center"> | |
| <div className="flex-grow border-t border-gray-300"></div> | |
| <span className="flex-shrink-0 mx-4 text-gray-400 text-xs uppercase font-bold">Or with Email</span> | |
| <div className="flex-grow border-t border-gray-300"></div> | |
| </div> | |
| <form onSubmit={handleSubmit} className="space-y-4"> | |
| <div> | |
| <label className="block text-sm font-bold mb-1">Email</label> | |
| <div className="relative"> | |
| <Mail className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} /> | |
| <Input | |
| type="email" | |
| value={email} | |
| onChange={(e) => setEmail(e.target.value)} | |
| placeholder="you@example.com" | |
| className="pl-10" | |
| required | |
| /> | |
| </div> | |
| </div> | |
| <div> | |
| <label className="block text-sm font-bold mb-1">Password</label> | |
| <div className="relative"> | |
| <Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} /> | |
| <Input | |
| type="password" | |
| value={password} | |
| onChange={(e) => setPassword(e.target.value)} | |
| placeholder="••••••••" | |
| className="pl-10" | |
| required | |
| /> | |
| </div> | |
| </div> | |
| <div className="pt-2"> | |
| <Button | |
| type="submit" | |
| disabled={loading} | |
| className="w-full btn-brutal-primary justify-center" | |
| > | |
| {loading ? <Loader2 className="animate-spin" size={20} /> : (isSignIn ? 'Sign In' : 'Sign Up')} | |
| </Button> | |
| </div> | |
| <div className="text-center text-sm pt-2"> | |
| <span className="text-gray-500"> | |
| {isSignIn ? "Don't have an account? " : "Already have an account? "} | |
| </span> | |
| <button | |
| type="button" | |
| onClick={() => setIsSignIn(!isSignIn)} | |
| className="font-bold underline hover:text-brutalist-red" | |
| > | |
| {isSignIn ? 'Sign Up' : 'Sign In'} | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </Modal> | |
| ); | |
| }; | |