Web: LoginMobile: refactoring fields

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

@@ -3,48 +3,53 @@ import React, { useState } from "react";
 import { FieldContainer, EmailInput } from "ASC.Web.Components";
 
 const EmailField = ({
+  value,
   t,
-  userNameValid,
+  hasError,
   errorText,
   isLoading,
-  onChangeLogin,
+  onChangeEmail,
 }) => {
   const [errors, setErrors] = useState(null);
+  const [isEmpty, setIsEmpty] = useState(true);
 
-  const onChangeEmail = (result) => {
-    const { errors, isValid, value } = result;
+  const onChangeEmailHandler = (result) => {
+    const { errors, value, isValid } = result;
+    let errorsString = "";
 
-    setErrors(null);
+    setIsEmpty(!value);
 
-    if (!isValid && errors.length > 0 && value) {
-      setErrors(t("IncorrectEmail"));
+    if (errors.length > 0) {
+      const translatedErrors = errors.map((item) => {
+        return t(`${item}`);
+      });
+      errorsString = translatedErrors.join(", ");
+      errorsString = errorsString[0].toUpperCase() + errorsString.slice(1);
     }
 
-    console.log(errors);
-
-    onChangeLogin && onChangeLogin(result);
+    setErrors(errorsString);
+    onChangeEmail && onChangeEmail(value, isValid);
   };
 
   return (
     <FieldContainer
       isVertical={true}
       labelVisible={false}
-      hasError={userNameValid}
-      errorMessage={errors ? errors : errorText} //TODO: Add wrong login server error
+      hasError={hasError}
+      errorMessage={isEmpty ? t("RequiredFieldMessage") : errors} //TODO: Add wrong login server error
     >
       <EmailInput
         id="login"
         name="login"
-        hasError={userNameValid}
-        //value={userName}
+        hasError={hasError}
+        value={value}
         placeholder={t("RegistrationEmailWatermark")}
         size="large"
         scale={true}
-        isAutoFocussed={true}
         tabIndex={1}
         isDisabled={isLoading}
         autoComplete="username"
-        onValidateInput={onChangeEmail}
+        onValidateInput={onChangeEmailHandler}
       />
     </FieldContainer>
   );

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 
 import { FieldContainer, TextInput } from "ASC.Web.Components";
 
@@ -6,23 +6,20 @@ const TextField = ({
   t,
   hasError,
   value,
-  errorText,
-  placeholder,
+  isLoading,
   id,
   type,
-  isLoading,
+  placeholder,
   onChangeValue,
+  isAutoFocussed,
 }) => {
-  const [isValid, setIsValid] = useState(true);
-
   const onChangeHandler = (e) => {
     const { value } = e.target;
     const cleanVal = value.trim();
     let isValid = true;
-    if (!isValid) {
+    if (!cleanVal) {
       isValid = false;
     }
-    setIsValid(isValid);
     onChangeValue(cleanVal, isValid);
   };
 
@@ -42,7 +39,7 @@ const TextField = ({
         placeholder={t(`${placeholder}`)}
         size="large"
         scale={true}
-        isAutoFocussed={true}
+        isAutoFocussed={isAutoFocussed}
         tabIndex={1}
         isDisabled={isLoading}
         autoComplete="username"