app/components/ui/input.tsx

@@ -1,13 +1,12 @@
 import { useState, type ComponentProps, type ReactNode } from 'react'
 import {
   get,
+  useFormContext,
   type FieldError,
   type FieldValues,
   type Path,
   type RegisterOptions,
 } from 'react-hook-form'
-import { useRemixFormContext } from 'remix-hook-form'
-import { twMerge } from 'tailwind-merge'
 
 import { EyeIcon } from '~/components/icons/eye'
 
@@ -26,21 +25,13 @@ type TInputProperties<T extends FieldValues> = Omit<
 export const Input = <TFormValues extends Record<string, unknown>>(
   properties: TInputProperties<TFormValues>,
 ) => {
-  const {
-    id,
-    label,
-    name,
-    rules,
-    type = 'text',
-    placeholder,
-    ...rest
-  } = properties
+  const { id, label, name, rules, type = 'text', ...rest } = properties
   const [inputType, setInputType] = useState(type)
 
   const {
     register,
     formState: { errors },
-  } = useRemixFormContext()
+  } = useFormContext()
 
   const error: FieldError = get(errors, name)
 
@@ -55,8 +46,7 @@ export const Input = <TFormValues extends Record<string, unknown>>(
       <input
         id={id}
         type={inputType}
-        className="h-[42px] w-full rounded-md border border-[#DFDFDF] p-2"
-        placeholder={inputType === 'password' ? '******' : placeholder}
+        className="w-full rounded-md border border-[#DFDFDF] p-2"
         {...register(name, rules)}
         {...rest}
       />
@@ -65,17 +55,22 @@ export const Input = <TFormValues extends Record<string, unknown>>(
           type="button"
           variant="icon"
           size="fit"
-          className="absolute right-3 h-[42px] text-gray-500"
+          className="absolute top-9 right-3 text-gray-500"
           onClick={() =>
             setInputType(inputType === 'password' ? 'text' : 'password')
           }
         >
+          {inputType === 'password' ? (
             <EyeIcon
-            className={twMerge(
-              'h-4 w-4',
-              inputType === 'password' ? 'text-gray-500/50' : 'text-gray-500',
-            )}
+              width={15}
+              height={15}
             />
+          ) : (
+            <EyeIcon
+              width={15}
+              height={15}
+            />
+          )}
         </Button>
       )}
     </div>

app/layouts/news/form-login.tsx

@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import { useFetcher } from 'react-router'
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
@@ -30,8 +30,6 @@ export const FormLogin = (properties: TProperties) => {
     setIsInitSubscribeOpen,
   } = properties
   const fetcher = useFetcher()
-  const [error, setError] = useState<string>()
-  const [disabled, setDisabled] = useState(false)
 
   const formMethods = useRemixForm<TLoginSchema>({
     mode: 'onSubmit',
@@ -41,21 +39,11 @@ export const FormLogin = (properties: TProperties) => {
 
   const { handleSubmit } = formMethods
 
-  useEffect(() => {
-    if (fetcher.state !== 'idle' || fetcher.data?.success) {
-      setDisabled(true)
-      return
-    }
-    setDisabled(false)
-  }, [fetcher])
-
   useEffect(() => {
     if (fetcher.data?.success) {
       setIsInitSubscribeOpen(true)
       setIsLoginOpen(false)
-      return
     }
-    setError(fetcher.data?.message)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetcher])
 
@@ -84,10 +72,6 @@ export const FormLogin = (properties: TProperties) => {
               type="password"
             />
 
-            {error && (
-              <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>
@@ -98,7 +82,6 @@ export const FormLogin = (properties: TProperties) => {
                 }}
                 className="font-semibold text-[#2E2F7C]"
                 variant="link"
-                size="fit"
               >
                 Reset Kata Sandi
               </Button>
@@ -106,7 +89,6 @@ export const FormLogin = (properties: TProperties) => {
 
             {/* Tombol Masuk */}
             <Button
-              disabled={disabled}
               type="submit"
               className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800"
             >

app/layouts/news/header-top.tsx

@@ -11,6 +11,7 @@ export const HeaderTop = () => {
   const fetcher = useFetcher()
 
   return (
+    <>
       <div className="flex h-[60px] items-center justify-between bg-white px-5 align-middle sm:h-[100px] sm:gap-[15px] sm:px-[50px] sm:py-[20px]">
         <Link
           to="/news"
@@ -53,5 +54,6 @@ export const HeaderTop = () => {
           )}
         </div>
       </div>
+    </>
   )
 }

app/routes/actions.news.login.ts

@@ -37,6 +37,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
     return data(
       {
         success: true,
+        accessToken: token,
       },
       {
         headers,