From 728af0bff6635a5d18908a43ecf13faec0efd8ad Mon Sep 17 00:00:00 2001 From: Leendert de Borst Date: Mon, 17 Nov 2025 17:11:09 +0100 Subject: [PATCH] Tweak browser extension login UI (#1347) --- .../src/entrypoints/popup/App.tsx | 6 ++-- .../entrypoints/popup/pages/auth/Login.tsx | 29 +++++++++++++++---- .../popup/pages/auth/MobileUnlock.tsx | 15 ++++++++-- .../popup/utils/MobileUnlockUtility.ts | 4 ++- .../src/i18n/locales/en.json | 8 ++--- 5 files changed, 46 insertions(+), 16 deletions(-) diff --git a/apps/browser-extension/src/entrypoints/popup/App.tsx b/apps/browser-extension/src/entrypoints/popup/App.tsx index 4e5211b05..f747a0835 100644 --- a/apps/browser-extension/src/entrypoints/popup/App.tsx +++ b/apps/browser-extension/src/entrypoints/popup/App.tsx @@ -113,7 +113,7 @@ const AppContent: React.FC<{ {loadingOverlay} {message && ( -

{message}

+

{message}

)} {routesComponent} @@ -136,8 +136,8 @@ const AppContent: React.FC<{ }} > {message && ( -
-

{message}

+
+

{message}

)} {routesComponent} diff --git a/apps/browser-extension/src/entrypoints/popup/pages/auth/Login.tsx b/apps/browser-extension/src/entrypoints/popup/pages/auth/Login.tsx index d92caeae2..53ac86fe5 100644 --- a/apps/browser-extension/src/entrypoints/popup/pages/auth/Login.tsx +++ b/apps/browser-extension/src/entrypoints/popup/pages/auth/Login.tsx @@ -330,7 +330,7 @@ const Login: React.FC = () => { }} variant="secondary" > - {t('auth.cancel')} + {t('common.cancel')}

@@ -402,13 +402,32 @@ const Login: React.FC = () => { {t('auth.rememberMe')} -

+
- +
diff --git a/apps/browser-extension/src/entrypoints/popup/pages/auth/MobileUnlock.tsx b/apps/browser-extension/src/entrypoints/popup/pages/auth/MobileUnlock.tsx index dd368d6ba..c75df2f09 100644 --- a/apps/browser-extension/src/entrypoints/popup/pages/auth/MobileUnlock.tsx +++ b/apps/browser-extension/src/entrypoints/popup/pages/auth/MobileUnlock.tsx @@ -20,7 +20,7 @@ const MobileUnlock: React.FC = () => { const navigate = useNavigate(); const webApi = useWebApi(); const { initializeDatabase, storeEncryptionKey, storeEncryptionKeyDerivationParams } = useDb(); - const { setAuthTokens } = useAuth(); + const { setAuthTokens, clearAuth } = useAuth(); const { showLoading, hideLoading, setIsInitialLoading } = useLoading(); const [qrCodeUrl, setQrCodeUrl] = useState(null); @@ -108,7 +108,16 @@ const MobileUnlock: React.FC = () => { ); } catch (err) { hideLoading(); - setError(err instanceof Error ? err.message : t('auth.errors.serverError')); + // Check if this is a 404 error (endpoint doesn't exist - server version too old for this feature) + const errorWithStatus = err as Error & { status?: number }; + // TODO: this check can be removed at a later time when v1.0 is ready and 0.25.0 release when this was introduced has been out for a while. + if (err instanceof Error && errorWithStatus.status === 404) { + // Clear auth and navigate back to login with error message + await clearAuth(t('common.errors.serverVersionTooOld')); + navigate('/login'); + } else { + setError(err instanceof Error ? err.message : t('common.errors.unknownError')); + } } }; @@ -224,7 +233,7 @@ const MobileUnlock: React.FC = () => {
diff --git a/apps/browser-extension/src/entrypoints/popup/utils/MobileUnlockUtility.ts b/apps/browser-extension/src/entrypoints/popup/utils/MobileUnlockUtility.ts index 15b2208a0..b57d2a32e 100644 --- a/apps/browser-extension/src/entrypoints/popup/utils/MobileUnlockUtility.ts +++ b/apps/browser-extension/src/entrypoints/popup/utils/MobileUnlockUtility.ts @@ -42,7 +42,9 @@ export class MobileUnlockUtility { }); if (!response.ok) { - throw new Error(`Failed to initiate mobile unlock: ${response.status}`); + const error = new Error(`Failed to initiate mobile unlock: ${response.status}`) as Error & { status: number }; + error.status = response.status; + throw error; } const data = await response.json() as MobileUnlockInitiateResponse; diff --git a/apps/browser-extension/src/i18n/locales/en.json b/apps/browser-extension/src/i18n/locales/en.json index 913bbbff8..768751ad8 100644 --- a/apps/browser-extension/src/i18n/locales/en.json +++ b/apps/browser-extension/src/i18n/locales/en.json @@ -6,14 +6,13 @@ "password": "Password", "passwordPlaceholder": "Enter your password", "rememberMe": "Remember me", - "loginButton": "Login", + "loginButton": "Log in", "noAccount": "No account yet?", "createVault": "Create new vault", "twoFactorTitle": "Please enter the authentication code from your authenticator app.", "authCode": "Authentication Code", "authCodePlaceholder": "Enter 6-digit code", "verify": "Verify", - "cancel": "Cancel", "twoFactorNote": "Note: if you don't have access to your authenticator device, you can reset your 2FA with a recovery code by logging in via the website.", "masterPassword": "Master Password", "unlockVault": "Unlock Vault", @@ -30,8 +29,8 @@ "connectingTo": "Connecting to", "switchAccounts": "Switch accounts?", "loggedIn": "Logged in", - "unlockWithMobile": "Unlock with Mobile", - "scanQrCode": "Scan this QR code with your AliasVault mobile app to unlock your vault.", + "unlockWithMobile": "Log in using Mobile App", + "scanQrCode": "Scan this QR code with your AliasVault mobile app to log in.", "errors": { "invalidCode": "Please enter a valid 6-digit authentication code.", "serverError": "Could not reach AliasVault server. Please try again later or contact support if the problem persists.", @@ -97,6 +96,7 @@ "clientVersionNotSupported": "This version of the AliasVault browser extension is not supported by the server anymore. Please update your browser extension to the latest version.", "browserExtensionOutdated": "This browser extension is outdated and cannot be used to access this vault. Please update this browser extension to continue.", "serverVersionNotSupported": "The AliasVault server needs to be updated to a newer version in order to use this browser extension. Please contact support if you need help.", + "serverVersionTooOld": "The AliasVault server needs to be updated to a newer version in order to use this feature. Please contact the server admin if you need help.", "unknownError": "An unknown error occurred", "unknownErrorTryAgain": "An unknown error occurred. Please try again.", "vaultNotAvailable": "Vault not available",