Web: Login: fix email input behavior

This commit is contained in:
Viktor Fomin 2022-03-14 11:48:45 +03:00
parent a7199bd3d4
commit edc20a1f9e
2 changed files with 20 additions and 4 deletions

View File

@ -69,6 +69,8 @@ const Form = (props) => {
const [isLoaded, setIsLoaded] = useState(false);
const [isEmailErrorShow, setIsEmailErrorShow] = useState(false);
const { t } = useTranslation("Login");
const {
@ -133,6 +135,7 @@ const Form = (props) => {
!identifierValid && setIdentifierValid(true);
!passwordValid && setPasswordValid(true);
errorText && setErrorText("");
setIsEmailErrorShow(false);
};
//const throttledKeyPress = throttle(onKeyPress, 500);
@ -353,6 +356,10 @@ const Form = (props) => {
setErrorText(res.errors[0]);
};
const onBlurEmail = () => {
setIsEmailErrorShow(true);
};
//console.log("Login render");
if (!isLoaded) return <AppLoader />;
@ -404,7 +411,7 @@ const Form = (props) => {
<FieldContainer
isVertical={true}
labelVisible={false}
hasError={!identifierValid}
hasError={isEmailErrorShow && !identifierValid}
errorMessage={
errorText ? t(`Common:${errorText}`) : t("Common:RequiredField")
} //TODO: Add wrong login server error
@ -413,7 +420,7 @@ const Form = (props) => {
id="login"
name="login"
type="email"
hasError={!identifierValid}
hasError={isEmailErrorShow && !identifierValid}
value={identifier}
placeholder={t("RegistrationEmailWatermark")}
size="large"
@ -423,6 +430,7 @@ const Form = (props) => {
isDisabled={isLoading}
autoComplete="username"
onChange={onChangeLogin}
onBlur={onBlurEmail}
onValidateInput={onValidateEmail}
disallowChar='"'
forwardedRef={inputRef}

View File

@ -54,6 +54,8 @@ const Form = (props) => {
const [isLoaded, setIsLoaded] = useState(false);
const [isEmailErrorShow, setIsEmailErrorShow] = useState(false);
const { t } = useTranslation("Login");
const {
@ -116,6 +118,7 @@ const Form = (props) => {
//console.log("onClearErrors", e);
!identifierValid && setIdentifierValid(true);
errorText && setErrorText("");
setIsEmailErrorShow(false);
};
//const throttledKeyPress = throttle(onKeyPress, 500);
@ -293,6 +296,10 @@ const Form = (props) => {
setErrorText(res.errors[0]);
};
const onBlurEmail = () => {
setIsEmailErrorShow(true);
};
//console.log("Login render");
return (
@ -343,7 +350,7 @@ const Form = (props) => {
<FieldContainer
isVertical={true}
labelVisible={false}
hasError={!identifierValid}
hasError={isEmailErrorShow && !identifierValid}
errorMessage={
errorText ? t(`Common:${errorText}`) : t("Common:RequiredField")
} //TODO: Add wrong login server error
@ -352,7 +359,7 @@ const Form = (props) => {
id="login"
name="login"
type="email"
hasError={!identifierValid}
hasError={isEmailErrorShow && !identifierValid}
value={identifier}
placeholder={t("RegistrationEmailWatermark")}
size="large"
@ -362,6 +369,7 @@ const Form = (props) => {
isDisabled={isLoading || !identifierValid}
autoComplete="username"
onChange={onChangeLogin}
onBlur={onBlurEmail}
onValidateInput={onValidateEmail}
disallowChar='"'
forwardedRef={inputRef}