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 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()
      setLoading(false)
      navigate("/auth/login",{replace:true})
    } catch ( error )
    {
      setLoading(false)
      showToast("Token is expries or Invalid ","error")
    }
  };
  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-3">
          <label htmlFor="email" className="form-label">
            New Password
          </label>
          <input
            type="password"
            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"
          />
          {errors.password && <div className="danger-text text-start" style={{fontSize:"12px"}}>{errors.password.message}</div>}
        </div>
        <div className=" mb-3">
          <label htmlFor="email" className="form-label">
            Repeat New Password
          </label>
          <input
            type="password"
            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"
          />
          {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;