Introduce SignUp page

pages/api/signup.ts

@@ -0,0 +1,21 @@
+import axios from "axios";
+import type { NextApiHandler } from "next";
+import { errorHandler } from "../../utils/apiErrorHandler";
+
+const signUpHandler: NextApiHandler = async (req, res) => {
+  if (req.body) {
+    try {
+      const response = await axios.post(
+        `${process.env.PRISMA_API}/register`,
+        req.body,
+        { headers: { "Content-Type": "application/json" } }
+      );
+      res.status(200).json(response.data);
+    } catch (error) {
+      const { status, message } = errorHandler(error);
+      res.status(status).json({ message });
+    }
+  }
+};
+
+export default signUpHandler;

pages/login.tsx

@@ -11,10 +11,7 @@ const Login: NextPage = () => {
 
   return (
     <Layout>
-      <form
-        className="form"
-        onSubmit={submitHandler}
-      >
+      <form className="form" onSubmit={submitHandler}>
         <div className="xs:contents">
           <label htmlFor="email" className="form-label">
             Email
@@ -41,10 +38,7 @@ const Login: NextPage = () => {
             required
           />
         </div>
-        <button
-          type="submit"
-          className="form-button"
-        >
+        <button type="submit" className="form-button">
           Log in
         </button>
         {error && (

pages/signup.tsx

@@ -0,0 +1,58 @@
+import { NextPage } from "next";
+import Layout from "../components/Layout";
+import useForm from "../hooks/useForm";
+import { ApiMethods, ApiPaths } from "../utils/api";
+
+const SignUp: NextPage = () => {
+  const { submitHandler, error } = useForm({
+    path: ApiPaths.SignUp,
+    method: ApiMethods.POST,
+  });
+
+  return (
+    <Layout>
+      <form className="form" onSubmit={submitHandler}>
+        <div className="xs:contents">
+          <label htmlFor="email" className="form-label">
+            Email
+          </label>
+          <input
+            type="email"
+            name="email"
+            id="email"
+            className="form-input"
+            placeholder="monkey@gmail.com"
+            required
+          />
+        </div>
+        <div className="xs:contents">
+          <label htmlFor="password" className="form-label">
+            Password
+          </label>
+          <input
+            type="password"
+            name="password"
+            id="password"
+            className="form-input"
+            minLength={6}
+            placeholder="••••••"
+            required
+          />
+        </div>
+        <button type="submit" className="form-button">
+          Sign up
+        </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 SignUp;

utils/api.ts

@@ -4,6 +4,7 @@ export enum ApiMethods {
 }
 
 export enum ApiPaths {
+  SignUp = "signup",
   Login = "login",
 }