feat: refactor admin authentication to staff authentication with updated cookie handling

app/pages/admin-login/index.tsx

@@ -1,12 +1,43 @@
-import { useState } from 'react'
-import { Link } from 'react-router'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useEffect, useState } from 'react'
+import { Link, useFetcher } from 'react-router'
+import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
+import { z } from 'zod'
 
-import { EyeIcon } from '~/components/icons/eye'
 import { Button } from '~/components/ui/button'
+import { Input } from '~/components/ui/input'
 import { APP } from '~/configs/meta'
 
+export const loginSchema = z.object({
+  email: z.string().email('Email tidak valid'),
+  password: z.string().min(6, 'Kata sandi minimal 6 karakter'),
+})
+
+export type TLoginSchema = z.infer<typeof loginSchema>
+
 export const AdminLoginPage = () => {
-  const [showPassword, setShowPassword] = useState(false)
+  const fetcher = useFetcher()
+  const formMethods = useRemixForm<TLoginSchema>({
+    mode: 'onSubmit',
+    fetcher,
+    resolver: zodResolver(loginSchema),
+  })
+  const [error, setError] = useState<string>()
+  const [disabled, setDisabled] = useState(false)
+
+  const { handleSubmit } = formMethods
+
+  useEffect(() => {
+    if (!fetcher.data?.success) {
+      setError(fetcher.data?.message)
+      setDisabled(false)
+      return
+    }
+
+    setDisabled(true)
+    setError(undefined)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetcher])
 
   return (
     <div className="flex min-h-dvh min-w-dvw flex-col items-center justify-center space-y-8">
@@ -24,70 +55,52 @@ export const AdminLoginPage = () => {
           Selamat Datang, silakan masukkan akun Anda untuk melanjutkan!
         </p>
         <div>
-          <form>
-            {/* Input Email / No Telepon */}
-            <div className="mb-4">
-              <label
-                htmlFor="email"
-                className="mb-1 block text-gray-700"
-              >
-                Email/No. Telepon
-              </label>
-              <input
-                type="text"
+          <RemixFormProvider {...formMethods}>
+            <fetcher.Form
+              method="post"
+              onSubmit={handleSubmit}
+              className="space-y-4"
+              action="/actions/admin/login"
+            >
+              <Input
+                id="email"
+                label="Email"
                 placeholder="Contoh: legal@legalgo.id"
-                className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2"
+                name="email"
               />
-            </div>
 
-            {/* Input Password */}
-            <div className="relative mb-4">
-              <label
-                htmlFor="password"
-                className="mb-1 block text-gray-700 focus:outline-[#2E2F7C]"
-              >
-                Kata Sandi
-              </label>
-              <input
-                type={showPassword ? 'text' : 'password'}
+              <Input
+                id="password"
+                label="Kata Sandi"
                 placeholder="Masukkan Kata Sandi"
-                className="w-full rounded-md border border-[#DFDFDF] p-2 pr-10 focus:outline-[#2E2F7C]"
+                name="password"
+                type="password"
               />
-              <button
-                type="button"
-                className="absolute top-9 right-3 text-gray-500"
-                onClick={() => setShowPassword(!showPassword)}
-              >
-                {showPassword ? (
-                  <EyeIcon
-                    width={15}
-                    height={15}
-                  />
-                ) : (
-                  <EyeIcon
-                    width={15}
-                    height={15}
-                  />
-                )}
-              </button>
-            </div>
 
-            {/* Lupa Kata Sandi */}
-            <div className="mb-4 flex justify-between">
-              <span className="text-gray-600">Lupa Kata Sandi?</span>
-              <Link
-                to="/lg-admin/auth/reset-password"
-                className="font-semibold text-[#2E2F7C]"
-              >
-                Reset Kata Sandi
-              </Link>
-            </div>
+              {error && (
+                <div className="text-sm text-red-500 capitalize">{error}</div>
+              )}
 
-            {/* Tombol Masuk */}
-            <Button className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
-              Masuk
-            </Button>
-          </form>
+              {/* Lupa Kata Sandi */}
+              <div className="mb-4 flex justify-between">
+                <span className="text-gray-600">Lupa Kata Sandi?</span>
+                <Link
+                  to="/lg-admin/auth/reset-password"
+                  className="font-semibold text-[#2E2F7C]"
+                >
+                  Reset Kata Sandi
+                </Link>
+              </div>
+
+              <Button
+                disabled={disabled}
+                type="submit"
+                className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800"
+              >
+                Masuk
+              </Button>
+            </fetcher.Form>
+          </RemixFormProvider>
         </div>
       </div>
       {/* Link Daftar */}