feat: add email verification after signup and password reset functionality

src/components/Login.tsx

@@ -12,7 +12,13 @@ export default function Login() {
   const [rememberMe, setRememberMe] = useState(false);
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
-  const { login, signup } = useAuth();
+  const [showForgotPassword, setShowForgotPassword] = useState(false);
+  const [forgotEmail, setForgotEmail] = useState('');
+  const [forgotLoading, setForgotLoading] = useState(false);
+  const [forgotMessage, setForgotMessage] = useState('');
+  const [showVerificationBanner, setShowVerificationBanner] = useState(false);
+  const [verificationSent, setVerificationSent] = useState(false);
+  const { login, signup, sendPasswordReset, sendVerificationEmail } = useAuth();
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -32,6 +38,14 @@ export default function Login() {
       }
       try {
         await signup(email, password, firstName);
+        // Send verification email
+        try {
+          await sendVerificationEmail();
+          setVerificationSent(true);
+          setShowVerificationBanner(true);
+        } catch (err) {
+          console.error('Error sending verification email:', err);
+        }
       } catch (err: unknown) {
         setError(err instanceof Error ? err.message : 'An error occurred');
       }
@@ -51,6 +65,22 @@ export default function Login() {
     setLoading(false);
   };
 
+  const handleForgotPassword = async () => {
+    if (!forgotEmail) {
+      setForgotMessage('Please enter your email address');
+      return;
+    }
+    setForgotLoading(true);
+    setForgotMessage('');
+    try {
+      await sendPasswordReset(forgotEmail);
+      setForgotMessage('Password reset email sent! Check your inbox.');
+    } catch (err: unknown) {
+      setForgotMessage(err instanceof Error ? err.message : 'Failed to send reset email');
+    }
+    setForgotLoading(false);
+  };
+
   return (
     <div className="min-h-screen bg-gradient-to-br from-gray-900 to-black text-white flex items-center justify-center p-4">
       <div className="w-full max-w-md">
@@ -117,17 +147,32 @@ export default function Login() {
             </div>
           )}
           {!isSignup && (
-            <div className="flex items-center">
-              <input
-                type="checkbox"
-                id="rememberMe"
-                checked={rememberMe}
-                onChange={(e) => setRememberMe(e.target.checked)}
-                className="w-4 h-4 rounded border-gray-600 bg-gray-700 text-blue-600 focus:ring-2 focus:ring-blue-500 cursor-pointer"
-              />
-              <label htmlFor="rememberMe" className="ml-2 text-sm text-gray-300 cursor-pointer">
-                Remember me for 15 days
-              </label>
+            <div className="space-y-2">
+              <div className="flex items-center">
+                <input
+                  type="checkbox"
+                  id="rememberMe"
+                  checked={rememberMe}
+                  onChange={(e) => setRememberMe(e.target.checked)}
+                  className="w-4 h-4 rounded border-gray-600 bg-gray-700 text-blue-600 focus:ring-2 focus:ring-blue-500 cursor-pointer"
+                />
+                <label htmlFor="rememberMe" className="ml-2 text-sm text-gray-300 cursor-pointer">
+                  Remember me for 15 days
+                </label>
+              </div>
+              <div className="text-right">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowForgotPassword(true);
+                    setForgotEmail(email);
+                    setForgotMessage('');
+                  }}
+                  className="text-sm text-blue-400 hover:text-blue-300 transition-colors"
+                >
+                  Forgot password?
+                </button>
+              </div>
             </div>
           )}
           <button
@@ -147,6 +192,12 @@ export default function Login() {
               isSignup ? 'Create Account' : 'Sign In'
             )}
           </button>
+          {showVerificationBanner && (
+            <div className="bg-blue-900 border border-blue-700 text-blue-200 px-4 py-3 rounded-lg text-sm">
+              <p className="font-semibold mb-1">✓ Account created!</p>
+              <p>A verification email has been sent. Please check your inbox to verify your email address.</p>
+            </div>
+          )}
           <div className="text-center">
             <button
               type="button"
@@ -163,6 +214,64 @@ export default function Login() {
           </div>
         </form>
       </div>
+
+      {/* Forgot Password Modal */}
+      {showForgotPassword && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-gray-800 rounded-xl p-6 max-w-sm w-full">
+            <h2 className="text-xl font-bold text-white mb-2">Reset Password</h2>
+            <p className="text-gray-400 mb-4">Enter your email and we'll send you a link to reset your password.</p>
+            
+            {forgotMessage && (
+              <div className={`px-4 py-2 rounded-lg mb-4 text-sm ${
+                forgotMessage.includes('sent') 
+                  ? 'bg-green-900 border border-green-700 text-green-200' 
+                  : 'bg-red-900 border border-red-700 text-red-200'
+              }`}>
+                {forgotMessage}
+              </div>
+            )}
+            
+            <input
+              type="email"
+              value={forgotEmail}
+              onChange={(e) => setForgotEmail(e.target.value)}
+              placeholder="Enter your email"
+              className="w-full p-3 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors mb-4"
+            />
+            
+            <div className="flex gap-3">
+              <button
+                onClick={() => {
+                  setShowForgotPassword(false);
+                  setForgotEmail('');
+                  setForgotMessage('');
+                }}
+                className="flex-1 px-4 py-2 rounded-lg bg-gray-700 text-white font-medium hover:bg-gray-600 transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleForgotPassword}
+                disabled={forgotLoading || !forgotEmail}
+                className="flex-1 px-4 py-2 rounded-lg bg-blue-600 text-white font-medium hover:bg-blue-700 disabled:bg-blue-800 disabled:cursor-not-allowed transition-colors flex items-center justify-center"
+              >
+                {forgotLoading ? (
+                  <>
+                    <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    </svg>
+                    Sending...
+                  </>
+                ) : (
+                  'Send Reset Link'
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

src/context/AuthContext.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
-import { User, signInWithEmailAndPassword, signOut, onAuthStateChanged, createUserWithEmailAndPassword, updateProfile, deleteUser } from 'firebase/auth';
+import { User, signInWithEmailAndPassword, signOut, onAuthStateChanged, createUserWithEmailAndPassword, updateProfile, deleteUser, sendEmailVerification, sendPasswordResetEmail } from 'firebase/auth';
 import { auth, db, app } from '@/lib/firebase';
 import { doc, setDoc, query, where, collection, getDocs, deleteDoc } from 'firebase/firestore';
 
@@ -11,6 +11,8 @@ interface AuthContextType {
   signup: (email: string, password: string, firstName?: string) => Promise<void>;
   logout: () => Promise<void>;
   deleteAccount: () => Promise<void>;
+  sendVerificationEmail: () => Promise<void>;
+  sendPasswordReset: (email: string) => Promise<void>;
   loading: boolean;
   isAdmin: boolean;
 }
@@ -106,8 +108,17 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     localStorage.removeItem('rememberMeTimestamp');
   };
 
+  const sendVerificationEmail = async () => {
+    if (!user) throw new Error('No user logged in');
+    await sendEmailVerification(user);
+  };
+
+  const sendPasswordReset = async (email: string) => {
+    await sendPasswordResetEmail(auth, email);
+  };
+
   return (
-    <AuthContext.Provider value={{ user, login, signup, logout, deleteAccount, loading, isAdmin }}>
+    <AuthContext.Provider value={{ user, login, signup, logout, deleteAccount, sendVerificationEmail, sendPasswordReset, loading, isAdmin }}>
       {children}
     </AuthContext.Provider>
   );