feat: add environment configuration and implement cookie handling for user authentication

app/layouts/news/form-login.tsx

@@ -1,18 +1,19 @@
-// import { EyeIcon, EyeOffIcon } from 'lucide-react'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { FormProvider, useForm } from 'react-hook-form'
+import { useEffect } from 'react'
+import { useFetcher } from 'react-router'
+import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
 
 import { Button } from '~/components/ui/button'
 import { Input } from '~/components/ui/input'
 import type { NewsContextProperties } from '~/contexts/news'
 
-const loginSchema = z.object({
+export const loginSchema = z.object({
   email: z.string().email('Email tidak valid'),
   password: z.string().min(6, 'Kata sandi minimal 6 karakter'),
 })
 
-type TLoginSchema = z.infer<typeof loginSchema>
+export type TLoginSchema = z.infer<typeof loginSchema>
 
 type TProperties = {
   setIsRegisterOpen: NewsContextProperties['setIsRegisterOpen']
@@ -28,26 +29,33 @@ export const FormLogin = (properties: TProperties) => {
     setIsForgetOpen,
     setIsInitSubscribeOpen,
   } = properties
+  const fetcher = useFetcher()
 
-  const formMethods = useForm<TLoginSchema>({
+  const formMethods = useRemixForm<TLoginSchema>({
+    mode: 'onSubmit',
+    fetcher,
     resolver: zodResolver(loginSchema),
   })
 
   const { handleSubmit } = formMethods
 
-  const onSubmit = handleSubmit((data) => {
-    console.log('data', data) // eslint-disable-line no-console
-    setIsInitSubscribeOpen(true)
-    setIsLoginOpen(false)
-  })
+  useEffect(() => {
+    if (fetcher.data?.success) {
+      setIsInitSubscribeOpen(true)
+      setIsLoginOpen(false)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetcher])
 
   return (
     <div className="flex items-center justify-center">
       <div className="w-full max-w-md">
-        <FormProvider {...formMethods}>
-          <form
-            onSubmit={onSubmit}
+        <RemixFormProvider {...formMethods}>
+          <fetcher.Form
+            method="post"
+            onSubmit={handleSubmit}
             className="space-y-4"
+            action="/actions/news/login"
           >
             <Input
               id="email"
@@ -86,8 +94,8 @@ export const FormLogin = (properties: TProperties) => {
             >
               Masuk
             </Button>
-          </form>
-        </FormProvider>
+          </fetcher.Form>
+        </RemixFormProvider>
 
         {/* Link Daftar */}
         <div className="mt-4 text-center text-sm">

app/layouts/news/header-top.tsx

@@ -1,11 +1,14 @@
-import { Link } from 'react-router'
+import { Link, useRouteLoaderData } from 'react-router'
 
 import { Button } from '~/components/ui/button'
 import { APP } from '~/configs/meta'
 import { useNewsContext } from '~/contexts/news'
+import type { loader } from '~/routes/_layout.news'
 
 export const HeaderTop = () => {
   const { setIsLoginOpen } = useNewsContext()
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_layout.news')
+
   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]">
@@ -31,15 +34,8 @@ export const HeaderTop = () => {
             className="hidden sm:block"
             onClick={() => setIsLoginOpen(true)}
           >
-            Akun
+            {loaderData?.userToken ? 'Logout' : 'Masuk'}
           </Button>
-          <div className="w-[50px] sm:w-[60px]">
-            <img
-              alt="language"
-              src="/flags/id.svg"
-              className="shadow-sm"
-            />
-          </div>
         </div>
       </div>
     </>