import { useState } from 'react'; import { useForm } from 'react-hook-form'; import { useResetPasswordMutation, TResetPassword } from 'librechat-data-provider'; import { useNavigate, useSearchParams } from 'react-router-dom'; import { useRecoilValue } from 'recoil'; import store from '~/store'; import { useLocalize } from '~/hooks'; function ResetPassword() { const localize = useLocalize(); const { register, handleSubmit, watch, formState: { errors }, } = useForm(); const resetPassword = useResetPasswordMutation(); const [resetError, setResetError] = useState(false); const [params] = useSearchParams(); const navigate = useNavigate(); const password = watch('password'); const onSubmit = (data: TResetPassword) => { resetPassword.mutate(data, { onError: () => { setResetError(true); }, }); }; if (resetPassword.isSuccess) { return (

{localize('com_auth_reset_password_success')}

{localize('com_auth_login_with_new_password')}
); } else { return (

{localize('com_auth_reset_password')}

{resetError && (
{localize('com_auth_error_invalid_reset_token')}{' '} {localize('com_auth_click_here')} {' '} {localize('com_auth_to_try_again')}
)}
{errors.password && ( {/* @ts-ignore not sure why */} {errors.password.message} )}
{ e.preventDefault(); return false; }} {...register('confirm_password', { validate: (value) => value === password || localize('com_auth_password_not_match'), })} aria-invalid={!!errors.confirm_password} className="peer block w-full appearance-none rounded-t-md border-0 border-b-2 border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0" placeholder=" " >
{errors.confirm_password && ( {/* @ts-ignore not sure why */} {errors.confirm_password.message} )} {errors.token && ( {/* @ts-ignore not sure why */} {errors.token.message} )} {errors.userId && ( {/* @ts-ignore not sure why */} {errors.userId.message} )}
); } } export default ResetPassword;