Tweak browser extension login UI (#1347)

apps/browser-extension/src/entrypoints/popup/App.tsx

@@ -113,7 +113,7 @@ const AppContent: React.FC<{
         <PasskeyLayout>
           {loadingOverlay}
           {message && (
-            <p className="text-red-500 mb-4">{message}</p>
+            <p className="mb-4 text-red-500 dark:text-red-400 text-sm">{message}</p>
           )}
           {routesComponent}
         </PasskeyLayout>
@@ -136,8 +136,8 @@ const AppContent: React.FC<{
             }}
           >
             {message && (
-              <div className="p-4">
-                <p className="text-red-500">{message}</p>
+              <div className="p-4 pt-0">
+                <p className="text-red-500 dark:text-red-400 text-sm">{message}</p>
               </div>
             )}
             {routesComponent}

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')}
             </Button>
           </div>
           <p className="text-xs text-gray-500 dark:text-gray-400 mt-4 text-center">
@@ -402,13 +402,32 @@ const Login: React.FC = () => {
             <span className="text-sm text-gray-700 dark:text-gray-200">{t('auth.rememberMe')}</span>
           </label>
         </div>
-        <div className="flex flex-col w-full space-y-2">
+        <div className="flex flex-col w-full space-y-4">
           <Button type="submit">
-            {t('auth.loginButton')}
+            <div className="flex items-center justify-center gap-2">
+              {t('auth.loginButton')}
+            </div>
           </Button>
-          <Button type="button" onClick={() => navigate('/mobile-unlock')} variant="secondary">
+
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-gray-300 dark:border-gray-600"></div>
+            </div>
+            <div className="relative flex justify-center text-sm">
+              <span className="px-2 text-gray-500 bg-white dark:bg-gray-700 dark:text-gray-400">{t('common.or')}</span>
+            </div>
+          </div>
+
+          <button
+            type="button"
+            onClick={() => navigate('/mobile-unlock')}
+            className="w-full px-4 py-2 text-sm font-medium text-center text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:bg-gray-600 dark:text-white dark:border-gray-500 dark:hover:bg-gray-500 dark:focus:ring-gray-700 flex items-center justify-center gap-2"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
+            </svg>
             {t('auth.unlockWithMobile')}
-          </Button>
+          </button>
         </div>
       </form>
       <div className="text-center text-gray-600 dark:text-gray-400">

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<string | null>(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 = () => {
 
         <div className="flex w-full">
           <Button type="button" onClick={handleBack} variant="secondary">
-            {t('auth.cancel')}
+            {t('common.cancel')}
           </Button>
         </div>
       </div>

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;

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",