Web: LoginMobile: refactoring EmailField, change validation

web/ASC.Web.LoginMobile/src/components/fields/EmailField/index.js

@@ -1,28 +1,40 @@
-import React from "react";
+import React, { useState } from "react";
 
-import { FieldContainer, TextInput } from "ASC.Web.Components";
+import { FieldContainer, EmailInput } from "ASC.Web.Components";
 
 const EmailField = ({
   t,
   userNameValid,
   errorText,
-  userName,
   isLoading,
   onChangeLogin,
-  onKeyPress,
 }) => {
+  const [errors, setErrors] = useState(null);
+
+  const onChangeEmail = (result) => {
+    const { errors, isValid, value } = result;
+
+    setErrors(null);
+
+    if (!isValid && errors.length > 0 && value) {
+      setErrors(t("IncorrectEmail"));
+    }
+
+    onChangeLogin && onChangeLogin(result);
+  };
+
   return (
     <FieldContainer
       isVertical={true}
       labelVisible={false}
-      hasError={!userNameValid}
-      errorMessage={errorText ? errorText : t("RequiredFieldMessage")} //TODO: Add wrong login server error
+      hasError={userNameValid}
+      errorMessage={errors ? errors : errorText} //TODO: Add wrong login server error
     >
-      <TextInput
+      <EmailInput
         id="login"
         name="login"
-        hasError={!userNameValid}
-        value={userName}
+        hasError={userNameValid}
+        //value={userName}
         placeholder={t("RegistrationEmailWatermark")}
         size="large"
         scale={true}
@@ -30,8 +42,7 @@ const EmailField = ({
         tabIndex={1}
         isDisabled={isLoading}
         autoComplete="username"
-        onChange={onChangeLogin}
-        onKeyDown={onKeyPress}
+        onValidateInput={onChangeEmail}
       />
     </FieldContainer>
   );

web/ASC.Web.LoginMobile/src/components/pages/Login/sub-components/login-form.js

@@ -68,31 +68,30 @@ const LoginForm = ({
   const [password, setPassword] = useState("");
   const [passwordValid, setPasswordValid] = useState(true);
   const [isLoading, setIsLoading] = useState(false);
+  const [hasError, setHasError ] = useState(false)
 
   const onSubmitHandler = () => {
     errorText && setErrorText("");
-    let hasError = false;
-
+    let isError = false
     const clearUserName = userName.trim();
 
     if (!clearUserName) {
-      hasError = true;
-      setUserNameValid(!hasError);
+      isError = true
+      setErrorText(t('RequiredFieldMessage'))
+      setHasError(isError)
     }
 
     const clearPass = password.trim();
 
     if (!clearPass) {
-      hasError = true;
-      setPasswordValid(!hasError);
+      isError = true
+      setPasswordValid(false);
+      setHasError(isError);
     }
 
-    if (hasError) return false;
+    if (isError) return false;
 
     setIsLoading(true);
-    //const hash = createPasswordHash(pass, fakeApi.fakeHashSettings);
-
-    // checkPwd(); //?
 
     fakeApi
       .login(clearUserName, clearPass)
@@ -107,10 +106,12 @@ const LoginForm = ({
       .finally(setIsLoading(false));
   };
 
-  const onChangeLogin = (e) => {
-    setUserName(e.target.value);
-    !userNameValid && setUserNameValid(true);
-    errorText && setErrorText("");
+  const onChangeLogin = (result) => {
+    const { value, isValid } = result;
+    setUserName(value);
+    setUserNameValid(isValid);
+    setHasError(false)
+    //errors.length > 0 ? setErrorText(errors) : setErrorText(null);
   };
 
   const onChangePassword = (e) => {
@@ -123,12 +124,14 @@ const LoginForm = ({
     <StyledLoginForm>
       <EmailField
         t={t}
-        userNameValid={userNameValid}
+        userNameValid={hasError}
         errorText={errorText}
         userName={userName}
         isLoading={isLoading}
+        errorText={errorText}
         onChangeLogin={onChangeLogin}
         onKeyPress={onKeyPress}
+        
       />
       <PasswordField
         t={t}

web/ASC.Web.LoginMobile/src/locales/en/translation.json

@@ -32,5 +32,7 @@
   "TooltipPasswordSpecial": "special characters (!@#$%^&*)", 
   "LoginRegistrationBtn": "Register",
   "RegistrationTitle": "Cloud office applications",
-  "RegistrationDesc": "Create Portal"
+  "RegistrationDesc": "Create portal",
+  "IncorrectEmail": "Incorrect email"
+  
 }

web/ASC.Web.LoginMobile/src/locales/ru/translation.json

@@ -32,5 +32,6 @@
   "TooltipPasswordSpecial": "Специальные символы (!@#$%^&*)",
   "LoginRegistrationBtn": "Регистрация",
   "RegistrationTitle": "Облачные офисные приложения",
-  "RegistrationDesc": "Создать портал"
+  "RegistrationDesc": "Создать портал",
+  "IncorrectEmail": "Неверный email"
 }