feat: enhance login error handling and add server unavailable message (#516)

frontend/src/contexts/AuthContext.tsx

@@ -14,14 +14,17 @@ const initialState: AuthState = {
 // Create auth context
 const AuthContext = createContext<{
   auth: AuthState;
-  login: (username: string, password: string) => Promise<{ success: boolean; isUsingDefaultPassword?: boolean }>;
+  login: (
+    username: string,
+    password: string,
+  ) => Promise<{ success: boolean; isUsingDefaultPassword?: boolean; message?: string }>;
   register: (username: string, password: string, isAdmin?: boolean) => Promise<boolean>;
   logout: () => void;
 }>({
   auth: initialState,
   login: async () => ({ success: false }),
   register: async () => false,
-  logout: () => { },
+  logout: () => {},
 });
 
 // Auth provider component
@@ -90,7 +93,10 @@ export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
   }, []);
 
   // Login function
-  const login = async (username: string, password: string): Promise<{ success: boolean; isUsingDefaultPassword?: boolean }> => {
+  const login = async (
+    username: string,
+    password: string,
+  ): Promise<{ success: boolean; isUsingDefaultPassword?: boolean; message?: string }> => {
     try {
       const response = await authService.login({ username, password });
 
@@ -111,7 +117,7 @@ export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
           loading: false,
           error: response.message || 'Authentication failed',
         });
-        return { success: false };
+        return { success: false, message: response.message };
       }
     } catch (error) {
       setAuth({
@@ -119,7 +125,7 @@ export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
         loading: false,
         error: 'Authentication failed',
       });
-      return { success: false };
+      return { success: false, message: error instanceof Error ? error.message : undefined };
     }
   };
 
@@ -127,7 +133,7 @@ export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
   const register = async (
     username: string,
     password: string,
-    isAdmin = false
+    isAdmin = false,
   ): Promise<boolean> => {
     try {
       const response = await authService.register({ username, password, isAdmin });
@@ -175,4 +181,4 @@ export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
 };
 
 // Custom hook to use auth context
-export const useAuth = () => useContext(AuthContext);
+export const useAuth = () => useContext(AuthContext);

frontend/src/pages/LoginPage.tsx

@@ -44,6 +44,24 @@ const LoginPage: React.FC = () => {
     return sanitizeReturnUrl(params.get('returnUrl'));
   }, [location.search]);
 
+  const isServerUnavailableError = useCallback((message?: string) => {
+    if (!message) return false;
+    const normalized = message.toLowerCase();
+
+    return (
+      normalized.includes('failed to fetch') ||
+      normalized.includes('networkerror') ||
+      normalized.includes('network error') ||
+      normalized.includes('connection refused') ||
+      normalized.includes('unable to connect') ||
+      normalized.includes('fetch error') ||
+      normalized.includes('econnrefused') ||
+      normalized.includes('http 500') ||
+      normalized.includes('internal server error') ||
+      normalized.includes('proxy error')
+    );
+  }, []);
+
   const buildRedirectTarget = useCallback(() => {
     if (!returnUrl) {
       return '/';
@@ -100,10 +118,20 @@ const LoginPage: React.FC = () => {
           redirectAfterLogin();
         }
       } else {
-        setError(t('auth.loginFailed'));
+        const message = result.message;
+        if (isServerUnavailableError(message)) {
+          setError(t('auth.serverUnavailable'));
+        } else {
+          setError(t('auth.loginFailed'));
+        }
       }
     } catch (err) {
-      setError(t('auth.loginError'));
+      const message = err instanceof Error ? err.message : undefined;
+      if (isServerUnavailableError(message)) {
+        setError(t('auth.serverUnavailable'));
+      } else {
+        setError(t('auth.loginError'));
+      }
     } finally {
       setLoading(false);
     }
@@ -131,13 +159,21 @@ const LoginPage: React.FC = () => {
         }}
       />
       <div className="pointer-events-none absolute inset-0 -z-10">
-        <svg className="h-full w-full opacity-[0.08] dark:opacity-[0.12]" xmlns="http://www.w3.org/2000/svg">
+        <svg
+          className="h-full w-full opacity-[0.08] dark:opacity-[0.12]"
+          xmlns="http://www.w3.org/2000/svg"
+        >
           <defs>
             <pattern id="grid" width="32" height="32" patternUnits="userSpaceOnUse">
               <path d="M 32 0 L 0 0 0 32" fill="none" stroke="currentColor" strokeWidth="0.5" />
             </pattern>
           </defs>
-          <rect width="100%" height="100%" fill="url(#grid)" className="text-gray-400 dark:text-gray-300" />
+          <rect
+            width="100%"
+            height="100%"
+            fill="url(#grid)"
+            className="text-gray-400 dark:text-gray-300"
+          />
         </svg>
       </div>
 

frontend/src/services/authService.ts

@@ -29,7 +29,7 @@ export const login = async (credentials: LoginCredentials): Promise<AuthResponse
     console.error('Login error:', error);
     return {
       success: false,
-      message: 'An error occurred during login',
+      message: error instanceof Error ? error.message : 'An error occurred during login',
     };
   }
 };

locales/en.json

@@ -61,6 +61,7 @@
     "emptyFields": "Username and password cannot be empty",
     "loginFailed": "Login failed, please check your username and password",
     "loginError": "An error occurred during login",
+    "serverUnavailable": "Unable to connect to the server. Please check your network connection or try again later",
     "currentPassword": "Current Password",
     "newPassword": "New Password",
     "confirmPassword": "Confirm Password",

locales/fr.json

@@ -61,6 +61,7 @@
     "emptyFields": "Le nom d'utilisateur et le mot de passe ne peuvent pas être vides",
     "loginFailed": "Échec de la connexion, veuillez vérifier votre nom d'utilisateur et votre mot de passe",
     "loginError": "Une erreur est survenue lors de la connexion",
+    "serverUnavailable": "Impossible de se connecter au serveur. Veuillez vérifier votre connexion réseau ou réessayer plus tard",
     "currentPassword": "Mot de passe actuel",
     "newPassword": "Nouveau mot de passe",
     "confirmPassword": "Confirmer le mot de passe",

locales/tr.json

@@ -61,6 +61,7 @@
     "emptyFields": "Kullanıcı adı ve şifre boş olamaz",
     "loginFailed": "Giriş başarısız, lütfen kullanıcı adınızı ve şifrenizi kontrol edin",
     "loginError": "Giriş sırasında bir hata oluştu",
+    "serverUnavailable": "Sunucuya bağlanılamıyor. Lütfen ağ bağlantınızı kontrol edin veya daha sonra tekrar deneyin",
     "currentPassword": "Mevcut Şifre",
     "newPassword": "Yeni Şifre",
     "confirmPassword": "Şifreyi Onayla",

locales/zh.json

@@ -61,6 +61,7 @@
     "emptyFields": "用户名和密码不能为空",
     "loginFailed": "登录失败，请检查用户名和密码",
     "loginError": "登录过程中出现错误",
+    "serverUnavailable": "无法连接到服务器，请检查网络连接或稍后再试",
     "currentPassword": "当前密码",
     "newPassword": "新密码",
     "confirmPassword": "确认密码",