feat: implement user registration functionality with form validation and API integration

app/apis/news/register.ts

@@ -0,0 +1,20 @@
+import { z } from 'zod'
+
+import type { TRegisterSchema } from '~/layouts/news/form-register'
+import { HttpServer } from '~/libs/http-server'
+
+const loginResponseSchema = z.object({
+  data: z.object({
+    token: z.string(),
+  }),
+})
+
+export const newsRegisterRequest = async (payload: TRegisterSchema) => {
+  try {
+    const { data } = await HttpServer().post('/api/user/register', payload)
+    return loginResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/layouts/news/form-login.tsx

@@ -63,7 +63,7 @@ export const FormLogin = () => {
           >
             <Input
               id="email"
-              label="Email / No Telepon"
+              label="Email"
               placeholder="Contoh: legal@legalgo.id"
               name="email"
             />
@@ -80,7 +80,6 @@ export const FormLogin = () => {
               <div className="text-sm text-red-500 capitalize">{error}</div>
             )}
 
-            {/* Lupa Kata Sandi */}
             <div className="flex items-center justify-between text-sm">
               <span className="text-gray-600">Lupa Kata Sandi?</span>
               <Button
@@ -96,7 +95,6 @@ export const FormLogin = () => {
               </Button>
             </div>
 
-            {/* Tombol Masuk */}
             <Button
               disabled={disabled}
               type="submit"

app/layouts/news/form-register.tsx

@@ -1,112 +1,120 @@
-import { useState } from 'react'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useEffect, useState } from 'react'
+import { useFetcher } from 'react-router'
+import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
+import { z } from 'zod'
 
 import { Button } from '~/components/ui/button'
+import { Input } from '~/components/ui/input'
 import { useNewsContext } from '~/contexts/news'
 
+export const registerSchema = z
+  .object({
+    email: z.string().email('Email tidak valid'),
+    password: z.string().min(6, 'Kata sandi minimal 6 karakter'),
+    rePassword: z.string().min(6, 'Kata sandi minimal 6 karakter'),
+    phone: z.string().min(10, 'No telepon tidak valid'),
+  })
+  .refine((field) => field.password === field.rePassword, {
+    message: 'Kata sandi tidak sama',
+    path: ['rePassword'],
+  })
+
+export type TRegisterSchema = z.infer<typeof registerSchema>
+
 export const FormRegister = () => {
   const { setIsLoginOpen, setIsRegisterOpen } = useNewsContext()
-  const [showPassword, setShowPassword] = useState(false)
+  const [error, setError] = useState<string>()
+  const [disabled, setDisabled] = useState(false)
+  const fetcher = useFetcher()
+
+  const formMethods = useRemixForm<TRegisterSchema>({
+    mode: 'onSubmit',
+    fetcher,
+    resolver: zodResolver(registerSchema),
+  })
+
+  const { handleSubmit } = formMethods
+
+  useEffect(() => {
+    if (!fetcher.data?.success) {
+      setError(fetcher.data?.message)
+      setDisabled(false)
+      return
+    }
+
+    setDisabled(true)
+    setError(undefined)
+    setIsRegisterOpen(false)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetcher])
 
   return (
     <div className="flex flex-col items-center justify-center">
       <div className="w-full max-w-md">
-        <form>
+        <RemixFormProvider {...formMethods}>
-          {/* Input Email / No Telepon */}
+          <fetcher.Form
-          <div className="mb-4">
+            method="post"
-            <label
+            onSubmit={handleSubmit}
-              htmlFor="email"
+            className="space-y-4"
-              className="mb-1 block text-gray-700"
+            action="/actions/register"
-            >
+          >
-              Email/No. Telepon
+            <Input
-            </label>
+              id="email"
-            <input
+              label="Email"
-              type="text"
               placeholder="Contoh: legal@legalgo.id"
-              className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2"
+              name="email"
-              required
             />
-          </div>
 
-          {/* Input Password */}
+            <Input
-          <div className="relative mb-4">
+              id="password"
-            <label
+              label="Kata Sandi"
-              htmlFor="password"
-              className="mb-1 block text-gray-700 focus:outline-[#2E2F7C]"
-            >
-              Kata Sandi
-            </label>
-            <input
-              type={showPassword ? 'text' : 'password'}
               placeholder="Masukkan Kata Sandi"
-              className="w-full rounded-md border border-[#DFDFDF] p-2 pr-10 focus:outline-[#2E2F7C]"
+              name="password"
-              required
+              type="password"
             />
-            <button
-              type="button"
-              className="absolute top-9 right-3 text-gray-500"
-              onClick={() => setShowPassword(!showPassword)}
-            >
-              {/* {showPassword ? <EyeOffIcon size={18} /> : <EyeIcon size={18} />} */}
-            </button>
-          </div>
 
-          {/* Reinput Password */}
+            <Input
-          <div className="relative mb-4">
+              id="re-password"
-            <label
+              label="Ulangi Kata Sandi"
-              htmlFor="password"
-              className="mb-1 block text-gray-700 focus:outline-[#2E2F7C]"
-            >
-              Ulangi Kata Sandi
-            </label>
-            <input
-              type={showPassword ? 'text' : 'password'}
               placeholder="Masukkan Kata Sandi"
-              className="w-full rounded-md border border-[#DFDFDF] p-2 pr-10 focus:outline-[#2E2F7C]"
+              name="rePassword"
-              required
+              type="password"
             />
-            <button
-              type="button"
-              className="absolute top-9 right-3 text-gray-500"
-              onClick={() => setShowPassword(!showPassword)}
-            >
-              {/* {showPassword ? <EyeOffIcon size={18} /> : <EyeIcon size={18} />} */}
-            </button>
-          </div>
 
-          {/* No Telepon */}
+            <Input
-          <div className="mb-4">
+              id="phone"
-            <label
+              label="No. Telepon"
-              htmlFor="no-telpon"
+              placeholder="Masukkan No. Telepon"
-              className="mb-1 block text-gray-700"
+              name="phone"
-            >
-              No. Telepon
-            </label>
-            <input
-              type="text"
-              placeholder="Contoh: legal@legalgo.id"
-              className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2"
-              required
             />
-          </div>
 
-          {/* Subscribe*/}
+            {/* Subscribe*/}
-          <div className="mb-4">
+            {/* <div className="mb-4">
-            <label
+              <label
-              htmlFor="subscription"
+                htmlFor="subscription"
-              className="mb-1 block text-gray-700"
+                className="mb-1 block text-gray-700"
+              >
+                Subscription
+              </label>
+              <select className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2">
+                <option selected>Subscription</option>
+              </select>
+            </div> */}
+
+            {error && (
+              <div className="text-sm text-red-500 capitalize">{error}</div>
+            )}
+
+            <Button
+              disabled={disabled}
+              type="submit"
+              className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800"
             >
-              Subscription
+              Daftar
-            </label>
+            </Button>
-            <select className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2">
+          </fetcher.Form>
-              <option selected>Subscription</option>
+        </RemixFormProvider>
-            </select>
-          </div>
-
-          {/* Tombol Masuk */}
-          <Button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
-            Daftar
-          </Button>
-        </form>
 
         {/* Link Login */}
         <div className="mt-4 text-center text-sm">

app/routes/actions.register.ts

@@ -0,0 +1,75 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { data } from 'react-router'
+import { getValidatedFormData } from 'remix-hook-form'
+import { XiorError } from 'xior'
+
+import { getUser } from '~/apis/news/get-user'
+import { newsRegisterRequest } from '~/apis/news/register'
+import {
+  registerSchema,
+  type TRegisterSchema,
+} from '~/layouts/news/form-register'
+import { generateTokenCookie } from '~/utils/token'
+
+import type { Route } from './+types/actions.register'
+
+export const action = async ({ request }: Route.ActionArgs) => {
+  try {
+    const {
+      errors,
+      data: payload,
+      receivedValues: defaultValues,
+    } = await getValidatedFormData<TRegisterSchema>(
+      request,
+      zodResolver(registerSchema),
+      false,
+    )
+
+    if (errors) {
+      return data({ success: false, errors, defaultValues }, { status: 400 })
+    }
+
+    const { data: registerData } = await newsRegisterRequest(payload)
+    const { token } = registerData
+    const { data: userData } = await getUser({
+      accessToken: token,
+    })
+    const tokenCookie = generateTokenCookie({
+      token,
+    })
+
+    const headers = new Headers()
+    headers.append('Set-Cookie', await tokenCookie)
+
+    return data(
+      {
+        success: true,
+        user: userData,
+      },
+      {
+        headers,
+        status: 200,
+        statusText: 'OK',
+      },
+    )
+  } catch (error) {
+    if (error instanceof XiorError) {
+      return data(
+        {
+          success: false,
+          message: error?.response?.data?.error?.message || error.message,
+        },
+        {
+          status: error?.response?.status || 500,
+        },
+      )
+    }
+    return data(
+      {
+        success: false,
+        message: 'Internal server error',
+      },
+      { status: 500 },
+    )
+  }
+}