Viewing 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 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 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