From 3340e984edf872b78720264f67fe095ec90153af Mon Sep 17 00:00:00 2001
From: Junyan Qin <rockchinq@gmail.com>
Date: Fri, 17 Apr 2026 17:28:37 +0800
Subject: [PATCH] feat(web): improve login error layout and add Terms of
 Service link

- Improve backend connection error display with bordered container,
  inline icon, and better visual hierarchy
- Extract actual error message from axios response object
- Add Terms of Service link (https://langbot.app/terms) to login footer
- Add termsOfService i18n key for all 7 locales
---
 web/src/app/login/page.tsx      | 45 +++++++++++++++++++++++++--------
 web/src/i18n/locales/en-US.ts   |  1 +
 web/src/i18n/locales/es-ES.ts   |  3 ++-
 web/src/i18n/locales/ja-JP.ts   |  1 +
 web/src/i18n/locales/th-TH.ts   |  1 +
 web/src/i18n/locales/vi-VN.ts   |  1 +
 web/src/i18n/locales/zh-Hans.ts |  1 +
 web/src/i18n/locales/zh-Hant.ts |  1 +
 8 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/web/src/app/login/page.tsx b/web/src/app/login/page.tsx
index 51bd0fb8..cd4da632 100644
--- a/web/src/app/login/page.tsx
+++ b/web/src/app/login/page.tsx
@@ -75,9 +75,18 @@ export default function Login() {
       // Also check if already logged in
       checkIfAlreadyLoggedIn();
     } catch (err) {
-      const errorMessage =
-        err instanceof Error ? err.message : t('common.loginLoadError');
-      setLoadError(errorMessage);
+      let detail = '';
+      if (err instanceof Error) {
+        detail = err.message;
+      } else if (
+        err &&
+        typeof err === 'object' &&
+        'msg' in err &&
+        typeof (err as Record<string, unknown>).msg === 'string'
+      ) {
+        detail = (err as Record<string, unknown>).msg as string;
+      }
+      setLoadError(detail || t('common.loginLoadError'));
       setLoading(false);
     }
   }
