[hotfix] Add warning if the password exceed 64 characters

This commit is contained in:
MathieuG-P
2023-05-29 20:59:27 +02:00
parent 8124577728
commit 0ce2b9493a
5 changed files with 13 additions and 6 deletions
@@ -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>