feat: Implement orphaned password recovery

src/components/settings/SecurityTab.tsx

@@ -16,14 +16,18 @@ import {
   getUserIdentities,
   checkDisconnectSafety,
   disconnectIdentity,
-  connectIdentity
+  connectIdentity,
+  hasOrphanedPassword
 } 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);
@@ -31,12 +35,33 @@ export function SecurityTab() {
   const [hasPassword, setHasPassword] = useState(false);
   const [addPasswordMode, setAddPasswordMode] = useState<'standalone' | 'disconnect'>('standalone');
   const [addingPassword, setAddingPassword] = useState(false);
+  const [showOrphanedPasswordOption, setShowOrphanedPasswordOption] = useState(false);
 
   // Load user identities on mount
   useEffect(() => {
     loadIdentities();
   }, []);
 
+  useEffect(() => {
+    const checkOrphanedPassword = async () => {
+      if (!hasPassword) {
+        const isOrphaned = await hasOrphanedPassword();
+        setShowOrphanedPasswordOption(isOrphaned);
+        
+        if (isOrphaned) {
+          sonnerToast.info("Password Authentication Needs Activation", {
+            description: "Click 'Verify Password Access' to complete your password setup.",
+            duration: 10000,
+          });
+        }
+      }
+    };
+    
+    if (!loadingIdentities) {
+      checkOrphanedPassword();
+    }
+  }, [hasPassword, loadingIdentities]);
+
   const loadIdentities = async () => {
     try {
       setLoadingIdentities(true);
@@ -162,6 +187,15 @@ export function SecurityTab() {
     setPasswordSetupProvider('google' as OAuthProvider);
   };
 
+  const handleVerifyExistingPassword = () => {
+    setVerificationDialogOpen(true);
+  };
+
+  const handleVerificationSuccess = async () => {
+    await loadIdentities();
+    sonnerToast.success("Password authentication activated successfully!");
+  };
+
   // Get connected accounts with identity data
   const connectedAccounts = [
     {
@@ -198,6 +232,13 @@ 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">
@@ -216,22 +257,34 @@ export function SecurityTab() {
                 )}
               </CardDescription>
             </CardHeader>
-            <CardContent>
+            <CardContent className="space-y-3">
               {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 onClick={handleAddPassword} disabled={addingPassword}>
+                    {addingPassword ? (
+                      <>
+                        <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                        Adding Password...
+                      </>
+                    ) : (
+                      'Add Password'
+                    )}
+                  </Button>
+                  
+                  {showOrphanedPasswordOption && (
+                    <Button 
+                      variant="outline" 
+                      onClick={handleVerifyExistingPassword}
+                      className="w-full"
+                    >
+                      Already have a password? Verify Access
+                    </Button>
                   )}
-                </Button>
+                </>
               )}
             </CardContent>
           </Card>