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">