登录页面创建

创建登录页面

1. src\pages\Login\Login.tsx

import React from "react";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Form, Input } from "antd";

import "./Login.scss";

const Login = () => {
  const onFinish = (values: { username: string; password: string }) => {
    console.log(values);
  };

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

  return (
    <div className="loginPage">
      <div className="loginBox">
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <Form.Item
            name="username"
            rules={[
              { required: true, message: "请输入用户名!" },
              () => ({
                validator(_, value) {
                  console.log(111, value);
                  if (value === "admin") {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error("不通过"));
                },
              }),
            ]}
            style={{ marginBottom: 10 }}
          >
            <Input prefix={<UserOutlined />} placeholder="用户名" />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[
              { required: true, message: "请输入密码!" },
              () => ({
                validator(_, value) {
                  console.log(222, value);
                  if (value === "123456") {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error("不通过"));
                },
              }),
            ]}
            style={{ marginBottom: 10 }}
          >
            <Input.Password
              prefix={<LockOutlined />}
              type="password"
              placeholder="密码"
            />
          </Form.Item>

          <Form.Item>
            <Button
              block
              type="primary"
              htmlType="submit"
              className="login-form-button"
            >
              登录
            </Button>
            <Button type="link" style={{ paddingLeft: 5 }}>
              去注册
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default Login;

2. 样式 src\pages\Login\Login.scss

.loginPage {
  min-height: 100vh;
  position: relative;
  background-color: bisque;

  .loginBox {
    width: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rebeccapurple;
  }
}