From 0ce2b9493ab0d1d27d4e407e52610f8e6e329673 Mon Sep 17 00:00:00 2001
From: MathieuG-P <40181755+Zagrios@users.noreply.github.com>
Date: Mon, 29 May 2023 20:59:27 +0200
Subject: [PATCH] [hotfix] Add warning if the password exceed 64 characters

---
 assets/jsons/translations/de.json                          | 3 ++-
 assets/jsons/translations/en.json                          | 3 ++-
 assets/jsons/translations/es.json                          | 3 ++-
 assets/jsons/translations/fr.json                          | 3 ++-
 .../components/modal/modal-types/login-modal.component.tsx | 7 +++++--
 5 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/assets/jsons/translations/de.json b/assets/jsons/translations/de.json
index 4845287c..a776735d 100644
--- a/assets/jsons/translations/de.json
+++ b/assets/jsons/translations/de.json
@@ -472,7 +472,8 @@
                 },
                 "password": {
                     "label": "Passwort",
-                    "placeholder": "Gebe dein Passwort ein"
+                    "placeholder": "Gebe dein Passwort ein",
+                    "max-length-warning": "Das Passwort überschreitet 64 Zeichen! Wenn das Passwort ungültig ist, versuchen Sie nur die ersten 64 Zeichen einzugeben." 
                 },
                 "stay": {
                     "label": "Verbunden bleiben"
diff --git a/assets/jsons/translations/en.json b/assets/jsons/translations/en.json
index 612612dc..b6e90ac7 100644
--- a/assets/jsons/translations/en.json
+++ b/assets/jsons/translations/en.json
@@ -472,7 +472,8 @@
                 },
                 "password": {
                     "label": "Password",
-                    "placeholder": "Enter your password"
+                    "placeholder": "Enter your password",
+                    "max-length-warning": "The password exceeds 64 characters! If the password is invalid, try to put its first 64 characters." 
                 },
                 "stay": {
                     "label": "Stay connected"
diff --git a/assets/jsons/translations/es.json b/assets/jsons/translations/es.json
index 4da0b6d5..68a98329 100644
--- a/assets/jsons/translations/es.json
+++ b/assets/jsons/translations/es.json
@@ -471,7 +471,8 @@
                 },
                 "password": {
                     "label": "Contraseña",
-                    "placeholder": "Introduzca su contraseña"
+                    "placeholder": "Introduzca su contraseña",
+                    "max-length-warning": "¡La contraseña supera los 64 caracteres! Si la contraseña es inválida, intenta ingresar solo sus primeros 64 caracteres." 
                 },
                 "stay": {
                     "label": "Manténgase conectado"
diff --git a/assets/jsons/translations/fr.json b/assets/jsons/translations/fr.json
index 6254a57b..3221fd19 100644
--- a/assets/jsons/translations/fr.json
+++ b/assets/jsons/translations/fr.json
@@ -471,7 +471,8 @@
                 },
                 "password": {
                     "label": "Mot de passe",
-                    "placeholder": "Entre ton mot de passe"
+                    "placeholder": "Entre ton mot de passe",
+                    "max-length-warning": "Le mot de passe dépasse 64 caractères ! Si le mot de passe est invalide, tente d'entrer seulement ses 64 premiers caractères." 
                 },
                 "stay": {
                     "label": "Rester connecté"
diff --git a/src/renderer/components/modal/modal-types/login-modal.component.tsx b/src/renderer/components/modal/modal-types/login-modal.component.tsx
index 88b74566..74bb33ab 100644
--- a/src/renderer/components/modal/modal-types/login-modal.component.tsx
+++ b/src/renderer/components/modal/modal-types/login-modal.component.tsx
@@ -25,7 +25,7 @@ export const LoginModal: ModalComponent<{username: string, password: string, sta
     }
 
   return (
-    <form onSubmit={(e) => {e.preventDefault(); loggin();}}>
+    <form className="max-w-xs" onSubmit={(e) => {e.preventDefault(); loggin();}}>
         <h1 className="text-3xl uppercase tracking-wide w-full text-center text-gray-800 dark:text-gray-200">{t("modals.steam-login.title")}</h1>
         <BsmImage className="mx-auto h-20" image={BeatImpatient} />
         
@@ -33,9 +33,12 @@ export const LoginModal: ModalComponent<{username: string, password: string, sta
             <label className="block font-bold cursor-pointer tracking-wide text-gray-800 dark:text-gray-200" htmlFor="username">{t("modals.steam-login.inputs.username.label")}</label>
             <input className="w-full bg-light-main-color-1 dark:bg-main-color-1 px-1 py-[2px] rounded-md outline-none" onChange={e => setUsername(e.target.value)} value={username} type="text" name="username" id="username" placeholder={t("modals.steam-login.inputs.username.placeholder")}/>
         </div>
-        <div className="mb-2">
+        <div className="mb-2 flex flex-col w-full">
             <label className="block font-bold cursor-pointer tracking-wide text-gray-800 dark:text-gray-200" htmlFor="password">{t("modals.steam-login.inputs.password.label")}</label>
             <input className="w-full bg-light-main-color-1 dark:bg-main-color-1 px-1 py-[2px] rounded-md outline-none" onChange={e => setPassword(e.target.value)} value={password} type="password" name="password" id="password" placeholder={t("modals.steam-login.inputs.password.placeholder")}/>
+            {password?.length > 64 && (
+                <span className="text-orange-700 dark:text-orange-400 text-xs whitespace-normal max-w-full w-full overflow-hidden">{t("modals.steam-login.inputs.password.max-length-warning")}</span>
+            )}
         </div>
 
         <span onClick={whyCredentials} className="underline my-4 block cursor-pointer">{t("modals.steam-login.why-credentials")}</span>