Web: Login: fix show error logic

web/ASC.Web.Login/src/sub-components/forgot-password-modal-dialog.js

@@ -16,6 +16,7 @@ const ForgotPasswordModalDialog = (props) => {
   const [emailError, setEmailError] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [errorText, setErrorText] = useState("");
+  const [isShowError, setIsShowError] = useState(false);
 
   const { t } = useTranslation("Login");
 
@@ -27,6 +28,7 @@ const ForgotPasswordModalDialog = (props) => {
     //console.log("onChangeEmail", event.target.value);
     setEmail(event.target.value);
     setEmailError(false);
+    setIsShowError(false);
   };
 
   const onSendPasswordInstructions = () => {
@@ -56,6 +58,10 @@ const ForgotPasswordModalDialog = (props) => {
     setErrorText(res.errors[0]);
   };
 
+  const onBlurEmail = () => {
+    setIsShowError(true);
+  };
+
   return (
     <ModalDialogContainer
       displayType="modal"
@@ -83,14 +89,14 @@ const ForgotPasswordModalDialog = (props) => {
           className="email-reg-field"
           key="e-mail"
           isVertical={true}
-          hasError={emailError}
+          hasError={isShowError && emailError}
           labelVisible={false}
           errorMessage={
             errorText ? t(`Common:${errorText}`) : t("Common:RequiredField")
           }
         >
           <EmailInput
-            hasError={emailError}
+            hasError={isShowError && emailError}
             placeholder={t("RegistrationEmail")}
             isAutoFocussed={true}
             id="e-mail"
@@ -104,6 +110,7 @@ const ForgotPasswordModalDialog = (props) => {
             onChange={onChangeEmail}
             onKeyDown={onKeyDown}
             onValidateInput={onValidateEmail}
+            onBlur={onBlurEmail}
           />
         </FieldContainer>
       </ModalDialog.Body>

web/ASC.Web.Login/src/sub-components/register-container.js

@@ -43,6 +43,7 @@ const Register = (props) => {
   const [email, setEmail] = useState("");
   const [emailErr, setEmailErr] = useState(false);
   const [errorText, setErrorText] = useState("");
+  const [isShowError, setIsShowError] = useState(false);
 
   const { t } = useTranslation("Login");
 
@@ -59,6 +60,7 @@ const Register = (props) => {
   const onChangeEmail = (e) => {
     setEmail(e.currentTarget.value);
     setEmailErr(false);
+    setIsShowError(false);
   };
 
   const onValidateEmail = (res) => {
@@ -66,6 +68,10 @@ const Register = (props) => {
     setErrorText(res.errors[0]);
   };
 
+  const onBlurEmail = () => {
+    setIsShowError(true);
+  };
+
   const onSendRegisterRequest = () => {
     if (!email.trim()) {
       setEmailErr(true);
@@ -101,9 +107,11 @@ const Register = (props) => {
           t={t}
           onChangeEmail={onChangeEmail}
           onValidateEmail={onValidateEmail}
+          onBlurEmail={onBlurEmail}
           onRegisterModalClose={onRegisterModalClose}
           onSendRegisterRequest={onSendRegisterRequest}
           errorText={errorText}
+          isShowError={isShowError}
         />
       )}
     </>

web/ASC.Web.Login/src/sub-components/register-modal-dialog.js

@@ -18,11 +18,13 @@ const RegisterModalDialog = ({
   t,
   onChangeEmail,
   onValidateEmail,
+  onBlurEmail,
   onRegisterModalClose,
   onSendRegisterRequest,
   trustedDomainsType,
   trustedDomains,
   errorText,
+  isShowError,
 }) => {
   const getDomains = () => {
     return trustedDomains.map((domain, i) => (
@@ -68,14 +70,14 @@ const RegisterModalDialog = ({
           className="email-reg-field"
           key="e-mail"
           isVertical={true}
-          hasError={emailErr}
+          hasError={isShowError && emailErr}
           labelVisible={false}
           errorMessage={
             errorText ? t(`Common:${errorText}`) : t("Common:RequiredField")
           }
         >
           <EmailInput
-            hasError={emailErr}
+            hasError={isShowError && emailErr}
             placeholder={t("RegistrationEmail")}
             isAutoFocussed={true}
             id="e-mail"
@@ -88,6 +90,7 @@ const RegisterModalDialog = ({
             value={email}
             onChange={onChangeEmail}
             onValidateInput={onValidateEmail}
+            onBlur={onBlurEmail}
             autoComplete="username"
           />
         </FieldContainer>
@@ -131,11 +134,13 @@ RegisterModalDialog.propTypes = {
   t: PropTypes.func.isRequired,
   onChangeEmail: PropTypes.func.isRequired,
   onValidateEmail: PropTypes.func.isRequired,
+  onBlurEmail: PropTypes.func.isRequired,
   onSendRegisterRequest: PropTypes.func.isRequired,
   onRegisterModalClose: PropTypes.func.isRequired,
   trustedDomainsType: PropTypes.number,
   trustedDomains: PropTypes.array,
   errorText: PropTypes.string,
+  isShowError: PropTypes.bool,
 };
 
 export default RegisterModalDialog;