diff --git a/src/components/auth/PasswordSetupDialog.tsx b/src/components/auth/PasswordSetupDialog.tsx index a39d5157..accdba40 100644 --- a/src/components/auth/PasswordSetupDialog.tsx +++ b/src/components/auth/PasswordSetupDialog.tsx @@ -19,14 +19,16 @@ interface PasswordSetupDialogProps { open: boolean; onOpenChange: (open: boolean) => void; onSuccess: () => void; - provider: OAuthProvider; + provider?: OAuthProvider; + mode?: 'standalone' | 'disconnect'; } export function PasswordSetupDialog({ open, onOpenChange, onSuccess, - provider + provider, + mode = 'standalone' }: PasswordSetupDialogProps) { const [password, setPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState(''); @@ -73,8 +75,17 @@ export function PasswordSetupDialog({ Set Up Password - You need to set a password before disconnecting your {provider} account. - This ensures you can still access your account. + {mode === 'disconnect' && provider ? ( + <> + You need to set a password before disconnecting your {provider} account. + This ensures you can still access your account. + + ) : ( + <> + Add a password to your account for increased security. You'll be able to + sign in using either your password or your connected social accounts. + + )} diff --git a/src/components/settings/SecurityTab.tsx b/src/components/settings/SecurityTab.tsx index 4c6386db..dda9b028 100644 --- a/src/components/settings/SecurityTab.tsx +++ b/src/components/settings/SecurityTab.tsx @@ -26,6 +26,8 @@ export function SecurityTab() { const [loadingIdentities, setLoadingIdentities] = useState(true); const [disconnectingProvider, setDisconnectingProvider] = useState(null); const [passwordSetupProvider, setPasswordSetupProvider] = useState(null); + const [hasPassword, setHasPassword] = useState(false); + const [addPasswordMode, setAddPasswordMode] = useState<'standalone' | 'disconnect'>('standalone'); // Load user identities on mount useEffect(() => { @@ -33,10 +35,24 @@ export function SecurityTab() { }, []); const loadIdentities = async () => { - setLoadingIdentities(true); - const fetchedIdentities = await getUserIdentities(); - setIdentities(fetchedIdentities); - setLoadingIdentities(false); + try { + setLoadingIdentities(true); + const fetchedIdentities = await getUserIdentities(); + setIdentities(fetchedIdentities); + + // Check if user has email/password auth + const hasEmailProvider = fetchedIdentities.some(i => i.provider === 'email'); + setHasPassword(hasEmailProvider); + } catch (error) { + console.error('Failed to load identities:', error); + toast({ + title: 'Error', + description: 'Failed to load connected accounts', + variant: 'destructive', + }); + } finally { + setLoadingIdentities(false); + } }; const handleSocialLogin = async (provider: OAuthProvider) => { @@ -63,6 +79,7 @@ export function SecurityTab() { if (!safetyCheck.canDisconnect) { if (safetyCheck.reason === 'no_password_backup') { // Show password setup dialog + setAddPasswordMode('disconnect'); setPasswordSetupProvider(provider); toast({ title: "Password Required", @@ -103,21 +120,30 @@ export function SecurityTab() { }; const handlePasswordSetupSuccess = async () => { - toast({ - title: "Password Set", - description: "You can now disconnect your social login." - }); - // Refresh identities to show email provider await loadIdentities(); - // Proceed with disconnect - if (passwordSetupProvider) { + if (addPasswordMode === 'disconnect' && passwordSetupProvider) { + 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.', + }); + setPasswordSetupProvider(null); } }; + const handleAddPassword = () => { + setAddPasswordMode('standalone'); + setPasswordSetupProvider('google' as OAuthProvider); + }; + // Get connected accounts with identity data const connectedAccounts = [ { @@ -150,27 +176,38 @@ export function SecurityTab() { onOpenChange={(open) => !open && setPasswordSetupProvider(null)} onSuccess={handlePasswordSetupSuccess} provider={passwordSetupProvider} + mode={addPasswordMode} /> )}
- {/* Change Password */} + {/* Password Section - Conditional based on auth method */}
-

Change Password

+

{hasPassword ? 'Change Password' : 'Add Password'}

- Update your password to keep your account secure. {user?.identities?.some(i => i.provider === 'totp') && 'Two-factor authentication will be required.'} + {hasPassword ? ( + <>Update your password to keep your account secure. {user?.identities?.some(i => i.provider === 'totp') && 'Two-factor authentication will be required.'} + ) : ( + 'Add password authentication to your account for increased security and backup access.' + )} - + {hasPassword ? ( + + ) : ( + + )}