rebuild project with rsbuild

frontend/app/src/components/AuthModal.tsx

@@ -0,0 +1,154 @@
+import { Form, Input, Menu, MenuProps, Modal } from "antd";
+import "./styles.css";
+import { KeyOutlined, UserAddOutlined } from "@ant-design/icons";
+import React, { useState } from "react";
+
+const AuthModal = (props: {
+  open: boolean;
+  setOpen: (arg0: boolean) => void;
+}) => {
+  const [loginForm] = Form.useForm();
+  const [registerForm] = Form.useForm();
+
+  const [current, setCurrent] = useState("login");
+
+  const submitLoginForm = (formData: {
+    username: string;
+    password: string;
+  }) => {
+    console.log(formData);
+  };
+
+  const submitRegisterForm = (formData: {
+    username: string;
+    name: string | undefined;
+    password: string;
+    password2: string;
+  }) => {
+    console.log(formData);
+  };
+
+  const items: MenuProps["items"] = [
+    {
+      label: "Log In",
+      key: "login",
+      icon: <KeyOutlined />,
+    },
+    {
+      label: "Register",
+      key: "register",
+      icon: <UserAddOutlined />,
+    },
+  ];
+
+  return (
+    <Modal
+      open={props.open}
+      onCancel={() => props.setOpen(false)}
+      onOk={() => {
+        current === "register" && registerForm.submit();
+        current === "login" && loginForm.submit();
+      }}
+    >
+      <Menu
+        onClick={(e) => setCurrent(e.key)}
+        mode="horizontal"
+        selectedKeys={[current]}
+        items={items}
+      />
+      <br />
+      {current === "register" ? (
+        <Form
+          form={registerForm}
+          onFinish={submitRegisterForm}
+          layout="vertical"
+          requiredMark={false}
+        >
+          <Form.Item
+            name="username"
+            label="Username"
+            rules={[
+              {
+                required: true,
+                message: "Please input your Username!",
+              },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item name="name" label="Display name">
+            <Input />
+          </Form.Item>
+          <Form.Item
+            name="password"
+            label="Password"
+            rules={[
+              {
+                required: true,
+                message: "Please input your password!",
+              },
+            ]}
+          >
+            <Input type="password" />
+          </Form.Item>
+          <Form.Item
+            name="password2"
+            label="Repeat password"
+            rules={[
+              {
+                required: true,
+                message: "Please confirm your password!",
+              },
+              ({ getFieldValue }) => ({
+                validator(_, value) {
+                  if (!value || getFieldValue("password") === value) {
+                    return Promise.resolve();
+                  }
+                  return Promise.reject(
+                    new Error("The new password that you entered do not match!")
+                  );
+                },
+              }),
+            ]}
+          >
+            <Input type="password" />
+          </Form.Item>
+        </Form>
+      ) : (
+        <Form
+          form={loginForm}
+          onFinish={submitLoginForm}
+          layout="vertical"
+          requiredMark={false}
+        >
+          <Form.Item
+            name="username"
+            label="Username"
+            rules={[
+              {
+                required: true,
+                message: "Please input your Username!",
+              },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            name="password"
+            label="Password"
+            rules={[
+              {
+                required: true,
+                message: "Please input your Password!",
+              },
+            ]}
+          >
+            <Input type="password" />
+          </Form.Item>
+        </Form>
+      )}
+    </Modal>
+  );
+};
+
+export default AuthModal;