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 [authenticate, loginStatus, defaultRoute] =
    useAuthStore((state) => [state.authenticate, state.loginStatus, state.defaultRoute])

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

  useEffect (() => {
    if (loginStatus === 302) {
      navigate(defaultRoute)
    }
  }, [loginStatus])

  const onFinish = (values) => {
    authenticate(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' className='min-h-96'>
      <Form
        name='login'
        layout='vertical'
        form={form}
        size='large'
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 24,
        }}
        className='max-w-xl'
        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
        >
          <Button type='primary' htmlType='submit' className='w-full'>
            {t('Login')}
          </Button>
        </Form.Item>
      </Form>
    </Row>
  )
}

export default Login