expert-front/src/components/dashboard/change-password/index.jsx

import CenterLayout from "@/layouts/CenterLayout";
import DashboardLayouts from "@/layouts/dashboardLayouts";
import {
  Button,
  Typography,
  Stack,
  Paper,
  Container,
  Box,
} from "@mui/material";
import Image from "next/image";
import { Formik } from "formik";
import * as Yup from "yup";
import { useTranslations } from "next-intl";
import PasswordField from "@/core/components/PasswordField";
import StyledForm from "@/core/components/StyledForm";
import { CHANGE_PASSWORD } from "@/core/data/apiRoutes";
import useUser from "@/lib/app/hooks/useUser";
import axios from "axios";
import Notifications from "@/core/components/notifications";
import useDirection from "@/lib/app/hooks/useDirection";
import { toast } from "react-toastify";

const DashboardChangePasswordComponent = () => {
  const t = useTranslations();
  const { token } = useUser();
  const { directionApp } = useDirection();

  const handleSubmit = (values, { setSubmitting, resetForm }) => {
    toast.dismiss();
    const pendingToast = toast("Pending...", {
      position: directionApp === "ltr" ? "top-left" : "top-right",
      autoClose: false,
      closeOnClick: false,
      draggable: false,
    });
    axios
      .post(
        CHANGE_PASSWORD,
        {
          current_password: values.current_password,
          new_password: values.new_password,
          new_password_confirmation: values.new_password_confirmation,
        },
        {
          headers: { authorization: `Bearer ${token}` },
        }
      )
      .then((response) => {
        toast.dismiss(pendingToast); // Dismiss the pending toast notification
        Notifications(directionApp, response, t);
        resetForm();
      })
      .catch((error) => {
        toast.dismiss(pendingToast); // Dismiss the pending toast notification
        Notifications(directionApp, error.response, t);
      })
      .finally(() => {
        setSubmitting(false); // Set `setSubmitting` to false after the API request completes
      });
  };
  const initialValues = {
    current_password: "",
    new_password: "",
    new_password_confirmation: "",
  };
  const validationSchema = Yup.object().shape({
    current_password: Yup.string().required(
      t("ChangePassword.error_message_required")
    ),
    new_password: Yup.string()
      .min(8, t("ChangePassword.error_message_password_length"))
      .required(t("ChangePassword.error_message_required")),
    new_password_confirmation: Yup.string()
      .required(t("ChangePassword.error_message_required"))
      .test(
        t("ChangePassword.error_message_password_match"),
        t("ChangePassword.error_message_password_not_match"),
        function (value) {
          return this.parent.new_password === value;
        }
      ),
  });

  return (
    <DashboardLayouts>
      <CenterLayout>
        <Container maxWidth="sm">
          <Formik
            initialValues={initialValues}
            onSubmit={handleSubmit}
            validationSchema={validationSchema}
          >
            {(props) => (
              <StyledForm
                onSubmit={(e) => {
                  e.preventDefault();
                  props.handleSubmit();
                }}
              >
                <Paper elevation={0}>
                  <Stack spacing={3} sx={{ p: 5 }} component="div">
                    <Box
                      sx={{ position: "relative", width: "100%", height: 200 }}
                    >
                      <Image fill src="/images/change-password.svg" alt="" />
                    </Box>
                    <Typography margin={2} variant="h4" textAlign="center">
                      {t("ChangePassword.typography_change_password")}
                    </Typography>
                    <Stack spacing={1} component="div">
                      <PasswordField
                        name="current_password"
                        label={t("ChangePassword.label_current_password")}
                        error={
                          props.touched.current_password &&
                          props.errors.current_password
                            ? true
                            : false
                        }
                        helperText={
                          props.touched.current_password
                            ? props.errors.current_password
                            : null
                        }
                      />
                    </Stack>
                    <Stack spacing={1} component="div">
                      <PasswordField
                        name="new_password"
                        label={t("ChangePassword.label_new_password")}
                        error={
                          props.touched.new_password &&
                          props.errors.new_password
                            ? true
                            : false
                        }
                        helperText={
                          props.touched.new_password
                            ? props.errors.new_password
                            : null
                        }
                      />
                    </Stack>
                    <Stack spacing={1} component="div">
                      <PasswordField
                        name="new_password_confirmation"
                        label={t("ChangePassword.label_confirm_password")}
                        error={
                          props.touched.new_password_confirmation &&
                          props.errors.new_password_confirmation
                            ? true
                            : false
                        }
                        helperText={
                          props.touched.new_password_confirmation
                            ? props.errors.new_password_confirmation
                            : null
                        }
                      />
                    </Stack>
                    <Button
                      type="submit"
                      fullWidth
                      variant="contained"
                      color="primary"
                      size="large"
                      disabled={props.isSubmitting}
                    >
                      {props.isSubmitting
                        ? t("SubmitButton.button_while_submit")
                        : t("SubmitButton.button_submit")}
                    </Button>
                  </Stack>
                </Paper>
              </StyledForm>
            )}
          </Formik>
        </Container>
      </CenterLayout>
    </DashboardLayouts>
  );
};
export default DashboardChangePasswordComponent;