Viewing File: /home/ubuntu/todaykat-frontend-base/src/components/Auth/ForgotPassword.jsx
import React, { useEffect, useState } from "react";
import { Container, Row, Col, Form, Image, Button } from "react-bootstrap";
import { Link, useParams } from "react-router-dom";
import "./Auth.css";
import { Formik, Form as FORM, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
import { withTranslation, useTranslation } from "react-multi-lang";
import { connect } from "react-redux";
import { forgotPasswordStart } from "../store/actions/UserAction";
import configuration from "react-global-configuration";
const ForgotPassword = (props) => {
const t = useTranslation();
const validationSchema = Yup.object().shape({
email: Yup.string().email(t("invalid_email")).required(t("required")),
});
const handleSubmit = (values) => {
props.dispatch(forgotPasswordStart(values));
};
return (
<>
<div className="login-sec reset-password-sec">
<Container>
<div className="auth-brand-logo">
<Image
className="lazyload auth-logo"
src={configuration.get("configData.site_logo")}
type="image/png"
/>
</div>
<Row className="justify-content-end">
<Col md={12} lg={5} xl={5}>
{/* <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> */}
<div className="login-left-sec">
<div className="login-form">
<h3>{t("forgot_password")}</h3>
<p>{t("password_reset_mail")}</p>
<Formik
initialValues={{
email: "",
}}
validationSchema={validationSchema}
onSubmit={(values) => handleSubmit(values)}
>
<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"
className="form-control"
name="email"
placeholder={t("email_placeholder")}
/>
<ErrorMessage
component={"div"}
name="email"
className="text-danger"
/>
</Form.Group>
<div className="login-btn">
<Link to="/login">Back to Login</Link>
{/* <Link to="/shop">{t("return_to_store")}</Link> */}
</div>
<div className="default-btn-sec auth-submit-btn">
<Button
className="default-btn"
type="submit"
disabled={props.sendForgotPassword.buttonDisable}
>
{props.sendForgotPassword.loadingButtonContent
? props.sendForgotPassword.loadingButtonContent
: t("submit")}
</Button>
</div>
</FORM>
</Formik>
</div>
</div>
</Col>
</Row>
</Container>
</div>
</>
);
};
const mapStateToPros = (state) => ({
sendForgotPassword: state.users.forgotPassword,
});
function mapDispatchToProps(dispatch) {
return { dispatch };
}
export default connect(
mapStateToPros,
mapDispatchToProps
)(withTranslation(ForgotPassword));
Back to Directory
File Manager