erp-platform/ui/src/views/auth/ResetPassword.tsx

import ActionLink from '@/components/shared/ActionLink'
import PasswordInput from '@/components/shared/PasswordInput'
import Alert from '@/components/ui/Alert'
import Button from '@/components/ui/Button'
import { FormContainer, FormItem } from '@/components/ui/Form'
import { ROUTES_ENUM } from '@/constants/route.constant'
import { resetPassword } from '@/proxy/account/account.service'
import useTimeOutMessage from '@/utils/hooks/useTimeOutMessage'
import type { AxiosError } from 'axios'
import { Field, Form, Formik } from 'formik'
import { useState } from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom'
import * as Yup from 'yup'

type ResetPasswordFormSchema = {
  password: string
  confirmPassword: string
}

const validationSchema = Yup.object().shape({
  password: Yup.string().required('Please enter your password'),
  confirmPassword: Yup.string().oneOf([Yup.ref('password')], 'Your passwords do not match'),
})

const ResetPassword = () => {
  const disableSubmit = false
  const signInUrl = ROUTES_ENUM.account.login

  const [searchParams] = useSearchParams()
  const userId = searchParams.get('userId')
  const resetToken = searchParams.get('resetToken')

  // bu olmadan da oluyor sanırım
  // const result = useQuery({
  //     queryKey: ['verifyPasswordResetToken', userId, resetToken],
  //     queryFn: () => verifyPasswordResetToken(userId, resetToken),
  //     retry: false,
  //     refetchOnWindowFocus: false,
  // })

  const [resetComplete, setResetComplete] = useState(false)

  const [message, setMessage] = useTimeOutMessage()

  const navigate = useNavigate()

  const onSubmit = async (
    values: ResetPasswordFormSchema,
    setSubmitting: (isSubmitting: boolean) => void,
  ) => {
    if (!userId || !resetToken) {
      return
    }

    const { password } = values
    setSubmitting(true)
    try {
      const resp = await resetPassword(userId, resetToken, password)
      if (resp.data) {
        setSubmitting(false)
        setResetComplete(true)
      }
    } catch (errors) {
      setMessage(
        (errors as AxiosError<{ message: string }>)?.response?.data?.message ||
          (errors as Error).toString(),
      )
      setSubmitting(false)
    }
  }

  const onContinue = () => {
    navigate(ROUTES_ENUM.account.login)
  }

  return (
    <div>
      <div className="mb-6">
        {resetComplete ? (
          <>
            <h3 className="mb-1">Reset done</h3>
            <p>Your password has been successfully reset</p>
          </>
        ) : (
          <>
            <h3 className="mb-1">Set new password</h3>
            <p>Your new password must different to previos password</p>
          </>
        )}
      </div>
      {message && (
        <Alert showIcon className="mb-4" type="danger">
          {message}
        </Alert>
      )}
      <Formik
        initialValues={{
          password: '',
          confirmPassword: '',
        }}
        validationSchema={validationSchema}
        onSubmit={(values, { setSubmitting }) => {
          if (!disableSubmit) {
            onSubmit(values, setSubmitting)
          } else {
            setSubmitting(false)
          }
        }}
      >
        {({ touched, errors, isSubmitting }) => (
          <Form>
            <FormContainer>
              {!resetComplete ? (
                <>
                  <FormItem
                    label="Password"
                    invalid={errors.password && touched.password}
                    errorMessage={errors.password}
                  >
                    <Field
                      autoComplete="off"
                      name="password"
                      placeholder="Password"
                      component={PasswordInput}
                    />
                  </FormItem>
                  <FormItem
                    label="Confirm Password"
                    invalid={errors.confirmPassword && touched.confirmPassword}
                    errorMessage={errors.confirmPassword}
                  >
                    <Field
                      autoComplete="off"
                      name="confirmPassword"
                      placeholder="Confirm Password"
                      component={PasswordInput}
                    />
                  </FormItem>
                  <Button block loading={isSubmitting} variant="solid" type="submit">
                    {isSubmitting ? 'Submitting...' : 'Submit'}
                  </Button>
                </>
              ) : (
                <Button block variant="solid" type="button" onClick={onContinue}>
                  Continue
                </Button>
              )}

              <div className="mt-4 text-center">
                <span>Back to </span>
                <ActionLink to={signInUrl}>Sign in</ActionLink>
              </div>
            </FormContainer>
          </Form>
        )}
      </Formik>
    </div>
  )
}

export default ResetPassword