burger-online

1
import {Button, Input} from '@ya.praktikum/react-developer-burger-ui-components'
2
import React from 'react'
3
import {useSelector} from 'react-redux'
4
import {Link, Navigate, useNavigate} from 'react-router-dom'
5
import PasswordInput from '../../components/UI/password-input/password-input'
6
import {useAppDispatch, useForm} from '../../hooks'
7
import {fetchResetPassword} from '../../redux/user/actions'
8
import {catchError, userStore} from '../../redux/user/slice'
9
import {THandleSubmitForm} from '../../types'
10

11
const ResetPassword = () => {
12
  const dispatch = useAppDispatch()
13
  const navigate = useNavigate()
14
  const {resetPasswordStatus, errorStatus} = useSelector(userStore)
15

16
  const {values, handleChanges} = useForm({
17
    password: '',
18
    token: '',
19
  })
20

21
  const handleResetPassword = (e: THandleSubmitForm) => {
22
    e.preventDefault()
23
    dispatch(fetchResetPassword(values))
24
    navigate('/', {replace: true})
25
  }
26

27
  React.useEffect(() => {
28
    setTimeout(() => {
29
      dispatch(catchError(null))
30
    }, 6000)
31
  }, [errorStatus, dispatch])
32

33
  if (!resetPasswordStatus) return <Navigate to='/forgot-password' replace />
34
  return (
35
    <section className='wrapper'>
36
      <form className='content-route' onSubmit={handleResetPassword}>
37
        <h2 className='text text_type_main-medium'>Восстановление пароля</h2>
38
        <PasswordInput
39
          autoFocus
40
          value={values.password}
41
          placeholder='Введите новый пароль'
42
          onChange={handleChanges}
43
        />
44
        <Input
45
          value={values.token}
46
          type='text'
47
          name='token'
48
          placeholder='Введите код из письма'
49
          onChange={handleChanges}
50
        />
51
        <Button htmlType='submit'>Сохранить</Button>
52
        <span
53
          className={`text text_type_main-default ${errorStatus ? 'text-error-active' : 'text-error'}`}
54
        >
55
          {errorStatus?.message}
56
        </span>
57
      </form>
58
      <p className='text text_type_main-default text_color_inactive'>
59
        Вспомнили пароль?{' '}
60
        <Link to='/login' className='route-link text_color_accent'>
61
          Войти
62
        </Link>
63
      </p>
64
    </section>
65
  )
66
}
67

68
export default ResetPassword
69