app/apis/news/register.ts

@@ -1,20 +0,0 @@
-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

@@ -43,11 +43,8 @@ export const FormLogin = () => {
 
     setDisabled(true)
     setError(undefined)
-    setIsLoginOpen(false)
-
-    if (fetcher.data?.user.subscribe_status === 'inactive') {
     setIsInitSubscribeOpen(true)
-    }
+    setIsLoginOpen(false)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetcher])
 
@@ -63,7 +60,7 @@ export const FormLogin = () => {
           >
             <Input
               id="email"
-              label="Email"
+              label="Email / No Telepon"
               placeholder="Contoh: legal@legalgo.id"
               name="email"
             />
@@ -80,6 +77,7 @@ 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
@@ -95,6 +93,7 @@ export const FormLogin = () => {
               </Button>
             </div>
 
+            {/* Tombol Masuk */}
             <Button
               disabled={disabled}
               type="submit"

app/layouts/news/form-register.tsx

@@ -1,96 +1,96 @@
-import { zodResolver } from '@hookform/resolvers/zod'
+import { useState } from 'react'
-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 [error, setError] = useState<string>()
+  const [showPassword, setShowPassword] = useState(false)
-  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">
-        <RemixFormProvider {...formMethods}>
+        <form>
-          <fetcher.Form
+          {/* Input Email / No Telepon */}
-            method="post"
+          <div className="mb-4">
-            onSubmit={handleSubmit}
+            <label
-            className="space-y-4"
+              htmlFor="email"
-            action="/actions/register"
+              className="mb-1 block text-gray-700"
             >
-            <Input
+              Email/No. Telepon
-              id="email"
+            </label>
-              label="Email"
+            <input
+              type="text"
               placeholder="Contoh: legal@legalgo.id"
-              name="email"
+              className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2"
+              required
             />
+          </div>
 
-            <Input
+          {/* Input Password */}
-              id="password"
+          <div className="relative mb-4">
-              label="Kata Sandi"
+            <label
+              htmlFor="password"
+              className="mb-1 block text-gray-700 focus:outline-[#2E2F7C]"
+            >
+              Kata Sandi
+            </label>
+            <input
+              type={showPassword ? 'text' : 'password'}
               placeholder="Masukkan Kata Sandi"
-              name="password"
+              className="w-full rounded-md border border-[#DFDFDF] p-2 pr-10 focus:outline-[#2E2F7C]"
-              type="password"
+              required
             />
+            <button
+              type="button"
+              className="absolute top-9 right-3 text-gray-500"
+              onClick={() => setShowPassword(!showPassword)}
+            >
+              {/* {showPassword ? <EyeOffIcon size={18} /> : <EyeIcon size={18} />} */}
+            </button>
+          </div>
 
-            <Input
+          {/* Reinput Password */}
-              id="re-password"
+          <div className="relative mb-4">
-              label="Ulangi Kata Sandi"
+            <label
+              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"
-              name="rePassword"
+              className="w-full rounded-md border border-[#DFDFDF] p-2 pr-10 focus:outline-[#2E2F7C]"
-              type="password"
+              required
             />
+            <button
+              type="button"
+              className="absolute top-9 right-3 text-gray-500"
+              onClick={() => setShowPassword(!showPassword)}
+            >
+              {/* {showPassword ? <EyeOffIcon size={18} /> : <EyeIcon size={18} />} */}
+            </button>
+          </div>
 
-            <Input
+          {/* No Telepon */}
-              id="phone"
+          <div className="mb-4">
-              label="No. Telepon"
+            <label
-              placeholder="Masukkan No. Telepon"
+              htmlFor="no-telpon"
-              name="phone"
+              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
             />
+          </div>
 
           {/* Subscribe*/}
-            {/* <div className="mb-4">
+          <div className="mb-4">
             <label
               htmlFor="subscription"
               className="mb-1 block text-gray-700"
@@ -100,21 +100,13 @@ export const FormRegister = () => {
             <select className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2">
               <option selected>Subscription</option>
             </select>
-            </div> */}
+          </div>
 
-            {error && (
+          {/* Tombol Masuk */}
-              <div className="text-sm text-red-500 capitalize">{error}</div>
+          <Button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
-            )}
-
-            <Button
-              disabled={disabled}
-              type="submit"
-              className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800"
-            >
             Daftar
           </Button>
-          </fetcher.Form>
+        </form>
-        </RemixFormProvider>
 
         {/* Link Login */}
         <div className="mt-4 text-center text-sm">

app/routes/actions.register.ts

@@ -1,75 +0,0 @@
-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 },
-    )
-  }
-}