File Manager

Editing 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