english version update

ospabhost/frontend/src/pages/qr-login.tsx

@@ -15,6 +15,8 @@ const QRLoginPage = () => {
   const [status, setStatus] = useState<'loading' | 'confirm' | 'success' | 'error' | 'expired'>('loading');
   const [message, setMessage] = useState('Проверка QR-кода...');
   const [userData, setUserData] = useState<UserData | null>(null);
+  const [remaining, setRemaining] = useState<number>(0);
+  const [requestInfo, setRequestInfo] = useState<{ ip?: string; ua?: string } | null>(null);
   const code = searchParams.get('code');
 
   useEffect(() => {
@@ -24,6 +26,30 @@ const QRLoginPage = () => {
       return;
     }
 
+      let countdownTimer: ReturnType<typeof setInterval> | null = null;
+
+    const updateRemaining = async () => {
+      try {
+        const resp = await apiClient.get(`/api/qr-auth/status/${code}`);
+        if (typeof resp.data.expiresIn === 'number') {
+          setRemaining(Math.max(0, Math.ceil(resp.data.expiresIn)));
+        }
+        // Set request info if provided
+        if (resp.data.ipAddress || resp.data.userAgent) {
+          setRequestInfo({ ip: resp.data.ipAddress, ua: resp.data.userAgent });
+        }
+        if (resp.data.status === 'expired') {
+          setStatus('expired');
+          setMessage('QR-код истёк');
+          return false;
+        }
+        return true;
+      } catch (err) {
+        console.error('Ошибка при обновлении remaining:', err);
+        return false;
+      }
+    };
+
     const checkAuth = async () => {
       try {
         setStatus('loading');
@@ -50,12 +76,31 @@ const QRLoginPage = () => {
         setUserData(userResponse.data.user);
         setStatus('confirm');
         setMessage('Подтвердите вход на новом устройстве');
+
+        // Start countdown for confirmation page
+        await updateRemaining();
+        countdownTimer = setInterval(async () => {
+          await updateRemaining();
+          // decrease visible counter only if updateRemaining didn't set a new value
+          setRemaining((prev: number) => {
+            if (prev <= 1) {
+              if (countdownTimer) clearInterval(countdownTimer);
+              setStatus('expired');
+              setMessage('QR-код истёк');
+              return 0;
+            }
+            return prev - 1;
+          });
+        }, 1000);
       } catch (error) {
         console.error('Ошибка проверки авторизации:', error);
         
         if (isAxiosError(error) && error.response?.status === 401) {
           setStatus('error');
           setMessage('Вы не авторизованы. Войдите в аккаунт на телефоне');
+        } else if (isAxiosError(error) && error.response?.status === 500) {
+          setStatus('error');
+          setMessage('Серверная ошибка при проверке QR-кода');
         } else {
           setStatus('error');
           setMessage('Ошибка проверки авторизации');
@@ -64,6 +109,10 @@ const QRLoginPage = () => {
     };
 
     checkAuth();
+
+    return () => {
+      if (countdownTimer) clearInterval(countdownTimer);
+    };
   }, [code]);
 
   const handleConfirm = async () => {
@@ -102,10 +151,6 @@ const QRLoginPage = () => {
     }
   };
 
-  const handleCancel = () => {
-    window.close();
-  };
-
   const getIcon = () => {
     switch (status) {
       case 'loading':
@@ -161,30 +206,61 @@ const QRLoginPage = () => {
         
         {status === 'confirm' && userData && (
           <div className="mb-6">
-            <div className="bg-gray-50 rounded-xl p-6 mb-6">
+            <div className="bg-gray-50 rounded-xl p-6 mb-4">
               <p className="text-gray-600 mb-2">Войти на новом устройстве как:</p>
               <p className="text-xl font-bold text-gray-900">{userData.username}</p>
               <p className="text-sm text-gray-500">{userData.email}</p>
             </div>
-            
-            <p className="text-gray-600 text-sm mb-6">
-              Это вы пытаетесь войти? Подтвердите вход на компьютере
-            </p>
 
-            <div className="flex gap-3">
-              <button
-                onClick={handleCancel}
-                className="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-700 px-6 py-3 rounded-lg font-medium transition-colors duration-200"
-              >
-                Отмена
-              </button>
-              <button
-                onClick={handleConfirm}
-                className="flex-1 bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition-colors duration-200"
-              >
-                Подтвердить
-              </button>
+            {/* Device info */}
+            <div className="mb-4 text-sm text-gray-600">
+              <div className="mb-2">Детали запроса:</div>
+              <div className="bg-white p-3 rounded-lg border border-gray-100 text-xs text-gray-700">
+                <div>IP: <span className="font-medium">{requestInfo?.ip ?? '—'}</span></div>
+                <div className="mt-1">Device: <span className="font-medium">{requestInfo?.ua ?? '—'}</span></div>
+              </div>
             </div>
+
+            {/* Mobile-friendly confirmation with timer */}
+            <div className="mb-4">
+              <p className="text-gray-600 text-sm mb-3">{remaining > 0 ? `Осталось времени: ${Math.floor(remaining / 60)}:${String(remaining % 60).padStart(2, '0')}` : 'QR-код истёк'}</p>
+
+              <div className="flex gap-3">
+                <button
+                  onClick={async () => {
+                    try {
+                      await apiClient.post('/api/qr-auth/reject', { code });
+                      setStatus('error');
+                      setMessage('Вход отклонён');
+                    } catch (err) {
+                      console.error('Ошибка отклонения:', err);
+                      setMessage('Не удалось отклонить вход');
+                    }
+                  }}
+                  className="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-700 px-6 py-4 rounded-lg font-medium transition-colors duration-200 text-sm"
+                >
+                  Отклонить
+                </button>
+                <button
+                  onClick={handleConfirm}
+                  disabled={remaining <= 0}
+                  className={`flex-1 ${remaining > 0 ? 'bg-blue-500 hover:bg-blue-600 text-white' : 'bg-gray-200 text-gray-500 cursor-not-allowed'} px-6 py-4 rounded-lg font-medium transition-colors duration-200 text-sm`}
+                >
+                  Подтвердить
+                </button>
+              </div>
+            </div>
+
+            {remaining <= 0 && (
+              <div className="mt-3 text-center">
+                <button
+                  onClick={() => window.open('/login?qr=1', '_blank')}
+                  className="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition-colors duration-200"
+                >
+                  Сгенерировать QR заново (открыть страницу входа)
+                </button>
+              </div>
+            )}
           </div>
         )}