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

const LoginView: ReactView<LoginViewProps> = ({
  commonProps,
  errorMessage = undefined,
  initialValues = undefined,
}) => {
  return (
    <Layout {...commonProps}>
      <PageWrapper>
        {errorMessage && (
          <div className={"error_message"}>
            <p>{errorMessage}</p>
          </div>
        )}
        <form action={`/auth/login`} method={"POST"}>
          {/* Email Address */}
          <div>
            <label htmlFor={"username"}>Email Address:</label>
            <input
              type={"text"}
              name={"email_address"}
              placeholder={"Enter your email address..."}
              defaultValue={initialValues?.emailAddress}
            />
          </div>
          {/* Password */}
          <div>
            <label htmlFor={"username"}>Password:</label>
            <input
              type={"password"}
              name={"password"}
              placeholder={"Enter your password..."}
              defaultValue={initialValues?.password}
            />
          </div>
          {/* Submit Button */}
          <Button type={"submit"}>Log me In!</Button>
        </form>
      </PageWrapper>
    </Layout>
  );
};

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