{message}
+
+
)}
{routesComponent}
diff --git a/apps/browser-extension/src/entrypoints/popup/components/Dialogs/MobileUnlockModal.tsx b/apps/browser-extension/src/entrypoints/popup/components/Dialogs/MobileUnlockModal.tsx
new file mode 100644
index 000000000..ca105b085
--- /dev/null
+++ b/apps/browser-extension/src/entrypoints/popup/components/Dialogs/MobileUnlockModal.tsx
@@ -0,0 +1,244 @@
+import QRCode from 'qrcode';
+import React, { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { MobileLoginErrorCode } from '@/entrypoints/popup/types/MobileLoginErrorCode';
+import { MobileLoginUtility } from '@/entrypoints/popup/utils/MobileLoginUtility';
+
+import type { MobileLoginResult } from '@/utils/types/messaging/MobileLoginResult';
+import type { WebApiService } from '@/utils/WebApiService';
+
+interface IMobileUnlockModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ onSuccess: (result: MobileLoginResult) => Promise{message}
+ {/* Backdrop */}
+
+
+ {/* Modal */}
+
+ );
+};
+
+export default MobileUnlockModal;
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 54b094d41..afe748458 100644
--- a/apps/browser-extension/src/entrypoints/popup/pages/auth/Login.tsx
+++ b/apps/browser-extension/src/entrypoints/popup/pages/auth/Login.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import Button from '@/entrypoints/popup/components/Button';
+import MobileUnlockModal from '@/entrypoints/popup/components/Dialogs/MobileUnlockModal';
import HeaderButton from '@/entrypoints/popup/components/HeaderButton';
import { HeaderIcon, HeaderIconType } from '@/entrypoints/popup/components/Icons/HeaderIcons';
import LoginServerInfo from '@/entrypoints/popup/components/LoginServerInfo';
@@ -21,6 +22,7 @@ import { AppInfo } from '@/utils/AppInfo';
import type { VaultResponse, LoginResponse } from '@/utils/dist/shared/models/webapi';
import EncryptionUtility from '@/utils/EncryptionUtility';
import { ApiAuthError } from '@/utils/types/errors/ApiAuthError';
+import type { MobileLoginResult } from '@/utils/types/messaging/MobileLoginResult';
import { storage } from '#imports';
@@ -47,6 +49,7 @@ const Login: React.FC = () => {
const [twoFactorCode, setTwoFactorCode] = useState('');
const [clientUrl, setClientUrl] = useState
+
+
+ {/* Close button */}
+
+
+ {/* Content */}
+
+
+
+ + {title} +
++ {description} +
+ + {error && ( +
+ {getErrorMessage(error)}
+
+ )}
+
+ {qrCodeUrl && (
+
+ 
+
+ )}
+
+ {!qrCodeUrl && !error && (
+
+ {formatTime(timeRemaining)}
+
+
+
+
+ )}
+
+
+