From edc20a1f9eb356cd4ac8d7a04e31962fadad113e Mon Sep 17 00:00:00 2001
From: Viktor Fomin <viktor.fomin@onlyoffice.com>
Date: Mon, 14 Mar 2022 11:48:45 +0300
Subject: [PATCH] Web: Login: fix email input behavior

---
 web/ASC.Web.Login/src/Login.jsx      | 12 ++++++++++--
 web/ASC.Web.Login/src/RoomsLogin.jsx | 12 ++++++++++--
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/web/ASC.Web.Login/src/Login.jsx b/web/ASC.Web.Login/src/Login.jsx
index 9ef1f28ab1..6286c41417 100644
--- a/web/ASC.Web.Login/src/Login.jsx
+++ b/web/ASC.Web.Login/src/Login.jsx
@@ -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}
diff --git a/web/ASC.Web.Login/src/RoomsLogin.jsx b/web/ASC.Web.Login/src/RoomsLogin.jsx
index 880c8e406e..36c872c770 100644
--- a/web/ASC.Web.Login/src/RoomsLogin.jsx
+++ b/web/ASC.Web.Login/src/RoomsLogin.jsx
@@ -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}