added toasts popups + improved login/signup page + many more changes and improvements

pages/_app.tsx

@@ -4,6 +4,7 @@ import { SessionProvider } from "next-auth/react";
 import type { AppProps } from "next/app";
 import Head from "next/head";
 import AuthRedirect from "@/layouts/AuthRedirect";
+import { Toaster } from "react-hot-toast";
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
@@ -30,6 +31,11 @@ export default function App({ Component, pageProps }: AppProps) {
         />
         <link rel="manifest" href="/site.webmanifest" />
       </Head>
+      <Toaster
+        position="top-center"
+        reverseOrder={false}
+        toastOptions={{ className: "border border-sky-100" }}
+      />
       <AuthRedirect>
         <Component {...pageProps} />
       </AuthRedirect>

pages/api/auth/[...nextauth].ts

@@ -19,8 +19,6 @@ export const authOptions: AuthOptions = {
           password: string;
         };
 
-        console.log(email, password);
-
         const findUser = await prisma.user.findFirst({
           where: {
             email: email,

pages/api/auth/register.ts

@@ -3,7 +3,7 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import bcrypt from "bcrypt";
 
 interface Data {
-  message: string | object;
+  response: string | object;
 }
 
 interface User {
@@ -19,7 +19,9 @@ export default async function Index(
   const body: User = req.body;
 
   if (!body.email || !body.password || !body.name)
-    return res.status(400).json({ message: "Please fill out all the fields." });
+    return res
+      .status(400)
+      .json({ response: "Please fill out all the fields." });
 
   const checkIfUserExists = await prisma.user.findFirst({
     where: {
@@ -40,8 +42,8 @@ export default async function Index(
       },
     });
 
-    res.status(201).json({ message: "User successfully created." });
+    res.status(201).json({ response: "User successfully created." });
   } else if (checkIfUserExists) {
-    res.status(400).json({ message: "User already exists." });
+    res.status(400).json({ response: "User already exists." });
   }
 }

pages/login.tsx

@@ -1,6 +1,8 @@
+import SubmitButton from "@/components/SubmitButton";
 import { signIn } from "next-auth/react";
 import Link from "next/link";
 import { useState } from "react";
+import { toast } from "react-hot-toast";
 
 interface FormData {
   email: string;
@@ -8,56 +10,82 @@ interface FormData {
 }
 
 export default function Login() {
+  const [submitLoader, setSubmitLoader] = useState(false);
+
   const [form, setForm] = useState<FormData>({
     email: "",
     password: "",
   });
 
   async function loginUser() {
-    console.log(form);
-    if (form.email != "" && form.password != "") {
+    if (form.email !== "" && form.password !== "") {
+      setSubmitLoader(true);
+
+      const load = toast.loading("Authenticating...");
+
       const res = await signIn("credentials", {
         email: form.email,
         password: form.password,
         redirect: false,
       });
 
-      console.log(res);
+      toast.dismiss(load);
+
+      setSubmitLoader(false);
 
       if (!res?.ok) {
-        console.log("User not found or password does not match.", res);
+        toast.error("Invalid login.");
       }
     } else {
-      console.log("Please fill out all the fields.");
+      toast.error("Please fill out all the fields.");
     }
   }
 
   return (
-    <div className="p-5">
-      <p className="text-3xl font-bold text-center mb-10">Linkwarden</p>
-      <input
-        type="text"
-        placeholder="Email"
-        value={form.email}
-        onChange={(e) => setForm({ ...form, email: e.target.value })}
-        className="border border-gray-700 rounded-md block m-2 mx-auto p-2"
-      />
-      <input
-        type="text"
-        placeholder="Password"
-        value={form.password}
-        onChange={(e) => setForm({ ...form, password: e.target.value })}
-        className="border border-gray-700 rounded-md block m-2 mx-auto p-2"
-      />
-      <div
-        className="mx-auto bg-black w-min p-3 m-5 text-white rounded-md cursor-pointer"
-        onClick={loginUser}
-      >
-        Login
+    <>
+      <p className="text-xl font-bold text-center text-sky-500 my-10">
+        Linkwarden
+      </p>
+      <div className="p-5 mx-auto flex flex-col gap-3 justify-between sm:w-[28rem] w-80 bg-slate-50 rounded-md border border-sky-100">
+        <div className="my-5 text-center">
+          <p className="text-3xl font-bold text-sky-500">Welcome back</p>
+          <p className="text-md font-semibold text-sky-400">
+            Sign in to your account
+          </p>
+        </div>
+
+        <p className="text-sm text-sky-500 w-fit font-semibold">Email</p>
+
+        <input
+          type="text"
+          placeholder="johnny@example.com"
+          value={form.email}
+          onChange={(e) => setForm({ ...form, email: e.target.value })}
+          className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+        />
+
+        <p className="text-sm text-sky-500 w-fit font-semibold">Password</p>
+
+        <input
+          type="password"
+          placeholder="*****************"
+          value={form.password}
+          onChange={(e) => setForm({ ...form, password: e.target.value })}
+          className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+        />
+        <SubmitButton
+          onClick={loginUser}
+          label="Login"
+          className="mt-2 w-full text-center"
+          loading={submitLoader}
+        />
       </div>
-      <Link href={"/register"} className="block mx-auto w-min">
-        Register
-      </Link>
-    </div>
+      <div className="flex items-baseline gap-1 justify-center mt-10">
+        <p className="w-fit text-gray-500">New here?</p>
+        <Link href={"/register"} className="block text-sky-500 font-bold">
+          Sign Up
+        </Link>
+      </div>
+    </>
   );
 }

pages/register.tsx

@@ -1,86 +1,147 @@
 import Link from "next/link";
 import { useState } from "react";
 import { useRouter } from "next/router";
+import { toast } from "react-hot-toast";
+import SubmitButton from "@/components/SubmitButton";
 
 interface FormData {
   name: string;
   email: string;
   password: string;
+  passwordConfirmation: string;
 }
 
 export default function Register() {
   const router = useRouter();
 
+  const [submitLoader, setSubmitLoader] = useState(false);
+
   const [form, setForm] = useState<FormData>({
     name: "",
     email: "",
     password: "",
+    passwordConfirmation: "",
   });
 
   async function registerUser() {
-    let success: boolean = false;
+    if (
+      form.name !== "" &&
+      form.email !== "" &&
+      form.password !== "" &&
+      form.passwordConfirmation !== ""
+    ) {
+      if (form.password === form.passwordConfirmation) {
+        const { passwordConfirmation, ...request } = form;
 
-    if (form.name != "" && form.email != "" && form.password != "") {
-      await fetch("/api/auth/register", {
-        body: JSON.stringify(form),
-        headers: {
-          "Content-Type": "application/json",
-        },
-        method: "POST",
-      })
-        .then((res) => {
-          success = res.ok;
-          return res.json();
-        })
-        .then((data) => console.log(data));
+        setSubmitLoader(true);
 
-      if (success) {
-        setForm({
-          name: "",
-          email: "",
-          password: "",
+        const load = toast.loading("Creating Account...");
+
+        const response = await fetch("/api/auth/register", {
+          body: JSON.stringify(request),
+          headers: {
+            "Content-Type": "application/json",
+          },
+          method: "POST",
         });
 
-        router.push("/login");
+        const data = await response.json();
+
+        toast.dismiss(load);
+
+        setSubmitLoader(false);
+
+        if (response.ok) {
+          setForm({
+            name: "",
+            email: "",
+            password: "",
+            passwordConfirmation: "",
+          });
+
+          toast.success("User Created!");
+
+          router.push("/login");
+        } else {
+          toast.error(data.response);
+        }
+      } else {
+        toast.error("Passwords do not match.");
       }
     } else {
-      console.log("Please fill out all the fields.");
+      toast.error("Please fill out all the fields.");
     }
   }
 
   return (
-    <div className="p-5">
-      <p className="text-3xl font-bold text-center mb-10">Linkwarden</p>
-      <input
-        type="text"
-        placeholder="Display Name"
-        value={form.name}
-        onChange={(e) => setForm({ ...form, name: e.target.value })}
-        className="border border-gray-700 rounded-md block m-2 mx-auto p-2"
-      />
-      <input
-        type="text"
-        placeholder="Email"
-        value={form.email}
-        onChange={(e) => setForm({ ...form, email: e.target.value })}
-        className="border border-gray-700 rounded-md block m-2 mx-auto p-2"
-      />
-      <input
-        type="text"
-        placeholder="Password"
-        value={form.password}
-        onChange={(e) => setForm({ ...form, password: e.target.value })}
-        className="border border-gray-700 rounded-md block m-2 mx-auto p-2"
-      />
-      <div
-        className="mx-auto bg-black w-min p-3 m-5 text-white rounded-md cursor-pointer"
-        onClick={registerUser}
-      >
-        Register
+    <>
+      <p className="text-xl font-bold text-center my-10 text-sky-500">
+        Linkwarden
+      </p>
+      <div className="p-5 mx-auto flex flex-col gap-3 justify-between sm:w-[28rem] w-80 bg-slate-50 rounded-md border border-sky-100">
+        <div className="my-5 text-center">
+          <p className="text-3xl font-bold text-sky-500">Get started</p>
+          <p className="text-md font-semibold text-sky-400">
+            Create a new account
+          </p>
+        </div>
+
+        <p className="text-sm text-sky-500 w-fit font-semibold">Display Name</p>
+
+        <input
+          type="text"
+          placeholder="Johnny"
+          value={form.name}
+          onChange={(e) => setForm({ ...form, name: e.target.value })}
+          className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+        />
+
+        <p className="text-sm text-sky-500 w-fit font-semibold">Email</p>
+
+        <input
+          type="text"
+          placeholder="johnny@example.com"
+          value={form.email}
+          onChange={(e) => setForm({ ...form, email: e.target.value })}
+          className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+        />
+
+        <p className="text-sm text-sky-500 w-fit font-semibold">Password</p>
+
+        <input
+          type="password"
+          placeholder="*****************"
+          value={form.password}
+          onChange={(e) => setForm({ ...form, password: e.target.value })}
+          className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+        />
+
+        <p className="text-sm text-sky-500 w-fit font-semibold">
+          Re-enter Password
+        </p>
+
+        <input
+          type="password"
+          placeholder="*****************"
+          value={form.passwordConfirmation}
+          onChange={(e) =>
+            setForm({ ...form, passwordConfirmation: e.target.value })
+          }
+          className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+        />
+        <SubmitButton
+          onClick={registerUser}
+          label="Sign Up"
+          className="mt-2 w-full text-center"
+          loading={submitLoader}
+        />
       </div>
-      <Link href={"/login"} className="block mx-auto w-min">
-        Login
-      </Link>
-    </div>
+      <div className="flex items-baseline gap-1 justify-center mt-10">
+        <p className="w-fit text-gray-500">Have an account?</p>
+        <Link href={"/login"} className="block w-min text-sky-500 font-bold">
+          Login
+        </Link>
+      </div>
+    </>
   );
 }