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

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>
-          {/* Input Email / No Telepon */}
-          <div className="mb-4">
-            <label
-              htmlFor="email"
-              className="mb-1 block text-gray-700"
-            >
-              Email/No. Telepon
-            </label>
-            <input
-              type="text"
+        <RemixFormProvider {...formMethods}>
+          <fetcher.Form
+            method="post"
+            onSubmit={handleSubmit}
+            className="space-y-4"
+            action="/actions/register"
+          >
+            <Input
+              id="email"
+              label="Email"
               placeholder="Contoh: legal@legalgo.id"
-              className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2"
-              required
+              name="email"
             />
-          </div>
 
-          {/* Input Password */}
-          <div className="relative mb-4">
-            <label
-              htmlFor="password"
-              className="mb-1 block text-gray-700 focus:outline-[#2E2F7C]"
-            >
-              Kata Sandi
-            </label>
-            <input
-              type={showPassword ? 'text' : 'password'}
+            <Input
+              id="password"
+              label="Kata Sandi"
               placeholder="Masukkan Kata Sandi"
-              className="w-full rounded-md border border-[#DFDFDF] p-2 pr-10 focus:outline-[#2E2F7C]"
-              required
+              name="password"
+              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 */}
-          <div className="relative mb-4">
-            <label
-              htmlFor="password"
-              className="mb-1 block text-gray-700 focus:outline-[#2E2F7C]"
-            >
-              Ulangi Kata Sandi
-            </label>
-            <input
-              type={showPassword ? 'text' : 'password'}
+            <Input
+              id="re-password"
+              label="Ulangi Kata Sandi"
               placeholder="Masukkan Kata Sandi"
-              className="w-full rounded-md border border-[#DFDFDF] p-2 pr-10 focus:outline-[#2E2F7C]"
-              required
+              name="rePassword"
+              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 */}
-          <div className="mb-4">
-            <label
-              htmlFor="no-telpon"
-              className="mb-1 block text-gray-700"
-            >
-              No. Telepon
-            </label>
-            <input
-              type="text"
-              placeholder="Contoh: legal@legalgo.id"
-              className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2"
-              required
+            <Input
+              id="phone"
+              label="No. Telepon"
+              placeholder="Masukkan No. Telepon"
+              name="phone"
             />
-          </div>
 
-          {/* Subscribe*/}
-          <div className="mb-4">
-            <label
-              htmlFor="subscription"
-              className="mb-1 block text-gray-700"
+            {/* Subscribe*/}
+            {/* <div className="mb-4">
+              <label
+                htmlFor="subscription"
+                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
-            </label>
-            <select className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2">
-              <option selected>Subscription</option>
-            </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>
+              Daftar
+            </Button>
+          </fetcher.Form>
+        </RemixFormProvider>
 
         {/* Link Login */}
         <div className="mt-4 text-center text-sm">