File Manager

Editing File: /home/ubuntu/todaykat-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 configuration from "react-global-configuration";

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 register = (values) => {
    props.dispatch(userRegisterStart(values));
  };

return (
    <>
      <div className="login-sec register-sec">
        <Container>
          <div className="auth-brand-logo">
          <Image
              className="lazyload auth-logo"
              src={configuration.get("configData.site_logo")}
              type="image/png"
            />
          </div>
          {/* <div className="login-right-sec">
              <div className="login-content">
                <h4>Welcome to TodayKat</h4>
                <ul>
                  <li>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      xmlSpace="preserve"
                      width="25"
                      height="25"
                      viewBox="0 0 512.003 512.003"
                    >
                      <g fill="#fff">
                        <path
                          d="M477.958 262.633a15 15 0 0 1 0-13.263l19.096-39.065c10.632-21.751 2.208-47.676-19.178-59.023l-38.41-20.38a15 15 0 0 1-7.796-10.729l-7.512-42.829c-4.183-23.846-26.241-39.87-50.208-36.479l-43.053 6.09a15 15 0 0 1-12.613-4.099l-31.251-30.232c-17.401-16.834-44.661-16.835-62.061 0L193.72 42.859a15.01 15.01 0 0 1-12.613 4.099l-43.053-6.09c-23.975-3.393-46.025 12.633-50.208 36.479l-7.512 42.827a15 15 0 0 1-7.795 10.73l-38.41 20.38c-21.386 11.346-29.81 37.273-19.178 59.024l19.095 39.064a15 15 0 0 1 0 13.263L14.95 301.699c-10.632 21.751-2.208 47.676 19.178 59.023l38.41 20.38a15 15 0 0 1 7.796 10.729l7.512 42.829c3.808 21.708 22.422 36.932 43.815 36.93 2.107 0 4.245-.148 6.394-.452l43.053-6.09a15 15 0 0 1 12.613 4.099l31.251 30.232c8.702 8.418 19.864 12.626 31.03 12.625 11.163-.001 22.332-4.209 31.03-12.625l31.252-30.232c3.372-3.261 7.968-4.751 12.613-4.099l43.053 6.09c23.978 3.392 46.025-12.633 50.208-36.479l7.513-42.827a15 15 0 0 1 7.795-10.73l38.41-20.38c21.386-11.346 29.81-37.273 19.178-59.024zM196.941 123.116c29.852 0 54.139 24.287 54.139 54.139s-24.287 54.139-54.139 54.139-54.139-24.287-54.139-54.139 24.287-54.139 54.139-54.139m-27.944 240.77c-2.883 2.883-6.662 4.325-10.44 4.325s-7.558-1.441-10.44-4.325c-5.766-5.766-5.766-15.115 0-20.881l194.889-194.889c5.765-5.766 15.115-5.766 20.881 0s5.766 15.115 0 20.881zm146.064 25.002c-29.852 0-54.139-24.287-54.139-54.139s24.287-54.139 54.139-54.139 54.139 24.287 54.139 54.139-24.287 54.139-54.139 54.139"
                          data-original="#000000"
                        ></path>
                        <path
                          d="M315.061 310.141c-13.569 0-24.609 11.039-24.609 24.608s11.039 24.608 24.609 24.608c13.569 0 24.608-11.039 24.608-24.608s-11.039-24.608-24.608-24.608m-118.12-157.495c-13.569 0-24.608 11.039-24.608 24.608s11.039 24.609 24.608 24.609 24.609-11.039 24.609-24.609c-.001-13.568-11.04-24.608-24.609-24.608"
                          data-original="#000000"
                        ></path>
                      </g>
                    </svg>
                    <span>Exclusive electronic deals.</span>
                  </li>
                  <li>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      xmlSpace="preserve"
                      width="25"
                      height="25"
                      viewBox="0 0 24 24"
                    >
                      <g fill="#fff">
                        <circle cx="10.5" cy="22.5" r="1.5" data-original="#000000"></circle>
                        <circle cx="18.5" cy="22.5" r="1.5" data-original="#000000"></circle>
                        <path
                          d="M17.947 11.852C18.567 11.391 24 7.25 24 3.738A3.75 3.75 0 0 0 20.25 0a3.76 3.76 0 0 0-2.75 1.194A3.76 3.76 0 0 0 14.75 0 3.75 3.75 0 0 0 11 3.738c0 3.512 5.433 7.653 6.053 8.114a.745.745 0 0 0 .894 0"
                          data-original="#000000"
                        ></path>
                        <path
                          d="M6.25 17h15a.75.75 0 0 0 .734-.596l1.472-6.992c-1.578 1.906-3.459 3.407-4.315 4.044-.479.357-1.047.544-1.641.544s-1.162-.188-1.64-.542C14.535 12.472 10.757 9.429 9.454 6H6.359l-.38-1.806A2.764 2.764 0 0 0 3.3 2.011L.753 2H.75a.75.75 0 0 0-.003 1.5l2.546.011c.585.002 1.097.42 1.218.992l.505 2.401 1.81 8.596H6.25C5.009 15.5 4 16.509 4 17.75S5.009 20 6.25 20h15a.75.75 0 0 0 0-1.5h-15a.75.75 0 0 1 0-1.5"
                          data-original="#000000"
                        ></path>
                      </g>
                    </svg>
                    <span>Wishlist for future buys.</span>
                  </li>
                  <li>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      xmlSpace="preserve"
                      width="25"
                      height="25"
                      viewBox="0 0 512 512"
                    >
                      <g fill="#fff">
                        <path
                          d="M224 159.992v-32H32c-17.632 0-32 14.368-32 32v64h230.752c-4.448-19.552-6.752-40.608-6.752-64m286.688 128c-21.824 33.632-55.104 62.24-102.784 89.632-7.328 4.192-15.584 6.368-23.904 6.368s-16.576-2.176-23.808-6.304c-47.68-27.456-80.96-56.096-102.816-89.696H0v160c0 17.664 14.368 32 32 32h448c17.664 0 32-14.336 32-32v-160zm-366.688 96H80c-8.832 0-16-7.168-16-16s7.168-16 16-16h64c8.832 0 16 7.168 16 16s-7.168 16-16 16"
                          data-original="#000000"
                        ></path>
                        <path
                          d="m502.304 81.304-112-48a16.06 16.06 0 0 0-12.64 0l-112 48C259.808 83.8 256 89.592 256 95.992v64c0 88.032 32.544 139.488 120.032 189.888 2.464 1.408 5.216 2.112 7.968 2.112s5.504-.704 7.968-2.112C479.456 299.608 512 248.152 512 159.992v-64c0-6.4-3.808-12.192-9.696-14.688m-57.792 72.704-64 80c-3.072 3.776-7.68 5.984-12.512 5.984h-.672a16.06 16.06 0 0 1-12.64-7.104l-32-48c-4.896-7.36-2.912-17.28 4.448-22.176 7.296-4.864 17.248-2.944 22.176 4.448l19.872 29.792 50.304-62.912c5.536-6.88 15.616-7.968 22.496-2.496 6.912 5.472 8 15.552 2.528 22.464"
                          data-original="#000000"
                        ></path>
                      </g>
                    </svg>
                    <span>Secure shopping.</span>
                  </li>
                </ul>
                <h4>{t("new_customer")}</h4>
                <p>{t("login_text")}</p>
                <Link to="/register" className="wishlist-btn">
                  {t("create_account")}
                </Link>
              </div>
            </div> */}
          <Row className="justify-content-end">
            <Col md={12} lg={5} xl={5}>
              <div className="login-left-sec">
                <div className="login-form">
                  <h3>{t("create_account")}</h3>
                  <p>Create your account to get started! Fill in your details below. <br /> It only takes a few moments to set up.</p>
                  <Formik
                    initialValues={{
                      name: "",
                      username: "",
                      mobile: "",
                      email: "",
                      password: "",
                      dob: localStorage.getItem("userDOB"),
                    }}
                    validationSchema={validationSchema}
                    onSubmit={(values) => register(values)}
                  >
                    {({ errors, touched }) => (
                      <FORM>
                        {/* <div className="required-content">
                        <p>{t("required_fields")}*</p>
                      </div> */}
                        <Form.Group className="mb-3">
                          <Form.Label>{t("name")}*</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")}</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")}*</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-3"
                          controlId="formBasicPassword"
                        >
                          <Form.Label>{t("password")}*</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">
                        <Link to="/login">Having an Account</Link>
                        <Link to="/shop">{t("return_to_store")}</Link>
                        </div>
                        <div className="auth-submit-btn default-btn-sec">
                          <Button
                            className="default-btn"
                            type="submit"
                            disabled={props.register.buttonDisable}
                          >
                            {props.register.loadingButtonContent
                              ? props.register.loadingButtonContent
                              : t("submit")}
                          </Button>
                        </div>
                      </FORM>
                    )}
                  </Formik>
                </div>
              </div>
            </Col>
          </Row>
        </Container>
      </div>
    </>
  );
};

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

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

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

Back to Directory File Manager