feat: add first name capture at signup and multi-step delete account confirmation

src/components/AboutPage.tsx

@@ -8,8 +8,14 @@ interface AboutPageProps {
 }
 
 export default function AboutPage({ userEmail }: AboutPageProps) {
-  const { logout } = useAuth();
-  const [showConfirm, setShowConfirm] = useState(false);
+  const { logout, deleteAccount } = useAuth();
+  const [showLogoutConfirm, setShowLogoutConfirm] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [deleteStep, setDeleteStep] = useState(0); // 0=initial, 1=first confirm, 2=second confirm, 3=type DELETE, 4=type email
+  const [deleteConfirmText, setDeleteConfirmText] = useState('');
+  const [deleteEmail, setDeleteEmail] = useState('');
+  const [deleteLoading, setDeleteLoading] = useState(false);
+  const [deleteError, setDeleteError] = useState('');
 
   return (
     <div className="min-h-screen bg-gradient-to-b from-slate-900 to-slate-800 p-4 pb-32 pt-8">
@@ -63,26 +69,38 @@ export default function AboutPage({ userEmail }: AboutPageProps) {
             </div>
           </div>
 
-          {/* Logout Section */}
-          <div>
+          {/* Logout and Delete Section */}
+          <div className="space-y-3">
             <button
-              onClick={() => setShowConfirm(true)}
+              onClick={() => setShowLogoutConfirm(true)}
               className="w-full px-4 py-3 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-colors"
             >
               Logout
             </button>
+            <button
+              onClick={() => {
+                setShowDeleteDialog(true);
+                setDeleteStep(0);
+                setDeleteConfirmText('');
+                setDeleteEmail('');
+                setDeleteError('');
+              }}
+              className="w-full px-4 py-3 bg-red-900 hover:bg-red-800 text-red-200 font-medium rounded-lg transition-colors border border-red-700"
+            >
+              Delete Account
+            </button>
           </div>
         </div>
 
         {/* Logout Confirmation Modal */}
-        {showConfirm && (
+        {showLogoutConfirm && (
           <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
             <div className="bg-slate-800 rounded-xl p-6 max-w-sm w-full">
               <h2 className="text-xl font-bold text-white mb-2">Logout?</h2>
               <p className="text-slate-400 mb-6">Are you sure you want to logout?</p>
               <div className="flex gap-3">
                 <button
-                  onClick={() => setShowConfirm(false)}
+                  onClick={() => setShowLogoutConfirm(false)}
                   className="flex-1 px-4 py-2 rounded-lg bg-slate-700 text-white font-medium hover:bg-slate-600 transition-colors"
                 >
                   Cancel
@@ -97,6 +115,161 @@ export default function AboutPage({ userEmail }: AboutPageProps) {
             </div>
           </div>
         )}
+
+        {/* Delete Account Multi-Step Modal */}
+        {showDeleteDialog && (
+          <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+            <div className="bg-slate-800 rounded-xl p-6 max-w-sm w-full">
+              {deleteStep === 0 && (
+                <>
+                  <h2 className="text-xl font-bold text-red-400 mb-2">⚠️ Delete Account?</h2>
+                  <p className="text-slate-300 mb-2 font-semibold">This action cannot be undone.</p>
+                  <p className="text-slate-400 mb-6 text-sm">All your prayers, reflections, and account data will be permanently deleted.</p>
+                  <div className="flex gap-3">
+                    <button
+                      onClick={() => setShowDeleteDialog(false)}
+                      className="flex-1 px-4 py-2 rounded-lg bg-slate-700 text-white font-medium hover:bg-slate-600 transition-colors"
+                    >
+                      Cancel
+                    </button>
+                    <button
+                      onClick={() => setDeleteStep(1)}
+                      className="flex-1 px-4 py-2 rounded-lg bg-red-600 text-white font-medium hover:bg-red-700 transition-colors"
+                    >
+                      Continue
+                    </button>
+                  </div>
+                </>
+              )}
+
+              {deleteStep === 1 && (
+                <>
+                  <h2 className="text-xl font-bold text-red-400 mb-2">Are you absolutely sure?</h2>
+                  <p className="text-slate-400 mb-6">You will lose all your prayers and data. This is permanent.</p>
+                  <div className="flex gap-3">
+                    <button
+                      onClick={() => setDeleteStep(0)}
+                      className="flex-1 px-4 py-2 rounded-lg bg-slate-700 text-white font-medium hover:bg-slate-600 transition-colors"
+                    >
+                      Cancel
+                    </button>
+                    <button
+                      onClick={() => setDeleteStep(2)}
+                      className="flex-1 px-4 py-2 rounded-lg bg-red-600 text-white font-medium hover:bg-red-700 transition-colors"
+                    >
+                      I'm Sure
+                    </button>
+                  </div>
+                </>
+              )}
+
+              {deleteStep === 2 && (
+                <>
+                  <h2 className="text-xl font-bold text-red-400 mb-2">Type DELETE to confirm</h2>
+                  <p className="text-slate-400 mb-4">Enter the word "DELETE" to proceed:</p>
+                  <input
+                    type="text"
+                    value={deleteConfirmText}
+                    onChange={(e) => setDeleteConfirmText(e.target.value.toUpperCase())}
+                    placeholder="Type DELETE"
+                    className="w-full p-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 mb-4 focus:ring-2 focus:ring-red-500 focus:border-transparent"
+                  />
+                  <div className="flex gap-3">
+                    <button
+                      onClick={() => setDeleteStep(1)}
+                      className="flex-1 px-4 py-2 rounded-lg bg-slate-700 text-white font-medium hover:bg-slate-600 transition-colors"
+                    >
+                      Back
+                    </button>
+                    <button
+                      onClick={() => deleteConfirmText === 'DELETE' ? setDeleteStep(3) : setDeleteError('Please type DELETE exactly')}
+                      disabled={deleteConfirmText !== 'DELETE'}
+                      className="flex-1 px-4 py-2 rounded-lg bg-red-600 text-white font-medium hover:bg-red-700 disabled:bg-red-900 disabled:cursor-not-allowed transition-colors"
+                    >
+                      Continue
+                    </button>
+                  </div>
+                  {deleteError && <p className="text-red-400 text-sm mt-2">{deleteError}</p>}
+                </>
+              )}
+
+              {deleteStep === 3 && (
+                <>
+                  <h2 className="text-xl font-bold text-red-400 mb-2">Confirm your email</h2>
+                  <p className="text-slate-400 mb-4">Enter your email to verify:</p>
+                  <input
+                    type="email"
+                    value={deleteEmail}
+                    onChange={(e) => setDeleteEmail(e.target.value)}
+                    placeholder="Enter your email"
+                    className="w-full p-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 mb-4 focus:ring-2 focus:ring-red-500 focus:border-transparent"
+                  />
+                  <div className="flex gap-3">
+                    <button
+                      onClick={() => setDeleteStep(2)}
+                      className="flex-1 px-4 py-2 rounded-lg bg-slate-700 text-white font-medium hover:bg-slate-600 transition-colors"
+                    >
+                      Back
+                    </button>
+                    <button
+                      onClick={() => deleteEmail === userEmail ? setDeleteStep(4) : setDeleteError('Email does not match')}
+                      disabled={!deleteEmail}
+                      className="flex-1 px-4 py-2 rounded-lg bg-red-600 text-white font-medium hover:bg-red-700 disabled:bg-red-900 disabled:cursor-not-allowed transition-colors"
+                    >
+                      Continue
+                    </button>
+                  </div>
+                  {deleteError && <p className="text-red-400 text-sm mt-2">{deleteError}</p>}
+                </>
+              )}
+
+              {deleteStep === 4 && (
+                <>
+                  <h2 className="text-xl font-bold text-red-400 mb-2">Final confirmation</h2>
+                  <p className="text-slate-400 mb-4">Check this box to confirm you understand your account will be permanently deleted:</p>
+                  <div className="bg-slate-700 p-3 rounded-lg mb-4">
+                    <label className="flex items-center gap-3 cursor-pointer">
+                      <input
+                        type="checkbox"
+                        checked={deleteConfirmText === 'CONFIRM'}
+                        onChange={(e) => setDeleteConfirmText(e.target.checked ? 'CONFIRM' : '')}
+                        className="w-5 h-5 rounded border-slate-600 bg-slate-600 text-red-600 focus:ring-2 focus:ring-red-500 cursor-pointer"
+                      />
+                      <span className="text-slate-300 text-sm">
+                        I understand this is permanent and cannot be undone
+                      </span>
+                    </label>
+                  </div>
+                  <div className="flex gap-3">
+                    <button
+                      onClick={() => setDeleteStep(3)}
+                      className="flex-1 px-4 py-2 rounded-lg bg-slate-700 text-white font-medium hover:bg-slate-600 transition-colors"
+                    >
+                      Back
+                    </button>
+                    <button
+                      onClick={async () => {
+                        setDeleteLoading(true);
+                        setDeleteError('');
+                        try {
+                          await deleteAccount();
+                        } catch (err: unknown) {
+                          setDeleteError(err instanceof Error ? err.message : 'Failed to delete account');
+                          setDeleteLoading(false);
+                        }
+                      }}
+                      disabled={deleteConfirmText !== 'CONFIRM' || deleteLoading}
+                      className="flex-1 px-4 py-2 rounded-lg bg-red-700 text-white font-bold hover:bg-red-800 disabled:bg-red-900 disabled:cursor-not-allowed transition-colors"
+                    >
+                      {deleteLoading ? 'Deleting...' : 'Delete Account'}
+                    </button>
+                  </div>
+                  {deleteError && <p className="text-red-400 text-sm mt-2">{deleteError}</p>}
+                </>
+              )}
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );

src/components/Login.tsx

@@ -7,6 +7,7 @@ export default function Login() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
+  const [firstName, setFirstName] = useState('');
   const [isSignup, setIsSignup] = useState(false);
   const [rememberMe, setRememberMe] = useState(false);
   const [error, setError] = useState('');
@@ -19,13 +20,18 @@ export default function Login() {
     setLoading(true);
     
     if (isSignup) {
+      if (!firstName.trim()) {
+        setError('Please enter your first name');
+        setLoading(false);
+        return;
+      }
       if (password !== confirmPassword) {
         setError('Passwords do not match');
         setLoading(false);
         return;
       }
       try {
-        await signup(email, password);
+        await signup(email, password, firstName);
       } catch (err: unknown) {
         setError(err instanceof Error ? err.message : 'An error occurred');
       }
@@ -61,6 +67,19 @@ export default function Login() {
               {error}
             </div>
           )}
+          {isSignup && (
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-2">First Name</label>
+              <input
+                type="text"
+                value={firstName}
+                onChange={(e) => setFirstName(e.target.value)}
+                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"
+                placeholder="Enter your first name"
+                required={isSignup}
+              />
+            </div>
+          )}
           <div>
             <label className="block text-sm font-medium text-gray-300 mb-2">Email</label>
             <input
@@ -135,6 +154,7 @@ export default function Login() {
                 setIsSignup(!isSignup);
                 setError('');
                 setConfirmPassword('');
+                setFirstName('');
               }}
               className="text-blue-400 hover:text-blue-300 transition-colors"
             >

src/context/AuthContext.tsx

@@ -1,15 +1,16 @@
 'use client';
 
 import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
-import { User, signInWithEmailAndPassword, signOut, onAuthStateChanged, createUserWithEmailAndPassword } from 'firebase/auth';
+import { User, signInWithEmailAndPassword, signOut, onAuthStateChanged, createUserWithEmailAndPassword, updateProfile, deleteUser } from 'firebase/auth';
 import { auth, db, app } from '@/lib/firebase';
-import { doc, setDoc } from 'firebase/firestore';
+import { doc, setDoc, query, where, collection, getDocs, deleteDoc } from 'firebase/firestore';
 
 interface AuthContextType {
   user: User | null;
   login: (email: string, password: string) => Promise<void>;
-  signup: (email: string, password: string) => Promise<void>;
+  signup: (email: string, password: string, firstName?: string) => Promise<void>;
   logout: () => Promise<void>;
+  deleteAccount: () => Promise<void>;
   loading: boolean;
   isAdmin: boolean;
 }
@@ -72,8 +73,11 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     await signInWithEmailAndPassword(auth, email, password);
   };
 
-  const signup = async (email: string, password: string) => {
-    await createUserWithEmailAndPassword(auth, email, password);
+  const signup = async (email: string, password: string, firstName?: string) => {
+    const userCredential = await createUserWithEmailAndPassword(auth, email, password);
+    if (firstName) {
+      await updateProfile(userCredential.user, { displayName: firstName });
+    }
   };
 
   const logout = async () => {
@@ -81,8 +85,29 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     await signOut(auth);
   };
 
+  const deleteAccount = async () => {
+    if (!user) throw new Error('No user logged in');
+    
+    // Delete all prayers from Firestore
+    const prayersQuery = query(collection(db, 'prayers'), where('userId', '==', user.uid));
+    const prayersSnapshot = await getDocs(prayersQuery);
+    for (const prayerDoc of prayersSnapshot.docs) {
+      await deleteDoc(prayerDoc.ref);
+    }
+    
+    // Delete user document if it exists
+    const userDocRef = doc(db, 'users', user.uid);
+    await deleteDoc(userDocRef).catch(() => {
+      // User doc might not exist, that's okay
+    });
+    
+    // Delete Firebase Auth user
+    await deleteUser(user);
+    localStorage.removeItem('rememberMeTimestamp');
+  };
+
   return (
-    <AuthContext.Provider value={{ user, login, signup, logout, loading, isAdmin }}>
+    <AuthContext.Provider value={{ user, login, signup, logout, deleteAccount, loading, isAdmin }}>
       {children}
     </AuthContext.Provider>
   );