GitFOSS

import type { ReactView } from "@ethicdevs/react-monolith";
import React from "react";
// app
import type { CommonProps } from "../../types";
import { AppRoute } from "../../routes.defs";
import { Button, Card, Layout, PageWrapper, TextInput } from "../../components";
import { buildRouteLink } from "../../utils/shared";

export interface RegisterViewProps extends CommonProps {
  errorMessage?: null | string;
  initialValues?: {
    emailAddress?: string;
    username?: string;
    password?: string;
  };
}

const RegisterView: ReactView<RegisterViewProps> = ({
  commonProps,
  errorMessage = undefined,
  initialValues = undefined,
}) => {
  return (
    <Layout {...commonProps}>
      <PageWrapper
        style={{
          justifyContent: "center",
          alignItems: "center",
          minHeight: `calc(100vh - 72px)`,
        }}
      >
        {errorMessage && (
          <div
            style={{
              width: "100%",
              color: "red",
              fontWeight: "bold",
              textAlign: "center",
            }}
          >
            <span>{errorMessage}</span>
          </div>
        )}
        <Card
          themeScheme={commonProps.themeScheme}
          style={{ marginTop: errorMessage != null ? 16 : 0, padding: 16 }}
        >
          <form
            method={"POST"}
            action={buildRouteLink(AppRoute.AUTH_REGISTER_ACTION, {})}
          >
            {/* Email Address */}
            <div>
              <label htmlFor={"username"} style={{ fontWeight: "bold" }}>
                Email Address:
              </label>
              <TextInput
                style={{ marginTop: 8 }}
                themeScheme={commonProps.themeScheme}
                type={"text"}
                name={"email_address"}
                placeholder={"i.e. john.doe@provider.tld..."}
                defaultValue={initialValues?.emailAddress}
              />
            </div>
            {/* Username */}
            <div style={{ marginTop: 16 }}>
              <label htmlFor={"username"} style={{ fontWeight: "bold" }}>
                Username:
              </label>
              <TextInput
                style={{ marginTop: 8 }}
                themeScheme={commonProps.themeScheme}
                type={"text"}
                name={"username"}
                placeholder={"i.e. john.doe, jane.smith, etc..."}
                defaultValue={initialValues?.username}
              />
            </div>
            {/* Password */}
            <div style={{ marginTop: 16 }}>
              <label htmlFor={"username"} style={{ fontWeight: "bold" }}>
                Password:
              </label>
              <TextInput
                style={{ marginTop: 8 }}
                themeScheme={commonProps.themeScheme}
                type={"password"}
                name={"password"}
                placeholder={"Choose a great password..."}
                defaultValue={initialValues?.password}
              />
            </div>
            {/* Submit Button */}
            <Button type={"submit"} style={{ marginTop: 16, width: "100%" }}>
              Create my Account
            </Button>
          </form>
        </Card>
      </PageWrapper>
    </Layout>
  );
};

RegisterView.displayName = "RegisterView";
export default RegisterView;