prisma-home-challenge/pages/login.tsx

import { NextPage } from "next";
import { FormEventHandler, useState } from "react";
import Layout from "../components/Layout";
import fetchApi, { ApiMethods, ApiPaths } from "../utils/api";

type FormError = {
  message: string;
};

const Login: NextPage = () => {
  const [error, setError] = useState<FormError | null>();

  const submitHandler: FormEventHandler<HTMLFormElement> = async (event) => {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    const { error, message } = await fetchApi({
      method: ApiMethods.POST,
      path: ApiPaths.Login,
      body: Object.fromEntries(formData.entries()),
    });
    if (error) {
      setError({ message: error });
    } else {
      console.log(message);
    }
  };

  return (
    <Layout>
      <form
        className="w-full max-w-screen-xs mx-auto flex flex-col xs:grid xs:grid-cols-form xs:items-center gap-4"
        onSubmit={submitHandler}
      >
        <div className="xs:contents">
          <label htmlFor="email" className="font-bold flex-1 xs:text-right">
            Email
          </label>
          <input
            type="email"
            name="email"
            id="email"
            className="bg-prisma-50 w-full rounded py-2 px-3 text-sm"
            placeholder="monkey@gmail.com"
            required
          />
        </div>
        <div className="xs:contents">
          <label htmlFor="password" className="font-bold flex-1 xs:text-right">
            Password
          </label>
          <input
            type="password"
            name="password"
            id="password"
            className="bg-prisma-50 w-full rounded py-2 px-3 text-sm"
            placeholder="••••••"
            required
          />
        </div>
        <button
          type="submit"
          className="col-start-2 w-max py-2 px-4 bg-prisma-900 text-white font-bold rounded text-sm hover:bg-prisma-800 active:bg-prisma-700"
        >
          Log in
        </button>
        {error && (
          <div
            role="alert"
            className="col-span-2 bg-red-200 p-4 text-center rounded font-bold text-red-900"
          >
            {error.message}
          </div>
        )}
      </form>
    </Layout>
  );
};

export default Login;