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 LoginViewProps extends CommonProps {
  errorMessage?: null | string;
  initialValues?: {
    emailAddress?: string;
    password?: string;
  };
}

const LoginView: ReactView<LoginViewProps> = ({
  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_LOGIN_ACTION, {})}
          >
            {/* Email Address */}
            <div style={{ marginTop: 0 }}>
              <label htmlFor={"username"} style={{ fontWeight: "bold" }}>
                Email Address:
              </label>
              <TextInput
                style={{ marginTop: 8 }}
                themeScheme={commonProps.themeScheme}
                type={"text"}
                name={"email_address"}
                placeholder={"Enter your email address..."}
                defaultValue={initialValues?.emailAddress}
              />
            </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={"Enter your password..."}
                defaultValue={initialValues?.password}
              />
            </div>
            {/* Submit Button */}
            <Button type={"submit"} style={{ marginTop: 16, width: "100%" }}>
              Sign In
            </Button>
          </form>
        </Card>
      </PageWrapper>
    </Layout>
  );
};

LoginView.displayName = "LoginView";
export default LoginView;