Improve Bitwarden-compatible TOTP handling

webapp/src/components/vault/VaultDetailView.tsx

@@ -2,11 +2,11 @@ import { createPortal } from 'preact/compat';
 import { useEffect, useMemo, useState } from 'preact/hooks';
 import { Archive, Clipboard, Download, Eye, EyeOff, ExternalLink, Folder, Paperclip, Pencil, RotateCcw, Trash2, X } from 'lucide-preact';
 import { useDialogLifecycle } from '@/components/ConfirmDialog';
+import type { TotpCodeResult } from '@/lib/crypto';
 import type { Cipher } from '@/lib/types';
 import { t } from '@/lib/i18n';
 import {
   CardBrandIcon,
-  TOTP_PERIOD_SECONDS,
   TOTP_RING_CIRCUMFERENCE,
   VaultListIcon,
   copyToClipboard,
@@ -25,7 +25,7 @@ interface VaultDetailViewProps {
   selectedCipher: Cipher;
   repromptApprovedCipherId: string | null;
   showPassword: boolean;
-  totpLive: { code: string; remain: number } | null;
+  totpLive: TotpCodeResult | null;
   passkeyCreatedAt: string | null;
   hiddenFieldVisibleMap: Record<number, boolean>;
   folderName: (id: string | null | undefined) => string;
@@ -42,6 +42,11 @@ interface VaultDetailViewProps {
   onUnarchive: (cipher: Cipher) => void | Promise<void>;
 }
 
+function totpProgress(live: TotpCodeResult | null): number {
+  const period = Math.max(1, live?.period || 30);
+  return live ? Math.max(0, Math.min(period, live.remain)) / period : 0;
+}
+
 function PasswordHistoryDialog(props: {
   open: boolean;
   entries: Array<{ password: string; lastUsedDate: string | null }>;
@@ -191,8 +196,7 @@ export default function VaultDetailView(props: VaultDetailViewProps) {
                               strokeDasharray: `${TOTP_RING_CIRCUMFERENCE} ${TOTP_RING_CIRCUMFERENCE}`,
                               strokeDashoffset: String(
                                 TOTP_RING_CIRCUMFERENCE -
-                                  TOTP_RING_CIRCUMFERENCE *
-                                    (Math.max(0, Math.min(TOTP_PERIOD_SECONDS, props.totpLive?.remain ?? 0)) / TOTP_PERIOD_SECONDS)
+                                  TOTP_RING_CIRCUMFERENCE * totpProgress(props.totpLive)
                               ),
                             }}
                           />

webapp/src/components/vault/VaultEditor.tsx

@@ -4,6 +4,7 @@ import { ArrowDown, ArrowUp, CheckCheck, Download, Paperclip, Plus, QrCode, Refr
 import jsQR from 'jsqr';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { useDialogLifecycle } from '@/components/ConfirmDialog';
+import { normalizeTotpInput } from '@/lib/crypto';
 import type { Cipher, Folder, VaultDraft, VaultDraftField } from '@/lib/types';
 import { t } from '@/lib/i18n';
 import { cardBrand } from '@/lib/import-format-shared';
@@ -161,9 +162,9 @@ export default function VaultEditor(props: VaultEditorProps) {
   };
 
   const applyTotpQrValue = (value: string) => {
-    const trimmed = value.trim();
-    if (!trimmed) return false;
-    props.onUpdateDraft({ loginTotp: trimmed });
+    const normalized = normalizeTotpInput(value);
+    if (!normalized) return false;
+    props.onUpdateDraft({ loginTotp: normalized });
     setTotpQrStatus(t('txt_totp_qr_scanned'));
     setTotpQrOpen(false);
     return true;

webapp/src/components/vault/vault-page-helpers.tsx

@@ -207,8 +207,7 @@ export function getWebsiteMatchOptions(): Array<{ value: number | null; label: s
   ];
 }
 
-export const TOTP_PERIOD_SECONDS = 30;
-export const TOTP_RING_RADIUS = 14;
+const TOTP_RING_RADIUS = 14;
 export const TOTP_RING_CIRCUMFERENCE = 2 * Math.PI * TOTP_RING_RADIUS;
 
 export function CreateTypeIcon({ type }: { type: number }) {