feat: add admin login page and authentication logic with form handling

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/pages/admin-login/index.tsx

@@ -0,0 +1,107 @@
+import { useState } from 'react'
+import { Link } from 'react-router'
+
+import { EyeIcon } from '~/components/icons/eye'
+import { Button } from '~/components/ui/button'
+import { APP } from '~/configs/meta'
+
+export const AdminLoginPage = () => {
+  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>
+  )
+}

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

@@ -1,108 +1,4 @@
-import { useState } from 'react'
+import { AdminLoginPage } from '~/pages/admin-login'
-import { Link } from 'react-router'
 
-import { EyeIcon } from '~/components/icons/eye'
+const AuthLayout = () => <AdminLoginPage />
-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>
-  )
-}
 export default AuthLayout

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

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

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

@@ -1,4 +1,2 @@
-const DashboardAdminsLayout = () => {
+const DashboardAdminsLayout = () => <div>Admins Page</div>
-  return <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 = () => {
+const DashboardAdvertisementsLayout = () => <AdvertisementsPage />
-  return <AdvertisementsPage />
-}
 export default DashboardAdvertisementsLayout

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

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

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

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

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

@@ -1,4 +1,2 @@
-const DashboardSiteDataLayout = () => {
+const DashboardSiteDataLayout = () => <div>Site Data Page</div>
-  return <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 = () => {
+const DashboardSubscriptionsLayout = () => <SubscriptionsPage />
-  return <SubscriptionsPage />
-}
 export default DashboardSubscriptionsLayout

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

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

app/routes/_admin.lg-admin.tsx

@@ -1,6 +1,7 @@
-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'
@@ -9,7 +10,14 @@ import type { Route } from './+types/_admin.lg-admin'
 
 export const loader = async ({ request }: Route.LoaderArgs) => {
   const { adminToken } = await handleCookie(request)
+  const { pathname } = new URL(request.url)
+  const isAuthPage = AUTH_PAGES.includes(pathname)
   let adminData
+
+  if (!isAuthPage && !adminToken) {
+    throw redirect('/lg-admin/login')
+  }
+
   if (adminToken) {
     const { data } = await getStaff({
       accessToken: adminToken,

app/routes/_layout._index.tsx

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

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

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

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

@@ -1,7 +1,5 @@
 import { NewsDetailPage } from '~/pages/news-detail'
 
-const NewsDetailLayout = () => {
+const NewsDetailLayout = () => <NewsDetailPage />
-  return <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 { getUser } from '~/apis/news/get-user'
+import { userLoginRequest } from '~/apis/news/login-user'
+import { loginSchema, type TLoginSchema } from '~/layouts/news/form-login'
+import { generateTokenCookie } 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 userLoginRequest(payload)
+    const { token } = loginData
+    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 },
+    )
+  }
+}