chore: Registration & Verify Page + Logic

Author: VulpoTheDev

apps/web/src/app/(main)/(auth)/login/page.tsx

@@ -30,6 +30,8 @@ export default function Page() {
         errors: {
           email: res.message.email ?? [],
           password: res.message.password ?? [],
+          username: res.message.username ?? [],
+          confirm: res.message.confirm ?? [],
         },
       })
     }
@@ -39,7 +41,7 @@ export default function Page() {
     if (user && !isLoading) {
       router.push(`/`)
     }
-  }, [user, isLoading])
+  }, [user, isLoading, router])
 
   return (
     <div className="bg-100 relative flex min-h-screen w-full items-start justify-center px-6 pt-36">
@@ -62,24 +64,24 @@ export default function Page() {
             type="email"
             inputName="Email"
             placeholder="Email"
-            error={errors?.errors?.email?.[0]}
+            error={errors?.errors.email}
           />
           <div className="space-y-2">
             <InputField
               inputName="Password"
               type="password"
               placeholder="Password"
-              error={errors?.errors?.password?.[0]}
+              error={errors?.errors.password}
             />
             <Link
               href="/forgot-password"
-              className="text-500 inline-block text-sm underline hover:no-underline"
+              className="text-600 inline-block text-sm underline hover:no-underline"
             >
               Forgot password?
             </Link>
           </div>
-          <Button type="submit" className="mt-4 w-full text-center">
-            <span className="w-max">Sign in</span>
+          <Button position="center" type="submit" className="mt-4 w-full text-center">
+            Sign in
           </Button>
         </Form>
         <div className="flex flex-row gap-x-6">

apps/web/src/app/(main)/(auth)/register/page.tsx

@@ -1,51 +1,103 @@
+"use client"
+
 import Image from "next/image"
 import Link from "next/link"
-import React from "react"
+import { useRouter } from "next/navigation"
+import React, { useEffect, useState } from "react"
+import { useAuth } from "@/app/context/AuthContext"
 import ThirdPartyButtons from "@/components/layouts/Auth/ThirdPartyButtons"
 import { Button } from "@mav/ui/components/buttons"
-import { InputField } from "@mav/ui/components/fields"
+import { Form, type FormState, InputField } from "@mav/ui/components/fields"
+import { registerAction } from "@/app/actions/register"
 
 export default function Page() {
+  const router = useRouter()
+
+  const [errors, setErrors] = useState<FormState>()
+  const { user, isLoading } = useAuth()
+
+  // TODO: Figure out how to handle this in the action file
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    const formData = new FormData(event.target as HTMLFormElement)
+    const res = await registerAction(formData)
+
+    if (res.success) {
+      router.push(`/verify`)
+    } else {
+      setErrors({
+        message: res.message.error,
+        errors: {
+          email: res.message.email ?? [],
+          password: res.message.password ?? [],
+          username: res.message.username ?? [],
+          confirm: res.message.confirm ?? [],
+        },
+      })
+    }
+  }
+
+  useEffect(() => {
+    if (user && !isLoading) {
+      router.push(`/`)
+    }
+  }, [user, isLoading, router])
+
   return (
-    <div className="bg-100 relative mx-auto flex h-1/2 w-screen flex-col items-center gap-y-6 py-12">
+    <div className="bg-100 relative flex min-h-screen w-full items-start justify-center px-6 pt-36">
       <Image
         src="/Backdrop.png"
         alt="Backdrop"
         height={250}
         width={2000}
-        className="z-0 h-1/4"
+        className="absolute left-0 top-0 z-0 h-1/4 w-full object-cover"
       />
-      <div className="bg-100 border-200 absolute z-10 flex w-1/2 flex-col items-center justify-center gap-y-6 rounded-lg border-2 p-12 shadow-md">
-        <h1 className="text-700 z-10 text-2xl">Register a new account</h1>
+      <div className="bg-100 border-200 relative z-10 flex w-full max-w-2xl flex-col items-center justify-center gap-y-6 rounded-lg border-2 p-12 shadow-md">
+        <h1 className="text-700 text-2xl">Register a new account</h1>
         <ThirdPartyButtons />
-        <p>or</p>
-        <div className="flex w-2/3 flex-col gap-y-4">
-          <InputField placeholder="Email" type="email" inputName="Email" />
-          <InputField placeholder="Username" type="text" inputName="Username" />
-          <span className="text-600 text-xs">
+        <span>or</span>
+        <Form onSubmit={handleSubmit} className="flex w-full flex-col gap-y-4">
+          {errors && (
+            <p className="text-center text-red-500">{errors.message}</p>
+          )}
+          <InputField
+            type="email"
+            inputName="Email"
+            placeholder="Email"
+            error={errors?.errors?.email}
+          />
+          <InputField
+            type="name"
+            inputName="Username"
+            placeholder="Username"
+            error={errors?.errors?.username}
+          />
+          <span className="text-600 ">
             Username must contain [A-Z][a-z][0-9], underscore, and periods.
           </span>
           <InputField
-            placeholder="Password"
-            type="password"
             inputName="Password"
+            type="password"
+            placeholder="Password"
+            error={errors?.errors?.password}
           />
           <InputField
-            placeholder="Repeat Password"
+            inputName="Confirm"
             type="password"
-            inputName="Repeat Password"
+            placeholder="Confirm Password"
+            error={errors?.errors?.confirm}
           />
           <Button
-            variant="primary"
-            position="center"
+            type="submit"
             className="mt-4 w-full text-center"
+            position="center"
           >
-            <span className="w-max">Register</span>
+            Register
           </Button>
-        </div>
+        </Form>
         <div className="flex flex-row gap-x-6">
           <Link href="/login" className="text-500 text-sm">
-            Already have an account? Sign in
+            Sign in
           </Link>
         </div>
       </div>

apps/web/src/app/(main)/(auth)/verify/[id]/page.tsx

@@ -0,0 +1,46 @@
+import Image from "next/image"
+import { BACKEND_URL } from "@/utils/constants"
+import { Button } from "@mav/ui/components/buttons"
+import { LuCheck, LuXOctagon } from "react-icons/lu"
+import { redirect } from "next/navigation"
+
+async function verifyEmail(id: string): Promise<boolean> {
+  try {
+    const res = await fetch(`${BACKEND_URL}/v1/auth/verify/${id}`, {
+      method: "POST",
+      credentials: "include",
+    })
+
+    if (!res.ok) return false
+
+    const data = await res.json()
+    return data
+  } catch {
+    return false
+  }
+}
+
+export default async function Page({ params }: { params: { id: string } }) {
+  const isVerified = await verifyEmail(params.id)
+
+  if (isVerified) {
+    redirect("/login")
+  }
+
+  return (
+    <div className="bg-100 relative flex min-h-screen w-full items-start justify-center px-6 pt-36">
+      <Image
+        src="/Backdrop.png"
+        alt="Backdrop"
+        height={250}
+        width={2000}
+        className="absolute left-0 top-0 z-0 h-1/4 w-full object-cover"
+      />
+      <div className="bg-100 border-200 relative z-10 flex w-full max-w-2xl flex-col items-center justify-center gap-y-6 rounded-lg border-2 p-12 shadow-md">
+        <LuXOctagon size={45} />
+        <h1 className="text-700 text-2xl">Unable to verify account</h1>
+        <p>There was an issue verifying your email. Please try again later.</p>
+      </div>
+    </div>
+  )
+}

apps/web/src/app/(main)/(auth)/verify/page.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import Image from "next/image"
+import { useRouter } from "next/navigation"
+import React, { useEffect, useState } from "react"
+import { useAuth } from "@/app/context/AuthContext"
+import { Button } from "@mav/ui/components/buttons"
+import { LuMail } from "react-icons/lu"
+
+export default function Page() {
+  const router = useRouter()
+  const { user, isLoading } = useAuth()
+
+  useEffect(() => {
+    if (user && !isLoading) {
+      router.push(`/`)
+    }
+  }, [user, isLoading, router])
+
+  return (
+    <div className="bg-100 relative flex min-h-screen w-full items-start justify-center px-6 pt-36">
+      <Image
+        src="/Backdrop.png"
+        alt="Backdrop"
+        height={250}
+        width={2000}
+        className="absolute left-0 top-0 z-0 h-1/4 w-full object-cover"
+      />
+      <div className="bg-100 border-200 relative z-10 flex w-full max-w-2xl flex-col items-center justify-center gap-y-6 rounded-lg border-2 p-12 shadow-md">
+        <LuMail size={45} />
+        <h1 className="text-700 text-2xl">Welcome to MyArtverse</h1>
+        <p className="text-center">
+          You should get an email with a link to verify your account. If you
+          don't see it, check your spam folder.
+        </p>
+        <Button
+          position="center"
+          className="mt-4 w-full text-center"
+          onClick={() => router.push("/login")}
+        >
+          Sign in
+        </Button>
+      </div>
+    </div>
+  )
+}

apps/web/src/app/actions/login.ts

@@ -3,6 +3,7 @@
 import { cookies } from "next/headers"
 import { LoginFormSchema } from "@/app/lib/definition"
 import { removeSuffixes } from "@/utils/removeSuffix"
+import { BACKEND_URL } from "@/utils/constants"
 
 export async function loginAction(formData: FormData) {
   const processedData = removeSuffixes(formData)
@@ -25,7 +26,7 @@ export async function loginAction(formData: FormData) {
   }
 
   try {
-    const res = await fetch("http://localhost:8081/v1/auth/login", {
+    const res = await fetch(`${BACKEND_URL}/v1/auth/login`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -57,7 +58,7 @@ export async function loginAction(formData: FormData) {
     return {
       success: false,
       message: {
-        error: data.message || "Invalid email or password",
+        error: data.error || "Invalid email or password",
       },
     }
   } catch (error) {

apps/web/src/app/actions/register.ts

@@ -0,0 +1,82 @@
+"use server"
+
+import { cookies } from "next/headers"
+import { LoginFormSchema, RegisterFormSchema } from "@/app/lib/definition"
+import { removeSuffixes } from "@/utils/removeSuffix"
+import { BACKEND_URL } from "@/utils/constants"
+
+export async function registerAction(formData: FormData) {
+  const processedData = removeSuffixes(formData)
+  const { email, username, password, confirm } = processedData
+
+  const validatedFields = RegisterFormSchema.safeParse({
+    email,
+    password,
+    username,
+    confirm
+  })
+
+  if (!validatedFields.success) {
+    return {
+      success: false,
+      message: {
+        error: null,
+        email: validatedFields.error.flatten().fieldErrors?.email,
+        password: validatedFields.error.flatten().fieldErrors?.password,
+        username: validatedFields.error.flatten().fieldErrors?.username,
+        confirm: validatedFields.error.flatten().fieldErrors?.confirm,
+      },
+    }
+  }
+
+  if (password !== confirm) {
+    return {
+      success: false,
+      message: {
+        username: null,
+        email: null,
+        error: "Passwords do not match",
+        confirm: ["Passwords do not match"],
+      },
+    }
+  }
+
+  try {
+    const res = await fetch(`${BACKEND_URL}/v1/auth/register`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ email, password, username }),
+    })
+
+    const data = await res.json()
+    if (res.status === 400) {
+      return {
+        success: false,
+        message: {
+          email: data.email || null,
+          username: data.username || null,
+        },
+      }
+    }
+
+    if (res.ok) {
+      return { success: true, message: data.message }
+    }
+
+    return {
+      success: false,
+      message: {
+        error: "Something went wrong. Please try again later.",
+      },
+    }
+  } catch (error) {
+    return {
+      success: false,
+      message: {
+        error: "Something went wrong in our end! Please try again later.",
+      },
+    }
+  }
+}