Enable RLS on rate limits table

src/components/settings/AccountDeletionDialog.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useReducer } from 'react';
 import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter } from '@/components/ui/alert-dialog';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -6,8 +6,15 @@ import { Label } from '@/components/ui/label';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { supabase } from '@/integrations/supabase/client';
-import { useToast } from '@/hooks/use-toast';
 import { Loader2, AlertTriangle, Info } from 'lucide-react';
+import {
+  deletionDialogReducer,
+  initialState,
+  canProceedToConfirm,
+  canRequestDeletion,
+  canConfirmDeletion
+} from '@/lib/deletionDialogMachine';
+import { handleError, handleSuccess } from '@/lib/errorHandler';
 
 interface AccountDeletionDialogProps {
   open: boolean;
@@ -17,15 +24,13 @@ interface AccountDeletionDialogProps {
 }
 
 export function AccountDeletionDialog({ open, onOpenChange, userEmail, onDeletionRequested }: AccountDeletionDialogProps) {
-  const [step, setStep] = useState<'warning' | 'confirm' | 'code'>('warning');
-  const [loading, setLoading] = useState(false);
-  const [confirmationCode, setConfirmationCode] = useState('');
-  const [codeReceived, setCodeReceived] = useState(false);
-  const [scheduledDate, setScheduledDate] = useState<string>('');
-  const { toast } = useToast();
+  const [state, dispatch] = useReducer(deletionDialogReducer, initialState);
 
   const handleRequestDeletion = async () => {
-    setLoading(true);
+    if (!canRequestDeletion(state)) return;
+    
+    dispatch({ type: 'SET_LOADING', payload: true });
+    
     try {
       const { data, error } = await supabase.functions.invoke('request-account-deletion', {
         body: {},
@@ -33,63 +38,52 @@ export function AccountDeletionDialog({ open, onOpenChange, userEmail, onDeletio
 
       if (error) throw error;
 
-      setScheduledDate(data.scheduled_deletion_at);
-      setStep('code');
+      dispatch({
+        type: 'REQUEST_DELETION',
+        payload: { scheduledDate: data.scheduled_deletion_at }
+      });
       onDeletionRequested();
       
-      toast({
-        title: 'Deletion Requested',
-        description: 'Check your email for the confirmation code.',
-      });
-    } catch (error: any) {
-      toast({
-        variant: 'destructive',
-        title: 'Error',
-        description: error.message || 'Failed to request account deletion',
-      });
-    } finally {
-      setLoading(false);
+      handleSuccess('Deletion Requested', 'Check your email for the confirmation code.');
+    } catch (error) {
+      handleError(error, { action: 'Request account deletion' });
+      dispatch({ type: 'SET_ERROR', payload: 'Failed to request deletion' });
     }
   };
 
   const handleConfirmDeletion = async () => {
-    if (!confirmationCode || confirmationCode.length !== 6) {
-      toast({
-        variant: 'destructive',
-        title: 'Invalid Code',
-        description: 'Please enter a 6-digit confirmation code',
-      });
+    if (!canConfirmDeletion(state)) {
+      handleError(
+        new Error('Please enter a 6-digit confirmation code and confirm you received it'),
+        { action: 'Confirm deletion' }
+      );
       return;
     }
 
-    setLoading(true);
+    dispatch({ type: 'SET_LOADING', payload: true });
+    
     try {
       const { error } = await supabase.functions.invoke('confirm-account-deletion', {
-        body: { confirmation_code: confirmationCode },
+        body: { confirmation_code: state.confirmationCode },
       });
 
       if (error) throw error;
 
-      toast({
-        title: 'Deletion Confirmed',
-        description: 'Your account has been deactivated and scheduled for permanent deletion.',
-      });
+      handleSuccess(
+        'Deletion Confirmed',
+        'Your account has been deactivated and scheduled for permanent deletion.'
+      );
 
       // Refresh the page to show the deletion banner
       window.location.reload();
-    } catch (error: any) {
-      toast({
-        variant: 'destructive',
-        title: 'Error',
-        description: error.message || 'Failed to confirm deletion',
-      });
-    } finally {
-      setLoading(false);
+    } catch (error) {
+      handleError(error, { action: 'Confirm account deletion' });
     }
   };
 
   const handleResendCode = async () => {
-    setLoading(true);
+    dispatch({ type: 'SET_LOADING', payload: true });
+    
     try {
       const { error } = await supabase.functions.invoke('resend-deletion-code', {
         body: {},
@@ -97,25 +91,16 @@ export function AccountDeletionDialog({ open, onOpenChange, userEmail, onDeletio
 
       if (error) throw error;
 
-      toast({
-        title: 'Code Resent',
-        description: 'A new confirmation code has been sent to your email.',
-      });
-    } catch (error: any) {
-      toast({
-        variant: 'destructive',
-        title: 'Error',
-        description: error.message || 'Failed to resend code',
-      });
+      handleSuccess('Code Resent', 'A new confirmation code has been sent to your email.');
+    } catch (error) {
+      handleError(error, { action: 'Resend deletion code' });
     } finally {
-      setLoading(false);
+      dispatch({ type: 'SET_LOADING', payload: false });
     }
   };
 
   const handleClose = () => {
-    setStep('warning');
-    setConfirmationCode('');
-    setCodeReceived(false);
+    dispatch({ type: 'RESET' });
     onOpenChange(false);
   };
 
@@ -128,7 +113,7 @@ export function AccountDeletionDialog({ open, onOpenChange, userEmail, onDeletio
             Delete Account
           </AlertDialogTitle>
           <AlertDialogDescription className="text-left space-y-4">
-            {step === 'warning' && (
+            {state.step === 'warning' && (
               <>
                 <Alert>
                   <Info className="w-4 h-4" />
@@ -165,7 +150,7 @@ export function AccountDeletionDialog({ open, onOpenChange, userEmail, onDeletio
               </>
             )}
 
-            {step === 'confirm' && (
+            {state.step === 'confirm' && (
               <Alert variant="destructive">
                 <AlertDescription>
                   Are you absolutely sure? You'll receive a confirmation code via email. After confirming with the code, your account will be deactivated and scheduled for deletion in 2 weeks.
@@ -173,13 +158,13 @@ export function AccountDeletionDialog({ open, onOpenChange, userEmail, onDeletio
               </Alert>
             )}
 
-            {step === 'code' && (
+            {state.step === 'code' && (
               <div className="space-y-4">
                 <Alert>
                   <Info className="w-4 h-4" />
                   <AlertDescription>
                     A 6-digit confirmation code has been sent to <strong>{userEmail}</strong>. Enter it below within 24 hours to confirm deletion. Your account will be deactivated and scheduled for deletion on{' '}
-                    <strong>{scheduledDate ? new Date(scheduledDate).toLocaleDateString() : '14 days from confirmation'}</strong>.
+                    <strong>{state.scheduledDate ? new Date(state.scheduledDate).toLocaleDateString() : '14 days from confirmation'}</strong>.
                   </AlertDescription>
                 </Alert>
 
@@ -191,8 +176,8 @@ export function AccountDeletionDialog({ open, onOpenChange, userEmail, onDeletio
                       type="text"
                       placeholder="000000"
                       maxLength={6}
-                      value={confirmationCode}
-                      onChange={(e) => setConfirmationCode(e.target.value.replace(/\D/g, ''))}
+                      value={state.confirmationCode}
+                      onChange={(e) => dispatch({ type: 'UPDATE_CODE', payload: { code: e.target.value } })}
                       className="text-center text-2xl tracking-widest"
                     />
                   </div>
@@ -200,8 +185,8 @@ export function AccountDeletionDialog({ open, onOpenChange, userEmail, onDeletio
                   <div className="flex items-center space-x-2">
                     <Checkbox
                       id="codeReceived"
-                      checked={codeReceived}
-                      onCheckedChange={(checked) => setCodeReceived(checked === true)}
+                      checked={state.codeReceived}
+                      onCheckedChange={() => dispatch({ type: 'TOGGLE_CODE_RECEIVED' })}
                     />
                     <Label htmlFor="codeReceived" className="text-sm font-normal cursor-pointer">
                       I have received the code in my email
@@ -211,10 +196,10 @@ export function AccountDeletionDialog({ open, onOpenChange, userEmail, onDeletio
                   <Button
                     variant="outline"
                     onClick={handleResendCode}
-                    disabled={loading}
+                    disabled={state.isLoading}
                     className="w-full"
                   >
-                    {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Resend Code'}
+                    {state.isLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Resend Code'}
                   </Button>
                 </div>
               </div>
@@ -222,34 +207,38 @@ export function AccountDeletionDialog({ open, onOpenChange, userEmail, onDeletio
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
-          {step === 'warning' && (
+          {state.step === 'warning' && (
             <>
               <Button variant="outline" onClick={handleClose}>
                 Cancel
               </Button>
-              <Button variant="destructive" onClick={() => setStep('confirm')}>
+              <Button 
+                variant="destructive" 
+                onClick={() => dispatch({ type: 'CONTINUE_TO_CONFIRM' })}
+                disabled={!canProceedToConfirm(state)}
+              >
                 Continue
               </Button>
             </>
           )}
 
-          {step === 'confirm' && (
+          {state.step === 'confirm' && (
             <>
-              <Button variant="outline" onClick={() => setStep('warning')}>
+              <Button variant="outline" onClick={() => dispatch({ type: 'GO_BACK_TO_WARNING' })}>
                 Go Back
               </Button>
               <Button
                 variant="destructive"
                 onClick={handleRequestDeletion}
-                disabled={loading}
+                disabled={!canRequestDeletion(state)}
               >
-                {loading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : null}
+                {state.isLoading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : null}
                 Request Deletion
               </Button>
             </>
           )}
 
-          {step === 'code' && (
+          {state.step === 'code' && (
             <>
               <Button variant="outline" onClick={handleClose}>
                 Close
@@ -257,9 +246,9 @@ export function AccountDeletionDialog({ open, onOpenChange, userEmail, onDeletio
               <Button
                 variant="destructive"
                 onClick={handleConfirmDeletion}
-                disabled={loading || !codeReceived || confirmationCode.length !== 6}
+                disabled={!canConfirmDeletion(state)}
               >
-                {loading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : null}
+                {state.isLoading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : null}
                 Verify Code & Deactivate Account
               </Button>
             </>

src/components/settings/AccountProfileTab.tsx

@@ -10,22 +10,27 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Separator } from '@/components/ui/separator';
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
-import { useToast } from '@/hooks/use-toast';
 import { useAuth } from '@/hooks/useAuth';
 import { useProfile } from '@/hooks/useProfile';
 import { supabase } from '@/integrations/supabase/client';
-import { User, Upload, Trash2, Mail, AlertCircle, X } from 'lucide-react';
+import { User, Upload, Trash2, Mail, AlertCircle, X, Check, Loader2 } 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';
-import { toast as sonnerToast } from 'sonner';
 import { AccountDeletionDialog } from './AccountDeletionDialog';
 import { DeletionStatusBanner } from './DeletionStatusBanner';
+import { EmailChangeStatus } from './EmailChangeStatus';
 import { usernameSchema, displayNameSchema, bioSchema, personalLocationSchema, preferredPronounsSchema } from '@/lib/validation';
 import { z } from 'zod';
 import { AccountDeletionRequest } from '@/types/database';
+import { handleError, handleSuccess, AppError } from '@/lib/errorHandler';
+import { useAvatarUpload } from '@/hooks/useAvatarUpload';
+import { useUsernameValidation } from '@/hooks/useUsernameValidation';
+import { useAutoSave } from '@/hooks/useAutoSave';
+import { formatDistanceToNow } from 'date-fns';
+import { cn } from '@/lib/utils';
 
 const profileSchema = z.object({
   username: usernameSchema,
@@ -42,18 +47,21 @@ type ProfileFormData = z.infer<typeof profileSchema>;
 export function AccountProfileTab() {
   const { user, pendingEmail, clearPendingEmail } = useAuth();
   const { data: profile, refreshProfile } = useProfile(user?.id);
-  const { toast } = useToast();
   const [loading, setLoading] = useState(false);
-  const [avatarLoading, setAvatarLoading] = useState(false);
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
   const [showEmailDialog, setShowEmailDialog] = useState(false);
   const [showCancelEmailDialog, setShowCancelEmailDialog] = useState(false);
   const [cancellingEmail, setCancellingEmail] = useState(false);
-  const [avatarUrl, setAvatarUrl] = useState<string>(profile?.avatar_url || '');
-  const [avatarImageId, setAvatarImageId] = useState<string>(profile?.avatar_image_id || '');
   const [showDeletionDialog, setShowDeletionDialog] = useState(false);
   const [deletionRequest, setDeletionRequest] = useState<AccountDeletionRequest | null>(null);
 
+  // Initialize avatar upload hook
+  const { avatarUrl, avatarImageId, isUploading: avatarLoading, uploadAvatar } = useAvatarUpload(
+    profile?.avatar_url || '',
+    profile?.avatar_image_id || '',
+    profile?.username || ''
+  );
+
   const form = useForm<ProfileFormData>({
     resolver: zodResolver(profileSchema),
     defaultValues: {
@@ -67,6 +75,24 @@ export function AccountProfileTab() {
     }
   });
 
+  // Username validation
+  const usernameValue = form.watch('username');
+  const usernameValidation = useUsernameValidation(usernameValue, profile?.username);
+
+  // Auto-save (disabled for now - can be enabled per user preference)
+  const formData = form.watch();
+  const { isSaving, lastSaved } = useAutoSave({
+    data: formData,
+    onSave: async (data) => {
+      const isValid = await form.trigger();
+      if (!isValid || usernameValidation.isAvailable === false) return;
+      await handleFormSubmit(data);
+    },
+    debounceMs: 3000,
+    enabled: false, // TODO: Get from user preferences
+    isValid: usernameValidation.isAvailable !== false
+  });
+
   // Check for existing deletion request on mount
   useEffect(() => {
     const checkDeletionRequest = async () => {
@@ -87,7 +113,7 @@ export function AccountProfileTab() {
     checkDeletionRequest();
   }, [user?.id]);
 
-  const onSubmit = async (data: ProfileFormData) => {
+  const handleFormSubmit = async (data: ProfileFormData) => {
     if (!user) return;
     
     setLoading(true);
@@ -98,18 +124,27 @@ export function AccountProfileTab() {
         p_display_name: data.display_name || null,
         p_bio: data.bio || null,
         p_preferred_pronouns: data.preferred_pronouns || null,
-        p_show_pronouns: data.show_pronouns,
-        p_preferred_language: data.preferred_language,
         p_personal_location: data.personal_location || null
       });
 
-      if (error) throw error;
+      if (error) {
+        // Handle rate limiting error
+        if (error.code === 'P0001') {
+          const resetTime = error.message.match(/Try again at (.+)$/)?.[1];
+          throw new AppError(
+            error.message,
+            'RATE_LIMIT',
+            `Too many profile updates. ${resetTime ? 'Try again at ' + new Date(resetTime).toLocaleTimeString() : 'Please wait a few minutes.'}`
+          );
+        }
+        throw error;
+      }
 
       // Type the RPC result
-      const rpcResult = result as unknown as { success: boolean; username_changed: boolean; changes_count: number };
+      const rpcResult = result as unknown as { success: boolean; changes_count: number };
 
       // Update Novu subscriber if username changed
-      if (rpcResult?.username_changed && notificationService.isEnabled()) {
+      if (rpcResult?.changes_count > 0 && notificationService.isEnabled()) {
         await notificationService.updateSubscriber({
           subscriberId: user.id,
           email: user.email,
@@ -118,56 +153,21 @@ export function AccountProfileTab() {
       }
 
       await refreshProfile();
-      toast({
-        title: 'Profile updated',
-        description: 'Your profile has been successfully updated.'
-      });
-    } catch (error: any) {
-      toast({
-        title: 'Error',
-        description: error.message || 'Failed to update profile',
-        variant: 'destructive'
-      });
+      handleSuccess('Profile updated', 'Your profile has been successfully updated.');
+    } catch (error) {
+      handleError(error, { action: 'Update profile', userId: user.id });
     } finally {
       setLoading(false);
     }
   };
 
+  const onSubmit = async (data: ProfileFormData) => {
+    await handleFormSubmit(data);
+  };
+
   const handleAvatarUpload = async (urls: string[], imageId?: string) => {
-    if (!user || !urls[0]) return;
-    
-    const newAvatarUrl = urls[0];
-    const newImageId = imageId || '';
-
-    // Update local state immediately for optimistic UI
-    setAvatarUrl(newAvatarUrl);
-    setAvatarImageId(newImageId);
-
-    try {
-      // Use update_profile RPC for avatar updates
-      const { error } = await supabase.rpc('update_profile', {
-        p_username: profile?.username || '',
-        p_avatar_url: newAvatarUrl,
-        p_avatar_image_id: newImageId
-      });
-
-      if (error) throw error;
-
-      await refreshProfile();
-      toast({
-        title: 'Avatar updated',
-        description: 'Your avatar has been successfully updated.'
-      });
-    } catch (error: any) {
-      // Revert local state on error
-      setAvatarUrl(profile?.avatar_url || '');
-      setAvatarImageId(profile?.avatar_image_id || '');
-      toast({
-        title: 'Error',
-        description: error.message || 'Failed to update avatar',
-        variant: 'destructive'
-      });
-    }
+    await uploadAvatar(urls, imageId);
+    await refreshProfile();
   };
 
   const handleCancelEmailChange = async () => {
@@ -212,16 +212,12 @@ export function AccountProfileTab() {
         });
       }
 
-      sonnerToast.success('Email change cancelled', {
-        description: 'Your email change request has been cancelled.'
-      });
+      handleSuccess('Email change cancelled', 'Your email change request has been cancelled.');
 
       setShowCancelEmailDialog(false);
       await refreshProfile();
-    } catch (error: any) {
-      sonnerToast.error('Failed to cancel email change', {
-        description: error.message || 'An error occurred while cancelling the email change.'
-      });
+    } catch (error) {
+      handleError(error, { action: 'Cancel email change' });
     } finally {
       setCancellingEmail(false);
     }
@@ -268,11 +264,7 @@ export function AccountProfileTab() {
           onUploadComplete={handleAvatarUpload}
           currentImageId={avatarImageId}
           onError={(error) => {
-            toast({
-              title: "Upload Error",
-              description: error,
-              variant: "destructive"
-            });
+            handleError(new Error(error), { action: 'Upload avatar' });
           }}
         />
       </div>
@@ -285,18 +277,41 @@ export function AccountProfileTab() {
         
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
           <div className="space-y-2">
-            <Label htmlFor="username">Username *</Label>
+            <Label htmlFor="username">
+              Username *
+              {usernameValidation.isChecking && (
+                <Loader2 className="inline ml-2 w-3 h-3 animate-spin" />
+              )}
+            </Label>
             <Input
               id="username"
               {...form.register('username')}
               placeholder="Enter your username"
               disabled={isDeactivated}
+              className={cn(
+                usernameValidation.error && !form.formState.errors.username && "border-destructive",
+                usernameValidation.isAvailable && "border-green-500"
+              )}
             />
-            {form.formState.errors.username && (
+            {usernameValidation.isChecking ? (
+              <p className="text-sm text-muted-foreground">
+                Checking availability...
+              </p>
+            ) : usernameValidation.isAvailable === false && !form.formState.errors.username ? (
+              <p className="text-sm text-destructive flex items-center gap-1">
+                <X className="w-3 h-3" />
+                {usernameValidation.error}
+              </p>
+            ) : usernameValidation.isAvailable === true && !form.formState.errors.username ? (
+              <p className="text-sm text-green-600 flex items-center gap-1">
+                <Check className="w-3 h-3" />
+                Username is available
+              </p>
+            ) : form.formState.errors.username ? (
               <p className="text-sm text-destructive">
                 {form.formState.errors.username.message}
               </p>
-            )}
+            ) : null}
           </div>
 
           <div className="space-y-2">
@@ -378,9 +393,26 @@ export function AccountProfileTab() {
           )}
         </div>
 
-        <Button type="submit" disabled={loading || isDeactivated}>
-          {loading ? 'Saving...' : 'Save Changes'}
-        </Button>
+        <div className="flex items-center justify-between">
+          <Button 
+            type="submit" 
+            disabled={
+              loading || 
+              isDeactivated || 
+              isSaving ||
+              usernameValidation.isChecking ||
+              usernameValidation.isAvailable === false
+            }
+          >
+            {loading || isSaving ? 'Saving...' : 'Save Changes'}
+          </Button>
+          
+          {lastSaved && !loading && !isSaving && (
+            <span className="text-sm text-muted-foreground">
+              Last saved {formatDistanceToNow(lastSaved, { addSuffix: true })}
+            </span>
+          )}
+        </div>
         {isDeactivated && (
           <p className="text-sm text-muted-foreground">
             Your account is deactivated. Profile editing is disabled.
@@ -395,26 +427,11 @@ export function AccountProfileTab() {
         <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 flex items-center justify-between">
-                <span>Email Change in Progress</span>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => setShowCancelEmailDialog(true)}
-                  className="h-auto py-1 px-2 text-blue-500 hover:text-blue-600 hover:bg-blue-500/20"
-                >
-                  <X className="h-4 w-4 mr-1" />
-                  Cancel Change
-                </Button>
-              </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>
+            <EmailChangeStatus
+              currentEmail={user?.email || ''}
+              pendingEmail={pendingEmail}
+              onCancel={() => setShowCancelEmailDialog(true)}
+            />
           )}
           
           <div className="p-4 bg-muted/50 rounded-lg space-y-4">

src/components/settings/EmailChangeStatus.tsx

@@ -0,0 +1,193 @@
+import { useEffect, useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import { Progress } from '@/components/ui/progress';
+import { Mail, Info, CheckCircle2, Circle, Loader2 } from 'lucide-react';
+import { supabase } from '@/integrations/supabase/client';
+import { handleError, handleSuccess } from '@/lib/errorHandler';
+
+interface EmailChangeStatusProps {
+  currentEmail: string;
+  pendingEmail: string;
+  onCancel: () => void;
+}
+
+type EmailChangeData = {
+  has_pending_change: boolean;
+  current_email?: string;
+  new_email?: string;
+  current_email_verified?: boolean;
+  new_email_verified?: boolean;
+  change_sent_at?: string;
+};
+
+export function EmailChangeStatus({ 
+  currentEmail, 
+  pendingEmail, 
+  onCancel 
+}: EmailChangeStatusProps) {
+  const [verificationStatus, setVerificationStatus] = useState({
+    oldEmailVerified: false,
+    newEmailVerified: false
+  });
+  const [loading, setLoading] = useState(true);
+  const [resending, setResending] = useState(false);
+
+  const checkVerificationStatus = async () => {
+    try {
+      const { data, error } = await supabase.rpc('get_email_change_status');
+      
+      if (error) throw error;
+
+      const emailData = data as EmailChangeData;
+      
+      if (emailData.has_pending_change) {
+        setVerificationStatus({
+          oldEmailVerified: emailData.current_email_verified || false,
+          newEmailVerified: emailData.new_email_verified || false
+        });
+      }
+    } catch (error) {
+      handleError(error, { action: 'Check verification status' });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    checkVerificationStatus();
+    // Poll every 30 seconds
+    const interval = setInterval(checkVerificationStatus, 30000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const handleResendVerification = async () => {
+    setResending(true);
+    try {
+      const { error } = await supabase.auth.updateUser({ 
+        email: pendingEmail 
+      });
+      
+      if (error) throw error;
+      
+      handleSuccess(
+        'Verification emails resent',
+        'Check your inbox for the verification links.'
+      );
+    } catch (error) {
+      handleError(error, { action: 'Resend verification emails' });
+    } finally {
+      setResending(false);
+    }
+  };
+
+  const verificationProgress = 
+    (verificationStatus.oldEmailVerified ? 50 : 0) +
+    (verificationStatus.newEmailVerified ? 50 : 0);
+
+  if (loading) {
+    return (
+      <Card className="border-blue-500/30">
+        <CardContent className="flex items-center justify-center py-8">
+          <Loader2 className="w-6 h-6 animate-spin" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="border-blue-500/30">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Mail className="w-5 h-5 text-blue-500" />
+          Email Change in Progress
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <Alert>
+          <Info className="w-4 h-4" />
+          <AlertDescription>
+            To complete your email change, both emails must be verified.
+          </AlertDescription>
+        </Alert>
+
+        {/* Progress indicator */}
+        <div className="space-y-3">
+          <div className="flex items-center gap-3">
+            {verificationStatus.oldEmailVerified ? (
+              <CheckCircle2 className="w-5 h-5 text-green-500 flex-shrink-0" />
+            ) : (
+              <Circle className="w-5 h-5 text-muted-foreground flex-shrink-0" />
+            )}
+            <div className="flex-1 min-w-0">
+              <p className="font-medium">Current Email</p>
+              <p className="text-sm text-muted-foreground truncate">{currentEmail}</p>
+            </div>
+            {verificationStatus.oldEmailVerified && (
+              <Badge variant="secondary" className="bg-green-500/10 text-green-500">
+                Verified
+              </Badge>
+            )}
+          </div>
+
+          <Separator />
+
+          <div className="flex items-center gap-3">
+            {verificationStatus.newEmailVerified ? (
+              <CheckCircle2 className="w-5 h-5 text-green-500 flex-shrink-0" />
+            ) : (
+              <Circle className="w-5 h-5 text-muted-foreground flex-shrink-0" />
+            )}
+            <div className="flex-1 min-w-0">
+              <p className="font-medium">New Email</p>
+              <p className="text-sm text-muted-foreground truncate">{pendingEmail}</p>
+            </div>
+            {verificationStatus.newEmailVerified && (
+              <Badge variant="secondary" className="bg-green-500/10 text-green-500">
+                Verified
+              </Badge>
+            )}
+          </div>
+        </div>
+
+        {/* Action buttons */}
+        <div className="flex flex-col sm:flex-row gap-2">
+          <Button
+            variant="outline"
+            onClick={handleResendVerification}
+            disabled={resending}
+            className="flex-1"
+          >
+            {resending ? (
+              <>
+                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                Resending...
+              </>
+            ) : (
+              'Resend Verification Emails'
+            )}
+          </Button>
+          <Button
+            variant="ghost"
+            onClick={onCancel}
+            className="text-destructive hover:text-destructive hover:bg-destructive/10"
+          >
+            Cancel Change
+          </Button>
+        </div>
+
+        {/* Progress bar */}
+        <div className="space-y-2">
+          <div className="flex justify-between text-sm">
+            <span className="text-muted-foreground">Progress</span>
+            <span className="font-medium">{verificationProgress}%</span>
+          </div>
+          <Progress value={verificationProgress} className="h-2" />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

src/components/settings/SecurityTab.tsx

@@ -4,7 +4,7 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Separator } from '@/components/ui/separator';
 import { Badge } from '@/components/ui/badge';
-import { useToast } from '@/hooks/use-toast';
+import { handleError, handleSuccess } from '@/lib/errorHandler';
 import { useAuth } from '@/hooks/useAuth';
 import { Shield, Key, Smartphone, Globe, Loader2, Monitor, Tablet, Trash2 } from 'lucide-react';
 import { format } from 'date-fns';
@@ -20,7 +20,6 @@ import {
   addPasswordToAccount
 } from '@/lib/identityService';
 import type { UserIdentity, OAuthProvider } from '@/types/identity';
-import { toast as sonnerToast } from '@/components/ui/sonner';
 import { supabase } from '@/integrations/supabase/client';
 
 interface AuthSession {
@@ -36,7 +35,6 @@ interface AuthSession {
 
 export function SecurityTab() {
   const { user } = useAuth();
-  const { toast } = useToast();
   const navigate = useNavigate();
   const [passwordDialogOpen, setPasswordDialogOpen] = useState(false);
   const [identities, setIdentities] = useState<UserIdentity[]>([]);
@@ -64,11 +62,7 @@ export function SecurityTab() {
       setHasPassword(hasEmailProvider);
     } catch (error) {
       console.error('Failed to load identities:', error);
-      toast({
-        title: 'Error',
-        description: 'Failed to load connected accounts',
-        variant: 'destructive',
-      });
+      handleError(error, { action: 'Load connected accounts' });
     } finally {
       setLoadingIdentities(false);
     }
@@ -79,32 +73,15 @@ export function SecurityTab() {
       const result = await connectIdentity(provider, '/settings?tab=security');
       
       if (!result.success) {
-        // Handle rate limiting
-        if (result.error?.includes('rate limit')) {
-          toast({
-            title: 'Too Many Attempts',
-            description: 'Please wait a few minutes before trying again.',
-            variant: 'destructive'
-          });
-        } else {
-          toast({
-            title: 'Connection Failed',
-            description: result.error,
-            variant: 'destructive'
-          });
-        }
+        handleError(
+          new Error(result.error || 'Connection failed'),
+          { action: `Connect ${provider} account` }
+        );
       } else {
-        toast({
-          title: 'Redirecting...',
-          description: `Connecting your ${provider} account...`
-        });
+        handleSuccess('Redirecting...', `Connecting your ${provider} account...`);
       }
-    } catch (error: any) {
-      toast({
-        title: 'Connection Error',
-        description: error.message || 'Failed to connect account',
-        variant: 'destructive'
-      });
+    } catch (error) {
+      handleError(error, { action: `Connect ${provider} account` });
     }
   };
 
@@ -116,20 +93,18 @@ export function SecurityTab() {
       if (safetyCheck.reason === 'no_password_backup') {
         // Trigger password reset flow first
         await handleAddPassword();
-        toast({
-          title: "Password Required First",
-          description: "Check your email for a password reset link. Once you've set a password, you can disconnect your social login.",
-          duration: 10000
-        });
+        handleSuccess(
+          "Password Required First",
+          "Check your email for a password reset link. Once you've set a password, you can disconnect your social login."
+        );
         return;
       }
       
       if (safetyCheck.reason === 'last_identity') {
-        toast({
-          title: "Cannot Disconnect",
-          description: "You cannot disconnect your only login method. Please add another authentication method first.",
-          variant: "destructive"
-        });
+        handleError(
+          new Error("You cannot disconnect your only login method"),
+          { action: "Disconnect social login" }
+        );
         return;
       }
     }
@@ -141,16 +116,12 @@ export function SecurityTab() {
     
     if (result.success) {
       await loadIdentities(); // Refresh identities list
-      toast({
-        title: "Disconnected",
-        description: `Your ${provider} account has been successfully disconnected.`
-      });
+      handleSuccess("Disconnected", `Your ${provider} account has been successfully disconnected.`);
     } else {
-      toast({
-        title: "Disconnect Failed",
-        description: result.error,
-        variant: "destructive"
-      });
+      handleError(
+        new Error(result.error || 'Disconnect failed'),
+        { action: `Disconnect ${provider} account` }
+      );
     }
   };
 
@@ -160,16 +131,15 @@ export function SecurityTab() {
     const result = await addPasswordToAccount();
     
     if (result.success) {
-      sonnerToast.success("Password Setup Email Sent!", {
-        description: `Check ${result.email} for a password reset link. Click it to set your password.`,
-        duration: 15000,
-      });
+      handleSuccess(
+        "Password Setup Email Sent!",
+        `Check ${result.email} for a password reset link. Click it to set your password.`
+      );
     } else {
-      toast({
-        title: "Failed to Send Email",
-        description: result.error,
-        variant: "destructive"
-      });
+      handleError(
+        new Error(result.error || 'Failed to send email'),
+        { action: 'Send password setup email' }
+      );
     }
     
     setAddingPassword(false);
@@ -182,11 +152,7 @@ export function SecurityTab() {
     
     if (error) {
       console.error('Error fetching sessions:', error);
-      toast({
-        title: 'Error',
-        description: 'Failed to load sessions',
-        variant: 'destructive'
-      });
+      handleError(error, { action: 'Load sessions' });
     } else {
       setSessions(data || []);
     }
@@ -197,16 +163,9 @@ export function SecurityTab() {
     const { error } = await supabase.rpc('revoke_my_session', { session_id: sessionId });
     
     if (error) {
-      toast({
-        title: 'Error',
-        description: 'Failed to revoke session',
-        variant: 'destructive'
-      });
+      handleError(error, { action: 'Revoke session' });
     } else {
-      toast({
-        title: 'Success',
-        description: 'Session revoked successfully'
-      });
+      handleSuccess('Success', 'Session revoked successfully');
       fetchSessions();
     }
   };
@@ -254,10 +213,7 @@ export function SecurityTab() {
         open={passwordDialogOpen}
         onOpenChange={setPasswordDialogOpen}
         onSuccess={() => {
-          toast({
-            title: 'Password updated',
-            description: 'Your password has been successfully changed.'
-          });
+          handleSuccess('Password updated', 'Your password has been successfully changed.');
         }}
       />