marco.pms.web/src/pages/authentication/ResetPasswordPage.jsx

import { useState } from "react";
import { Link, useSearchParams } from "react-router-dom";
import "./page-auth.css";
import { AuthWrapper } from "./AuthWrapper";
import showToast from "../../services/toastService";
import AuthRepository from "../../repositories/AuthRepository";
import { z } from "zod";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { useNavigate } from "react-router-dom";
import { clearAllCache } from "../../slices/apiDataManager";

const resetPasswordSchema = z
  .object({
    email: z.string().email(),
    password: z
      .string()
      .min(8, "Password must be at least 8 characters")
      .regex(/[A-Z]/, "Password must contain at least one uppercase letter")
      .regex(/[a-z]/, "Password must contain at least one lowercase letter")
      .regex(/\d/, "Password must contain at least one number")
      .regex(
        /[!@#$%^&*()_+{}\[\]:;<>,.?~\\/-]/,
        "Password must contain at least one special character"
      ),

    confirmPassword: z
      .string()
      .min(8, "Password must be at least 8 characters"),
  })
  .refine((data) => data.password === data.confirmPassword, {
    message: "Passwords do not match",
    path: ["confirmPassword"],
  });

const ResetPasswordPage = () => {
  const [searchParams] = useSearchParams();
  const [loading, setLoading] = useState(false);
  const [hidepass, setHidepass] = useState(true);
  const [hidepass1, setHidepass1] = useState(true);
  const [tokenExpired, setTokenExpired] = useState(false);

  const token = searchParams.get("token");
  const navigate = useNavigate();

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(resetPasswordSchema),
  });

  const onSubmitResetPassword = async (data) => {
    try {
      setLoading(true);
      const { email, password, confirmPassword } = data;

      let reqObject = {
        email,
        token: token,
        newPassword: password,
      };
      let response = await AuthRepository.resetPassword(reqObject);
      showToast("Password Reseted", "success");
      clearAllCache();
      navigate("/auth/login", { replace: true });
      // setLoading(false);
    } catch (error) {
      debugger;
      setLoading(false);
      if (error?.response?.status === 400) {
        showToast("Please check valid Credentials", "error");
      } else {
        setTokenExpired(true);
      }
    }
  };

  if (tokenExpired) {
    return (
      <AuthWrapper>
        <h4 className="mb-2 ">Invalid Link 🔒</h4>
        <p className="mb-4" style={{ fontSize: "12px" }}>
          This link appears to be invalid or expired. Please use the 'Forgot
          Password' feature to set your new password.
        </p>
        <div className="text-center mb-4">
          <Link to="/auth/forgot-password" className="btn btn-outline-primary">
            Go to Forgot Password
          </Link>
        </div>
      </AuthWrapper>
    );
  }
  return (
    <AuthWrapper>
      <h4 className="mb-2">Reset Password? 🔒</h4>
      <p className="mb-4">Enter your email and new password to update.</p>
      <form
        id="formAuthentication"
        className="mb-3"
        onSubmit={handleSubmit(onSubmitResetPassword)}
      >
        <div className="mb-3">
          <label htmlFor="email" className="form-label">
            Email
          </label>
          <input
            type="text"
            className="form-control"
            id="email"
            {...register("email")}
            placeholder="Enter your email"
            autoFocus
          />
          {errors.email && (
            <div
              className="danger-text text-start"
              style={{ fontSize: "12px" }}
            >
              {errors.email.message}
            </div>
          )}
        </div>

        <div className="mb-2 form-password-toggle">
          <div className="mt-2">
            <label htmlFor="email" className="form-label list-group-item">
              New Password
            </label>
          </div>
          <div className=" input-group input-group-merge">
            <input
              type={hidepass ? "password" : "text"}
              autoComplete="true"
              id="password"
              className="form-control"
              name="password"
              {...register("password")}
              placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
              aria-describedby="password"
            />
            <button
              type="button"
              className="btn btn-outline-secondy border-top border-end border-bottom "
              onClick={() => setHidepass(!hidepass)}
              style={{
                borderTopLeftRadius: 0,
                borderBottomLeftRadius: 0,
                borderLeft: 0,
              }}
            >
              {hidepass ? (
                <i className="bx bx-hide" />
              ) : (
                <i className="bx bx-show" />
              )}
            </button>
          </div>
          {errors.password && (
            <div
              className="danger-text text-start"
              style={{ fontSize: "12px" }}
            >
              {errors.password.message}
            </div>
          )}
          <div className="mt-2">
            {" "}
            <label htmlFor="email" className="form-label">
              Repeat New Password
            </label>{" "}
          </div>
          <div className=" input-group input-group-merge">
            <input
              type={hidepass1 ? "password" : "text"}
              autoComplete="true"
              id="password"
              className="form-control"
              name="confirmPassword"
              {...register("confirmPassword")}
              placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
              aria-describedby="password"
            />
            <button
              type="button"
              className="btn border-top border-end border-bottom "
              onClick={() => setHidepass1(!hidepass1)}
              style={{
                borderTopLeftRadius: 0,
                borderBottomLeftRadius: 0,
                borderLeft: 0,
              }}
            >
              {hidepass1 ? (
                <i className="bx bx-hide" />
              ) : (
                <i className="bx bx-show" />
              )}
            </button>
          </div>
          {errors.confirmPassword && (
            <div
              className="danger-text text-start"
              style={{ fontSize: "12px" }}
            >
              {errors.confirmPassword.message}
            </div>
          )}
        </div>

        <div className="mb-3 text-start ">
          <p className="p-0 m-0" style={{ fontSize: "9px" }}>
            Password must be at least 8 characters
          </p>
          <p className="p-0 m-0" style={{ fontSize: "9px" }}>
            Password must contain at least one uppercase letter
          </p>
          <p className="p-0 m-0" style={{ fontSize: "9px" }}>
            Password must contain at least one number
          </p>
          <p className="p-0 m-0" style={{ fontSize: "9px" }}>
            Password must contain at least one special character
          </p>
        </div>
        <button aria-label="Click me" className="btn btn-primary d-grid w-100">
          {loading ? "Please Wait..." : "Update Password"}
        </button>
      </form>
      <div className="text-center">
        <Link
          aria-label="Go to Login Page"
          to="/auth/login"
          className="d-flex align-items-center justify-content-center"
        >
          <i className="bx bx-chevron-left scaleX-n1-rtl bx-sm"></i>
          Back to login
        </Link>
      </div>
    </AuthWrapper>
  );
};

export default ResetPasswordPage;