feat: Add button to send orphaned password confirmation email

src/components/settings/SecurityTab.tsx

@@ -17,17 +17,16 @@ import {
   checkDisconnectSafety,
   disconnectIdentity,
   connectIdentity,
-  hasOrphanedPassword
+  hasOrphanedPassword,
+  triggerOrphanedPasswordConfirmation
 } from '@/lib/identityService';
 import type { UserIdentity, OAuthProvider } from '@/types/identity';
-import { PasswordVerificationDialog } from '@/components/auth/PasswordVerificationDialog';
 import { toast as sonnerToast } from 'sonner';
 export function SecurityTab() {
   const { user } = useAuth();
   const { toast } = useToast();
   const navigate = useNavigate();
   const [passwordDialogOpen, setPasswordDialogOpen] = useState(false);
-  const [verificationDialogOpen, setVerificationDialogOpen] = useState(false);
   const [identities, setIdentities] = useState<UserIdentity[]>([]);
   const [loadingIdentities, setLoadingIdentities] = useState(true);
   const [disconnectingProvider, setDisconnectingProvider] = useState<OAuthProvider | null>(null);
@@ -48,6 +47,13 @@ export function SecurityTab() {
         const isOrphaned = await hasOrphanedPassword();
         setShowOrphanedPasswordOption(isOrphaned);
         
+        if (isOrphaned) {
+          sonnerToast.info("Password Authentication Needs Activation", {
+            description: "Click 'Send Confirmation Email' below to complete your password setup.",
+            duration: 10000,
+          });
+        }
+        
         if (isOrphaned) {
           sonnerToast.info("Password Authentication Needs Activation", {
             description: "Click 'Verify Password Access' to complete your password setup.",
@@ -187,17 +193,25 @@ export function SecurityTab() {
     setPasswordSetupProvider('google' as OAuthProvider);
   };
 
-  const handleVerifyExistingPassword = () => {
-    setVerificationDialogOpen(true);
-  };
-
-  const handleVerificationSuccess = async () => {
-    // Don't reload identities immediately - user needs to confirm email first
-    toast({
-      title: "Email Confirmation Required",
-      description: "Check your email and click the confirmation link to activate password authentication.",
-      duration: 0, // Persistent
-    });
+  const handleSendConfirmationEmail = async () => {
+    setAddingPassword(true);
+    
+    const result = await triggerOrphanedPasswordConfirmation();
+    
+    if (result.success) {
+      sonnerToast.success("Confirmation Email Sent!", {
+        description: "Check your email for a confirmation link to activate your password authentication.",
+        duration: 15000,
+      });
+    } else {
+      toast({
+        title: "Failed to Send Email",
+        description: result.error,
+        variant: "destructive"
+      });
+    }
+    
+    setAddingPassword(false);
   };
 
   // Get connected accounts with identity data
@@ -236,13 +250,6 @@ export function SecurityTab() {
         />
       )}
 
-      <PasswordVerificationDialog
-        open={verificationDialogOpen}
-        onOpenChange={setVerificationDialogOpen}
-        onSuccess={handleVerificationSuccess}
-        defaultEmail={user?.email}
-      />
-
       <div className="space-y-8">
         {/* Password Section - Conditional based on auth method */}
         <div className="space-y-4">
@@ -282,10 +289,21 @@ export function SecurityTab() {
                   {showOrphanedPasswordOption && (
                     <Button 
                       variant="outline" 
-                      onClick={handleVerifyExistingPassword}
+                      onClick={handleSendConfirmationEmail}
+                      disabled={addingPassword}
                       className="w-full"
                     >
-                      Already have a password? Verify Access
+                      {addingPassword ? (
+                        <>
+                          <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                          Sending Email...
+                        </>
+                      ) : (
+                        <>
+                          <Key className="w-4 h-4 mr-2" />
+                          Send Confirmation Email
+                        </>
+                      )}
                     </Button>
                   )}
                 </>