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} from 'react-router-dom'
5
import PasswordInput from '../../components/UI/password-input/password-input'
6
import {useAppDispatch, useForm} from '../../hooks'
7
import {fetchLogin} from '../../redux/user/actions'
8
import {catchError, userStore} from '../../redux/user/slice'
9
import {THandleSubmitForm} from '../../types'
10

11
const Login = () => {
12
  const dispatch = useAppDispatch()
13
  const {errorStatus} = useSelector(userStore)
14

15
  const {values, handleChanges} = useForm({
16
    email: sessionStorage.getItem('email') || '',
17
    password: '',
18
  })
19

20
  const handleSubmitLogin = (e: THandleSubmitForm) => {
21
    e.preventDefault()
22
    dispatch(fetchLogin(values))
23
  }
24

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

31
  return (
32
    <section className='wrapper'>
33
      <form className='content-route' onSubmit={handleSubmitLogin}>
34
        <h2 className='text text_type_main-medium'>Вход</h2>
35
        <Input
36
          autoFocus
37
          type='email'
38
          name='email'
39
          placeholder='E-mail'
40
          value={values.email}
41
          onChange={handleChanges}
42
        />
43
        <PasswordInput placeholder='Пароль' value={values.password} onChange={handleChanges} />
44
        <Button htmlType='submit'>Войти</Button>
45
        <span
46
          className={`text text_type_main-default ${errorStatus ? 'text-error-active' : 'text-error'}`}
47
        >
48
          {errorStatus?.message}
49
        </span>
50
      </form>
51

52
      <p className='text text_type_main-default text_color_inactive mb-4'>
53
        Вы — новый пользователь?{' '}
54
        <Link to='/register' className='route-link text_color_accent'>
55
          Зарегистрироваться
56
        </Link>
57
      </p>
58
      <p className='text text_type_main-default text_color_inactive'>
59
        Забыли пароль?{' '}
60
        <Link to='/forgot-password' className='route-link text_color_accent'>
61
          Восстановить пароль
62
        </Link>
63
      </p>
64
    </section>
65
  )
66
}
67

68
export default Login
69