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 { useStore } from '@/stores/StoreContext.js';
import { useTranslation } from 'react-i18next';

function Login() {
  const { t, i18n } = useTranslation();

  const { authStore, noticeStore } = useStore();
  const { notification } = App.useApp();
  const navigate = useNavigate();
  const location = useLocation();
  const [form] = Form.useForm();

  useEffect (() => {
    if (location.search === '?out') {
      authStore.logout();
      navigate('/login');
    }
    return () => {
      // unmount...
    };
  }, []);

  const onFinish = (values) => {
    authStore.valdateUserPassword(values.username, values.password)
      .then((userId) => {
        noticeStore.getBulletinUnReadCount(userId);
        authStore.fetchUserDetail()
          .then((user) => {
            // navigate(-1) is equivalent to hitting the back button.
            navigate("/reservation/newest");
          })
          .catch(ex => {
            notification.error({
              message: `Notification`,
              description: 'Failed to get user information.',
              placement: 'top',
              duration: 4,
            });
          });
      })
      .catch(ex => {
        notification.error({
          message: `Notification`,
          description: 'Login failed. Incorrect username or password.',
          placement: 'top',
          duration: 4,
        });
      });
  };

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

  return (
    <Row justify="center" align="middle" style={{ minHeight: 500 }}>
      <Form
        name="basic"
        // layout="vertical"
        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: 'Please input your username!',
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("Password")}
          name="password"
          rules={[
            {
              required: true,
              message: 'Please input your password!',
            },
          ]}
        >
          <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;