Fix Login Page Translation Error: "Invalid Username or Password"

i Just Add the Translation for the backend Error response in Each language to fix these issue and a translateSubmitError.

Author: Jatin24062005

client/modules/User/components/LoginForm.jsx

@@ -24,6 +24,16 @@ function LoginForm() {
 
   useSyncFormTranslations(formRef, i18n.language);
 
+  const translateSubmitError = (error) => {
+    const errorMessages = {
+      'Invalid credentials': t('LoginForm.Errors.invalidCredentials'),
+      'Invalid username or password.': t('LoginForm.Errors.invalidCredentials'),
+      'Network error': t('LoginForm.Errors.networkError')
+      // Add more mappings as needed
+    };
+    return errorMessages[error] || error; // Fallback to the original error if no translation is found
+  };
+
   return (
     <Form
       fields={['email', 'password']}
@@ -101,7 +111,10 @@ function LoginForm() {
               )}
             </Field>
             {submitError && !modifiedSinceLastSubmit && (
-              <span className="form-error">{submitError}</span>
+              <span className="form-error">
+                {' '}
+                {translateSubmitError(submitError)}
+              </span>
             )}
             <Button type="submit" disabled={submitting}>
               {t('LoginForm.Submit')}

translations/locales/be/translations.json

@@ -67,7 +67,11 @@
     "UsernameOrEmailARIA": "ইমেইল অথবা ব্যবহারকারীর নাম",
     "Password": "পাসওয়ার্ড",
     "PasswordARIA": "পাসওয়ার্ড",
-    "Submit": "লগ ইন করুন"
+    "Submit": "লগ ইন করুন",
+    "Errors": {
+      "invalidCredentials": "অবৈধ ইমেল বা পাসওয়ার্ড।",
+      "networkError": "নেটওয়ার্ক ত্রুটি। অনুগ্রহ করে পরে আবার চেষ্টা করুন।"
+    }
   },
   "LoginView": {
     "Title": "p5.js ওয়েব এডিটর | লগইন",

translations/locales/de/translations.json

@@ -67,7 +67,12 @@
     "UsernameOrEmailARIA": "E-Mail oder Nutzername",
     "Password": "Passwort",
     "PasswordARIA": "Passwort",
-    "Submit": "Einloggen"
+    "Submit": "Einloggen",
+    "Deutsch (German)": {
+    "Errors": {
+      "invalidCredentials": "Ungültige E-Mail oder Passwort.",
+      "networkError": "Netzwerkfehler. Bitte versuchen Sie es später erneut."
+    }
   },
   "LoginView": {
     "Title": "p5.js Web Editor | Anmelden",

translations/locales/en-US/translations.json

@@ -67,7 +67,11 @@
     "UsernameOrEmailARIA": "Email or Username",
     "Password": "Password",
     "PasswordARIA": "Password",
-    "Submit": "Log In"
+    "Submit": "Log In",
+    "Errors": {
+      "invalidCredentials": "Invalid email or password.",
+      "networkError": "Network error. Please try again later."
+    }
   },
   "LoginView": {
     "Title": "p5.js Web Editor | Login",

translations/locales/es-419/translations.json

@@ -67,7 +67,11 @@
     "UsernameOrEmailARIA": "Introduce Correo o Identificación",
     "Password": "Contraseña",
     "PasswordARIA": "Contraseña",
-    "Submit": "Ingresa"
+    "Submit": "Ingresa",
+    "Errors": {
+      "invalidCredentials": "Correo electrónico o contraseña inválidos.",
+      "networkError": "Error de red. Por favor intente de nuevo más tarde."
+    }
   },
   "LoginView": {
     "Title": " Editor Web p5.js  | Ingreso",

translations/locales/fr-CA/translations.json

@@ -68,7 +68,11 @@
       "UsernameOrEmailARIA": "Courriel ou nom d'utilisateur",
       "Password": "Mot de passe",
       "PasswordARIA": "Mot de passe",
-      "Submit": "Se connecter"
+      "Submit": "Se connecter",
+      "Errors": {
+      "invalidCredentials": "E-mail ou mot de passe invalide.",
+      "networkError": "Erreur réseau. Veuillez réessayer plus tard."
+    }
     },
     "LoginView": {
       "Title": "Editeur web p5.js | Se connecter",

translations/locales/hi/translations.json

@@ -67,7 +67,11 @@
       "UsernameOrEmailARIA": "ईमेल या यूजरनेम",
       "Password": "पासवर्ड",
       "PasswordARIA": "पासवर्ड",
-      "Submit": "लॉग इन"
+      "Submit": "लॉग इन",
+        "Errors": {
+          "invalidCredentials": "अमान्य ईमेल या पासवर्ड।",
+          "networkError": "नेटवर्क त्रुटि। कृपया बाद में पुनः प्रयास करें।"
+        }
     },
     "LoginView": {
       "Title": "p5.js वेब एडिटर | लॉग इन",

translations/locales/it/translations.json

@@ -67,7 +67,11 @@
     "UsernameOrEmailARIA": "Email o Nome utente",
     "Password": "Password",
     "PasswordARIA": "Password",
-    "Submit": "Accedi"
+    "Submit": "Accedi",
+    "Errors": {
+      "invalidCredentials": "Email o password non validi.",
+      "networkError": "Errore di rete. Si prega di riprovare più tardi."
+    }
   },
   "LoginView": {
     "Title": "p5.js redattore web | Accesso",

translations/locales/ja/translations.json

@@ -67,7 +67,11 @@
       "UsernameOrEmailARIA": "メールアドレスもしくはユーザー名",
       "Password": "パスワード",
       "PasswordARIA": "パスワード",
-      "Submit": "ログイン"
+      "Submit": "ログイン",
+      "Errors": {
+        "invalidCredentials": "無効なメールアドレスまたはパスワード。",
+        "networkError": "ネットワークエラー。後でもう一度お試しください。"
+      }
     },
     "LoginView": {
       "Title": "p5.js ウェブエディタ | ログイン",

translations/locales/ko/translations.json

@@ -53,7 +53,11 @@
     "UsernameOrEmailARIA": "이메일 또는 아이디",
     "Password": "비밀번호",
     "PasswordARIA": "비밀번호",
-    "Submit": "로그인"
+    "Submit": "로그인",
+    "Errors": {
+      "invalidCredentials": "유효하지 않은 이메일 또는 비밀번호입니다.",
+      "networkError": "네트워크 오류입니다. 나중에 다시 시도해주세요."
+    }
   },
   "LoginView": {
     "Title": "p5.js 웹에디터 | 로그인",