People: applied EmailInput component to ProfileAction component

products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/EmailField.js

@@ -0,0 +1,58 @@
+import React from "react";
+import isEqual from "lodash/isEqual";
+import {
+  FieldContainer,
+  EmailInput
+} from "asc-web-components";
+
+class EmailField extends React.Component {
+  shouldComponentUpdate(nextProps) {
+    return !isEqual(this.props, nextProps);
+  }
+
+  render() {
+    console.log("EmailField render");
+
+    const {
+      isRequired,
+      hasError,
+      labelText,
+      emailSettings,
+
+      inputName,
+      inputValue,
+      inputOnChange,
+      inputTabIndex,
+      placeholder,
+      scale,
+      inputIsDisabled,
+      onValidateInput,
+    } = this.props;
+
+
+
+    return (
+      <FieldContainer
+        isRequired={isRequired}
+        hasError={hasError}
+        labelText={labelText}
+      >
+        <EmailInput
+          className="field-input"
+          name={inputName}
+          value={inputValue}
+          onChange={inputOnChange}
+          emailSettings={emailSettings}
+          tabIndex={inputTabIndex}
+          placeholder={placeholder}
+          scale={scale}
+          autoComplete='email'
+          isDisabled={inputIsDisabled}
+          onValidateInput={onValidateInput}
+        />
+      </FieldContainer>
+    );
+  }
+}
+
+export default EmailField;

products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/createUserForm.js

@@ -8,6 +8,7 @@ import { createProfile, getUserPhoto } from '../../../../../store/profile/action
 import { MainContainer, AvatarContainer, MainFieldsContainer } from './FormFields/Form'
 import TextField from './FormFields/TextField'
 import PasswordField from './FormFields/PasswordField'
+import EmailField from './FormFields/EmailField';
 import DateField from './FormFields/DateField'
 import RadioField from './FormFields/RadioField'
 import DepartmentField from './FormFields/DepartmentField'
@@ -211,12 +212,11 @@ class CreateUserForm extends React.Component {
   }
 
   validate() {
-    const { profile } = this.state;
-    const emailRegex = /.+@.+\..+/;
+    const { profile, errors:stateErrors } = this.state;
     const errors = {
       firstName: !profile.firstName.trim(),
       lastName: !profile.lastName.trim(),
-      email: !emailRegex.test(profile.email.trim()),
+      email: stateErrors.email,
       password: profile.passwordType === "temp" && !profile.password.trim()
     };
     const hasError = errors.firstName || errors.lastName || errors.email || errors.password;
@@ -319,6 +319,8 @@ class CreateUserForm extends React.Component {
     this.setState(stateCopy)
   }
 
+  onValidateEmailField = (value) => this.setState({errors: { ...this.state.errors, email:!value }});
+
   render() {
     const { isLoading, errors, profile, selector } = this.state;
     const { t, settings, i18n } = this.props;
@@ -373,7 +375,7 @@ class CreateUserForm extends React.Component {
               inputOnChange={this.onInputChange}
               inputTabIndex={2}
             />
-            <TextField
+            <EmailField
               isRequired={true}
               hasError={errors.email}
               labelText={`${t("Email")}:`}
@@ -396,6 +398,7 @@ class CreateUserForm extends React.Component {
                   </Trans>
                 </Text>
               }
+              onValidateInput={this.onValidateEmailField}
             />
             <PasswordField
               isRequired={true}