@@ -146,8 +155,8 @@ export default function Login() {
   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>
+        <Card className="w-[400px] shadow-lg dark:shadow-white/10">
+          <CardHeader className="pb-2">
             <div className="flex justify-between items-center mb-6">
               <ThemeToggle />
               <LanguageSelector />
@@ -161,20 +170,25 @@ export default function Login() {
               {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">
+          <CardContent>
+            <div className="flex flex-col items-center gap-4 rounded-lg border border-destructive/20 bg-destructive/5 p-5">
+              <div className="flex items-center gap-2 text-destructive">
+                <AlertCircle className="h-5 w-5 shrink-0" />
+                <span className="text-sm font-medium">
+                  {t('common.loginLoadError')}
+                </span>
+              </div>
+              <p className="text-sm text-center text-muted-foreground leading-relaxed">
                 {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">
+              <code className="text-xs bg-muted/80 px-3 py-2 rounded-md max-w-full overflow-x-auto block text-center text-muted-foreground/80 break-all">
                 {loadError}
               </code>
               <Button
                 onClick={handleRetry}
                 disabled={retrying}
                 variant="outline"
-                className="mt-2 cursor-pointer"
+                className="w-full cursor-pointer"
               >
                 {retrying ? (
                   <Loader2 className="mr-2 h-4 w-4 animate-spin" />
@@ -348,6 +362,15 @@ export default function Login() {
 
           <p className="text-xs text-center text-muted-foreground">
             {t('common.agreementNotice')}{' '}
+            <a
+              href="https://langbot.app/terms"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="underline hover:text-foreground transition-colors"
+            >
+              {t('common.termsOfService')}
+            </a>
+            {'、'}
             <a
               href="https://langbot.app/privacy"
               target="_blank"
diff --git a/web/src/i18n/locales/en-US.ts b/web/src/i18n/locales/en-US.ts
index 0efb3fd8..4e7df75e 100644
--- a/web/src/i18n/locales/en-US.ts
+++ b/web/src/i18n/locales/en-US.ts
@@ -63,6 +63,7 @@ const enUS = {
     test: 'Test',
     forgotPassword: 'Forgot Password?',
     agreementNotice: 'By continuing, you agree to our',
+    termsOfService: 'Terms of Service',
     privacyPolicy: 'Privacy Policy',
     and: 'and',
     dataCollectionPolicy: 'Data Collection Policy',
diff --git a/web/src/i18n/locales/es-ES.ts b/web/src/i18n/locales/es-ES.ts
index f82cf73c..46e00c09 100644
--- a/web/src/i18n/locales/es-ES.ts
+++ b/web/src/i18n/locales/es-ES.ts
@@ -64,7 +64,8 @@ const esES = {
     copyFailed: 'Error al copiar',
     test: 'Probar',
     forgotPassword: '¿Olvidaste tu contraseña?',
-    agreementNotice: 'Al continuar, aceptas nuestra',
+    agreementNotice: 'Al continuar, aceptas nuestros',
+    termsOfService: 'Términos de servicio',
     privacyPolicy: 'Política de privacidad',
     and: 'y',
     dataCollectionPolicy: 'Política de recopilación de datos',
diff --git a/web/src/i18n/locales/ja-JP.ts b/web/src/i18n/locales/ja-JP.ts
index fd793b9b..e491987c 100644
--- a/web/src/i18n/locales/ja-JP.ts
+++ b/web/src/i18n/locales/ja-JP.ts
@@ -64,6 +64,7 @@ const jaJP = {
     test: 'テスト',
     forgotPassword: 'パスワードを忘れた？',
     agreementNotice: '続行することで、以下に同意したものとみなされます：',
+    termsOfService: '利用規約',
     privacyPolicy: 'プライバシーポリシー',
     and: 'および',
     dataCollectionPolicy: 'データ収集ポリシー',
diff --git a/web/src/i18n/locales/th-TH.ts b/web/src/i18n/locales/th-TH.ts
index a35c4d8d..8baccbae 100644
--- a/web/src/i18n/locales/th-TH.ts
+++ b/web/src/i18n/locales/th-TH.ts
@@ -63,6 +63,7 @@ const thTH = {
     test: 'ทดสอบ',
     forgotPassword: 'ลืมรหัสผ่าน?',
     agreementNotice: 'การดำเนินการต่อแสดงว่าคุณยอมรับ',
+    termsOfService: 'ข้อกำหนดการให้บริการ',
     privacyPolicy: 'นโยบายความเป็นส่วนตัว',
     and: 'และ',
     dataCollectionPolicy: 'นโยบายการเก็บรวบรวมข้อมูล',
diff --git a/web/src/i18n/locales/vi-VN.ts b/web/src/i18n/locales/vi-VN.ts
index 62ef898c..cc5631b0 100644
--- a/web/src/i18n/locales/vi-VN.ts
+++ b/web/src/i18n/locales/vi-VN.ts
@@ -63,6 +63,7 @@ const viVN = {
     test: 'Kiểm tra',
     forgotPassword: 'Quên mật khẩu?',
     agreementNotice: 'Bằng việc tiếp tục, bạn đồng ý với',
+    termsOfService: 'Điều khoản dịch vụ',
     privacyPolicy: 'Chính sách bảo mật',
     and: 'và',
     dataCollectionPolicy: 'Chính sách thu thập dữ liệu',
diff --git a/web/src/i18n/locales/zh-Hans.ts b/web/src/i18n/locales/zh-Hans.ts
index f5e412ce..b644fabc 100644
--- a/web/src/i18n/locales/zh-Hans.ts
+++ b/web/src/i18n/locales/zh-Hans.ts
@@ -62,6 +62,7 @@ const zhHans = {
     test: '测试',
     forgotPassword: '忘记密码？',
     agreementNotice: '继续即表示您同意我们的',
+    termsOfService: '服务条款',
     privacyPolicy: '隐私政策',
     and: '和',
     dataCollectionPolicy: '数据收集政策',
diff --git a/web/src/i18n/locales/zh-Hant.ts b/web/src/i18n/locales/zh-Hant.ts
index 2eb3b8c3..ce98cbaf 100644
--- a/web/src/i18n/locales/zh-Hant.ts
+++ b/web/src/i18n/locales/zh-Hant.ts
@@ -62,6 +62,7 @@ const zhHant = {
     test: '測試',
     forgotPassword: '忘記密碼？',
     agreementNotice: '繼續即表示您同意我們的',
+    termsOfService: '服務條款',
     privacyPolicy: '隱私政策',
     and: '和',
     dataCollectionPolicy: '數據收集政策',