fix: show error message on login page when backend is unreachable (#2063)

web/src/app/login/page.tsx

@@ -23,7 +23,7 @@ import {
 import { useEffect, useState } from 'react';
 import { httpClient, initializeUserInfo } from '@/app/infra/http';
 import { useRouter } from 'next/navigation';
-import { Mail, Lock, Loader2 } from 'lucide-react';
+import { Mail, Lock, Loader2, AlertCircle, RefreshCw } from 'lucide-react';
 import langbotIcon from '@/app/assets/langbot-logo.webp';
 import { toast } from 'sonner';
 import { useTranslation } from 'react-i18next';
@@ -46,6 +46,8 @@ export default function Login() {
   const [accountType, setAccountType] = useState<AccountType | null>(null);
   const [hasPassword, setHasPassword] = useState(false);
   const [loading, setLoading] = useState(true);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [retrying, setRetrying] = useState(false);
 
   const form = useForm<z.infer<ReturnType<typeof formSchema>>>({
     resolver: zodResolver(formSchema(t)),
@@ -61,6 +63,7 @@ export default function Login() {
 
   async function checkAccountInfo() {
     try {
+      setLoadError(null);
       const res = await httpClient.getAccountInfo();
       if (!res.initialized) {
         router.push('/register');
@@ -72,11 +75,22 @@ export default function Login() {
 
       // Also check if already logged in
       checkIfAlreadyLoggedIn();
-    } catch {
+    } catch (err) {
+      const errorMessage =
+        err instanceof Error ? err.message : t('common.loginLoadError');
+      setLoadError(errorMessage);
       setLoading(false);
     }
   }
 
+  async function handleRetry() {
+    setRetrying(true);
+    setLoading(true);
+    setLoadError(null);
+    await checkAccountInfo();
+    setRetrying(false);
+  }
+
   function checkIfAlreadyLoggedIn() {
     httpClient
       .checkUserToken()
@@ -129,6 +143,54 @@ export default function Login() {
     );
   }
 
+  // Show error state when account info failed to load
+  if (loadError) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-neutral-900">
+        <Card className="w-[375px] shadow-lg dark:shadow-white/10">
+          <CardHeader>
+            <div className="flex justify-between items-center mb-6">
+              <ThemeToggle />
+              <LanguageSelector />
+            </div>
+            <img
+              src={langbotIcon.src}
+              alt="LangBot"
+              className="w-16 h-16 mb-4 mx-auto"
+            />
+            <CardTitle className="text-2xl text-center">
+              {t('common.welcome')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex flex-col items-center gap-3 py-4">
+              <AlertCircle className="h-10 w-10 text-destructive" />
+              <p className="text-sm text-center text-muted-foreground">
+                {t('common.loginLoadErrorDesc')}
+              </p>
+              <code className="text-xs bg-muted px-3 py-2 rounded max-w-full overflow-x-auto block text-center text-muted-foreground">
+                {loadError}
+              </code>
+              <Button
+                onClick={handleRetry}
+                disabled={retrying}
+                variant="outline"
+                className="mt-2 cursor-pointer"
+              >
+                {retrying ? (
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                ) : (
+                  <RefreshCw className="mr-2 h-4 w-4" />
+                )}
+                {t('common.retry')}
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
   // Determine what to show based on account type
   const showLocalLogin =
     accountType === 'local' || (accountType === 'space' && hasPassword);