mfe-customer/src/client/jsx/react/pages/login/loginPage.jsx

Subscription page with Checkout

import React from "react";
import { withLogin } from "./components/withLogin";
import "antd/dist/antd.css";
import { Form, Input, Button, Card, Alert } from "antd";
const Login = (props) => {
  const { metaverseName, onLogin, errorLogin, onSelectScene, isLogged } = props;
  return (
    <div>
      {!isLogged ? (
        <Card
          title={`Login for Metaverse ${metaverseName}`}
          bordered={true}
          className="container-form"
        >
          <Form
            layout="vertical"
            onFinish={onLogin}
            initialValues={{
              metaverse: {
                metaverseName: metaverseName,
              },
            }}
          >
            {errorLogin && (
              <Alert
                className="mb-12"
                message="Email or password invalid"
                type="error"
                showIcon
              />
            )}
            <Form.Item
              name={["metaverse", "email"]}
              label="Email"
              rules={[
                {
                  required: true,
                  type: "email",
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              name={["metaverse", "password"]}
              label="Password"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Input.Password />
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit" block>
                Login
              </Button>
            </Form.Item>
          </Form>
        </Card>
      ) : (
        <Card
          title={`Select scene for Metaverse ${metaverseName}`}
          bordered={true}
          className="container-form"
        >
          <Form layout="vertical" onFinish={onSelectScene}>
            <Form.Item>
              <Button type="primary" htmlType="submit" block>
                Scene Test
              </Button>
            </Form.Item>
          </Form>
        </Card>
      )}
    </div>
  );
};

export default withLogin(Login);