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

app/apis/admin/get-staff.ts

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

app/apis/admin/login-staff.ts

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

app/apis/news/login-user.ts

@@ -9,7 +9,7 @@ const loginResponseSchema = z.object({
   }),
 })
 
-export const newsLoginRequest = async (payload: TLoginSchema) => {
+export const userLoginRequest = async (payload: TLoginSchema) => {
   try {
     const { data } = await HttpServer().post('/api/user/login', payload)
     return loginResponseSchema.parse(data)

app/apis/news/register-user.ts

@@ -9,7 +9,7 @@ const loginResponseSchema = z.object({
   }),
 })
 
-export const newsRegisterRequest = async (payload: TRegisterSchema) => {
+export const userRegisterRequest = async (payload: TRegisterSchema) => {
   try {
     const { subscribe_plan, ...restPayload } = payload
     const transformedPayload = {

app/configs/cookies.ts

@@ -2,6 +2,6 @@ export const USER_COOKIES = {
   token: '__lg-usr-tkn',
 }
 
-export const ADMIN_COOKIES = {
-  token: '__lg-adm-tkn',
+export const STAFF_COOKIES = {
+  token: '__lg-stf-tkn',
 }

app/configs/meta.ts

@@ -18,13 +18,9 @@ export const META_TITLE_CONFIG: TMetaTitleConfig = [
     title: 'Home',
   },
   {
-    path: '/lg-admin/auth/login',
+    path: '/lg-admin/login',
     title: 'Login',
   },
-  {
-    path: '/lg-admin/auth/register',
-    title: 'Register',
-  },
   ...ADMIN_MENU.flatMap((menu) =>
     menu.items.map((item) => ({ path: item.url, title: item.title })),
   ),

app/configs/pages.ts

@@ -0,0 +1,6 @@
+export const AUTH_PAGES = [
+  '/lg-admin/login',
+  '/lg-admin/forgot-password',
+  '/lg-admin/reset-password',
+  '/lg-admin/register',
+]

app/libs/cookie.server.ts

@@ -1,6 +1,6 @@
 import { createCookie } from 'react-router'
 
-import { ADMIN_COOKIES, USER_COOKIES } from '~/configs/cookies'
+import { STAFF_COOKIES, USER_COOKIES } from '~/configs/cookies'
 
 export const userTokenCookieConfig = createCookie(USER_COOKIES.token, {
   httpOnly: false,
@@ -10,10 +10,10 @@ export const userTokenCookieConfig = createCookie(USER_COOKIES.token, {
   path: '/',
 })
 
-export const adminTokenCookieConfig = createCookie(ADMIN_COOKIES.token, {
+export const staffTokenCookieConfig = createCookie(STAFF_COOKIES.token, {
   httpOnly: false,
   sameSite: 'lax',
   secure: process.env.NODE_ENV === 'production',
   secrets: [process.env.VITE_SALT_KEY || 'default-secret'],
-  path: '/lg-admin',
+  path: '/',
 })

app/libs/cookies.ts

@@ -1,16 +1,16 @@
-import { adminTokenCookieConfig, userTokenCookieConfig } from './cookie.server'
+import { staffTokenCookieConfig, userTokenCookieConfig } from './cookie.server'
 
 export const handleCookie = async (request: Request) => {
   const headers = request.headers
   const userToken = (await userTokenCookieConfig.parse(
     headers.get('Cookie'),
   )) as string
-  const adminToken = (await adminTokenCookieConfig.parse(
+  const staffToken = (await staffTokenCookieConfig.parse(
     headers.get('Cookie'),
   )) as string
 
   return {
     userToken,
-    adminToken,
+    staffToken,
   }
 }

app/libs/logout-header.server.ts

@@ -1,4 +1,4 @@
-import { ADMIN_COOKIES, USER_COOKIES } from '~/configs/cookies'
+import { STAFF_COOKIES, USER_COOKIES } from '~/configs/cookies'
 
 export const setUserLogoutHeaders = () => {
   const responseHeaders = new Headers()
@@ -10,11 +10,11 @@ export const setUserLogoutHeaders = () => {
   return responseHeaders
 }
 
-export const setAdminLogoutHeaders = () => {
+export const setStaffLogoutHeaders = () => {
   const responseHeaders = new Headers()
   responseHeaders.append(
     'Set-Cookie',
-    `${ADMIN_COOKIES.token}=; Path=/lg-admin; HttpOnly; SameSite=Strict; Max-Age=0`,
+    `${STAFF_COOKIES.token}=; Path=/; HttpOnly; SameSite=Strict; Max-Age=0`,
   )
 
   return responseHeaders

app/pages/admin-login/index.tsx

@@ -0,0 +1,117 @@
+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 { 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 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
+    }
+    // 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">
+      <div className="grid max-w-lg items-center justify-center space-y-7 rounded-[20px] border border-[#E6E6E6] bg-white p-8">
+        <div className="flex flex-col items-center">
+          <Link to="/lg-admin">
+            <img
+              src={APP.logo}
+              alt={APP.title}
+              className="h-[80px]"
+            />
+          </Link>
+        </div>
+        <p className="text-center">
+          Selamat Datang, silakan masukkan akun Anda untuk melanjutkan!
+        </p>
+        <div>
+          <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"
+                name="email"
+              />
+
+              <Input
+                id="password"
+                label="Kata Sandi"
+                placeholder="Masukkan Kata Sandi"
+                name="password"
+                type="password"
+              />
+
+              {error && (
+                <div className="text-sm text-red-500 capitalize">{error}</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>
+
+              <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 */}
+      <div className="mt-4 text-center text-sm">
+        Belum punya akun?{' '}
+        <Button
+          onClick={() => {}}
+          className="font-semibold text-[#2E2F7C]"
+          variant="link"
+          size="fit"
+        >
+          Daftar Disini
+        </Button>
+      </div>
+    </div>
+  )
+}

app/routes/_admin.lg-admin._auth.login.tsx

@@ -1,108 +1,4 @@
-import { useState } from 'react'
-import { Link } from 'react-router'
+import { AdminLoginPage } from '~/pages/admin-login'
 
-import { EyeIcon } from '~/components/icons/eye'
-import { Button } from '~/components/ui/button'
-import { APP } from '~/configs/meta'
-
-const AuthLayout = () => {
-  const [showPassword, setShowPassword] = useState(false)
-
-  return (
-    <div className="flex min-h-dvh min-w-dvw flex-col items-center justify-center space-y-8">
-      <div className="grid max-w-lg items-center justify-center space-y-7 rounded-[20px] border border-[#E6E6E6] bg-white p-8">
-        <div className="flex flex-col items-center">
-          <Link to="/lg-admin">
-            <img
-              src={APP.logo}
-              alt={APP.title}
-              className="h-[80px]"
-            />
-          </Link>
-        </div>
-        <p className="text-center">
-          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"
-                placeholder="Contoh: legal@legalgo.id"
-                className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2"
-              />
-            </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'}
-                placeholder="Masukkan Kata Sandi"
-                className="w-full rounded-md border border-[#DFDFDF] p-2 pr-10 focus:outline-[#2E2F7C]"
-              />
-              <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>
-
-            {/* Tombol Masuk */}
-            <Button className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
-              Masuk
-            </Button>
-          </form>
-        </div>
-      </div>
-      {/* Link Daftar */}
-      <div className="mt-4 text-center text-sm">
-        Belum punya akun?{' '}
-        <Button
-          onClick={() => {}}
-          className="font-semibold text-[#2E2F7C]"
-          variant="link"
-          size="fit"
-        >
-          Daftar Disini
-        </Button>
-      </div>
-    </div>
-  )
-}
+const AuthLayout = () => <AdminLoginPage />
 export default AuthLayout

app/routes/_admin.lg-admin._dashboard._index.tsx

@@ -1,6 +1,4 @@
 import { DashboardPage } from '~/pages/dashboard'
 
-const DashboardIndexLayout = () => {
-  return <DashboardPage />
-}
+const DashboardIndexLayout = () => <DashboardPage />
 export default DashboardIndexLayout

app/routes/_admin.lg-admin._dashboard.admins.tsx

@@ -1,4 +1,2 @@
-const DashboardAdminsLayout = () => {
-  return <div>Admins Page</div>
-}
+const DashboardAdminsLayout = () => <div>Admins Page</div>
 export default DashboardAdminsLayout

app/routes/_admin.lg-admin._dashboard.advertisements.tsx

@@ -1,6 +1,4 @@
 import { AdvertisementsPage } from '~/pages/dashboard-advertisements'
 
-const DashboardAdvertisementsLayout = () => {
-  return <AdvertisementsPage />
-}
+const DashboardAdvertisementsLayout = () => <AdvertisementsPage />
 export default DashboardAdvertisementsLayout

app/routes/_admin.lg-admin._dashboard.contents.tsx

@@ -1,6 +1,4 @@
 import { ContentsPage } from '~/pages/dashboard-contents'
 
-const DashboardContentsLayout = () => {
-  return <ContentsPage />
-}
+const DashboardContentsLayout = () => <ContentsPage />
 export default DashboardContentsLayout

app/routes/_admin.lg-admin._dashboard.settings.tsx

@@ -1,4 +1,2 @@
-const DashboardSettingsLayout = () => {
-  return <div>Settings Page</div>
-}
+const DashboardSettingsLayout = () => <div>Settings Page</div>
 export default DashboardSettingsLayout

app/routes/_admin.lg-admin._dashboard.site-data.tsx

@@ -1,4 +1,2 @@
-const DashboardSiteDataLayout = () => {
-  return <div>Site Data Page</div>
-}
+const DashboardSiteDataLayout = () => <div>Site Data Page</div>
 export default DashboardSiteDataLayout

app/routes/_admin.lg-admin._dashboard.subscriptions.tsx

@@ -1,6 +1,4 @@
 import { SubscriptionsPage } from '~/pages/dashboard-subscriptions'
 
-const DashboardSubscriptionsLayout = () => {
-  return <SubscriptionsPage />
-}
+const DashboardSubscriptionsLayout = () => <SubscriptionsPage />
 export default DashboardSubscriptionsLayout

app/routes/_admin.lg-admin._dashboard.users.tsx

@@ -1,6 +1,4 @@
 import { UsersPage } from '~/pages/dashboard-users'
 
-const DashboardUsersLayout = () => {
-  return <UsersPage />
-}
+const DashboardUsersLayout = () => <UsersPage />
 export default DashboardUsersLayout

app/routes/_admin.lg-admin.tsx

@@ -1,7 +1,38 @@
-import { Outlet } from 'react-router'
+import { Outlet, redirect } from 'react-router'
 
+import { getStaff } from '~/apis/admin/get-staff'
+import { AUTH_PAGES } from '~/configs/pages'
 import { AdminProvider } from '~/contexts/admin'
 import { AdminDefaultLayout } from '~/layouts/admin/default'
+import { handleCookie } from '~/libs/cookies'
+
+import type { Route } from './+types/_admin.lg-admin'
+
+export const loader = async ({ request }: Route.LoaderArgs) => {
+  const { staffToken } = await handleCookie(request)
+  const { pathname } = new URL(request.url)
+  const isAuthPage = AUTH_PAGES.includes(pathname)
+  let adminData
+
+  if (!isAuthPage && !staffToken) {
+    throw redirect('/lg-admin/login')
+  }
+
+  if (isAuthPage && staffToken) {
+    throw redirect('/lg-admin')
+  }
+
+  if (staffToken) {
+    const { data } = await getStaff({
+      accessToken: staffToken,
+    })
+    adminData = data
+  }
+
+  return {
+    adminData,
+  }
+}
 
 const AdminLayout = () => {
   return (

app/routes/_layout._index.tsx

@@ -1,7 +1,5 @@
 import { NewsPage } from '~/pages/news'
 
-const NewsIndexLayout = () => {
-  return <NewsPage />
-}
+const NewsIndexLayout = () => <NewsPage />
 
 export default NewsIndexLayout

app/routes/_layout.category.$name.tsx

@@ -1,7 +1,5 @@
 import { NewsCategoriesPage } from '~/pages/news-categories'
 
-const NewsCategoriesLayout = () => {
-  return <NewsCategoriesPage />
-}
+const NewsCategoriesLayout = () => <NewsCategoriesPage />
 
 export default NewsCategoriesLayout

app/routes/_layout.detail.$slug.tsx

@@ -1,7 +1,5 @@
 import { NewsDetailPage } from '~/pages/news-detail'
 
-const NewsDetailLayout = () => {
-  return <NewsDetailPage />
-}
+const NewsDetailLayout = () => <NewsDetailPage />
 
 export default NewsDetailLayout

app/routes/actions.admin.login.ts

@@ -0,0 +1,72 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { data } from 'react-router'
+import { getValidatedFormData } from 'remix-hook-form'
+import { XiorError } from 'xior'
+
+import { getStaff } from '~/apis/admin/get-staff'
+import { staffLoginRequest } from '~/apis/admin/login-staff'
+import { loginSchema, type TLoginSchema } from '~/pages/admin-login'
+import { generateStaffTokenCookie } from '~/utils/token'
+
+import type { Route } from './+types/actions.login'
+
+export const action = async ({ request }: Route.ActionArgs) => {
+  try {
+    const {
+      errors,
+      data: payload,
+      receivedValues: defaultValues,
+    } = await getValidatedFormData<TLoginSchema>(
+      request,
+      zodResolver(loginSchema),
+      false,
+    )
+
+    if (errors) {
+      return data({ success: false, errors, defaultValues }, { status: 400 })
+    }
+
+    const { data: loginData } = await staffLoginRequest(payload)
+    const { token } = loginData
+    const { data: staffData } = await getStaff({
+      accessToken: token,
+    })
+    const tokenCookie = generateStaffTokenCookie({
+      token,
+    })
+
+    const headers = new Headers()
+    headers.append('Set-Cookie', await tokenCookie)
+
+    return data(
+      {
+        success: true,
+        staff: staffData,
+      },
+      {
+        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 },
+    )
+  }
+}

app/routes/actions.login.ts

@@ -4,9 +4,9 @@ import { getValidatedFormData } from 'remix-hook-form'
 import { XiorError } from 'xior'
 
 import { getUser } from '~/apis/news/get-user'
-import { newsLoginRequest } from '~/apis/news/login'
+import { userLoginRequest } from '~/apis/news/login-user'
 import { loginSchema, type TLoginSchema } from '~/layouts/news/form-login'
-import { generateTokenCookie } from '~/utils/token'
+import { generateUserTokenCookie } from '~/utils/token'
 
 import type { Route } from './+types/actions.login'
 
@@ -26,12 +26,12 @@ export const action = async ({ request }: Route.ActionArgs) => {
       return data({ success: false, errors, defaultValues }, { status: 400 })
     }
 
-    const { data: loginData } = await newsLoginRequest(payload)
+    const { data: loginData } = await userLoginRequest(payload)
     const { token } = loginData
     const { data: userData } = await getUser({
       accessToken: token,
     })
-    const tokenCookie = generateTokenCookie({
+    const tokenCookie = generateUserTokenCookie({
       token,
     })
 

app/routes/actions.register.ts

@@ -4,12 +4,12 @@ import { getValidatedFormData } from 'remix-hook-form'
 import { XiorError } from 'xior'
 
 import { getUser } from '~/apis/news/get-user'
-import { newsRegisterRequest } from '~/apis/news/register'
+import { userRegisterRequest } from '~/apis/news/register-user'
 import {
   registerSchema,
   type TRegisterSchema,
 } from '~/layouts/news/form-register'
-import { generateTokenCookie } from '~/utils/token'
+import { generateUserTokenCookie } from '~/utils/token'
 
 import type { Route } from './+types/actions.register'
 
@@ -29,12 +29,12 @@ export const action = async ({ request }: Route.ActionArgs) => {
       return data({ success: false, errors, defaultValues }, { status: 400 })
     }
 
-    const { data: registerData } = await newsRegisterRequest(payload)
+    const { data: registerData } = await userRegisterRequest(payload)
     const { token } = registerData
     const { data: userData } = await getUser({
       accessToken: token,
     })
-    const tokenCookie = generateTokenCookie({
+    const tokenCookie = generateUserTokenCookie({
       token,
     })
 

app/utils/token.ts

@@ -1,12 +1,15 @@
 import { decodeJwt } from 'jose'
 
-import { userTokenCookieConfig } from '~/libs/cookie.server'
+import {
+  staffTokenCookieConfig,
+  userTokenCookieConfig,
+} from '~/libs/cookie.server'
 
 type TTokenCookie = {
   token: string
 }
 
-export const generateTokenCookie = (parameters: TTokenCookie) => {
+export const generateUserTokenCookie = (parameters: TTokenCookie) => {
   const { token } = parameters
 
   const decodedToken = decodeJwt(token)
@@ -19,3 +22,17 @@ export const generateTokenCookie = (parameters: TTokenCookie) => {
     expires: expirationDate,
   })
 }
+
+export const generateStaffTokenCookie = (parameters: TTokenCookie) => {
+  const { token } = parameters
+
+  const decodedToken = decodeJwt(token)
+  const decodedTokenExp = decodedToken.exp
+  const expirationDate = decodedTokenExp
+    ? new Date(decodedTokenExp * 1000)
+    : undefined
+
+  return staffTokenCookieConfig.serialize(token, {
+    expires: expirationDate,
+  })
+}