Viewing File: /home/ubuntu/route-and-root-frontend-base/src/components/Auth/RegisterIndex.jsx

import React, { useEffect } from "react";
import { Container, Row, Col, Form, Image, Button } from "react-bootstrap";
import { Formik, Form as FORM, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
import {
  usernameValidationStart,
  userRegisterStart,
} from "../store/actions/UserAction";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router";
import "./Auth.css";
import { useState } from "react";
import { connect } from "react-redux";
import { withTranslation, useTranslation } from "react-multi-lang";
import CustomLazyLoad from "../Helper/CustomLazyLoad";

const RegisterIndex = (props) => {
  const navigate = useNavigate();
  const t = useTranslation();
  const [isvalidUserName, setIsValidUserName] = useState(false);
  const [skipRender, setSkipRender] = useState(true);
  const [userName, setUserName] = useState("");
  const [loginPasswordVisible, setLoginPasswordVisible] = useState(false);

  useEffect(() => {
    if (
      !skipRender &&
      !props.register.loading &&
      Object.keys(props.register.data).length > 0
    ) {
      if (props.register.data.is_email_verified === 0) {
        navigate("/register-verification");
      } else {
        if (localStorage.getItem("product")) {
          let product = localStorage.getItem("product");
          localStorage.removeItem("product");
          navigate(`/product/${product}`);
        } else {
          navigate("/");
        }
      }
    }
    setSkipRender(false);
  }, [props.register]);

  const validationSchema = Yup.object().shape({
    name: Yup.string().required(t("required")),
    email: Yup.string().email(t("invalid_email")).required(t("required")),
    password: Yup.string()
      .matches(/^(?=.*[a-zA-Z0-9])(?=.{6,})/, t("must_have_6_characters"))
      .required(t("required")),
    // username: Yup.string().required(t("required")),
    mobile: Yup.string().matches(
      /^(?=.*[0-9])(?=.{9,})/,
      t("must_contain_9_characters")
    ),
  });

  const handleUsernameValidation = (username) => {
    if (username && username.length > 3) {
      if (username.replace(" ", "") === username) {
        if (username !== userName) {
          setUserName(username);
          setIsValidUserName(true);
          props.dispatch(usernameValidationStart({ username: username }));
          return "";
        }
      } else {
        setIsValidUserName(false);
        return t("no_whitespace");
      }
    } else {
      setIsValidUserName(false);
      return t("must_contain_4_characters");
    }
  };

  const register = (values) => {
    props.dispatch(userRegisterStart(values));
  };

  return (
    <>
      <div className="login-sec">
        <div className="login-avater">
        <CustomLazyLoad
            src={window.location.origin + "/images/blooms/auth-main.png"}
            classes="auth-main-img"
            alt="root"
          />
        </div>
        <div className="login-form-root">
          <div className="login-form">

            <div className="login-form-titles mb-3">
              <h3>{t("create_account")}</h3>
              <Link to="/login" className="wishlist-btn">
                {t("login")}
              </Link>
            </div>
            <Formik
              initialValues={{
                name: "",
                username: "",
                mobile: "",
                email: "",
                password: "",
                dob: "2000-01-01",
              }}
              validationSchema={validationSchema}
              onSubmit={(values) => register(values)}
            >
              {({ errors, touched }) => (
                <FORM>
                  <Form.Group className="mb-3">
                    <Form.Label>{t("name")}<span>*</span></Form.Label>
                    <Field
                      type="text"
                      className="form-control"
                      name="name"
                      placeholder={t("name_placeholder")}
                    />
                    <ErrorMessage
                      component={"div"}
                      name="name"
                      className="text-danger"
                    />
                  </Form.Group>
                  {/* <Form.Group className="mb-3">
                        <Form.Label>{t("username")}</Form.Label>
                        <Field
                          type="text"
                          name="username"
                          placeholder={t("username_placeholder")}
                          className="form-control"
                          validate={handleUsernameValidation}
                        />
                        {errors.username ? (
                          <div className="text-danger">{errors.username}</div>
                        ) : props.usernameValidation.loadingButtonContent ? (
                          <img
                            src={
                              window.location.origin +
                              "/images/username-loading.gif"
                            }
                            width="15"
                            height="15"
                          />
                        ) : props.usernameValidation.data.success === true ? (
                          <div className="text-success">
                            {props.usernameValidation.data.message}
                          </div>
                        ) : (
                          <div className="text-danger">
                            {props.usernameValidation.error}
                          </div>
                        )}
                      </Form.Group> */}
                  <Form.Group className="mb-3">
                    <Form.Label>{t("mobile_no")}<span>*</span></Form.Label>
                    <Field
                      type="number"
                      className="form-control"
                      name="mobile"
                      placeholder={t("mobile_placeholder")}
                    />
                    <ErrorMessage
                      component={"div"}
                      name="mobile"
                      className="text-danger"
                    />
                  </Form.Group>
                  <Form.Group className="mb-3" controlId="formBasicEmail">
                    <Form.Label>{t("email")}<span>*</span></Form.Label>
                    <Field
                      type="email"
                      className="form-control"
                      name="email"
                      placeholder={t("email_placeholder")}
                    />
                    <ErrorMessage
                      component={"div"}
                      name="email"
                      className="text-danger"
                    />
                  </Form.Group>
                  <Form.Group
                    className="mb-4"
                    controlId="formBasicPassword"
                  >
                    <Form.Label>{t("password")}<span>*</span></Form.Label>

                    <div className="input-group d-flex align-items-center">
                      <Field
                        type={loginPasswordVisible ? "text" : "password"}
                        name="password"
                        placeholder={t("password_placeholder")}
                        className="form-control"
                      />
                      <div className="input-group-append">
                        <button
                          onClick={() =>
                            setLoginPasswordVisible(!loginPasswordVisible)
                          }
                          className="btn password-eye"
                          type="button"
                        >
                          {loginPasswordVisible ? (
                            <i className="fas fa-eye-slash align-self-center"></i>
                          ) : (
                            <i className="fas fa-eye align-self-center"></i>
                          )}
                        </button>
                      </div>
                    </div>
                    <ErrorMessage
                      component={"div"}
                      name="password"
                      className="text-danger text-right"
                    />
                  </Form.Group>
                  <div className="login-btn default-btn-sec reset-btn">
                    <Button
                      className="default-btn"
                      type="submit"
                      disabled={props.register.buttonDisable}
                    >
                      {props.register.loadingButtonContent
                        ? props.register.loadingButtonContent
                        : t("submit")}
                    </Button>
                  </div>
                </FORM>
              )}
            </Formik>
          </div>
        </div>
      </div>
    </>
  );
};

const mapStateToPros = (state) => ({
  register: state.users.register,
  usernameValidation: state.users.usernameValidation,
});

function mapDispatchToProps(dispatch) {
  return { dispatch };
}

export default connect(
  mapStateToPros,
  mapDispatchToProps
)(withTranslation(RegisterIndex));