GHHub/src/views/Login.jsx

import { useNavigate, useLocation } from 'react-router-dom'
import { useEffect } from 'react'
import { Button, Checkbox, Form, Input, Row, App } from 'antd'
import { useTranslation } from 'react-i18next'
import useAuthStore from '@/stores/Auth'
import useNoticeStore from '@/stores/Notice'

function Login() {
  const [validateUserPassword, loginStatus] =
    useAuthStore((state) => [state.validateUserPassword, state.loginStatus])
    const getBulletinUnReadCount = useNoticeStore((state) => state.getBulletinUnReadCount)

  const { t, i18n } = useTranslation()
  const { notification } = App.useApp()
  const navigate = useNavigate()
  const [form] = Form.useForm()

  useEffect (() => {
    if (loginStatus === 302) {
      navigate('/reservation/newest')
    }
  }, [loginStatus])

  const onFinish = (values) => {
    validateUserPassword(values.username, values.password)
      .catch(ex => {
        console.error(ex)
        notification.error({
          message: t('Validation.Title'),
          description: t('Validation.LoginFailed'),
          placement: 'top',
          duration: 4,
        })
      })
  }

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  }

  return (
    <Row justify='center' align='middle' style={{ minHeight: 500 }}>
      <Form
        name='basic'
        form={form}
        size='large'
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        style={{
          maxWidth: 600,
        }}
        initialValues={{
          remember: true,
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete='off'
      >
        <Form.Item
          label={t('Username')}
          name='username'
          rules={[
            {
              required: true,
              message: t('Validation.UsernameIsEmpty'),
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t('Password')}
          name='password'
          rules={[
            {
              required: true,
              message: t('Validation.PasswordIsEmpty'),
            },
          ]}
        >
          <Input.Password />
        </Form.Item>
        <Form.Item
          wrapperCol={{
            offset: 8,
            span: 16,
          }}
        >
          <Button type='primary' htmlType='submit' style={{width: '100%'}}>
            {t('Login')}
          </Button>
        </Form.Item>
      </Form>
    </Row>
  )
}

export default Login