trampa-frontend/src/pages/ForgotPasswordPage/ForgotPasswordPageMUI.js

import React from "react";
import { useFormik } from "formik";
import { useTranslation } from "react-i18next";
import * as Yup from "yup";
import i18next from "i18next";
import { ReactComponent as Logo } from "../../assets/images/svg/logo-vertical.svg";
import {
  ForgotPasswordPageContainer,
  ForgotPasswordDescription,
  ForgotPasswordTitle,
  FormContainer,
} from "./ForgotPassword.styled";
import { TextField } from "../../components/TextFields/TextField/TextField";
import { PrimaryButton } from "../../components/Buttons/PrimaryButton/PrimaryButton";
import { useHistory } from "react-router-dom";
import { FORGOT_PASSWORD_MAIL_SENT } from "../../constants/pages";
import selectedTheme from "../../themes";

const forgotPasswordValidationSchema = Yup.object().shape({
  email: Yup.string()
    .required(i18next.t("forgotPassword.emailRequired"))
    .email(i18next.t("forgotPassword.emailFormat")),
});

const ForgotPasswordPage = () => {
  const history = useHistory();
  const { t } = useTranslation();

  const handleSubmit = (values) => {
    console.log("Values", values);
    history.push(FORGOT_PASSWORD_MAIL_SENT);
  };

  const formik = useFormik({
    initialValues: {
      email: "",
    },
    validationSchema: forgotPasswordValidationSchema,
    onSubmit: handleSubmit,
    validateOnBlur: true,
    enableReinitialize: true,
  });

  return (
    <ForgotPasswordPageContainer>
      <Logo />

      <ForgotPasswordTitle component="h1" variant="h5">
        {t("forgotPassword.title")}
      </ForgotPasswordTitle>

      <ForgotPasswordDescription component="h1" variant="h6">
        {t("forgotPassword.description")}
      </ForgotPasswordDescription>

      <FormContainer component="form" onSubmit={formik.handleSubmit}>
        {/* <Backdrop position="absolute" isLoading={isLoading} /> */}

        <TextField
          name="email"
          placeholder={t("common.labelEmail")}
          margin="normal"
          value={formik.values.email}
          error={formik.touched.email && Boolean(formik.errors.email)}
          helperText={formik.touched.email && formik.errors.email}
          onChange={formik.handleChange}
          autoFocus
          fullWidth
        />

        <PrimaryButton
          type="submit"
          variant="contained"
          height="48px"
          fullWidth={true}
          buttoncolor={selectedTheme.primaryPurple}
          textcolor="white"
          disabled={formik.values.email?.length === 0}
        >
          {t("common.send")}
        </PrimaryButton>
      </FormContainer>
    </ForgotPasswordPageContainer>
  );
};

export default ForgotPasswordPage;