Merge remote-tracking branch 'origin/master' into feature/slicing

app/apis/news/get-user.ts

@@ -0,0 +1,23 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+
+const playerSchema = z.object({
+  data: z.object({
+    id: z.string(),
+    email: z.string(),
+    subscribe_plan_code: z.string(),
+    subscribe_plan_name: z.string(),
+    subscribe_status: z.string(),
+  }),
+})
+
+export const getUser = async (parameters: THttpServer) => {
+  try {
+    const { data } = await HttpServer(parameters).get(`/api/user/profile`)
+    return playerSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/news/login.ts

@@ -1,7 +1,7 @@
 import { z } from 'zod'
 
 import { type TLoginSchema } from '~/layouts/news/form-login'
-import HttpClient from '~/libs/http-client'
+import { HttpServer } from '~/libs/http-server'
 
 const loginResponseSchema = z.object({
   data: z.object({
@@ -11,7 +11,7 @@ const loginResponseSchema = z.object({
 
 export const newsLoginRequest = async (payload: TLoginSchema) => {
   try {
-    const { data } = await HttpClient().post('/api/user/login', payload)
+    const { data } = await HttpServer().post('/api/user/login', payload)
     return loginResponseSchema.parse(data)
   } catch (error) {
     // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject

app/apis/news/register.ts

@@ -0,0 +1,20 @@
+import { z } from 'zod'
+
+import type { TRegisterSchema } from '~/layouts/news/form-register'
+import { HttpServer } from '~/libs/http-server'
+
+const loginResponseSchema = z.object({
+  data: z.object({
+    token: z.string(),
+  }),
+})
+
+export const newsRegisterRequest = async (payload: TRegisterSchema) => {
+  try {
+    const { data } = await HttpServer().post('/api/user/register', payload)
+    return loginResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/components/ui/input.tsx

@@ -1,3 +1,4 @@
+import { Field, Label, Input as UIInput } from '@headlessui/react'
 import { useState, type ComponentProps, type ReactNode } from 'react'
 import {
   get,
@@ -33,6 +34,7 @@ export const Input = <TFormValues extends Record<string, unknown>>(
     rules,
     type = 'text',
     placeholder,
+    disabled,
     ...rest
   } = properties
   const [inputType, setInputType] = useState(type)
@@ -45,15 +47,15 @@ export const Input = <TFormValues extends Record<string, unknown>>(
   const error: FieldError = get(errors, name)
 
   return (
-    <div className="relative">
+    <Field
-      <label
+      className="relative"
-        htmlFor={id}
+      disabled={disabled}
-        className="mb-1 block text-gray-700"
-      >
-        {label} {error && <span className="text-red-500">{error.message}</span>}
-      </label>
-      <input
       id={id}
+    >
+      <Label className="mb-1 block text-gray-700">
+        {label} {error && <span className="text-red-500">{error.message}</span>}
+      </Label>
+      <UIInput
         type={inputType}
         className="h-[42px] w-full rounded-md border border-[#DFDFDF] p-2"
         placeholder={inputType === 'password' ? '******' : placeholder}
@@ -78,6 +80,6 @@ export const Input = <TFormValues extends Record<string, unknown>>(
           />
         </Button>
       )}
-    </div>
+    </Field>
   )
 }

app/contexts/news.tsx

@@ -15,7 +15,7 @@ export type NewsContextProperties = {
   isRegisterOpen: boolean
   setIsRegisterOpen: Dispatch<SetStateAction<boolean>>
   isForgetOpen: boolean
-  setForgetOpen: Dispatch<SetStateAction<boolean>>
+  setIsForgetOpen: Dispatch<SetStateAction<boolean>>
   isSuccessOpen: ModalProperties['isOpen']
   setIsSuccessOpen: Dispatch<
     SetStateAction<ModalProperties['isOpen'] | undefined>
@@ -29,7 +29,7 @@ const NewsContext = createContext<NewsContextProperties | undefined>(undefined)
 export const NewsProvider = ({ children }: PropsWithChildren) => {
   const [isLoginOpen, setIsLoginOpen] = useState(false)
   const [isRegisterOpen, setIsRegisterOpen] = useState(false)
-  const [isForgetOpen, setForgetOpen] = useState(false)
+  const [isForgetOpen, setIsForgetOpen] = useState(false)
   const [isSuccessOpen, setIsSuccessOpen] =
     useState<ModalProperties['isOpen']>()
   const [isInitSubscribeOpen, setIsInitSubscribeOpen] = useState(false)
@@ -42,7 +42,7 @@ export const NewsProvider = ({ children }: PropsWithChildren) => {
         isRegisterOpen,
         setIsRegisterOpen,
         isForgetOpen,
-        setForgetOpen,
+        setIsForgetOpen,
         isSuccessOpen,
         setIsSuccessOpen,
         isInitSubscribeOpen,

app/layouts/news/default.tsx

@@ -22,7 +22,7 @@ export const NewsDefaultLayout = (properties: PropsWithChildren) => {
     isRegisterOpen,
     setIsRegisterOpen,
     isForgetOpen,
-    setForgetOpen,
+    setIsForgetOpen,
     isSuccessOpen,
     setIsSuccessOpen,
     isInitSubscribeOpen,
@@ -49,12 +49,7 @@ export const NewsDefaultLayout = (properties: PropsWithChildren) => {
         onClose={() => setIsLoginOpen(false)}
         description="Selamat Datang, silakan daftarkan akun Anda untuk melanjutkan!"
       >
-        <FormLogin
+        <FormLogin />
-          setIsRegisterOpen={setIsRegisterOpen}
-          setIsLoginOpen={setIsLoginOpen}
-          setIsForgetOpen={setForgetOpen}
-          setIsInitSubscribeOpen={setIsInitSubscribeOpen}
-        />
       </PopupModal>
 
       <PopupModal
@@ -67,7 +62,7 @@ export const NewsDefaultLayout = (properties: PropsWithChildren) => {
 
       <PopupModal
         isOpen={isForgetOpen}
-        onClose={() => setForgetOpen(false)}
+        onClose={() => setIsForgetOpen(false)}
         description="Selamat Datang, silakan isi keterangan akun Anda untuk melanjutkan!"
       >
         <FormForgotPassword />

app/layouts/news/form-login.tsx

@@ -6,7 +6,7 @@ import { z } from 'zod'
 
 import { Button } from '~/components/ui/button'
 import { Input } from '~/components/ui/input'
-import type { NewsContextProperties } from '~/contexts/news'
+import { useNewsContext } from '~/contexts/news'
 
 export const loginSchema = z.object({
   email: z.string().email('Email tidak valid'),
@@ -15,20 +15,13 @@ export const loginSchema = z.object({
 
 export type TLoginSchema = z.infer<typeof loginSchema>
 
-type TProperties = {
+export const FormLogin = () => {
-  setIsRegisterOpen: NewsContextProperties['setIsRegisterOpen']
-  setIsLoginOpen: NewsContextProperties['setIsLoginOpen']
-  setIsForgetOpen: NewsContextProperties['setForgetOpen']
-  setIsInitSubscribeOpen: NewsContextProperties['setIsInitSubscribeOpen']
-}
-
-export const FormLogin = (properties: TProperties) => {
   const {
     setIsRegisterOpen,
     setIsLoginOpen,
     setIsForgetOpen,
     setIsInitSubscribeOpen,
-  } = properties
+  } = useNewsContext()
   const fetcher = useFetcher()
   const [error, setError] = useState<string>()
   const [disabled, setDisabled] = useState(false)
@@ -42,20 +35,19 @@ export const FormLogin = (properties: TProperties) => {
   const { handleSubmit } = formMethods
 
   useEffect(() => {
-    if (fetcher.state !== 'idle' || fetcher.data?.success) {
+    if (!fetcher.data?.success) {
-      setDisabled(true)
-      return
-    }
-    setDisabled(false)
-  }, [fetcher])
-
-  useEffect(() => {
-    if (fetcher.data?.success) {
-      setIsInitSubscribeOpen(true)
-      setIsLoginOpen(false)
-      return
-    }
       setError(fetcher.data?.message)
+      setDisabled(false)
+      return
+    }
+
+    setDisabled(true)
+    setError(undefined)
+    setIsLoginOpen(false)
+
+    if (fetcher.data?.user.subscribe_status === 'inactive') {
+      setIsInitSubscribeOpen(true)
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetcher])
 
@@ -71,7 +63,7 @@ export const FormLogin = (properties: TProperties) => {
           >
             <Input
               id="email"
-              label="Email / No Telepon"
+              label="Email"
               placeholder="Contoh: legal@legalgo.id"
               name="email"
             />
@@ -88,7 +80,6 @@ export const FormLogin = (properties: TProperties) => {
               <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>
               <Button
@@ -104,7 +95,6 @@ export const FormLogin = (properties: TProperties) => {
               </Button>
             </div>
 
-            {/* Tombol Masuk */}
             <Button
               disabled={disabled}
               type="submit"

app/layouts/news/form-register.tsx

@@ -1,93 +1,96 @@
-import { useState } from 'react'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useEffect, useState } 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 { useNewsContext } from '~/contexts/news'
+
+export const registerSchema = z
+  .object({
+    email: z.string().email('Email tidak valid'),
+    password: z.string().min(6, 'Kata sandi minimal 6 karakter'),
+    rePassword: z.string().min(6, 'Kata sandi minimal 6 karakter'),
+    phone: z.string().min(10, 'No telepon tidak valid'),
+  })
+  .refine((field) => field.password === field.rePassword, {
+    message: 'Kata sandi tidak sama',
+    path: ['rePassword'],
+  })
+
+export type TRegisterSchema = z.infer<typeof registerSchema>
 
 export const FormRegister = () => {
-  const [showPassword, setShowPassword] = useState(false)
+  const { setIsLoginOpen, setIsRegisterOpen } = useNewsContext()
+  const [error, setError] = useState<string>()
+  const [disabled, setDisabled] = useState(false)
+  const fetcher = useFetcher()
+
+  const formMethods = useRemixForm<TRegisterSchema>({
+    mode: 'onSubmit',
+    fetcher,
+    resolver: zodResolver(registerSchema),
+  })
+
+  const { handleSubmit } = formMethods
+
+  useEffect(() => {
+    if (!fetcher.data?.success) {
+      setError(fetcher.data?.message)
+      setDisabled(false)
+      return
+    }
+
+    setDisabled(true)
+    setError(undefined)
+    setIsRegisterOpen(false)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetcher])
+
   return (
     <div className="flex flex-col items-center justify-center">
       <div className="w-full max-w-md">
-        <form>
+        <RemixFormProvider {...formMethods}>
-          {/* Input Email / No Telepon */}
+          <fetcher.Form
-          <div className="mb-4">
+            method="post"
-            <label
+            onSubmit={handleSubmit}
-              htmlFor="email"
+            className="space-y-4"
-              className="mb-1 block text-gray-700"
+            action="/actions/register"
           >
-              Email/No. Telepon
+            <Input
-            </label>
+              id="email"
-            <input
+              label="Email"
-              type="text"
               placeholder="Contoh: legal@legalgo.id"
-              className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2"
+              name="email"
-              required
             />
-          </div>
 
-          {/* Input Password */}
+            <Input
-          <div className="relative mb-4">
+              id="password"
-            <label
+              label="Kata Sandi"
-              htmlFor="password"
-              className="mb-1 block text-gray-700 focus:outline-[#2E2F7C]"
-            >
-              Kata Sandi
-            </label>
-            <input
-              type={showPassword ? 'text' : 'password'}
               placeholder="Masukkan Kata Sandi"
-              className="w-full rounded-md border border-[#DFDFDF] p-2 pr-10 focus:outline-[#2E2F7C]"
+              name="password"
-              required
+              type="password"
             />
-            <button
-              type="button"
-              className="absolute top-9 right-3 text-gray-500"
-              onClick={() => setShowPassword(!showPassword)}
-            >
-              {/* {showPassword ? <EyeOffIcon size={18} /> : <EyeIcon size={18} />} */}
-            </button>
-          </div>
 
-          {/* Reinput Password */}
+            <Input
-          <div className="relative mb-4">
+              id="re-password"
-            <label
+              label="Ulangi Kata Sandi"
-              htmlFor="password"
-              className="mb-1 block text-gray-700 focus:outline-[#2E2F7C]"
-            >
-              Ulangi Kata Sandi
-            </label>
-            <input
-              type={showPassword ? 'text' : 'password'}
               placeholder="Masukkan Kata Sandi"
-              className="w-full rounded-md border border-[#DFDFDF] p-2 pr-10 focus:outline-[#2E2F7C]"
+              name="rePassword"
-              required
+              type="password"
             />
-            <button
-              type="button"
-              className="absolute top-9 right-3 text-gray-500"
-              onClick={() => setShowPassword(!showPassword)}
-            >
-              {/* {showPassword ? <EyeOffIcon size={18} /> : <EyeIcon size={18} />} */}
-            </button>
-          </div>
 
-          {/* No Telepon */}
+            <Input
-          <div className="mb-4">
+              id="phone"
-            <label
+              label="No. Telepon"
-              htmlFor="no-telpon"
+              placeholder="Masukkan No. Telepon"
-              className="mb-1 block text-gray-700"
+              name="phone"
-            >
-              No. Telepon
-            </label>
-            <input
-              type="text"
-              placeholder="Contoh: legal@legalgo.id"
-              className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2"
-              required
             />
-          </div>
 
             {/* Subscribe*/}
-          <div className="mb-4">
+            {/* <div className="mb-4">
               <label
                 htmlFor="subscription"
                 className="mb-1 block text-gray-700"
@@ -97,13 +100,37 @@ export const FormRegister = () => {
               <select className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2">
                 <option selected>Subscription</option>
               </select>
-          </div>
+            </div> */}
 
-          {/* Tombol Masuk */}
+            {error && (
-          <Button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
+              <div className="text-sm text-red-500 capitalize">{error}</div>
+            )}
+
+            <Button
+              disabled={disabled}
+              type="submit"
+              className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800"
+            >
               Daftar
             </Button>
-        </form>
+          </fetcher.Form>
+        </RemixFormProvider>
+
+        {/* Link Login */}
+        <div className="mt-4 text-center text-sm">
+          Sudah punya akun?{' '}
+          <Button
+            onClick={() => {
+              setIsLoginOpen(true)
+              setIsRegisterOpen(false)
+            }}
+            className="font-semibold text-[#2E2F7C]"
+            variant="link"
+            size="fit"
+          >
+            Masuk Disini
+          </Button>
+        </div>
       </div>
     </div>
   )

app/libs/http-server.ts

@@ -2,9 +2,10 @@ import xior, { merge } from 'xior'
 
 const baseURL = import.meta.env.VITE_API_URL
 
-type THttpClient = { token?: string }
+export type THttpServer = { accessToken?: string }
-const HttpClient = (parameters?: THttpClient) => {
+
-  const { token } = parameters || {}
+export const HttpServer = (parameters?: THttpServer) => {
+  const { accessToken } = parameters || {}
   const instance = xior.create({
     baseURL,
   })
@@ -14,7 +15,7 @@ const HttpClient = (parameters?: THttpClient) => {
 
     return merge(config, {
       headers: {
-        ...(token && { Authorization: `Bearer ${token}` }),
+        ...(accessToken && { Authorization: `Bearer ${accessToken}` }),
       },
     })
   })
@@ -30,5 +31,3 @@ const HttpClient = (parameters?: THttpClient) => {
 
   return instance
 }
-
-export default HttpClient

app/routes/actions.login.ts

@@ -3,6 +3,7 @@ import { data } from 'react-router'
 import { getValidatedFormData } from 'remix-hook-form'
 import { XiorError } from 'xior'
 
+import { getUser } from '~/apis/news/get-user'
 import { newsLoginRequest } from '~/apis/news/login'
 import { loginSchema, type TLoginSchema } from '~/layouts/news/form-login'
 import { generateTokenCookie } from '~/utils/token'
@@ -27,6 +28,9 @@ export const action = async ({ request }: Route.ActionArgs) => {
 
     const { data: loginData } = await newsLoginRequest(payload)
     const { token } = loginData
+    const { data: userData } = await getUser({
+      accessToken: token,
+    })
     const tokenCookie = generateTokenCookie({
       token,
     })
@@ -37,6 +41,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
     return data(
       {
         success: true,
+        user: userData,
       },
       {
         headers,

app/routes/actions.register.ts

@@ -0,0 +1,75 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { data } from 'react-router'
+import { getValidatedFormData } from 'remix-hook-form'
+import { XiorError } from 'xior'
+
+import { getUser } from '~/apis/news/get-user'
+import { newsRegisterRequest } from '~/apis/news/register'
+import {
+  registerSchema,
+  type TRegisterSchema,
+} from '~/layouts/news/form-register'
+import { generateTokenCookie } from '~/utils/token'
+
+import type { Route } from './+types/actions.register'
+
+export const action = async ({ request }: Route.ActionArgs) => {
+  try {
+    const {
+      errors,
+      data: payload,
+      receivedValues: defaultValues,
+    } = await getValidatedFormData<TRegisterSchema>(
+      request,
+      zodResolver(registerSchema),
+      false,
+    )
+
+    if (errors) {
+      return data({ success: false, errors, defaultValues }, { status: 400 })
+    }
+
+    const { data: registerData } = await newsRegisterRequest(payload)
+    const { token } = registerData
+    const { data: userData } = await getUser({
+      accessToken: token,
+    })
+    const tokenCookie = generateTokenCookie({
+      token,
+    })
+
+    const headers = new Headers()
+    headers.append('Set-Cookie', await tokenCookie)
+
+    return data(
+      {
+        success: true,
+        user: userData,
+      },
+      {
+        headers,
+        status: 200,
+        statusText: 'OK',
+      },
+    )
+  } catch (error) {
+    if (error instanceof XiorError) {
+      return data(
+        {
+          success: false,
+          message: error?.response?.data?.error?.message || error.message,
+        },
+        {
+          status: error?.response?.status || 500,
+        },
+      )
+    }
+    return data(
+      {
+        success: false,
+        message: 'Internal server error',
+      },
+      { status: 500 },
+    )
+  }
+}

commitlint.config.js

@@ -4,7 +4,7 @@ import isIgnored from '@commitlint/is-ignored'
 const Configuration = {
   extends: ['@commitlint/config-conventional'],
   formatter: '@commitlint/format',
-  ignores: [(commit) => isIgnored(commit)],
+  ignores: [(commit) => isIgnored(commit) || commit.startsWith('Merge')],
   plugins: [
     {
       rules: {},