Merge pull request #225 from Zagrios/hotfix/add-warning-for-steam-username-max-length

[hotfix] Add warning if the password exceed 64 characters

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"

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"

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"

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é"

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>