| import React, { useState, useEffect, useRef } from 'react';
|
| import { useAuth } from '../context/AuthContext';
|
|
|
| interface AuthModalProps {
|
| isOpen: boolean;
|
| onClose: () => void;
|
| }
|
|
|
| export const AuthModal: React.FC<AuthModalProps> = ({ isOpen, onClose }) => {
|
| const { signIn, signInEmail, signUpEmail, authError, clearAuthError } = useAuth();
|
| const [authMode, setAuthMode] = useState<'signin' | 'signup' | 'verification_sent'>('signin');
|
| const [email, setEmail] = useState('');
|
| const [password, setPassword] = useState('');
|
| const [displayName, setDisplayName] = useState('');
|
| const [loadingGoogle, setLoadingGoogle] = useState(false);
|
| const [loadingEmail, setLoadingEmail] = useState(false);
|
| const [localError, setLocalError] = useState<string | null>(null);
|
| const [successInfo, setSuccessInfo] = useState<string | null>(null);
|
| const modalContentRef = useRef<HTMLDivElement>(null);
|
|
|
|
|
| useEffect(() => {
|
| if (!isOpen) return;
|
| const handleKeyDown = (e: KeyboardEvent) => {
|
| if (e.key === 'Escape') {
|
| onClose();
|
| }
|
| };
|
| window.addEventListener('keydown', handleKeyDown);
|
| return () => window.removeEventListener('keydown', handleKeyDown);
|
| }, [isOpen, onClose]);
|
|
|
| if (!isOpen) return null;
|
|
|
| const handleGoogleAuth = async () => {
|
| setLoadingGoogle(true);
|
| setLocalError(null);
|
| setSuccessInfo(null);
|
| clearAuthError();
|
| try {
|
| await signIn();
|
| onClose();
|
| } catch (err: any) {
|
| if (err?.code === 'auth/unauthorized-domain' || err?.message?.includes('authorized')) {
|
| setLocalError(
|
| 'Google Sign-in: This domain is not listed in your Firebase Authorized Domains. You can use Email Sign-in below or add your domain in Firebase Console.'
|
| );
|
| } else {
|
| setLocalError(err?.message || 'Google sign-in popup was closed.');
|
| }
|
| } finally {
|
| setLoadingGoogle(false);
|
| }
|
| };
|
|
|
| const handleEmailAuth = async (e: React.FormEvent) => {
|
| e.preventDefault();
|
| if (!email.trim() || !password.trim()) {
|
| setLocalError('Please enter both email and password.');
|
| return;
|
| }
|
|
|
| setLoadingEmail(true);
|
| setLocalError(null);
|
| setSuccessInfo(null);
|
| clearAuthError();
|
|
|
| try {
|
| if (authMode === 'signup') {
|
| await signUpEmail(email.trim(), password, displayName.trim());
|
| setAuthMode('verification_sent');
|
| setSuccessInfo(
|
| `Account created for ${email.trim()}! Please open your email inbox, click the verification link, and then sign in.`
|
| );
|
| } else {
|
| await signInEmail(email.trim(), password);
|
| onClose();
|
| }
|
| } catch (err: any) {
|
| if (err?.code === 'auth/verification-sent') {
|
| setAuthMode('verification_sent');
|
| setSuccessInfo(err.message);
|
| } else if (err?.code === 'auth/unverified-email') {
|
| setAuthMode('verification_sent');
|
| setSuccessInfo(err.message);
|
| } else {
|
| setLocalError(err?.message || 'Authentication failed. Please check your details.');
|
| }
|
| } finally {
|
| setLoadingEmail(false);
|
| }
|
| };
|
|
|
| return (
|
| <div
|
| onClick={onClose}
|
| className="fixed inset-0 z-50 bg-black/60 backdrop-blur-xs flex items-center justify-center p-4 animate-in fade-in duration-150 cursor-pointer"
|
| >
|
| <div
|
| ref={modalContentRef}
|
| onClick={(e) => e.stopPropagation()}
|
| className="bg-white rounded-2xl max-w-md w-full shadow-2xl border border-[#CBD5E1] overflow-hidden flex flex-col cursor-default"
|
| >
|
| {/* Header */}
|
| <div className="px-6 py-5 bg-[#0F172A] text-white flex justify-between items-center">
|
| <div className="flex items-center gap-2.5">
|
| <span className="material-symbols-outlined text-[#006c4a] text-[24px]">gavel</span>
|
| <div>
|
| <h3 className="font-headline font-bold text-[18px]">
|
| {authMode === 'signin' ? 'Sign in to CaseLoop' : 'Create Free Account'}
|
| </h3>
|
| <p className="text-[12px] text-slate-300">Sync your cases & legal notice drafts</p>
|
| </div>
|
| </div>
|
| <button
|
| onClick={onClose}
|
| className="text-slate-400 hover:text-white transition-colors cursor-pointer p-1"
|
| >
|
| <span className="material-symbols-outlined text-[20px]">close</span>
|
| </button>
|
| </div>
|
|
|
| {/* Body */}
|
| <div className="p-6 flex flex-col gap-4">
|
| {(localError || authError) && (
|
| <div className="bg-[#FEF2F2] border border-[#FCA5A5] rounded-xl p-3.5 text-[12.5px] text-[#991B1B] flex items-start gap-2.5">
|
| <span className="material-symbols-outlined text-[18px] text-[#DC2626] shrink-0 mt-0.5">
|
| info
|
| </span>
|
| <div className="flex-grow">
|
| <p className="font-semibold">Notice</p>
|
| <p className="mt-0.5 leading-relaxed">{localError || authError}</p>
|
| </div>
|
| </div>
|
| )}
|
|
|
| {authMode === 'verification_sent' ? (
|
| <div className="flex flex-col items-center text-center gap-3 py-2 animate-in fade-in duration-200">
|
| <div className="w-16 h-16 rounded-full bg-[#DCFCE7] text-[#006c4a] flex items-center justify-center">
|
| <span className="material-symbols-outlined text-[32px]">mark_email_unread</span>
|
| </div>
|
| <h4 className="font-headline font-bold text-[18px] text-[#0F172A]">
|
| Check Your Inbox to Verify
|
| </h4>
|
| <p className="text-[13px] text-[#475569] leading-relaxed max-w-sm">
|
| {successInfo ||
|
| `We've sent a verification link to ${email || 'your email'}. Please click the link to activate your account before logging in.`}
|
| </p>
|
|
|
| <div className="w-full bg-[#F8FAFC] border border-[#E2E8F0] p-3.5 rounded-xl text-left text-[12px] text-[#64748B] flex flex-col gap-1.5 mt-1">
|
| <div className="flex items-center gap-2 text-[#0F172A] font-semibold">
|
| <span className="material-symbols-outlined text-[16px] text-[#006c4a]">check_circle</span>
|
| <span>1. Open the verification email</span>
|
| </div>
|
| <div className="flex items-center gap-2 text-[#0F172A] font-semibold">
|
| <span className="material-symbols-outlined text-[16px] text-[#006c4a]">check_circle</span>
|
| <span>2. Click the confirmation link</span>
|
| </div>
|
| <div className="flex items-center gap-2 text-[#0F172A] font-semibold">
|
| <span className="material-symbols-outlined text-[16px] text-[#006c4a]">check_circle</span>
|
| <span>3. Return here and Sign In</span>
|
| </div>
|
| </div>
|
|
|
| <div className="flex flex-col w-full gap-2 mt-2">
|
| <button
|
| type="button"
|
| onClick={() => {
|
| setAuthMode('signin');
|
| setLocalError(null);
|
| setSuccessInfo(null);
|
| }}
|
| className="w-full py-3 bg-[#006c4a] hover:bg-[#005137] text-white font-bold rounded-xl text-[14px] transition-all cursor-pointer shadow-md"
|
| >
|
| I have verified my email — Sign In
|
| </button>
|
| <button
|
| type="button"
|
| onClick={async () => {
|
| if (email.trim() && password.trim()) {
|
| try {
|
| setLoadingEmail(true);
|
| await signInEmail(email.trim(), password);
|
| } catch (err: any) {
|
| setLocalError('Verification email resent to ' + email.trim());
|
| } finally {
|
| setLoadingEmail(false);
|
| }
|
| } else {
|
| setAuthMode('signin');
|
| }
|
| }}
|
| className="w-full py-2.5 bg-[#F1F5F9] hover:bg-[#E2E8F0] text-[#0F172A] font-semibold rounded-xl text-[13px] transition-all cursor-pointer"
|
| >
|
| Resend Verification Email
|
| </button>
|
| </div>
|
| </div>
|
| ) : (
|
| <>
|
| {/* Option 1: Continue with Google */}
|
| <button
|
| onClick={handleGoogleAuth}
|
| disabled={loadingGoogle || loadingEmail}
|
| className="w-full py-3 px-4 bg-white hover:bg-[#F8FAFC] border-2 border-[#CBD5E1] hover:border-[#0F172A] text-[#0F172A] font-semibold rounded-xl text-[14px] flex items-center justify-center gap-3 transition-all cursor-pointer shadow-xs disabled:opacity-50"
|
| >
|
| {loadingGoogle ? (
|
| <>
|
| <span className="material-symbols-outlined text-[18px] animate-spin">sync</span>
|
| <span>Connecting to Google...</span>
|
| </>
|
| ) : (
|
| <>
|
| <svg className="w-4 h-4" viewBox="0 0 24 24">
|
| <path
|
| fill="#4285F4"
|
| d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
|
| />
|
| <path
|
| fill="#34A853"
|
| d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
|
| />
|
| <path
|
| fill="#FBBC05"
|
| d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.06H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.94l2.85-2.22.81-.63z"
|
| />
|
| <path
|
| fill="#EA4335"
|
| d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.06l3.66 2.84c.87-2.6 3.3-4.52 6.16-4.52z"
|
| />
|
| </svg>
|
| <span>Continue with Google</span>
|
| </>
|
| )}
|
| </button>
|
|
|
| <div className="flex items-center my-1">
|
| <div className="flex-grow border-t border-[#E2E8F0]"></div>
|
| <span className="px-3 text-[11px] font-bold text-[#94A3B8] uppercase tracking-wider">
|
| OR EMAIL LOGIN
|
| </span>
|
| <div className="flex-grow border-t border-[#E2E8F0]"></div>
|
| </div>
|
|
|
| {/* Toggle between Sign in and Sign up */}
|
| <div className="flex bg-[#F1F5F9] p-1 rounded-xl">
|
| <button
|
| type="button"
|
| onClick={() => {
|
| setAuthMode('signin');
|
| setLocalError(null);
|
| clearAuthError();
|
| }}
|
| className={`flex-1 py-1.5 text-[13px] font-semibold rounded-lg transition-all cursor-pointer ${
|
| authMode === 'signin'
|
| ? 'bg-white text-[#0F172A] shadow-xs'
|
| : 'text-[#64748B] hover:text-[#0F172A]'
|
| }`}
|
| >
|
| Sign In
|
| </button>
|
| <button
|
| type="button"
|
| onClick={() => {
|
| setAuthMode('signup');
|
| setLocalError(null);
|
| clearAuthError();
|
| }}
|
| className={`flex-1 py-1.5 text-[13px] font-semibold rounded-lg transition-all cursor-pointer ${
|
| authMode === 'signup'
|
| ? 'bg-white text-[#0F172A] shadow-xs'
|
| : 'text-[#64748B] hover:text-[#0F172A]'
|
| }`}
|
| >
|
| Create Account
|
| </button>
|
| </div>
|
|
|
| {/* Option 2: Email Form */}
|
| <form onSubmit={handleEmailAuth} className="flex flex-col gap-3">
|
| {authMode === 'signup' && (
|
| <div>
|
| <label className="block text-[12px] font-semibold text-[#475569] mb-1">
|
| Full Name
|
| </label>
|
| <input
|
| type="text"
|
| value={displayName}
|
| onChange={(e) => setDisplayName(e.target.value)}
|
| placeholder="e.g. John Doe"
|
| className="w-full bg-white border border-[#CBD5E1] rounded-xl px-3.5 py-2.5 text-[14px] text-[#0F172A] outline-none focus:border-[#006c4a]"
|
| />
|
| </div>
|
| )}
|
|
|
| <div>
|
| <label className="block text-[12px] font-semibold text-[#475569] mb-1">
|
| Email Address
|
| </label>
|
| <input
|
| type="email"
|
| value={email}
|
| onChange={(e) => setEmail(e.target.value)}
|
| placeholder="name@example.com"
|
| required
|
| className="w-full bg-white border border-[#CBD5E1] rounded-xl px-3.5 py-2.5 text-[14px] text-[#0F172A] outline-none focus:border-[#006c4a]"
|
| />
|
| </div>
|
|
|
| <div>
|
| <label className="block text-[12px] font-semibold text-[#475569] mb-1">
|
| Password
|
| </label>
|
| <input
|
| type="password"
|
| value={password}
|
| onChange={(e) => setPassword(e.target.value)}
|
| placeholder="••••••••"
|
| required
|
| minLength={6}
|
| className="w-full bg-white border border-[#CBD5E1] rounded-xl px-3.5 py-2.5 text-[14px] text-[#0F172A] outline-none focus:border-[#006c4a]"
|
| />
|
| </div>
|
|
|
| <button
|
| type="submit"
|
| disabled={loadingEmail || loadingGoogle}
|
| className="w-full py-3 px-4 bg-[#006c4a] hover:bg-[#005137] text-white font-bold rounded-xl text-[14px] flex items-center justify-center gap-2 transition-all cursor-pointer shadow-md mt-1 disabled:opacity-50"
|
| >
|
| {loadingEmail ? (
|
| <>
|
| <span className="material-symbols-outlined text-[18px] animate-spin">sync</span>
|
| <span>{authMode === 'signin' ? 'Signing In...' : 'Creating Account...'}</span>
|
| </>
|
| ) : (
|
| <span>{authMode === 'signin' ? 'Sign In with Email' : 'Create Free Account'}</span>
|
| )}
|
| </button>
|
| </form>
|
| </>
|
| )}
|
| </div>
|
|
|
| {}
|
| <div className="px-6 py-3 bg-[#F8FAFC] border-t border-[#E2E8F0] flex items-center justify-between text-[12px] text-[#64748B]">
|
| <span>Protected with Firebase Auth</span>
|
| <button
|
| onClick={onClose}
|
| className="text-[#475569] hover:text-[#0F172A] font-semibold cursor-pointer"
|
| >
|
| Cancel
|
| </button>
|
| </div>
|
| </div>
|
| </div>
|
| );
|
| };
|
|
|
