queueful/frontend/app/src/components/AuthModal.tsx

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;