feat: enhance login form with error handling and disable state

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>
@@ -89,6 +105,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,7 +11,6 @@ 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"
@@ -54,6 +53,5 @@ export const HeaderTop = () => {
         )}
       </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,