GitFOSS

import type { ReactView } from "@ethicdevs/react-monolith";
import React from "react";
// app
import type { CommonProps } from "../../types";
import { Button, Layout, PageWrapper } from "../../components";

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>
        {errorMessage && (
          <div className={"error_message"}>
            <p>{errorMessage}</p>
          </div>
        )}
        <form action={`/auth/register`} method={"POST"}>
          {/* Email Address */}
          <div>
            <label htmlFor={"username"}>Email Address:</label>
            <input
              type={"text"}
              name={"email_address"}
              placeholder={"i.e. john.doe@provider.tld..."}
              defaultValue={initialValues?.emailAddress}
            />
          </div>
          {/* Username */}
          <div>
            <label htmlFor={"username"}>Username:</label>
            <input
              type={"text"}
              name={"username"}
              placeholder={"i.e. john.doe, jane.smith, etc..."}
              defaultValue={initialValues?.username}
            />
          </div>
          {/* Password */}
          <div>
            <label htmlFor={"username"}>Password:</label>
            <input
              type={"password"}
              name={"password"}
              placeholder={"Choose a great password..."}
              defaultValue={initialValues?.password}
            />
          </div>
          {/* Submit Button */}
          <Button type={"submit"}>Create my Account</Button>
        </form>
      </PageWrapper>
    </Layout>
  );
};

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