feat: enhance Input component with placeholder support and styling adjustments

app/components/ui/input.tsx

@@ -1,12 +1,13 @@
 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'
 
@@ -25,13 +26,21 @@ type TInputProperties<T extends FieldValues> = Omit<
 export const Input = <TFormValues extends Record<string, unknown>>(
   properties: TInputProperties<TFormValues>,
 ) => {
-  const { id, label, name, rules, type = 'text', ...rest } = properties
+  const {
+    id,
+    label,
+    name,
+    rules,
+    type = 'text',
+    placeholder,
+    ...rest
+  } = properties
   const [inputType, setInputType] = useState(type)
 
   const {
     register,
     formState: { errors },
-  } = useFormContext()
+  } = useRemixFormContext()
 
   const error: FieldError = get(errors, name)
 
@@ -46,7 +55,8 @@ export const Input = <TFormValues extends Record<string, unknown>>(
       <input
         id={id}
         type={inputType}
-        className="w-full rounded-md border border-[#DFDFDF] p-2"
+        className="h-[42px] w-full rounded-md border border-[#DFDFDF] p-2"
+        placeholder={inputType === 'password' ? '******' : placeholder}
         {...register(name, rules)}
         {...rest}
       />
@@ -55,22 +65,17 @@ export const Input = <TFormValues extends Record<string, unknown>>(
           type="button"
           variant="icon"
           size="fit"
-          className="absolute top-9 right-3 text-gray-500"
+          className="absolute right-3 h-[42px] text-gray-500"
           onClick={() =>
             setInputType(inputType === 'password' ? 'text' : 'password')
           }
         >
-          {inputType === 'password' ? (
+          <EyeIcon
-            <EyeIcon
+            className={twMerge(
-              width={15}
+              'h-4 w-4',
-              height={15}
+              inputType === 'password' ? 'text-gray-500/50' : 'text-gray-500',
-            />
+            )}
-          ) : (
+          />
-            <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 } from 'react'
+import { useEffect, useState } from 'react'
 import { useFetcher } from 'react-router'
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
@@ -30,6 +30,8 @@ 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',
@@ -39,11 +41,21 @@ 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])
 
@@ -72,6 +84,10 @@ 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>
@@ -82,6 +98,7 @@ export const FormLogin = (properties: TProperties) => {
                 }}
                 className="font-semibold text-[#2E2F7C]"
                 variant="link"
+                size="fit"
               >
                 Reset Kata Sandi
               </Button>
@@ -89,6 +106,7 @@ 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,49 +11,47 @@ 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]">
-      <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
-        <Link
+        to="/news"
-          to="/news"
+        className="mt-2 h-full py-2"
-          className="mt-2 h-full py-2"
+      >
-        >
+        <img
-          <img
+          src={APP.logo}
-            src={APP.logo}
+          alt={APP.title}
-            alt={APP.title}
+          className="h-3/4 w-auto sm:h-full"
-            className="h-3/4 w-auto sm:h-full"
+        />
-          />
+      </Link>
-        </Link>
+      <div className="hidden h-full items-center py-1.5 font-light whitespace-pre-line sm:flex">
-        <div className="hidden h-full items-center py-1.5 font-light whitespace-pre-line sm:flex">
+        {APP.description}
-          {APP.description}
+      </div>
-        </div>
+      <div className="flex items-center gap-[15px]">
-        <div className="flex items-center gap-[15px]">
+        <Button className="h-8 w-auto rounded-none px-3 text-xs sm:h-[50px] sm:w-[150px] sm:text-lg">
-          <Button className="h-8 w-auto rounded-none px-3 text-xs sm:h-[50px] sm:w-[150px] sm:text-lg">
+          About Us
-            About Us
+        </Button>
-          </Button>
+        {loaderData?.userToken ? (
-          {loaderData?.userToken ? (
+          <fetcher.Form
-            <fetcher.Form
+            method="POST"
-              method="POST"
+            action="/actions/news/logout"
-              action="/actions/news/logout"
+          >
-            >
-              <Button
-                variant="newsSecondary"
-                className="hidden sm:block"
-                type="submit"
-              >
-                Logout
-              </Button>
-            </fetcher.Form>
-          ) : (
             <Button
               variant="newsSecondary"
               className="hidden sm:block"
-              onClick={() => setIsLoginOpen(true)}
+              type="submit"
             >
-              Masuk
+              Logout
             </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,7 +37,6 @@ export const action = async ({ request }: Route.ActionArgs) => {
     return data(
       {
         success: true,
-        accessToken: token,
       },
       {
         headers,