feat: enhance two-factor authentication handling and UI improvements

webapp/src/components/AppGlobalOverlays.tsx

@@ -92,7 +92,12 @@ export default function AppGlobalOverlays(props: AppGlobalOverlaysProps) {
 
       <ConfirmDialog
         open={props.pendingTotpOpen}
-        title={isYubiKeyOtp ? `${t('txt_two_step_verification')} YubiKey` : isWebAuthn ? `${t('txt_two_step_verification')} ${t('txt_passkey')}` : t('txt_two_step_verification')}
+        title={isYubiKeyOtp ? `${t('txt_two_step_verification')} YubiKey` : isWebAuthn ? (
+          <span className="dialog-title-stack">
+            <span>{t('txt_two_step_verification')}</span>
+            <span>{t('txt_passkey')}</span>
+          </span>
+        ) : t('txt_two_step_verification')}
         message={isYubiKeyOtp ? t('txt_press_yubikey_to_authenticate') : isWebAuthn ? t('txt_use_passkey_to_complete_two_step_verification') : t('txt_password_is_already_verified')}
         confirmText={t('txt_verify')}
         hideCancel

webapp/src/components/ConfirmDialog.tsx

@@ -6,7 +6,7 @@ import { t } from '@/lib/i18n';
 
 interface ConfirmDialogProps {
   open: boolean;
-  title: string;
+  title: ComponentChildren;
   message?: string;
   variant?: 'default' | 'warning';
   showIcon?: boolean;

webapp/src/lib/app-auth.ts

@@ -143,7 +143,7 @@ function readTwoFactorProviderTypes(providers: unknown): number[] {
     }
   } else if (providers && typeof providers === 'object') {
     for (const [key, value] of Object.entries(providers as Record<string, unknown>)) {
-      if (!value) continue;
+      if (value === false) continue;
       const providerType = twoFactorProviderTypeFromValue(key);
       if (providerType != null) providerTypes.push(providerType);
     }

webapp/src/styles/overlays.css

@@ -68,6 +68,10 @@
   @apply my-1.5 text-3xl;
 }
 
+.dialog-title-stack {
+  @apply flex flex-col items-center gap-1;
+}
+
 .dialog-message {
   @apply mb-2.5;
   color: #475467;