Refactor: Enhance email change status handling

src/components/settings/AccountProfileTab.tsx

@@ -14,11 +14,12 @@ import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
 import { useToast } from '@/hooks/use-toast';
 import { useAuth } from '@/hooks/useAuth';
 import { supabase } from '@/integrations/supabase/client';
-import { User, Upload, Trash2, Mail } from 'lucide-react';
+import { User, Upload, Trash2, Mail, AlertCircle } from 'lucide-react';
 import { PhotoUpload } from '@/components/upload/PhotoUpload';
 import { notificationService } from '@/lib/notificationService';
 import { EmailChangeDialog } from './EmailChangeDialog';
 import { Badge } from '@/components/ui/badge';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 
 const profileSchema = z.object({
   username: z.string().min(3).max(30).regex(/^[a-zA-Z0-9_-]+$/),
@@ -32,7 +33,7 @@ const profileSchema = z.object({
 type ProfileFormData = z.infer<typeof profileSchema>;
 
 export function AccountProfileTab() {
-  const { user, profile, refreshProfile } = useAuth();
+  const { user, profile, refreshProfile, pendingEmail } = useAuth();
   const { toast } = useToast();
   const [loading, setLoading] = useState(false);
   const [avatarLoading, setAvatarLoading] = useState(false);
@@ -275,13 +276,29 @@ export function AccountProfileTab() {
       <div className="space-y-4">
         <h3 className="text-lg font-medium">Account Information</h3>
         <div className="space-y-4">
+          {pendingEmail && (
+            <Alert className="border-blue-500/20 bg-blue-500/10">
+              <AlertCircle className="h-4 w-4 text-blue-500" />
+              <AlertTitle className="text-blue-500">Email Change in Progress</AlertTitle>
+              <AlertDescription className="text-sm text-muted-foreground">
+                You have a pending email change to <strong>{pendingEmail}</strong>.
+                Please check both your current email ({user?.email}) and new email ({pendingEmail}) for confirmation links.
+                Both must be confirmed to complete the change.
+              </AlertDescription>
+            </Alert>
+          )}
+          
           <div className="p-4 bg-muted/50 rounded-lg space-y-4">
             <div className="flex items-center justify-between">
               <div className="flex-1">
                 <p className="text-sm font-medium">Email Address</p>
                 <div className="flex items-center gap-2 mt-1">
                   <p className="text-sm text-muted-foreground">{user?.email}</p>
-                  {user?.email_confirmed_at ? (
+                  {pendingEmail ? (
+                    <Badge variant="secondary" className="bg-blue-500/10 text-blue-500 border-blue-500/20 text-xs">
+                      Change Pending
+                    </Badge>
+                  ) : user?.email_confirmed_at ? (
                     <Badge variant="secondary" className="text-xs">Verified</Badge>
                   ) : (
                     <Badge variant="outline" className="text-xs">Pending Verification</Badge>
@@ -292,6 +309,7 @@ export function AccountProfileTab() {
                 variant="outline" 
                 size="sm"
                 onClick={() => setShowEmailDialog(true)}
+                disabled={!!pendingEmail}
               >
                 <Mail className="w-4 h-4 mr-2" />
                 Change Email

src/components/settings/EmailChangeDialog.tsx

@@ -20,7 +20,7 @@ import {
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
-import { useToast } from '@/hooks/use-toast';
+import { toast } from 'sonner';
 import { supabase } from '@/integrations/supabase/client';
 import { Loader2, Mail, CheckCircle2, AlertCircle } from 'lucide-react';
 import { TurnstileCaptcha } from '@/components/auth/TurnstileCaptcha';
@@ -49,7 +49,6 @@ interface EmailChangeDialogProps {
 }
 
 export function EmailChangeDialog({ open, onOpenChange, currentEmail, userId }: EmailChangeDialogProps) {
-  const { toast } = useToast();
   const { theme } = useTheme();
   const [step, setStep] = useState<Step>('verification');
   const [loading, setLoading] = useState(false);
@@ -79,19 +78,15 @@ export function EmailChangeDialog({ open, onOpenChange, currentEmail, userId }:
 
   const onSubmit = async (data: EmailFormData) => {
     if (!captchaToken) {
-      toast({
+      toast.error('CAPTCHA Required', {
-        title: 'CAPTCHA Required',
         description: 'Please complete the CAPTCHA verification.',
-        variant: 'destructive'
       });
       return;
     }
 
     if (data.newEmail.toLowerCase() === currentEmail.toLowerCase()) {
-      toast({
+      toast.error('Same Email', {
-        title: 'Same Email',
         description: 'The new email is the same as your current email.',
-        variant: 'destructive'
       });
       return;
     }
@@ -162,13 +157,15 @@ export function EmailChangeDialog({ open, onOpenChange, currentEmail, userId }:
         });
       }
 
+      toast.success('Email change initiated', {
+        description: 'Check both email addresses for confirmation links.',
+      });
+      
       setStep('success');
     } catch (error: any) {
       console.error('Email change error:', error);
-      toast({
+      toast.error('Failed to change email', {
-        title: 'Error',
+        description: error.message || 'Please try again.',
-        description: error.message || 'Failed to change email address',
-        variant: 'destructive'
       });
     } finally {
       setLoading(false);

src/hooks/useAuth.tsx

@@ -8,6 +8,7 @@ interface AuthContextType {
   session: Session | null;
   profile: Profile | null;
   loading: boolean;
+  pendingEmail: string | null;
   signOut: () => Promise<void>;
   refreshProfile: () => Promise<void>;
 }
@@ -19,6 +20,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
   const [session, setSession] = useState<Session | null>(null);
   const [profile, setProfile] = useState<Profile | null>(null);
   const [loading, setLoading] = useState(true);
+  const [pendingEmail, setPendingEmail] = useState<string | null>(null);
 
   const fetchProfile = async (userId: string) => {
     try {
@@ -63,6 +65,10 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
       setSession(session);
       setUser(session?.user ?? null);
       
+      // Track pending email changes
+      const newEmail = session?.user?.new_email;
+      setPendingEmail(newEmail ?? null);
+      
       if (session?.user) {
         // Defer profile fetch to avoid deadlock
         setTimeout(() => {
@@ -91,6 +97,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     session,
     profile,
     loading,
+    pendingEmail,
     signOut,
     refreshProfile,
   };