Refactor: Implement sign-out and re-login flow

src/components/settings/SecurityTab.tsx

@@ -1,11 +1,12 @@
 import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 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 { useAuth } from '@/hooks/useAuth';
-import { Shield, Key, Smartphone, Globe, Loader2, RefreshCw } from 'lucide-react';
+import { Shield, Key, Smartphone, Globe, Loader2 } from 'lucide-react';
 import { TOTPSetup } from '@/components/auth/TOTPSetup';
 import { GoogleIcon } from '@/components/icons/GoogleIcon';
 import { DiscordIcon } from '@/components/icons/DiscordIcon';
@@ -21,6 +22,7 @@ import type { UserIdentity, OAuthProvider } from '@/types/identity';
 export function SecurityTab() {
   const { user } = useAuth();
   const { toast } = useToast();
+  const navigate = useNavigate();
   const [passwordDialogOpen, setPasswordDialogOpen] = useState(false);
   const [identities, setIdentities] = useState<UserIdentity[]>([]);
   const [loadingIdentities, setLoadingIdentities] = useState(true);
@@ -120,56 +122,34 @@ export function SecurityTab() {
     }
   };
 
-  const handlePasswordSetupSuccess = async () => {
-    setAddingPassword(true);
-    
-    try {
-      // Refresh identities - should now include email provider after waiting in addPasswordToAccount
-      await loadIdentities();
+  const handlePasswordSetupSuccess = async (email?: string) => {
+    if (email) {
+      // Password was set, user was logged out, needs to sign in with email/password
+      toast({
+        title: 'Password Set Successfully',
+        description: 'Please sign in with your email and password to complete setup.',
+        duration: 6000,
+      });
       
-      // Check if password was actually verified
-      if (!hasPassword && addPasswordMode === 'standalone') {
-        // Password addition failed verification
-        toast({
-          title: 'Verification Failed',
-          description: 'Password was set but identity verification failed. Please refresh the page and check your Security settings.',
-          variant: 'destructive'
-        });
-        return; // Don't close dialog or clear provider
-      }
+      // Redirect to auth page with email pre-filled
+      navigate(`/auth?email=${encodeURIComponent(email)}&message=complete-password-setup`);
+    } else {
+      // Normal password change flow (user already had email identity)
+      setAddingPassword(true);
       
-      if (addPasswordMode === 'disconnect' && passwordSetupProvider) {
+      try {
+        await loadIdentities();
         toast({
-          title: "Password Set",
-          description: "You can now disconnect your social login."
-        });
-        await handleUnlinkSocial(passwordSetupProvider);
-        setPasswordSetupProvider(null);
-      } else {
-        toast({
-          title: 'Password Added',
-          description: 'You can now sign in using your email and password.',
+          title: 'Password Updated',
+          description: 'Your password has been successfully updated.',
         });
         setPasswordSetupProvider(null);
+      } finally {
+        setAddingPassword(false);
       }
-    } finally {
-      setAddingPassword(false);
     }
   };
 
-  const handleRefreshIdentities = async () => {
-    setLoadingIdentities(true);
-    await loadIdentities();
-    setLoadingIdentities(false);
-    
-    toast({
-      title: 'Identities Refreshed',
-      description: hasPassword 
-        ? 'Your password authentication is now active.' 
-        : 'Identity status updated.',
-    });
-  };
-
   const handleAddPassword = () => {
     setAddPasswordMode('standalone');
     setPasswordSetupProvider('google' as OAuthProvider);
@@ -230,33 +210,22 @@ export function SecurityTab() {
               </CardDescription>
             </CardHeader>
             <CardContent>
-              <div className="flex items-center gap-2">
-                {hasPassword ? (
-                  <Button onClick={() => setPasswordDialogOpen(true)}>
-                    Change Password
-                  </Button>
-                ) : (
-                  <Button onClick={handleAddPassword} disabled={addingPassword}>
-                    {addingPassword ? (
-                      <>
-                        <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                        Adding Password...
-                      </>
-                    ) : (
-                      'Add Password'
-                    )}
-                  </Button>
-                )}
-                <Button 
-                  variant="ghost" 
-                  size="icon"
-                  onClick={handleRefreshIdentities}
-                  disabled={loadingIdentities}
-                  title="Refresh identity status"
-                >
-                  <RefreshCw className={`h-4 w-4 ${loadingIdentities ? 'animate-spin' : ''}`} />
+              {hasPassword ? (
+                <Button onClick={() => setPasswordDialogOpen(true)}>
+                  Change Password
                 </Button>
-              </div>
+              ) : (
+                <Button onClick={handleAddPassword} disabled={addingPassword}>
+                  {addingPassword ? (
+                    <>
+                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                      Adding Password...
+                    </>
+                  ) : (
+                    'Add Password'
+                  )}
+                </Button>
+              )}
             </CardContent>
           </Card>
         </div>