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 {
+  const { id, label, name, rules, type = 'text', ...rest } = properties
-    id,
-    label,
-    name,
-    rules,
-    type = 'text',
-    placeholder,
-    ...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"
+        className="w-full rounded-md border border-[#DFDFDF] p-2"
-        placeholder={inputType === 'password' ? '******' : placeholder}
         {...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')
           }
         >
-          <EyeIcon
+          {inputType === 'password' ? (
-            className={twMerge(
+            <EyeIcon
-              'h-4 w-4',
+              width={15}
-              inputType === 'password' ? 'text-gray-500/50' : 'text-gray-500',
+              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,47 +11,49 @@ 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
+      <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]">
-        to="/news"
+        <Link
-        className="mt-2 h-full py-2"
+          to="/news"
-      >
+          className="mt-2 h-full py-2"
-        <img
+        >
-          src={APP.logo}
+          <img
-          alt={APP.title}
+            src={APP.logo}
-          className="h-3/4 w-auto sm:h-full"
+            alt={APP.title}
-        />
+            className="h-3/4 w-auto sm:h-full"
-      </Link>
+          />
-      <div className="hidden h-full items-center py-1.5 font-light whitespace-pre-line sm:flex">
+        </Link>
-        {APP.description}
+        <div className="hidden h-full items-center py-1.5 font-light whitespace-pre-line sm:flex">
-      </div>
+          {APP.description}
-      <div className="flex items-center gap-[15px]">
+        </div>
-        <Button className="h-8 w-auto rounded-none px-3 text-xs sm:h-[50px] sm:w-[150px] sm:text-lg">
+        <div className="flex items-center gap-[15px]">
-          About Us
+          <Button className="h-8 w-auto rounded-none px-3 text-xs sm:h-[50px] sm:w-[150px] sm:text-lg">
-        </Button>
+            About Us
-        {loaderData?.userToken ? (
+          </Button>
-          <fetcher.Form
+          {loaderData?.userToken ? (
-            method="POST"
+            <fetcher.Form
-            action="/actions/news/logout"
+              method="POST"
-          >
+              action="/actions/news/logout"
+            >
+              <Button
+                variant="newsSecondary"
+                className="hidden sm:block"
+                type="submit"
+              >
+                Logout
+              </Button>
+            </fetcher.Form>
+          ) : (
             <Button
               variant="newsSecondary"
               className="hidden sm:block"
-              type="submit"
+              onClick={() => setIsLoginOpen(true)}
             >
-              Logout
+              Masuk
             </Button>
-          </fetcher.Form>
+          )}
-        ) : (
+        </div>
-          <Button
-            variant="newsSecondary"
-            className="hidden sm:block"
-            onClick={() => setIsLoginOpen(true)}
-          >
-            Masuk
-          </Button>
-        )}
       </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,