Viewing File: /home/ubuntu/todaykat-frontend-base/src/components/Auth/LoginIndex.jsx
import React, { useEffect, useState } from "react";
import { Container, Row, Col, Form, Image, Button } from "react-bootstrap";
import * as Yup from "yup";
import { userLoginStart, userRegisterStart } from "../store/actions/UserAction";
import configuration from "react-global-configuration";
import { Formik, Form as FORM, Field, ErrorMessage } from "formik";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import "./Auth.css";
import { connect } from "react-redux";
import { withTranslation, useTranslation } from "react-multi-lang";
import SocialButton from "../Helper/SocialButton";
import { gapi } from "gapi-script";
const LoginIndex = (props) => {
const t = useTranslation();
const [skipRender, setSkipRender] = useState(true);
const [loginPasswordVisible, setLoginPasswordVisible] = useState(false);
const navigate = useNavigate();
const loginSchema = Yup.object().shape({
email: Yup.string().email(t("invalid_email")).required(t("email_required")),
password: Yup.string()
.required(t("password_required"))
.matches(/^(?=.*[a-zA-Z0-9])(?=.{6,})/, t("must_have_6_characters")),
});
const handleLogin = (values) => {
props.dispatch(userLoginStart(values));
};
useEffect(() => {
gapi.load("client:auth2", () => {
gapi.client.init({
clientId: configuration.get("configData.GOOGLE_CLIENT_ID"),
plugin_name: "chat",
});
});
}, []);
const handleFacebookLogin = (user) => {
console.log("handleFacebookLogin", user._profile);
props.dispatch(
userRegisterStart({
name: user._profile.name,
first_name: user._profile.firstName ? user._profile.firstName : "",
last_name: user._profile.lastName ? user._profile.lastName : "",
email: user._profile.email ? user._profile.email : "",
social_unique_id: user._profile.id,
picture: user._profile.profilePicURL,
login_by: "facebook",
dob: localStorage.getItem("userDOB"),
})
);
};
const handleGoogleLogin = (user) => {
console.log("handleGoogleLogin", user._profile);
props.dispatch(
userRegisterStart({
name: user._profile.name,
email: user._profile.email,
first_name: user._profile.firstName ? user._profile.firstName : "",
last_name: user._profile.lastName ? user._profile.lastName : "",
social_unique_id: user._profile.id,
picture: user._profile.profilePicURL,
login_by: "google",
dob: localStorage.getItem("userDOB"),
})
);
};
const handleSocialLoginFailure = (err) => {
console.error(err);
};
useEffect(() => {
if (localStorage.getItem("userId") && localStorage.getItem("accessToken")) {
if (localStorage.getItem("product")) {
let product = localStorage.getItem("product");
localStorage.removeItem("product");
navigate(`/product/${product}`);
} else {
navigate("/");
}
}
}, []);
useEffect(() => {
if (
!skipRender &&
!props.login.loading &&
Object.keys(props.login.data).length > 0
) {
if (props.login.data.is_two_step_auth_enabled == 1) {
navigate("/verification");
} else if (props.login.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.login]);
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]);
return (
<>
<div className="login-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("login")}</h3>
<p>Please enter your email and password to securely <br /> access your account</p>
<Formik
initialValues={{
email: "",
password: "",
dob: localStorage.getItem("userDOB"),
}}
validationSchema={loginSchema}
onSubmit={(values) => handleLogin(values)}
>
{({ touched, errors }) => (
<FORM>
{/* <div className="required-content">
<p>{t("required_fields")}*</p>
</div> */}
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Label>{t("email")}*</Form.Label>
<Field
type="email"
name="email"
placeholder={t("email_placeholder")}
className="form-control"
/>
<ErrorMessage
component={"div"}
name="email"
className="text-danger text-right"
/>
</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="/register">Don't Have an Account</Link>
<Link to="/forgot-password">{t("lost_password?")}</Link>
</div>
<div className="default-btn-sec">
<Button
className="default-btn"
type="submit"
disabled={props.login.buttonDisable}
>
{props.login.loadingButtonContent
? props.login.loadingButtonContent
: t("login")}
</Button>
</div>
</FORM>
)}
</Formik>
<div className="login-social-icon mt-3">
{configuration.get("configData.GOOGLE_CLIENT_ID") ||
configuration.get("configData.FB_CLIENT_ID") ? (
<span className="or-line">
<p>{t("login_with")}</p>
</span>
) : null}
<div className="login-icons">
<ul>
<li>
{configuration.get("configData.FB_CLIENT_ID") ? (
<SocialButton
provider="facebook"
appId={configuration.get("configData.FB_CLIENT_ID")}
onLoginSuccess={handleFacebookLogin}
onLoginFailure={handleSocialLoginFailure}
className="social-button"
id="facebook-connect"
>
<span>
<Image
src={
window.location.origin +
"/images/facebook.svg"
}
/>
</span>
</SocialButton>
) : null}
</li>
<li>
{configuration.get("configData.GOOGLE_CLIENT_ID") ? (
<SocialButton
provider="google"
key={"google"}
appId={configuration.get(
"configData.GOOGLE_CLIENT_ID"
)}
onLoginSuccess={handleGoogleLogin}
onLoginFailure={handleSocialLoginFailure}
className="social-button"
id="google-connect"
>
<span>
<Image
src={
window.location.origin + "/images/google.svg"
}
/>
</span>
</SocialButton>
) : null}
</li>
</ul>
</div>
</div>
</div>
</div>
</Col>
</Row>
</Container>
</div>
</>
);
};
const mapStateToPros = (state) => ({
login: state.users.loginInputData,
register: state.users.register,
});
function mapDispatchToProps(dispatch) {
return { dispatch };
}
export default connect(
mapStateToPros,
mapDispatchToProps
)(withTranslation(LoginIndex));
Back to Directory
File Manager