201 lines
9.7 KiB
TypeScript
201 lines
9.7 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { supabase } from '../services/supabaseClient';
|
|
import { LoadingSpinner } from './LoadingSpinner';
|
|
import { XMarkIcon } from './icons/XMarkIcon';
|
|
import { GoogleIcon } from './icons/GoogleIcon';
|
|
import { GithubIcon } from './icons/GithubIcon';
|
|
|
|
interface AuthModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
type AuthView = 'signIn' | 'signUp' | 'resetPassword';
|
|
|
|
export const AuthModal: React.FC<AuthModalProps> = ({ isOpen, onClose }) => {
|
|
const [view, setView] = useState<AuthView>('signIn');
|
|
const [email, setEmail] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [message, setMessage] = useState<string | null>(null);
|
|
|
|
const clearState = () => {
|
|
setError(null);
|
|
setMessage(null);
|
|
setEmail('');
|
|
setPassword('');
|
|
}
|
|
|
|
const handleViewChange = (newView: AuthView) => {
|
|
setView(newView);
|
|
clearState();
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
setError(null);
|
|
setMessage(null);
|
|
|
|
try {
|
|
if (view === 'signUp') {
|
|
const { error } = await supabase.auth.signUp({ email, password });
|
|
if (error) throw error;
|
|
setMessage('Check your email for the confirmation link!');
|
|
} else {
|
|
const { error } = await supabase.auth.signInWithPassword({ email, password });
|
|
if (error) throw error;
|
|
onClose();
|
|
}
|
|
} catch (err: any) {
|
|
setError(err.message || 'An unexpected error occurred.');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handlePasswordReset = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
setError(null);
|
|
setMessage(null);
|
|
try {
|
|
const { error } = await supabase.auth.resetPasswordForEmail(email, {
|
|
redirectTo: window.location.href,
|
|
});
|
|
if (error) throw error;
|
|
setMessage('Password reset link sent! Check your email.');
|
|
} catch(err: any) {
|
|
setError(err.message || 'An unexpected error occurred.');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleOAuthSignIn = async (provider: 'google' | 'github') => {
|
|
setLoading(true);
|
|
setError(null);
|
|
const { error } = await supabase.auth.signInWithOAuth({
|
|
provider,
|
|
options: {
|
|
redirectTo: window.location.href,
|
|
}
|
|
});
|
|
if (error) {
|
|
setError(error.message);
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 bg-black bg-opacity-60 z-50 flex justify-center items-center p-4"
|
|
onClick={onClose}
|
|
aria-modal="true"
|
|
role="dialog"
|
|
>
|
|
<div
|
|
className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-md relative"
|
|
onClick={e => e.stopPropagation()}
|
|
>
|
|
<button
|
|
onClick={onClose}
|
|
className="absolute top-3 right-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors"
|
|
aria-label="Close authentication modal"
|
|
>
|
|
<XMarkIcon className="w-6 h-6" />
|
|
</button>
|
|
|
|
<div className="p-8">
|
|
{view !== 'resetPassword' && (
|
|
<div className="flex border-b border-gray-200 dark:border-gray-700 mb-6">
|
|
<button
|
|
onClick={() => handleViewChange('signIn')}
|
|
className={`flex-1 py-3 text-sm font-semibold text-center transition-colors ${view === 'signIn' ? 'text-brand-primary border-b-2 border-brand-primary' : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'}`}
|
|
>
|
|
Sign In
|
|
</button>
|
|
<button
|
|
onClick={() => handleViewChange('signUp')}
|
|
className={`flex-1 py-3 text-sm font-semibold text-center transition-colors ${view === 'signUp' ? 'text-brand-primary border-b-2 border-brand-primary' : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'}`}
|
|
>
|
|
Sign Up
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{view === 'resetPassword' ? (
|
|
<>
|
|
<h2 className="text-2xl font-bold text-center text-gray-800 dark:text-white mb-2">Reset Password</h2>
|
|
<p className="text-center text-gray-500 dark:text-gray-400 mb-6 text-sm">Enter your email to receive a reset link.</p>
|
|
<form onSubmit={handlePasswordReset} className="space-y-4">
|
|
<div>
|
|
<label htmlFor="email-reset" className="block text-sm font-medium text-gray-700 dark:text-gray-300">Email address</label>
|
|
<input id="email-reset" type="email" value={email} onChange={e => setEmail(e.target.value)} required className="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm" placeholder="you@example.com"/>
|
|
</div>
|
|
{error && <p className="text-sm text-red-600 dark:text-red-400 text-center">{error}</p>}
|
|
{message && <p className="text-sm text-green-600 dark:text-green-400 text-center">{message}</p>}
|
|
<button type="submit" disabled={loading || !!message} className="w-full bg-brand-secondary hover:bg-brand-dark disabled:bg-gray-400 text-white font-bold py-2.5 px-4 rounded-lg flex items-center justify-center">
|
|
{loading ? <div className="w-5 h-5"><LoadingSpinner /></div> : 'Send Reset Link'}
|
|
</button>
|
|
<button type="button" onClick={() => handleViewChange('signIn')} className="w-full text-center text-sm text-gray-500 dark:text-gray-400 hover:underline">Back to Sign In</button>
|
|
</form>
|
|
</>
|
|
) : (
|
|
<>
|
|
<h2 className="text-2xl font-bold text-center text-gray-800 dark:text-white mb-2">
|
|
{view === 'signUp' ? 'Create an Account' : 'Welcome Back'}
|
|
</h2>
|
|
<p className="text-center text-gray-500 dark:text-gray-400 mb-6 text-sm">
|
|
{view === 'signUp' ? 'to start personalizing your experience.' : 'to access your watched items and lists.'}
|
|
</p>
|
|
|
|
<div className="space-y-3">
|
|
<button onClick={() => handleOAuthSignIn('google')} className="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700">
|
|
<GoogleIcon className="w-5 h-5 mr-3" />
|
|
Continue with Google
|
|
</button>
|
|
<button onClick={() => handleOAuthSignIn('github')} className="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700">
|
|
<GithubIcon className="w-5 h-5 mr-3" />
|
|
Continue with GitHub
|
|
</button>
|
|
</div>
|
|
|
|
<div className="my-6 flex items-center">
|
|
<div className="flex-grow border-t border-gray-300 dark:border-gray-600"></div>
|
|
<span className="flex-shrink mx-4 text-gray-400 text-sm">OR</span>
|
|
<div className="flex-grow border-t border-gray-300 dark:border-gray-600"></div>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300">Email address</label>
|
|
<input id="email" type="email" value={email} onChange={e => setEmail(e.target.value)} required className="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-brand-primary focus:border-brand-primary" placeholder="you@example.com" />
|
|
</div>
|
|
<div>
|
|
<div className="flex justify-between">
|
|
<label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
|
|
{view === 'signIn' && (
|
|
<button type="button" onClick={() => handleViewChange('resetPassword')} className="text-sm text-brand-primary hover:underline">Forgot password?</button>
|
|
)}
|
|
</div>
|
|
<input id="password" type="password" value={password} onChange={e => setPassword(e.target.value)} required className="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-brand-primary focus:border-brand-primary" placeholder="••••••••" />
|
|
</div>
|
|
{error && <p className="text-sm text-red-600 dark:text-red-400 text-center">{error}</p>}
|
|
{message && <p className="text-sm text-green-600 dark:text-green-400 text-center">{message}</p>}
|
|
<button type="submit" disabled={loading || (view === 'signUp' && !!message)} className="w-full bg-brand-secondary hover:bg-brand-dark disabled:bg-gray-400 disabled:cursor-not-allowed text-white font-bold py-2.5 px-4 rounded-lg transition-colors duration-300 flex items-center justify-center">
|
|
{loading ? <div className="w-5 h-5"><LoadingSpinner /></div> : (view === 'signUp' ? 'Create Account' : 'Sign In')}
|
|
</button>
|
|
</form>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|