feat(landing): add animation on hero and what we offer section

* fix: docker

* fix landing

* chore(landing): add outputFileTracingRoot to next config

* ci: add github workflow for landing deployment via ssh and docker compose

* chore: add docker-compose file for landing app build and run

* feat docker

.env.example

@@ -1,4 +0,0 @@
-VITE_API_URL=
-
-CMS_SECRET=
-CMS_POSTGRES_URL=

.github/workflows/deploy-landing.yml

@@ -0,0 +1,33 @@
+name: Deploy Landing
+
+on:
+  push:
+    paths:
+      - 'apps/landing/**' # INI BASED ON PATH CHANGES JADI NTAR KALAU ADA PUSH DIISNI OTOMATIS DEPLOY
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Deploy via SSH
+        uses: appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ secrets.SSH_HOST }}
+          username: ${{ secrets.SSH_USER }}
+          key: ${{ secrets.SSH_KEY }}
+          port: ${{ secrets.SSH_PORT }}
+          script: |
+            set -e
+            if [ ! -d ~/imphnen-frontend-service ]; then
+              git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service
+            else
+              cd ~/imphnen-frontend-service && git pull
+            fi
+            echo "NEXT_PUBLIC_API_URL=${{ secrets.NEXT_PUBLIC_API_URL }}" > ~/imphnen-frontend-service/apps/landing/.env
+            docker compose -f ~/imphnen-frontend-service/docker-compose-landing.yml down || true
+            docker compose -f ~/imphnen-frontend-service/docker-compose-landing.yml build
+            docker compose -f ~/imphnen-frontend-service/docker-compose-landing.yml up -d
+            docker image prune -af

README.md

@@ -6,9 +6,10 @@
 
 This repository is a **monorepo** for all frontend services of IMPHNEN. The monorepo includes three main applications:
 
-1. **Gacha** - Application for <a href="https://gacha.imphnen.dev/" target="_blank">gacha website</a>.
-2. **Backoffice** - Application for internal management.
-3. **Dimentorin** - Application for mentoring services.
+1. **Gacha** - Application for <a href="https://gacha.imphnen.dev/" target="_blank">Gacha Website</a>.
+2. **Backoffice** - Application for <a href="https://gacha.imphnen.dev/" target="_blank">Internal Management Website</a>.
+3. **Dimentorin** - Application for <a href="https://dimentorin.imphnen.dev/" target="_blank">Mentoring Service</a>.
+4. **Landing Page** - Application for <a href="https://imphnen.dev/" target="_blank">Landing Page</a>.
 
 ## How to install
 
@@ -24,6 +25,15 @@ This repository is a **monorepo** for all frontend services of IMPHNEN. The mono
 
 ## How to run
 
+### Setup Environment Variables
+
+Before running the applications, you need to set up the environment variables. You can do this by copying the `.env.example` file to `.env` and modifying the values according to your needs.
+
+```sh
+cd apps/{appname}
+cp .env.example .env
+```
+
 ### Development
 
 Use the following commands to run in development mode:
@@ -40,6 +50,10 @@ Use the following commands to run in development mode:
   ```sh
   npm run dimentorin:dev
   ```
+- **Landing Page**:
+  ```sh
+  npm run landing:dev
+  ```
 
 ### Build
 
@@ -57,6 +71,10 @@ Use the following commands to build the applications:
   ```sh
   npm run dimentorin:build
   ```
+- **Landing Page**:
+  ```sh
+  npm run landing:build
+  ```
 
 ### Production
 
@@ -74,19 +92,22 @@ Use the following commands to run the applications in production mode:
   ```sh
   npm run dimentorin:prod
   ```
+- **Landing Page**:
+  ```sh
+  npm run landing:prod
+  ```
 
 ### Storybook
 
 This repository uses Storybook to develop, test, and document UI components in an isolated and interactive environment. Below are the commands to work with Storybook:
 
 - **Run Storybook**
-  
+
   This command starts Storybook in development mode, allowing you to view and test UI components interactively.
 
   ```sh
   npm run ui:storybook
   ```
-  
 
 - **Run Unit Test**
 

apps/backoffice/.env.example

@@ -0,0 +1 @@
+VITE_API_URL=

apps/backoffice/src/app/(protected)/accounts/page.tsx

@@ -18,7 +18,7 @@ import {
   RowSelectionState,
 } from '@tanstack/react-table';
 import ModalEditAccount from './_components/modal-edit-account';
-import { useQueryState } from '../../hook/use-query-state';
+import { useQueryState } from '@imphnen-frontend-service/utils';
 
 interface Account {
   id: number;
@@ -166,7 +166,7 @@ export const Components: FC = (): ReactElement => {
               </Button>
               {showFilter && (
                 <div className="absolute right-0 top-[calc(100%+12px)] z-10 shadow-lg">
-                  <Filter onClose={() => setShowFilter(false)} />
+                  <Filter onClose={() => setShowFilter(false)} options={[]} />
                 </div>
               )}
             </div>

apps/backoffice/src/app/(protected)/dashboard/page.tsx

@@ -10,7 +10,7 @@ import { FC, Fragment, ReactElement, useState } from 'react';
 import ModalAddItem from './_components/modal-add-item';
 import ModalEditItem from './_components/modal-edit-item';
 import ModalDeleteItem from './_components/modal-delete-item';
-import { useQueryState } from '../../hook/use-query-state';
+import { useQueryState } from '@imphnen-frontend-service/utils';
 
 export const Components: FC = (): ReactElement => {
   const [showModalAddItem, setShowModalAddItem] = useState(false);

apps/backoffice/src/app/(public)/auth/login/_hooks/use-login.ts

@@ -2,24 +2,19 @@ import { useForm } from 'react-hook-form';
 import {
   authLoginSchema,
   TLoginRequest,
-  usePostLogin,
 } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { toast } from 'sonner';
+import { useSession } from '@imphnen-frontend-service/utils';
 
 export const useLogin = () => {
-  const postLogin = usePostLogin();
   const form = useForm<TLoginRequest>({
     resolver: zodResolver(authLoginSchema),
     mode: 'all',
   });
 
-  const onSubmit = form.handleSubmit((data) => {
-    postLogin.mutate(data, {
-      onSuccess: () => toast.success("Login sukses"),
-      onError: (error) => toast.error(error.message),
-    });
-  });
+  const { signIn } = useSession();
+
+  const onSubmit = form.handleSubmit((data) => signIn(data));
 
   return {
     form,

apps/backoffice/src/app/(public)/auth/login/page.tsx

@@ -32,7 +32,16 @@ export const Components: FC = (): ReactElement => {
             size="lg"
             className="w-full"
           />
-          <Button type="submit" size="md" className="w-full">
+          <Button
+            disabled={
+              form.formState.isSubmitting ||
+              form.formState.isValidating ||
+              !form.formState.isValid
+            }
+            type="submit"
+            size="md"
+            className="w-full"
+          >
             Login
           </Button>
         </form>

apps/backoffice/src/app/dashboard/layout.tsx

@@ -1,18 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { Outlet } from 'react-router-dom';
-import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
-
-export const AppLayout: FC = (): ReactElement => {
-  return (
-    <div className="bg-primary-50 min-h-screen flex justify-center">
-      <div className="bg-primary-50 min-h-screen w-full flex">
-        <BackofficeSidebar />
-        <div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
-          <Outlet />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default AppLayout;

apps/backoffice/src/app/gacha-roll/layout.tsx

@@ -1,18 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { Outlet } from 'react-router-dom';
-import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
-
-export const AppLayout: FC = (): ReactElement => {
-  return (
-    <div className="bg-primary-50 min-h-screen flex justify-center">
-      <div className="bg-primary-50 min-h-screen w-full flex">
-        <BackofficeSidebar />
-        <div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
-          <Outlet />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default AppLayout;

apps/backoffice/src/app/permissions/layout.tsx

@@ -1,18 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { Outlet } from 'react-router-dom';
-import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
-
-export const AppLayout: FC = (): ReactElement => {
-  return (
-    <div className="bg-primary-50 min-h-screen flex justify-center">
-      <div className="bg-primary-50 min-h-screen w-full flex">
-        <BackofficeSidebar />
-        <div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
-          <Outlet />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default AppLayout;

apps/backoffice/src/app/prizes/layout.tsx

@@ -1,18 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { Outlet } from 'react-router-dom';
-import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
-
-export const AppLayout: FC = (): ReactElement => {
-  return (
-    <div className="bg-primary-50 min-h-screen flex justify-center">
-      <div className="bg-primary-50 min-h-screen w-full flex">
-        <BackofficeSidebar />
-        <div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
-          <Outlet />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default AppLayout;

apps/backoffice/src/app/roles/layout.tsx

@@ -1,18 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { Outlet } from 'react-router-dom';
-import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
-
-export const AppLayout: FC = (): ReactElement => {
-  return (
-    <div className="bg-primary-50 min-h-screen flex justify-center">
-      <div className="bg-primary-50 min-h-screen w-full flex">
-        <BackofficeSidebar />
-        <div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
-          <Outlet />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default AppLayout;

apps/backoffice/src/app/transactions/layout.tsx

@@ -1,18 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { Outlet } from 'react-router-dom';
-import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
-
-export const AppLayout: FC = (): ReactElement => {
-  return (
-    <div className="bg-primary-50 min-h-screen flex justify-center">
-      <div className="bg-primary-50 min-h-screen w-full flex">
-        <BackofficeSidebar />
-        <div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
-          <Outlet />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default AppLayout;

apps/backoffice/src/middleware.ts

@@ -1,11 +1,108 @@
-import { LoaderFunctionArgs } from 'react-router-dom';
+import {
+  PERMISSIONS,
+  SessionToken,
+  SessionUser,
+} from '@imphnen-frontend-service/utils';
+import { LoaderFunctionArgs, redirect } from 'react-router';
+
+const mappingPublicRoutes = [
+  '/auth/login',
+  '/auth/forgot',
+  '/auth/new-password',
+];
+
+const mappingRoutePermissions = [
+  {
+    path: '/dashboard',
+    permissions: [],
+  },
+  {
+    path: '/users',
+    permissions: [PERMISSIONS.USERS.READ_LIST],
+  },
+  {
+    path: '/users/create',
+    permissions: [PERMISSIONS.USERS.CREATE],
+  },
+  {
+    path: '/users/update',
+    permissions: [PERMISSIONS.USERS.UPDATE],
+  },
+  {
+    path: '/users/detail',
+    permissions: [PERMISSIONS.USERS.READ_DETAIL],
+  },
+  {
+    path: '/roles',
+    permissions: [PERMISSIONS.ROLES.READ_LIST],
+  },
+  {
+    path: '/roles/create',
+    permissions: [PERMISSIONS.ROLES.CREATE],
+  },
+  {
+    path: '/roles/update',
+    permissions: [PERMISSIONS.ROLES.UPDATE],
+  },
+  {
+    path: '/roles/detail',
+    permissions: [PERMISSIONS.ROLES.READ_DETAIL],
+  },
+  {
+    path: '/permissions',
+    permissions: [PERMISSIONS.PERMISSIONS.READ_LIST],
+  },
+  {
+    path: '/permissions/create',
+    permissions: [PERMISSIONS.PERMISSIONS.CREATE],
+  },
+  {
+    path: '/permissions/update',
+    permissions: [PERMISSIONS.PERMISSIONS.UPDATE],
+  },
+  {
+    path: '/permissions/detail',
+    permissions: [PERMISSIONS.PERMISSIONS.READ_DETAIL],
+  },
+];
+
+//TODO : Fix this later
+// const redirectToFirstAccessibleRoute = (userPermissions: string[]) => {
+//   const fallback = mappingRoutePermissions.find((route) =>
+//     route.permissions.some((perm) => userPermissions.includes(perm))
+//   );
+//   return redirect(fallback?.path ?? '/auth/login');
+// };
 
 export const middleware = async ({ request }: LoaderFunctionArgs) => {
   const url = new URL(request.url);
-
   const pathname = url.pathname;
+  const session = SessionUser.get();
+  const session_token = SessionToken.get();
+  const token = session_token?.token?.access_token;
+  const userPermissions =
+    session?.role?.permissions?.map?.((perm) => perm?.name) ?? [];
 
-  if (pathname) return null;
+  if (mappingPublicRoutes.includes(pathname)) {
+    if (token) return redirect('/dashboard');
+    return null;
+  }
+
+  if (!session) return redirect('/auth/login');
+
+  const matchedRoute = mappingRoutePermissions.find(
+    (route) => route.path === pathname
+  );
+
+  if (matchedRoute) {
+    const hasPermission =
+      !matchedRoute.permissions ||
+      matchedRoute.permissions.some((perm) => userPermissions.includes(perm));
+
+    if (!hasPermission) {
+      return '/dashboard';
+    }
+  }
 
   return null;
 };

apps/dimentorin/.env.example

@@ -0,0 +1 @@
+VITE_API_URL=

apps/dimentorin/src/app/(public)/(home)/_components/hero-section.tsx

@@ -0,0 +1,73 @@
+import { Button } from "@imphnen-frontend-service/ui/atoms";
+import { motion } from 'framer-motion'
+
+export function HeroSection() {
+  return (
+    <section className="relative w-full py-20 md:py-28 lg:py-32">
+      {/* Background gradients and shapes */}
+      <div className="absolute inset-0 -z-10 overflow-x-clip hidden md:block">
+        <motion.div
+          initial={{ scale: 0 }}
+          animate={{ scale: 1 }}
+          transition={{ duration: 0.5 }}
+          viewport={{ once: true }}
+          className="absolute top-10 -left-64 size-[448px] bg-primary-200 rounded-full justify-center items-center hidden lg:flex"
+        >
+          <motion.div
+            initial={{ scale: 0 }}
+            animate={{ scale: 1 }}
+            transition={{ duration: 0.3, delay: 0.1 }}
+            viewport={{ once: true }}
+            className="size-[296px] bg-primary-50 rounded-full"
+          />
+        </motion.div>
+        <motion.div
+          initial={{ scale: 0 }}
+          animate={{ scale: 1 }}
+          transition={{ duration: 0.5 }}
+          viewport={{ once: true }}
+          className="absolute top-3/5 -right-56 size-96 bg-primary-500 rounded-full flex justify-center items-center lg:top-1/2 lg:-right-64 lg:size-[600px]"
+        >
+          <motion.div
+            initial={{ scale: 0 }}
+            animate={{ scale: 1 }}
+            transition={{ duration: 0.3, delay: 0.1 }}
+            viewport={{ once: true }}
+            className="size-64 bg-primary-50 rounded-full lg:size-[400px]"
+          />
+        </motion.div>
+
+        <div className="absolute -top-28 -left-20 size-[248px] bg-radial from-primary-300 rounded-full blur-3xl" />
+        <div className="absolute top-0 -right-72 size-[480px] bg-radial from-primary-400 rounded-full blur-[80px]" />
+      </div>
+
+      <div className="flex flex-col items-center gap-y-10">
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          viewport={{ once: true }}
+          className="flex flex-col items-center gap-y-6"
+        >
+          <h1 className="text-2xl font-semibold text-primary-500 md:text-4xl md:font-bold lg:text-5xl">DIMENTORIN</h1>
+          <p className="max-w-52 text-center font-semibold text-xl leading-tight text-primary-500 md:max-w-72 lg:text-4xl lg:max-w-lg">
+            Learn IT smarter with AI & expert mentors!
+          </p>
+          <p className="max-w-3xs text-xs text-neutral-500 text-center font-medium md:max-w-lg md:text-base lg:text-lg lg:max-w-[646px]">
+            Apakah kamu siap untuk grind skill TI-mu ke level Ultimate? Dengan AI sebagai navigator dan mentor profesional sebagai sensei-mu, perjalanan belajarmu akan lebih cepat, efektif, dan penuh EXP!
+          </p>
+        </motion.div>
+
+        <motion.div initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, delay: 0.2 }} viewport={{ once: true }}>
+          <Button
+            type="button"
+            size="sm"
+            className="text-[10px] h-auto px-2.5 py-2 md:text-sm"
+          >
+            Belajar Dengan AI Sekarang
+          </Button>
+        </motion.div>
+      </div>
+    </section>
+  )
+}

apps/dimentorin/src/app/(public)/(home)/_components/what-we-offer-section.tsx

@@ -0,0 +1,53 @@
+import { Button } from "@imphnen-frontend-service/ui/atoms";
+import { FC } from "react";
+import { motion } from 'framer-motion'
+import { For } from "../../../_components/logic/for";
+
+const OFFERS: { title: string; description: string; image: string }[] = [
+  { title: "AI-Powered Learning", description: "Level Up Instantly!", image: "/image/what-we-offer/ai-powered-learning.webp" },
+  { title: "1-on-1 Mentoring", description: "Sensei dari Dunia Nyata!", image: "/image/what-we-offer/1-on-1-mentoring.webp" },
+  { title: "Community & Resources", description: "Connect dengan Fellow Devs!", image: "/image/what-we-offer/community.webp" },
+]
+
+export const WhatWeOfferSection: FC = () => {
+  return (
+    <section className="w-full mx-auto px-8 pb-4 md:px-[60px] lg:px-20 lg:pt-4">
+      <motion.div
+        initial={{ opacity: 0, y: 30 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+        className="mb-6 flex justify-center lg:mb-10"
+      >
+        <Button
+          type="button"
+          size="sm"
+          variant="bordered"
+          className="h-auto px-3 py-2 font-semibold bg-primary-100 md:text-base md:px-5 md:py-2.5 lg:text-2xl lg:px-6 lg:py-3"
+        >
+          Apa yang Kami Tawarkan
+        </Button>
+      </motion.div>
+
+      <div className="grid gap-6 max-w-7xl mx-auto md:grid-cols-3">
+        <For data={OFFERS}>
+          {(offer) => (
+            <motion.div
+              className="relative aspect-[3/2] overflow-hidden rounded-2xl md:aspect-[3/4] lg:aspect-[5/6]"
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5 }}
+            >
+              <img src={offer.image} alt={offer.title} className="size-full object-cover" />
+              <div
+                className="absolute bottom-0 inset-x-0 p-4 h-1/2 text-primary-50 bg-gradient-to-t from-primary-500 via-primary-500/80 flex flex-col items-center justify-end gap-y-1 md:items-start lg:px-6 lg:pb-8"
+              >
+                <p className="font-semibold lg:text-[26px] lg:font-bold">{offer.title}</p>
+                <p className="text-xs lg:text-[22px] lg:font-medium">{offer.description}</p>
+              </div>
+            </motion.div>
+          )}
+        </For>
+      </div>
+    </section>
+  )
+}

apps/dimentorin/src/app/(public)/(home)/page.tsx

@@ -0,0 +1,14 @@
+import { FC, ReactElement } from 'react';
+import { HeroSection } from './_components/hero-section';
+import { WhatWeOfferSection } from './_components/what-we-offer-section';
+
+export const Components: FC = (): ReactElement => {
+  return (
+    <>
+      <HeroSection />
+      <WhatWeOfferSection />
+    </>
+  );
+};
+
+export default Components;

apps/dimentorin/src/app/(public)/_components/header.tsx

@@ -0,0 +1,77 @@
+import { CloseOutlined, MenuOutlined } from "@ant-design/icons";
+import { Button } from "@imphnen-frontend-service/ui/atoms";
+import { cn } from "@imphnen-frontend-service/utils";
+import { FC, useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { For } from "../../_components/logic/for";
+import { Show } from "../../_components/logic/show";
+
+const MENUS: { label: string; href: string }[] = [
+  { label: "Home", href: "/" },
+  { label: 'Mentoring', href: '/mentoring' },
+  { label: 'Resources', href: '/resources' },
+  { label: 'Articles', href: '/articles' },
+]
+
+export const Header: FC = () => {
+  const location = useLocation();
+  const [expandMenu, setExpandMenu] = useState(false);
+
+  return (
+    <div className="w-full px-8 pt-8 top-0 z-50 md:px-[60px] md:pt-[60px] lg:px-20 sticky">
+      <header
+        className="bg-white shadow-lg rounded-lg h-12 flex justify-between w-full max-w-7xl xl:mx-auto md:h-[60px] lg:h-[71px]"
+        aria-roledescription="nav"
+      >
+        <div className="flex w-full items-center justify-between p-4 md:px-8 md:py-2.5">
+          <div className="flex items-center">
+            <img
+              src="/logos/simple.svg"
+              alt="IMPHNEN Logo"
+              className="h-8 md:h-10 lg:h-[52px] w-auto"
+            />
+          </div>
+
+          <nav
+            className={cn(
+              "flex flex-col items-center py-2 fixed top-24 bg-white shadow-lg rounded-lg transition-all duration-300",
+              "md:top-32 lg:static lg:py-0 lg:flex-row lg:bg-transparent lg:shadow-none lg:gap-x-4",
+              !expandMenu ? "-right-96" : "right-8 md:right-[60px]"
+            )}
+          >
+            <For data={MENUS}>
+              {(menu) => (
+                <Button
+                key={menu.label}
+                type="button"
+                variant="text"
+                className={cn(
+                  "px-10 py-1.5 text-neutral-300 hover:text-neutral-400 lg:px-2.5 lg:py-2",
+                  location.pathname === menu.href && "text-primary-500 hover:text-primary-500"
+                )}
+              >
+                <Link to={menu.href}>{menu.label}</Link>
+              </Button>
+              )}
+            </For>
+            <Button type="button" className="px-12 py-1 md:hidden">Login</Button>
+          </nav>
+
+          <div>
+            <Button type="button" className="px-5 py-2 hidden lg:block">Login</Button>
+            <Button
+              type="button"
+              variant="text"
+              className={cn("transition-transform duration-300 rotate-0 lg:hidden", expandMenu && "rotate-90")}
+              onClick={() => setExpandMenu(prev => !prev)}
+            >
+              <Show condition={!expandMenu} fallback={<CloseOutlined />}>
+                <MenuOutlined />
+              </Show>
+            </Button>
+          </div>
+        </div>
+      </header>
+    </div>
+  );
+}

apps/dimentorin/src/app/(public)/layout.tsx

@@ -0,0 +1,13 @@
+import { Outlet } from "react-router-dom";
+import { Header } from "./_components/header";
+
+export default function Layout() {
+  return (
+    <div className="flex min-h-screen flex-col bg-primary-50">
+      <Header />
+      <main className="flex-1 z-0">
+        <Outlet />
+      </main>
+    </div>
+  );
+}

apps/dimentorin/src/app/_components/logic/for.tsx

@@ -0,0 +1,27 @@
+export interface ForProps<T, U> {
+  data: readonly T[]
+  children: (item: T, index: number) => U | null
+  fallback?: React.ReactNode | null
+}
+
+/**
+ * A functional component that renders a list of children components from a given
+ * array of data.
+ *
+ * @param data - The array of data to render
+ * @param children - A function that takes the current item and index and returns
+ *                   the child component to render
+ * @param fallback - An optional fallback component to render when the data is empty
+ *
+ * @returns An array of rendered child components if the data is not empty, otherwise
+ *          the fallback component if it is provided, null otherwise
+ */
+export function For<T, U extends React.JSX.Element>({
+  data,
+  children,
+  fallback = null
+}: ForProps<T, U>): (U | null)[] | React.ReactNode | null {
+  if (!Array.isArray(data) || !data?.length) return fallback
+
+  return data.map((item, idx) => children(item, idx))
+}

apps/dimentorin/src/app/_components/logic/show.tsx

@@ -0,0 +1,19 @@
+export interface ShowProps {
+  condition: boolean
+  children: React.ReactNode
+  fallback?: React.ReactNode | null
+}
+
+/**
+ * Conditionally renders the `children` component if `condition` is true. If
+ * `condition` is false, renders the `fallback` component instead.
+ *
+ * If `fallback` is `null`, renders nothing.
+ *
+ * @param condition - The condition to check
+ * @param children - The component to render if `condition` is true
+ * @param fallback - The component to render if `condition` is false
+ */
+export function Show({ condition, children, fallback = null }: ShowProps) {
+  return condition ? children : fallback
+}

apps/dimentorin/src/app/_hooks/use-login.ts

@@ -2,27 +2,23 @@ import { useForm } from 'react-hook-form';
 import {
   authLoginSchema,
   TLoginRequest,
-  usePostLogin,
 } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { toast } from 'sonner';
+import { useSession } from '@imphnen-frontend-service/utils';
 
 export const useLogin = () => {
-  const postLogin = usePostLogin();
   const form = useForm<TLoginRequest>({
     resolver: zodResolver(authLoginSchema),
     mode: 'all',
   });
 
-  const onSubmit = form.handleSubmit((data) => {
-    postLogin.mutate(data, {
-      onSuccess: () => toast.success("Login sukses"),
-      onError: (error) => toast.error(error.message),
-    });
-  });
+  const { signIn, isLoading } = useSession();
+
+  const onSubmit = form.handleSubmit((data) => signIn(data));
 
   return {
     form,
     onSubmit,
+    isLoading
   };
 };

apps/dimentorin/src/app/_hooks/use-otp.ts

@@ -0,0 +1,24 @@
+import { useForm } from 'react-hook-form';
+import {
+  TVerifyOtpRequest,
+  verifyEmailSchema,
+} from '@imphnen-frontend-service/service';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useOtp } from '@imphnen-frontend-service/utils';
+
+export const useOtpHook = () => {
+  const form = useForm<TVerifyOtpRequest>({
+    resolver: zodResolver(verifyEmailSchema),
+    mode: 'all',
+  });
+
+  const { otp, isLoading } = useOtp();
+
+  const onSubmit = form.handleSubmit((data) => otp(data));
+
+  return {
+    form,
+    onSubmit,
+    isLoading
+  };
+};

apps/dimentorin/src/app/_hooks/use-register.ts

@@ -0,0 +1,24 @@
+import { useForm } from 'react-hook-form';
+import {
+  authRegisterSchema,
+  TRegisterRequest,
+} from '@imphnen-frontend-service/service';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useRegister } from '@imphnen-frontend-service/utils';
+
+export const useRegisterHook = () => {
+  const form = useForm<TRegisterRequest>({
+    resolver: zodResolver(authRegisterSchema),
+    mode: 'all',
+  });
+
+  const { register, isLoading } = useRegister();
+
+  const onSubmit = form.handleSubmit((data) => register(data));
+
+  return {
+    form,
+    onSubmit,
+    isLoading
+  };
+};

apps/dimentorin/src/app/_hooks/use-resend-otp.ts

@@ -0,0 +1,10 @@
+import { useSendOTP } from '@imphnen-frontend-service/utils';
+
+export const useResendOtpHook = () => {
+
+  const { resendOTP, isLoading } = useSendOTP();
+
+  return {
+    resendOTP
+  };
+};

apps/dimentorin/src/app/auth/login/page.tsx

@@ -5,7 +5,7 @@ import { useLogin } from '../../_hooks/use-login';
 import { ArrowLeftOutlined } from '@ant-design/icons';
 
 export const Components: FC = (): ReactElement => {
-  const { form, onSubmit } = useLogin();
+  const { form, onSubmit, isLoading } = useLogin();
 
   return (
     <div className="flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]">
@@ -42,7 +42,7 @@ export const Components: FC = (): ReactElement => {
                   Lupa Password ?
                 </a>
               </div>
-              <Button className="w-full" type='submit'>Enter Isekai</Button>
+              <Button className="w-full" type='submit' disabled={(!form.formState.isValid || isLoading)}>Enter Isekai</Button>
             </form>
             
             <div className="flex my-3 gap-3 justify-center">
@@ -74,6 +74,13 @@ export const Components: FC = (): ReactElement => {
               <ArrowLeftOutlined />
               Kembali Ke Homepage
             </Button>
+            <Button
+              className='xl:hidden w-full gap-3'
+              variant='secondary'
+            >
+              <ArrowLeftOutlined />
+              Kembali Ke Homepage
+            </Button>
           </div>
         </div>
       </div>

apps/dimentorin/src/app/auth/register/otp/layout.tsx

@@ -0,0 +1,12 @@
+import { FC, ReactElement } from 'react';
+import { Outlet } from 'react-router-dom';
+
+export const AppLayout: FC = (): ReactElement => {
+  return (
+    <main className="bg-primary-50 min-h-screen">
+      <Outlet />
+    </main>
+  );
+};
+
+export default AppLayout;

apps/dimentorin/src/app/auth/register/otp/page.tsx

@@ -0,0 +1,70 @@
+import { FC, ReactElement, useEffect, useState } from 'react';
+import { ControlledInputField, RegisterResetBanner } from "@imphnen-frontend-service/ui/organisms";
+import { useOtpHook } from '../../../_hooks/use-otp';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { useSearchParams } from 'react-router-dom';
+import { useResendOtpHook } from '../../../_hooks/use-resend-otp';
+
+export const Components: FC = (): ReactElement => {
+  const { form, onSubmit, isLoading } = useOtpHook()
+  const [ searchParams ] = useSearchParams()
+  const [ disabled, setDisabled]  = useState(true);
+  const [ timeLeft, setTimeLeft ] = useState(5 * 60);
+  const { resendOTP } = useResendOtpHook()
+
+  useEffect(() => {
+    if (disabled) {
+      const interval = setInterval(() => {
+        setTimeLeft(prev => {
+          if (prev <= 1) {
+            clearInterval(interval);
+            setDisabled(false);
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1000);
+      return () => clearInterval(interval);
+    }
+  }, [disabled]);
+
+  const formatTime = (seconds: number) => {
+    const m = Math.floor(seconds / 60);
+    const s = seconds % 60;
+    return `${m}:${s.toString().padStart(2, '0')}`;
+  };
+
+  return (
+    <div className='flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]'>
+      <div className='bg-white min-w-[1120px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6'>
+        <RegisterResetBanner />
+        <div className='border-2 border-primary-500/50 w-[596px] rounded-lg py-[70px] px-[48px] flex flex-col justify-center'>
+          <h3 className='mt-5 text-3xl font-semibold text-primary-500'>Verifikasi Email</h3>
+          <h5 className='mt-2 text-xl font-medium text-primary-500'>Yeay~! Pesan dari dunia lain sudah dikirimkan ke {searchParams.get("email")}</h5>
+          <form onSubmit={onSubmit} className='mt-7'>
+            <ControlledInputField
+              label="OTP"
+              size="lg"
+              className="w-full"
+              placeholder="XXXXXX"
+              max={6}
+              name={'otp'}
+              maxLength={6}
+              control={form.control}
+            />
+            <Button type="button" className="mt-2" disabled={disabled} onClick={
+              () => {
+                resendOTP({email: searchParams.get("email") || ""})
+                setDisabled(true)
+                setTimeLeft(5 * 60)
+              }
+            }>Kirim ulang otp {disabled? `(${formatTime(timeLeft)})`: ""}</Button>
+            <Button className="xl:w-full mt-2" disabled={(!form.formState.isValid || isLoading)}>Linked Start !!!</Button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Components;

apps/dimentorin/src/app/auth/register/page.tsx

@@ -1,96 +1,108 @@
 import { FC, ReactElement } from 'react';
-import { RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms';
-import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
-import { InputField } from '@imphnen-frontend-service/ui/molecules';
+import { ControlledInputField, RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { ArrowLeftOutlined } from '@ant-design/icons';
+import { useRegisterHook } from '../../_hooks/use-register';
 
 export const Components: FC = (): ReactElement => {
+  const { form, onSubmit, isLoading } = useRegisterHook();
+
   return (
     <div className="flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]">
-      <div className="bg-white min-w-[1120px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6">
+      <div className="bg-white xl:min-w-[1130px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6">
         <RegisterResetBanner />
-        <div className="border-2 border-primary-500/50 w-[696px] rounded-lg py-[32px] px-[48px] flex justify-center">
-          <div className="w-[704px]">
+        <div className="xl:border-2 xl:border-primary-500/50 xl:w-[726px] rounded-lg py-[32px] px-[48px] flex justify-center">
+          <div className="xl:w-[714px]">
+            <Button
+              className='xl:hidden gap-3'
+              variant='secondary'
+            >
+              <ArrowLeftOutlined />
+              Login
+            </Button>
             <h3 className="mt-5 text-3xl font-semibold text-primary-500">
               Register
             </h3>
             <h5 className="text-primary-500 font-medium">
               Yosha~! Saatnya Bergabung dengan Dimentorin
             </h5>
-            <div className="grid grid-flow-row-dense my-7 grid-cols-2 gap-2">
-              <InputField
-                label="First Name"
-                size="lg"
-                placeholder="Nama Depan"
-              />
-              <InputField
-                label="Last Name"
-                size="lg"
-                className="w-full"
-                placeholder="Nama Belakang"
-              />
-              <InputField
-                label="Email"
-                size="lg"
-                placeholder="Contoh : yourname@mail.com"
-              />
-              <div className="flex gap-2">
-                <div className="flex flex-col gap-2">
-                  <h4 className="font-medium">OTP Code</h4>
-                  <Input
-                    className="w-full"
-                    size="lg"
-                    placeholder="Kode OTP"
-                  />
-                </div>
-                <div className="flex flex-col">
-                  <Button size="sm" className="mt-[30px]">
-                    Kirim OTP
-                  </Button>
-                </div>
+            <form onSubmit={onSubmit}>
+              <div className='my-7'>
+                <ControlledInputField
+                  label="Full name"
+                  size="lg"
+                  className="w-full"
+                  placeholder="Nama Lengkap"
+                  name={'fullname'}
+                  control={form.control}
+                />
               </div>
-            </div>
-            <InputField
-              label="Password"
-              className="w-full"
-              size="lg"
-              type="password"
-              placeholder="Buat password sekeren jurus ultimate-mu!"
-            />
-            <h6 className="text-sm text-gray-500 mt-1">
-              "Senpai~! Pastikan password-mu sekuat pertahanan kastil!"
-            </h6>
-            <h6 className="text-sm text-gray-500 mt-2">
-              Tips membuat password yang OP:
-            </h6>
-            <h6 className="text-sm text-gray-500">
-              - Minimal 8 karakter (semakin panjang, semakin power-up!{' '}
-              <span role="img" aria-label="emoji">
-                ⚡
-              </span>
-              )
-            </h6>
-            <h6 className="text-sm text-gray-500">
-              - Campur huruf besar, kecil, angka, dan simbol untuk kombinasi
-              ultimate!
-              <span role="img" aria-label="emoji">
-                🔥
-              </span>
-            </h6>
-            <h6 className="text-sm text-gray-500 mb-2">
-              - Jangan pakai password yang gampang ditebak, nanti ketahuan
-              musuh!
-              <span role="img" aria-label="emoji">
-                🚨
-              </span>
-            </h6>
-            <InputField
-              label="Repeat Password"
-              className="w-full"
-              size="lg"
-              type="password"
-              placeholder="Ulangi password-mu, Senpai~!"
-            />
-            <Button className="w-full mt-2">Linked Start !!!</Button>
+              <div className="grid grid-flow-row-dense my-7 lg:grid-cols-2 gap-2">
+                <ControlledInputField
+                  label="Email"
+                  size="lg"
+                  className="w-full"
+                  placeholder="Contoh : yourname@mail.com"
+                  type='email'
+                  control={form.control}
+                  name={'email'}
+                />
+                <ControlledInputField
+                  label="No Hp"
+                  size="lg"
+                  className="w-full"
+                  placeholder="Contoh : 088877665544"
+                  control={form.control}
+                  name={'phone_number'}
+                />  
+              </div>
+              <ControlledInputField
+                label="Password"
+                className="w-full"
+                size="lg"
+                type="password"
+                placeholder="Buat password sekeren jurus ultimate-mu!"
+                control={form.control}
+                name={'password'}             
+              />
+              <h6 className="text-sm text-gray-500 mt-1">
+                "Senpai~! Pastikan password-mu sekuat pertahanan kastil!"
+              </h6>
+              <h6 className="text-sm text-gray-500 mt-2">
+                Tips membuat password yang OP:
+              </h6>
+              <h6 className="text-sm text-gray-500">
+                - Minimal 8 karakter (semakin panjang, semakin power-up!{' '}
+                <span role="img" aria-label="emoji">
+                  ⚡
+                </span>
+                )
+              </h6>
+              <h6 className="text-sm text-gray-500">
+                - Campur huruf besar, kecil, angka, dan simbol untuk kombinasi
+                ultimate!
+                <span role="img" aria-label="emoji">
+                  🔥
+                </span>
+              </h6>
+              <h6 className="text-sm text-gray-500 mb-2">
+                - Jangan pakai password yang gampang ditebak, nanti ketahuan
+                musuh!
+                <span role="img" aria-label="emoji">
+                  🚨
+                </span>
+              </h6>
+              <ControlledInputField
+                label="Repeat Password"
+                className="w-full"
+                size="lg"
+                type="password"
+                placeholder="Ulangi password-mu, Senpai~!"
+                control={form.control}
+                name={"confirm_password"}
+              />
+              <Button className="xl:w-full mt-2" disabled={(!form.formState.isValid || isLoading)}>Linked Start !!!</Button>
+            </form>
           </div>
         </div>
       </div>

apps/dimentorin/src/app/auth/register/success/page.tsx

@@ -1,15 +1,21 @@
-import { FC, ReactElement } from 'react';
+import { FC, ReactElement, useEffect } from 'react';
 import { RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { ArrowRightOutlined } from '@ant-design/icons';
 
 export const Components: FC = (): ReactElement => {
+  useEffect(() => {
+    setTimeout(() => {
+      document.location.href = "/auth/login"
+    }, 10000)
+  }, [])
+
   return (
     <div className="flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]">
-      <div className="bg-white min-w-[1220px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6">
+      <div className="bg-white xl:min-w-[1220px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6">
         <RegisterResetBanner />
-        <div className="border-2 border-primary-500/50 w-[696px] rounded-lg py-[32px] px-[48px] flex justify-center bg-primary-50">
-          <div className="w-[704px] flex flex-col justify-center items-center">
+        <div className="border-2 border-primary-500/50 xl:w-[696px] rounded-lg py-[32px] px-[48px] flex justify-center bg-primary-50">
+          <div className="xl:w-[704px] flex flex-col justify-center items-center">
             <h2 className="text-4xl text-primary-500 font-semibold">
               Register Successfull
             </h2>
@@ -41,10 +47,12 @@ export const Components: FC = (): ReactElement => {
             <h4 className="mt-10 text-primary-500 font-medium text-xl">
               Kamu akan memasuki isekai dalam 10 dtk
             </h4>
-            <Button className="gap-3 mt-10" size="lg">
-              Masuk Isekai
-              <ArrowRightOutlined />
-            </Button>
+            <a href="/auth/login">
+              <Button className="gap-3 mt-10" size="lg">
+                Masuk Isekai
+                <ArrowRightOutlined />
+              </Button>
+            </a>
           </div>
         </div>
       </div>

apps/dimentorin/src/app/page.tsx

@@ -1,7 +0,0 @@
-import { FC, ReactElement } from 'react';
-
-export const Components: FC = (): ReactElement => {
-  return <>Hallo</>;
-};
-
-export default Components;

apps/dimentorin/src/middleware.ts

@@ -1,11 +1,113 @@
-import { LoaderFunctionArgs } from 'react-router-dom';
+import {
+  PERMISSIONS,
+  SessionToken,
+  SessionUser,
+} from '@imphnen-frontend-service/utils';
+import { LoaderFunctionArgs, redirect } from 'react-router';
+
+const mappingPublicRoutes = [
+  '/',
+  '/auth/login',
+  '/auth/forgot',
+  '/auth/forgot/otp',
+  '/auth/register', 
+  '/auth/register/otp',
+  '/auth/register/success',
+  '/auth/new-password',
+];
+
+const mappingRoutePermissions = [
+  {
+    path: '/dashboard',
+    permissions: [],
+  },
+  {
+    path: '/users',
+    permissions: [PERMISSIONS.USERS.READ_LIST],
+  },
+  {
+    path: '/users/create',
+    permissions: [PERMISSIONS.USERS.CREATE],
+  },
+  {
+    path: '/users/update',
+    permissions: [PERMISSIONS.USERS.UPDATE],
+  },
+  {
+    path: '/users/detail',
+    permissions: [PERMISSIONS.USERS.READ_DETAIL],
+  },
+  {
+    path: '/roles',
+    permissions: [PERMISSIONS.ROLES.READ_LIST],
+  },
+  {
+    path: '/roles/create',
+    permissions: [PERMISSIONS.ROLES.CREATE],
+  },
+  {
+    path: '/roles/update',
+    permissions: [PERMISSIONS.ROLES.UPDATE],
+  },
+  {
+    path: '/roles/detail',
+    permissions: [PERMISSIONS.ROLES.READ_DETAIL],
+  },
+  {
+    path: '/permissions',
+    permissions: [PERMISSIONS.PERMISSIONS.READ_LIST],
+  },
+  {
+    path: '/permissions/create',
+    permissions: [PERMISSIONS.PERMISSIONS.CREATE],
+  },
+  {
+    path: '/permissions/update',
+    permissions: [PERMISSIONS.PERMISSIONS.UPDATE],
+  },
+  {
+    path: '/permissions/detail',
+    permissions: [PERMISSIONS.PERMISSIONS.READ_DETAIL],
+  },
+];
+
+//TODO : Fix this later
+// const redirectToFirstAccessibleRoute = (userPermissions: string[]) => {
+//   const fallback = mappingRoutePermissions.find((route) =>
+//     route.permissions.some((perm) => userPermissions.includes(perm))
+//   );
+//   return redirect(fallback?.path ?? '/auth/login');
+// };
 
 export const middleware = async ({ request }: LoaderFunctionArgs) => {
   const url = new URL(request.url);
-
   const pathname = url.pathname;
+  const session = SessionUser.get();
+  const session_token = SessionToken.get();
+  const token = session_token?.token?.access_token;
+  const userPermissions =
+    session?.role?.permissions?.map?.((perm) => perm?.name) ?? [];
 
-  if (pathname) return null;
+  if (mappingPublicRoutes.includes(pathname)) {
+    if (token) return redirect('/dashboard');
+    return null;
+  }
+
+  if (!session) return redirect('/auth/login');
+
+  const matchedRoute = mappingRoutePermissions.find(
+    (route) => route.path === pathname
+  );
+
+  if (matchedRoute) {
+    const hasPermission =
+      !matchedRoute.permissions ||
+      matchedRoute.permissions.some((perm) => userPermissions.includes(perm));
+
+    if (!hasPermission) {
+      return '/dashboard';
+    }
+  }
 
   return null;
 };

apps/gacha/.env.example

@@ -0,0 +1 @@
+VITE_API_URL=

apps/gacha/src/app/_components/form/modal-form-login.tsx

@@ -2,6 +2,7 @@ import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { Modal } from '@imphnen-frontend-service/ui/molecules';
 import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
 import { useLogin } from '../../_hooks/use-login';
+import ModalFormVerifyEmail from './modal-form-verify-email';
 
 interface IModalFormLogin {
   isOpen: boolean;
@@ -16,61 +17,87 @@ const ModalFormLogin = ({
   onForgotPassword,
   setIsOpenRegisterModal,
 }: IModalFormLogin) => {
-  const { form, onSubmit } = useLogin();
+  const {
+    form,
+    onSubmit,
+    isLoading,
+    showVerifyModal,
+    verifyForm,
+    onVerifySubmit,
+    closeVerifyModal,
+    isVerifying,
+    emailToVerify,
+  } = useLogin();
 
   return (
-    <Modal
-      className="py-[45px] min-w-[400px] lg:min-w-[455px] px-7"
-      isOpen={isOpen}
-      onClose={onClose}
-    >
-      <Modal.Header className="space-y-4">
-        <img src="/logos/logo.svg" alt="" className="h-[70px] w-auto" />
-        <h1 className="text-primary-500 text-p1 text-center font-semibold">
-          Login
-        </h1>
-      </Modal.Header>
-      <Modal.Content>
-        <form className="space-y-4" onSubmit={onSubmit}>
-          <ControlledInputField
-            control={form.control}
-            label="Email"
-            placeholder="Masukkan Email"
-            type="email"
-            name="email"
-            size="lg"
-            className="w-full"
-          />
-          <ControlledInputField
-            control={form.control}
-            label="Password"
-            placeholder="Masukkan Password"
-            type="password"
-            name="password"
-            size="lg"
-            className="w-full"
-          />
-          <h1 className="text-end text-primary-500 text-xl font-medium">
-            <Button variant="text" onClick={onForgotPassword}>
-              Lupa Password?
-            </Button>
-          </h1>
-          <Button type="submit" size="md" className="w-full">
+    <>
+      <Modal
+        className="py-[45px] min-w-[400px] lg:min-w-[455px] px-7"
+        isOpen={isOpen && !showVerifyModal}
+        onClose={onClose}
+      >
+        <Modal.Header className="space-y-4">
+          <img src="/logos/logo.svg" alt="" className="h-[70px] w-auto" />
+          <h1 className="text-primary-500 text-p1 text-center font-semibold">
             Login
-          </Button>
-          <div className="flex justify-center gap-2 pt-2.5 font-medium">
-            <p className="text-neutral-500">Belum punya akun?</p>
+          </h1>
+        </Modal.Header>
+        <Modal.Content>
+          <form className="space-y-4" onSubmit={onSubmit}>
+            <ControlledInputField
+              control={form.control}
+              label="Email"
+              placeholder="Masukkan Email"
+              type="email"
+              name="email"
+              size="lg"
+              className="w-full"
+            />
+            <ControlledInputField
+              control={form.control}
+              label="Password"
+              placeholder="Masukkan Password"
+              type="password"
+              name="password"
+              size="lg"
+              className="w-full"
+            />
+            <h1 className="text-end text-primary-500 text-xl font-medium">
+              <Button variant="text" type="button" onClick={onForgotPassword}>
+                Lupa Password?
+              </Button>
+            </h1>
             <Button
-              variant="text"
-              className="text-primary-500 hover:text-primary-600 m-0 p-0"
-              onClick={() => setIsOpenRegisterModal(true)}
+              type="submit"
+              size="md"
+              className="w-full"
+              disabled={isLoading}
             >
-              Daftar
+              {isLoading ? 'Loading...' : 'Login'}
             </Button>
-          </div>
-        </form>
-      </Modal.Content>
-    </Modal>
+            <div className="flex justify-center gap-2 pt-2.5 font-medium">
+              <p className="text-neutral-500">Belum punya akun?</p>
+              <Button
+                variant="text"
+                className="text-primary-500 hover:text-primary-600 m-0 p-0"
+                onClick={() => setIsOpenRegisterModal(true)}
+              >
+                Daftar
+              </Button>
+            </div>
+          </form>
+        </Modal.Content>
+      </Modal>
+
+      <ModalFormVerifyEmail
+        isOpen={showVerifyModal}
+        onClose={closeVerifyModal}
+        verifyForm={verifyForm}
+        onVerifySubmit={onVerifySubmit}
+        isVerifying={isVerifying}
+        email={emailToVerify}
+      />
+    </>
   );
 };
 

apps/gacha/src/app/_components/form/modal-form-register.tsx

@@ -1,11 +1,8 @@
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { Modal } from '@imphnen-frontend-service/ui/molecules';
-import { useQueryState } from '@imphnen-frontend-service/utils';
 import { useRegister } from '../../_hooks/use-register';
 import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
-import { UseFormReturn } from 'react-hook-form';
-import { TRegisterRequest } from '@imphnen-frontend-service/service';
-import { useEffect } from 'react';
+import ModalFormVerifyEmail from './modal-form-verify-email';
 
 interface IModalFormRegisterProps {
   isOpen: boolean;
@@ -13,168 +10,100 @@ interface IModalFormRegisterProps {
 }
 
 const ModalFormRegister = ({ isOpen, onClose }: IModalFormRegisterProps) => {
-  const { form, onSubmit, isStepOneValid } = useRegister();
-
   const {
-    step: currentStep,
-    nextStep,
-    prevStep,
-    resetStep,
-  } = useQueryState('registerStep', {
-    defaultValue: 1,
-    maxValue: 2,
-    minValue: 1,
-  });
+    form,
+    verifyForm,
+    onSubmit,
+    onVerifySubmit,
+    showVerifyModal,
+    closeVerifyModal,
+    isVerifying,
+    isRegistering,
+    registeredEmail,
+  } = useRegister();
 
-  useEffect(() => {
-    if (!isStepOneValid && currentStep === 2) {
-      prevStep();
-    }
-  }, [isStepOneValid, currentStep, prevStep]);
-
-  return (
-    <Modal
-      className="py-[45px] min-w-[400px] lg:min-w-[455px] px-7"
-      isOpen={isOpen}
-      onClose={() => {
-        onClose();
-        resetStep();
-      }}
-    >
-      <Modal.Header className="space-y-4">
-        <img src="/logos/logo.svg" alt="" className="h-[70px] w-auto" />
-        <h1 className="text-primary-500 text-p1 text-center font-semibold">
-          Register
-        </h1>
-        <h2 className="text-neutral-500 text-lg text-center">
-          {currentStep === 1 ? 'Info Akun' : 'Informasi Pengiriman Hadiah'}
-        </h2>
-      </Modal.Header>
-      <Modal.Content>
-        <form onSubmit={onSubmit} className="space-y-6">
-          {currentStep === 1 && (
-            <StepOne
-              form={form}
-              nextStep={nextStep}
-              isStepOneValid={isStepOneValid}
-            />
-          )}
-          {currentStep === 2 && <StepTwo form={form} prevStep={prevStep} />}
-        </form>
-      </Modal.Content>
-    </Modal>
-  );
-};
-
-interface IStepOneProps {
-  form: UseFormReturn<TRegisterRequest, any, TRegisterRequest>;
-  nextStep: () => void;
-  isStepOneValid: boolean;
-}
-
-const StepOne = ({ form, nextStep, isStepOneValid }: IStepOneProps) => {
   return (
     <>
-      <ControlledInputField
-        control={form.control}
-        name="fullname"
-        label="Nama Lengkap"
-        placeholder="Masukkan Nama Lengkap"
-        type="text"
-        size="lg"
-        className="w-full"
-      />
-      <ControlledInputField
-        control={form.control}
-        label="Email"
-        placeholder="Masukkan Email Anda"
-        type="email"
-        name="email"
-        size="lg"
-        className="w-full"
-      />
-      <ControlledInputField
-        control={form.control}
-        name="password"
-        label="Password"
-        placeholder="Masukkan Password"
-        type="password"
-        size="lg"
-        className="w-full"
-      />
-      <ControlledInputField
-        control={form.control}
-        name="confirm_password"
-        label="Ulangi Password"
-        placeholder="Masukkan Ulang Password"
-        type="password"
-        size="lg"
-        className="w-full"
-      />
-      <Button
-        size="md"
-        className="w-full"
-        onClick={nextStep}
-        disabled={!isStepOneValid}
+      <Modal
+        className="py-[45px] min-w-[400px] lg:min-w-[455px] px-7"
+        isOpen={isOpen && !showVerifyModal}
+        onClose={onClose}
       >
-        Selanjutnya
-      </Button>
+        <Modal.Header className="space-y-4">
+          <img src="/logos/logo.svg" alt="" className="h-[70px] w-auto" />
+          <h1 className="text-primary-500 text-p1 text-center font-semibold">
+            Register
+          </h1>
+        </Modal.Header>
+        <Modal.Content>
+          <form onSubmit={onSubmit} className="space-y-6">
+            <ControlledInputField
+              control={form.control}
+              name="fullname"
+              label="Nama Lengkap"
+              placeholder="Masukkan Nama Lengkap"
+              type="text"
+              size="lg"
+              className="w-full"
+            />
+            <ControlledInputField
+              control={form.control}
+              label="Email"
+              placeholder="Masukkan Email Anda"
+              type="email"
+              name="email"
+              size="lg"
+              className="w-full"
+            />
+            <ControlledInputField
+              control={form.control}
+              name="password"
+              label="Password"
+              placeholder="Masukkan Password"
+              type="password"
+              size="lg"
+              className="w-full"
+            />
+            <ControlledInputField
+              control={form.control}
+              name="confirm_password"
+              label="Ulangi Password"
+              placeholder="Masukkan Ulang Password"
+              type="password"
+              size="lg"
+              className="w-full"
+            />
+            <ControlledInputField
+              control={form.control}
+              name="phone_number"
+              label="Nomor Telepon"
+              placeholder="Masukkan Nomor Telepon Aktif"
+              type="text"
+              size="lg"
+              className="w-full"
+            />
+            <Button
+              size="md"
+              className="w-full"
+              type="submit"
+              disabled={isRegistering || !form.formState.isValid}
+            >
+              {isRegistering ? 'Mendaftar...' : 'Register'}
+            </Button>
+          </form>
+        </Modal.Content>
+      </Modal>
+
+      <ModalFormVerifyEmail
+        isOpen={showVerifyModal}
+        onClose={closeVerifyModal}
+        verifyForm={verifyForm}
+        onVerifySubmit={onVerifySubmit}
+        isVerifying={isVerifying}
+        email={registeredEmail}
+      />
     </>
   );
 };
 
-interface IStepTwoProps {
-  form: UseFormReturn<TRegisterRequest, any, TRegisterRequest>;
-  prevStep: () => void;
-}
-
-const StepTwo = ({ form, prevStep }: IStepTwoProps) => (
-  <>
-    <ControlledInputField
-      control={form.control}
-      name="phone_number"
-      label="Nomor Telepon"
-      placeholder="Masukkan Nomor Telepon Aktif"
-      type="text"
-      size="lg"
-      className="w-full"
-    />
-    <ControlledInputField
-      control={form.control}
-      name="referral_code"
-      label="Kode Referral"
-      placeholder="Masukkan Kode Referral"
-      type="text"
-      size="lg"
-      className="w-full"
-    />
-    <ControlledInputField
-      control={form.control}
-      name="referred_by"
-      label="Referral By"
-      placeholder="Masukkan Referral By"
-      type="text"
-      size="lg"
-      className="w-full"
-    />
-    <ControlledInputField
-      control={form.control}
-      name="student_type"
-      label="Tipe Pelajar"
-      placeholder="Masukkan Tipe Pelajar"
-      type="text"
-      size="lg"
-      className="w-full"
-    />
-    <div className="flex gap-6">
-      <Button size="md" variant="text" className="w-[40%]" onClick={prevStep}>
-        Kembali
-      </Button>
-      <Button size="md" className="w-full" type="submit">
-        Gacha Sekarang
-      </Button>
-    </div>
-  </>
-);
-
 export default ModalFormRegister;

apps/gacha/src/app/_components/form/modal-form-verify-email.tsx

@@ -0,0 +1,63 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { Modal } from '@imphnen-frontend-service/ui/molecules';
+import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
+import { UseFormReturn } from 'react-hook-form';
+
+interface IModalFormVerifyEmailProps {
+  isOpen: boolean;
+  onClose: () => void;
+  verifyForm: UseFormReturn<{ otp: string }, any>;
+  onVerifySubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+  isVerifying: boolean;
+  email?: string;
+}
+
+const ModalFormVerifyEmail = ({
+  isOpen,
+  onClose,
+  verifyForm,
+  onVerifySubmit,
+  isVerifying,
+  email,
+}: IModalFormVerifyEmailProps) => {
+  return (
+    <Modal
+      className="py-[45px] min-w-[400px] lg:min-w-[455px] px-7"
+      isOpen={isOpen}
+      onClose={onClose}
+    >
+      <Modal.Header className="space-y-4">
+        <img src="/logos/logo.svg" alt="" className="h-[70px] w-auto" />
+        <h1 className="text-primary-500 text-p1 text-center font-semibold">
+          Verifikasi Email
+        </h1>
+        <h2 className="text-neutral-500 text-lg text-center">
+          Masukkan kode OTP yang telah dikirim ke {email ? email : 'email Anda'}
+        </h2>
+      </Modal.Header>
+      <Modal.Content>
+        <form onSubmit={onVerifySubmit} className="space-y-6">
+          <ControlledInputField
+            control={verifyForm.control}
+            name="otp"
+            label="Kode OTP"
+            placeholder="Masukkan Kode OTP"
+            type="text"
+            size="lg"
+            className="w-full"
+          />
+          <Button
+            size="md"
+            className="w-full"
+            type="submit"
+            disabled={isVerifying}
+          >
+            {isVerifying ? 'Memverifikasi...' : 'Verifikasi'}
+          </Button>
+        </form>
+      </Modal.Content>
+    </Modal>
+  );
+};
+
+export default ModalFormVerifyEmail;

apps/gacha/src/app/_hooks/use-login.ts

@@ -5,22 +5,74 @@ import {
   usePostLogin,
 } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useAuthStore } from '@imphnen-frontend-service/utils';
+import { toast } from 'sonner';
+import { useNavigate } from 'react-router';
+import { useVerifyEmail } from './use-verify-email';
 
 export const useLogin = () => {
-  const postLogin = usePostLogin();
   const form = useForm<TLoginRequest>({
     resolver: zodResolver(authLoginSchema),
     mode: 'all',
   });
 
+  const navigate = useNavigate();
+  const { mutate, isPending } = usePostLogin();
+  const { setLoading, setSession, clearSession } = useAuthStore();
+
+  const {
+    openVerifyModal,
+    showVerifyModal,
+    verifyForm,
+    onVerifySubmit,
+    closeVerifyModal,
+    isVerifying,
+    emailToVerify,
+  } = useVerifyEmail();
+
   const onSubmit = form.handleSubmit((data) => {
-    postLogin.mutate(data, {
-      onSuccess: () => console.log('Success Login'),
+    setLoading(true);
+    mutate(data, {
+      onSuccess: (response) => {
+        toast.success('Login sukses');
+
+        if (response.data.token && response.data.user) {
+          setSession(response.data);
+        } else {
+          const { token, ...userData } = response.data;
+
+          const loginData = {
+            token,
+            userData,
+          };
+          setSession(loginData);
+        }
+
+        navigate(0);
+      },
+      onError: (error) => {
+        const errorMessage = error?.response?.data?.message;
+
+        if (errorMessage === 'Account not active, please verify your email') {
+          toast.error('Akun belum aktif, silakan verifikasi email Anda');
+          openVerifyModal(data.email);
+        } else {
+          toast.error(errorMessage ?? 'Terjadi Kesalahan yang tidak diketahui');
+          clearSession();
+        }
+      },
     });
   });
 
   return {
     form,
     onSubmit,
+    isLoading: isPending,
+    showVerifyModal,
+    verifyForm,
+    onVerifySubmit,
+    closeVerifyModal,
+    isVerifying,
+    emailToVerify,
   };
 };

apps/gacha/src/app/_hooks/use-register.ts

@@ -1,17 +1,25 @@
 import { useForm } from 'react-hook-form';
 import {
   authRegisterSchema,
-  stepOneRegisterSchema,
   TRegisterRequest,
   usePostRegister,
 } from '@imphnen-frontend-service/service';
-import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { toast } from 'sonner';
-import { useEffect, useState } from 'react';
+import { useVerifyEmail } from './use-verify-email';
 
 export const useRegister = () => {
   const postRegister = usePostRegister();
+  const {
+    verifyForm,
+    onVerifySubmit,
+    showVerifyModal,
+    openVerifyModal,
+    closeVerifyModal,
+    isVerifying,
+    emailToVerify,
+  } = useVerifyEmail();
+
   const form = useForm<TRegisterRequest>({
     resolver: zodResolver(authRegisterSchema),
     mode: 'all',
@@ -21,38 +29,28 @@ export const useRegister = () => {
       password: '',
       confirm_password: '',
       phone_number: '',
-      referral_code: '',
-      referred_by: '',
-      student_type: '',
     },
   });
 
-  const [stepValid, setStepValid] = useState(false);
-
-  useEffect(() => {
-    const subscription = form.watch(() => {
-      const { fullname, email, password, confirm_password } = form.getValues();
-      const valid = stepOneRegisterSchema.safeParse({
-        fullname,
-        email,
-        password,
-        confirm_password,
-      }).success;
-      setStepValid(valid);
-    });
-    return () => subscription.unsubscribe();
-  }, [form]);
-
   const onSubmit = form.handleSubmit((data) => {
     postRegister.mutate(data, {
-      onSuccess: (data) => toast.success(data.message),
-      onError: (error) => toast.error(error.message),
+      onSuccess: () => {
+        toast.success('Registrasi sukses. Silakan verifikasi email Anda.');
+        openVerifyModal(data.email);
+      },
+      onError: (error) => toast.error(error.message || 'Registrasi gagal'),
     });
   });
 
   return {
     form,
+    verifyForm,
     onSubmit,
-    isStepOneValid: stepValid,
+    onVerifySubmit,
+    showVerifyModal,
+    closeVerifyModal,
+    isVerifying,
+    isRegistering: postRegister.isPending,
+    registeredEmail: emailToVerify,
   };
 };

apps/gacha/src/app/_hooks/use-verify-email.ts

@@ -0,0 +1,62 @@
+import { useForm } from 'react-hook-form';
+import {
+  TVerifyEmailRequest,
+  usePostVerifyEmail,
+} from '@imphnen-frontend-service/service';
+import { toast } from 'sonner';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export const useVerifyEmail = () => {
+  const [showVerifyModal, setShowVerifyModal] = useState(false);
+  const [emailToVerify, setEmailToVerify] = useState('');
+  const navigate = useNavigate();
+
+  const postVerifyEmail = usePostVerifyEmail();
+
+  const verifyForm = useForm<{ otp: string }>({
+    mode: 'all',
+    defaultValues: {
+      otp: '',
+    },
+  });
+
+  const onVerifySubmit = verifyForm.handleSubmit((data) => {
+    const otpNumber = data.otp;
+
+    const verifyData: TVerifyEmailRequest = {
+      email: emailToVerify,
+      otp: otpNumber,
+    };
+
+    postVerifyEmail.mutate(verifyData, {
+      onSuccess: () => {
+        toast.success('Verifikasi email sukses');
+
+        navigate(0);
+      },
+      onError: (error) =>
+        toast.error(error.message || 'Verifikasi email gagal'),
+    });
+  });
+
+  const openVerifyModal = (email: string) => {
+    setEmailToVerify(email);
+    setShowVerifyModal(true);
+  };
+
+  const closeVerifyModal = () => {
+    setShowVerifyModal(false);
+    verifyForm.reset();
+  };
+
+  return {
+    verifyForm,
+    onVerifySubmit,
+    showVerifyModal,
+    openVerifyModal,
+    closeVerifyModal,
+    isVerifying: postVerifyEmail.isPending,
+    emailToVerify,
+  };
+};

apps/gacha/src/app/page.tsx

@@ -66,11 +66,15 @@ export const Components: FC = (): ReactElement => {
         <div className="order-1 lg:order-none flex flex-col col-span-4 justify-center items-center mb-8 relative">
           <div className="relative h-[150px] md:h-[230px]">
             <img
+              width={400}
+              height={400}
               src="/merch/1.png"
               alt="Merch 1"
               className="relative top-[3px] md:top-[6px] left-[4px] md:left-[7px] z-10 w-[165px] md:w-[266px]"
             />
             <img
+              width={400}
+              height={400}
               className="absolute top-0 left-0 min-w-[174px] md:min-w-[280px] z-0"
               src="/merch/Vector-1.svg"
               alt=""
@@ -88,7 +92,7 @@ export const Components: FC = (): ReactElement => {
             ~ 175k ~
           </div>
         </div>
-        <div className="order-2 flex flex-col col-span-4 justify-center items-center mb-8 relative overflow-hidden">
+        <div className="order-2 flex flex-col col-span-4 justify-center items-center mb-8 relative">
           <div className="relative h-[130px] md:h-[230px]">
             <img
               width={400}
@@ -105,8 +109,6 @@ export const Components: FC = (): ReactElement => {
               alt="Merch 3"
             />
             <img
-              width={400}
-              height={400}
               className="absolute hidden lg:block -bottom-[100px] -left-[55px]"
               src="/landing-arrow-2.svg"
               alt="Merch 1"

apps/gacha/src/main.tsx

@@ -35,7 +35,7 @@ if (!rootElement) throw new Error('Failed to find the root element');
 createRoot(rootElement).render(
   <StrictMode>
     <QueryProvider>
-      <Toaster />
+      <Toaster position="top-right"/>
       <RouterProvider router={router} />
     </QueryProvider>
   </StrictMode>

apps/gacha/src/middleware.ts

@@ -1,11 +1,15 @@
-import { LoaderFunctionArgs } from 'react-router-dom';
+// import { SessionToken, SessionUser } from '@imphnen-frontend-service/utils';
+import { LoaderFunctionArgs } from 'react-router';
+
+// const mappingPublicRoutes = ['/'];
+
+// const mappingRoutePermissions = [
+//   {
+//     path: '/',
+//     permissions: [],
+//   },
+// ];
 
 export const middleware = async ({ request }: LoaderFunctionArgs) => {
-  const url = new URL(request.url);
-
-  const pathname = url.pathname;
-
-  if (pathname) return null;
-
   return null;
 };

apps/landing/.env.example

@@ -0,0 +1,4 @@
+NEXT_PUBLIC_API_URL=
+
+TURNSTILE_SECRET_KEY=
+NEXT_PUBLIC_TURNSTILE_SITEKEY=

apps/landing/next.config.js

@@ -1,20 +1,10 @@
-//@ts-check
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires
 const { composePlugins, withNx } = require('@nx/next');
-const { withPayload } = require('@payloadcms/next/withPayload');
+const path = require('path');
 
-/**
- * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
- **/
+/** @type {import('@nx/next/plugins/with-nx').WithNxOptions} */
 const nextConfig = {
-  nx: {
-    // Set this to true if you would like to to use SVGR
-    // See: https://github.com/gregberge/svgr
-    svgr: false,
-  },
+  nx: { svgr: false },
+  output: 'standalone',
 };
 
-const plugins = [withNx, withPayload];
-
-module.exports = composePlugins(...plugins)(nextConfig);
+module.exports = composePlugins(withNx)(nextConfig);

apps/landing/src/app/(auth)/_components/animated-background.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { useEffect, useMemo, useState } from 'react';
+import {
+  SiCplusplus,
+  SiCss3,
+  SiGo,
+  SiHtml5,
+  SiJavascript,
+  SiPhp,
+  SiPython,
+  SiRuby,
+  SiRust,
+  SiSwift,
+  SiTypescript,
+} from 'react-icons/si';
+
+export function AnimatedBackground() {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  const iconColorMap = useMemo(
+    () => [
+      { Icon: SiJavascript, color: '#F7DF1E' },
+      { Icon: SiTypescript, color: '#3178C6' },
+      { Icon: SiPython, color: '#3776AB' },
+      { Icon: SiCplusplus, color: '#00599C' },
+      { Icon: SiRuby, color: '#CC342D' },
+      { Icon: SiSwift, color: '#F05138' },
+      { Icon: SiRust, color: '#000000' },
+      { Icon: SiGo, color: '#00ADD8' },
+      { Icon: SiPhp, color: '#777BB4' },
+      { Icon: SiHtml5, color: '#E34F26' },
+      { Icon: SiCss3, color: '#1572B6' },
+    ],
+    []
+  );
+
+  const getRandom = (min: number, max: number) =>
+    Math.random() * (max - min) + min;
+
+  const floatingIcons = useMemo(() => {
+    if (!isClient) return [];
+
+    return Array.from({ length: 40 }).map((_, i) => {
+      const { Icon, color } = iconColorMap[i % iconColorMap.length];
+      return (
+        <motion.div
+          key={i}
+          className="pointer-events-none absolute"
+          style={{
+            top: `${getRandom(0, 100)}%`,
+            left: `${getRandom(0, 100)}%`,
+            fontSize: `${getRandom(16, 32)}px`,
+            color: color,
+            opacity: getRandom(0.1, 0.2),
+            rotate: getRandom(-180, 180),
+          }}
+          animate={{
+            y: [0, getRandom(-100, 100), 0],
+            x: [0, getRandom(-50, 50), 0],
+            rotate: getRandom(-180, 180),
+          }}
+          transition={{
+            duration: getRandom(15, 25),
+            repeat: Infinity,
+            repeatType: 'loop',
+            ease: 'easeInOut',
+          }}
+        >
+          <Icon className="h-full w-full" />
+        </motion.div>
+      );
+    });
+  }, [isClient, iconColorMap]);
+
+  if (!isClient) return null;
+
+  return (
+    <div className="fixed inset-0 z-0 overflow-hidden">{floatingIcons}</div>
+  );
+}

apps/landing/src/app/(auth)/_http/fetch-post-verify-turnstile.ts

@@ -0,0 +1,41 @@
+export async function fetchPostverifyTurnstile(
+  token: string,
+  remoteIp?: string
+): Promise<boolean> {
+  const url = 'https://challenges.cloudflare.com/turnstile/v0/siteverify';
+  const params = new URLSearchParams({
+    secret: String(process.env.TURNSTILE_SECRET_KEY),
+    response: token,
+  });
+  if (remoteIp) {
+    params.append('remoteip', remoteIp);
+  }
+
+  const res = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    body: params.toString(),
+  });
+
+  if (!res.ok) {
+    console.error('Turnstile verify HTTP error', res.status);
+    return false;
+  }
+
+  const data = (await res.json()) as TurnstileVerifyResponse;
+  if (!data.success) {
+    console.warn('Turnstile failure', data['error-codes']);
+    return false;
+  }
+
+  return true;
+}
+
+interface TurnstileVerifyResponse {
+  success: boolean;
+  challenge_ts: string;
+  hostname: string;
+  'error-codes'?: string[];
+}

apps/landing/src/app/(auth)/forgot-password/_actions/forgot-password-action.ts

@@ -0,0 +1,33 @@
+'use server';
+
+import { fetcher } from '@/lib/fetcher';
+import { getRemoteIp } from '@/lib/headers';
+import { fetchPostverifyTurnstile } from '../../_http/fetch-post-verify-turnstile';
+import {
+  forgotPasswordValidationSchema,
+  ForgotPasswordValidationType,
+} from '../_validation/forgot-password-validation';
+
+export async function ForgotPasswordAction(
+  request: ForgotPasswordValidationType
+) {
+  const validRequest = forgotPasswordValidationSchema.parse(request);
+  const remoteIp = await getRemoteIp();
+
+  const isCapchaValid = await fetchPostverifyTurnstile(
+    validRequest.token,
+    remoteIp
+  );
+
+  if (!isCapchaValid) throw new Error('Failed to verify captcha');
+
+  const { data, error } = await fetcher.POST('/v1/auth/forgot', {
+    body: {
+      email: validRequest.email,
+    },
+  });
+
+  if (error) throw new Error(error.message);
+
+  return data;
+}

apps/landing/src/app/(auth)/forgot-password/_components/forgot-password-form.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import {
+  Button,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+} from '@components';
+import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile';
+import { useRef, useState } from 'react';
+import { LuLoader } from 'react-icons/lu';
+import { useFormForgotPassword } from '../_hooks/use-form-forgot-password';
+import { usePostForgotPassowrd } from '../_hooks/use-post-forgot-password';
+import { ForgotPasswordValidationType } from '../_validation/forgot-password-validation';
+
+export function ForgotPasswordForm() {
+  const ref = useRef<TurnstileInstance | null>(null);
+
+  const [step, setStep] = useState<number>(1);
+  const [emailValue, setEmailValue] = useState<string>('');
+
+  const form = useFormForgotPassword();
+  const { mutate, isPending, error } = usePostForgotPassowrd(form);
+
+  const handleFirstStep = (values: ForgotPasswordValidationType) => {
+    setEmailValue(values.email);
+    setStep(2);
+  };
+
+  const handleSecondStep = () => {
+    mutate({ email: emailValue, token: form.getValues('token') });
+  };
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={
+          step === 1
+            ? form.handleSubmit(handleFirstStep)
+            : (e) => {
+                e.preventDefault();
+                handleSecondStep();
+              }
+        }
+        className="w-full space-y-4"
+      >
+        {error && (
+          <div className="p-2 text-xs bg-red-50 border border-red-200 text-red-800 rounded-sm">
+            {(error as Error).message}
+          </div>
+        )}
+
+        {step === 1 && (
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Email</FormLabel>
+                <FormControl>
+                  <Input placeholder="emailmu@mail.com" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        )}
+
+        {step === 2 && (
+          <Turnstile
+            ref={ref}
+            siteKey={String(process.env.NEXT_PUBLIC_TURNSTILE_SITEKEY)}
+            onSuccess={(token) => form.setValue('token', token)}
+            options={{ theme: 'light', size: 'flexible', language: 'id' }}
+          />
+        )}
+
+        <Button
+          type="submit"
+          disabled={isPending || (step === 2 && !form.watch('token'))}
+          className="w-full hover:bg-[#5fbaef] bg-[#22a5f1] font-bold"
+        >
+          {isPending ? (
+            <LuLoader className="h-5 w-5 animate-spin" />
+          ) : step === 1 ? (
+            'Selanjutnya'
+          ) : (
+            'Reset password'
+          )}
+        </Button>
+      </form>
+    </Form>
+  );
+}

apps/landing/src/app/(auth)/forgot-password/_hooks/use-form-forgot-password.ts

@@ -0,0 +1,16 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import {
+  forgotPasswordValidationSchema,
+  type ForgotPasswordValidationType,
+} from '../_validation/forgot-password-validation';
+
+export function useFormForgotPassword() {
+  return useForm<ForgotPasswordValidationType>({
+    resolver: zodResolver(forgotPasswordValidationSchema),
+    defaultValues: {
+      email: '',
+      token: '',
+    },
+  });
+}

apps/landing/src/app/(auth)/forgot-password/_hooks/use-post-forgot-password.ts

@@ -0,0 +1,20 @@
+import { useMutation } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { ForgotPasswordAction } from '../_actions/forgot-password-action';
+import { useFormForgotPassword } from './use-form-forgot-password';
+
+export function usePostForgotPassowrd(
+  form: ReturnType<typeof useFormForgotPassword>
+) {
+  return useMutation({
+    mutationFn: ForgotPasswordAction,
+    onSuccess: ({ message }) => {
+      form.reset();
+      toast.success(message);
+    },
+    onError: ({ message }) => {
+      form.reset();
+      toast.error(message);
+    },
+  });
+}

apps/landing/src/app/(auth)/forgot-password/_validation/forgot-password-validation.ts

@@ -0,0 +1,9 @@
+import { z } from 'zod';
+
+export const forgotPasswordValidationSchema = z.object({
+  email: z.string().email({ message: 'Format email tidak valid' }),
+  token: z.string(),
+});
+export type ForgotPasswordValidationType = z.infer<
+  typeof forgotPasswordValidationSchema
+>;

apps/landing/src/app/(auth)/forgot-password/page.tsx

@@ -0,0 +1,23 @@
+import { LogoSimple } from '@/app/_components/logo';
+import { Metadata } from 'next';
+import { ForgotPasswordForm } from './_components/forgot-password-form';
+
+export const metadata: Metadata = {
+  title: 'IMPHNEN - Signin',
+};
+
+export default function Page() {
+  return (
+    <>
+      <div className="flex flex-col items-center gap-4">
+        <LogoSimple />
+
+        <p className="text-muted-foreground text-center text-sm sm:text-base">
+          Reset password akunmu
+        </p>
+
+        <ForgotPasswordForm />
+      </div>
+    </>
+  );
+}

apps/landing/src/app/(auth)/layout.tsx

@@ -0,0 +1,25 @@
+import { baiJamjureeFont } from '@/lib/fonts';
+import { Card } from '@components';
+import { cn } from '@utils';
+import { ReactNode } from 'react';
+import { AnimatedBackground } from './_components/animated-background';
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <div
+      className={cn(
+        baiJamjureeFont.className,
+        'bg-background/20 relative flex min-h-[100dvh] items-center justify-center p-4'
+      )}
+    >
+      <AnimatedBackground />
+      <div className="z-10 w-full">
+        <Card className="bg-background/90 mx-auto w-full max-w-[360px] p-6 shadow-xl backdrop-blur-lg sm:max-w-md sm:p-8">
+          <div className="flex flex-col items-center space-y-6">
+            <div className="w-full space-y-4">{children}</div>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}

apps/landing/src/app/(auth)/reset-password/_actions/reset-password-actions.ts

@@ -0,0 +1,28 @@
+'use server';
+
+import { fetcher } from '@/lib/fetcher';
+import {
+  resetPasswordValidationSchema,
+  ResetPasswordValidationSchema,
+} from '../_validation/reset-password-validation';
+
+export async function resetPasswordAction(
+  request: ResetPasswordValidationSchema
+) {
+  const validRequest = resetPasswordValidationSchema.parse(request);
+
+  if (validRequest.confirm_password !== validRequest.confirm_password) {
+    throw new Error('Password missmatch');
+  }
+
+  const { data, error } = await fetcher.POST('/v1/auth/new-password', {
+    body: {
+      password: validRequest.password,
+      token: validRequest.token,
+    },
+  });
+
+  if (error) throw new Error(error.message);
+
+  return data;
+}

apps/landing/src/app/(auth)/reset-password/_components/reset-password-form.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import {
+  Button,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+} from '@components';
+import { LuLoaderCircle } from 'react-icons/lu';
+import { usePostResetPassword } from '../_hooks/use-post-reset-password';
+import { useResetPasswordForm } from '../_hooks/use-reset-password-form';
+import { ResetPasswordValidationSchema } from '../_validation/reset-password-validation';
+
+export function ResetPasswordForm() {
+  const form = useResetPasswordForm();
+  const { mutate, error, isPending } = usePostResetPassword(form);
+
+  const onSubmit = (values: ResetPasswordValidationSchema) => {
+    mutate(values);
+  };
+
+  return (
+    <Form {...form}>
+      {error && (
+        <div className="p-2 text-xs bg-red-50 border border-red-200 text-red-800 rounded-sm w-full">
+          {(error as Error).message}
+        </div>
+      )}
+
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4 w-full">
+        <FormField
+          control={form.control}
+          name="password"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>New Password</FormLabel>
+              <FormControl>
+                <Input type="password" placeholder="••••••••" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="confirm_password"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Confirm New Password</FormLabel>
+              <FormControl>
+                <Input type="password" placeholder="••••••••" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <Button type="submit" className="w-full" disabled={isPending}>
+          {isPending ? (
+            <LuLoaderCircle className="size-5 animate-spin" />
+          ) : (
+            'Ubah password'
+          )}
+        </Button>
+      </form>
+    </Form>
+  );
+}

apps/landing/src/app/(auth)/reset-password/_hooks/use-post-reset-password.ts

@@ -0,0 +1,24 @@
+import { useMutation } from '@tanstack/react-query';
+import { useRouter } from 'next/navigation';
+import { toast } from 'sonner';
+import { resetPasswordAction } from '../_actions/reset-password-actions';
+import { useResetPasswordForm } from './use-reset-password-form';
+
+export function usePostResetPassword(
+  form: ReturnType<typeof useResetPasswordForm>
+) {
+  const router = useRouter();
+
+  return useMutation({
+    mutationFn: resetPasswordAction,
+    onSuccess: ({ message }) => {
+      form.reset();
+      router.replace('/signin');
+      toast.success(message);
+    },
+    onError: ({ message }) => {
+      form.reset();
+      toast.error(message);
+    },
+  });
+}

apps/landing/src/app/(auth)/reset-password/_hooks/use-reset-password-form.ts

@@ -0,0 +1,22 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useSearchParams } from 'next/navigation';
+import { useForm } from 'react-hook-form';
+
+import {
+  resetPasswordValidationSchema,
+  ResetPasswordValidationSchema,
+} from '../_validation/reset-password-validation';
+
+export function useResetPasswordForm() {
+  const searchParams = useSearchParams();
+  const tokenFromQuery = searchParams.get('token') ?? '';
+
+  return useForm<ResetPasswordValidationSchema>({
+    resolver: zodResolver(resetPasswordValidationSchema),
+    defaultValues: {
+      password: '',
+      confirm_password: '',
+      token: tokenFromQuery,
+    },
+  });
+}

apps/landing/src/app/(auth)/reset-password/_validation/reset-password-validation.ts

@@ -0,0 +1,31 @@
+import { z } from 'zod';
+
+export const resetPasswordValidationSchema = z
+  .object({
+    password: z
+      .string({
+        required_error: 'Password tidak boleh kosong',
+        invalid_type_error: 'Password harus berupa string',
+      })
+      .min(8, 'Password harus minimal 8 karakter')
+      .max(50, 'Password tidak boleh lebih dari 50 karakter')
+      .regex(
+        /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*\W).+$/,
+        'Password harus mengandung setidaknya satu huruf kapital, satu huruf kecil, satu angka, dan satu karakter spesial'
+      ),
+    confirm_password: z
+      .string({
+        required_error: 'Konfirmasi password tidak boleh kosong',
+      })
+      .min(8, 'Konfirmasi password harus minimal 8 karakter')
+      .max(50, 'Konfirmasi password tidak boleh lebih dari 50 karakter'),
+    token: z.string(),
+  })
+  .refine((data) => data.password === data.confirm_password, {
+    message: 'Password dan Konfirmasi Password harus sama',
+    path: ['confirm_password'],
+  });
+
+export type ResetPasswordValidationSchema = z.infer<
+  typeof resetPasswordValidationSchema
+>;

apps/landing/src/app/(auth)/reset-password/page.tsx

@@ -0,0 +1,30 @@
+import { LogoSimple } from '@/app/_components/logo';
+import { redirect } from 'next/navigation';
+import { use } from 'react';
+import { ResetPasswordForm } from './_components/reset-password-form';
+
+export const dynamic = 'force-dynamic';
+
+export default function Page({
+  searchParams,
+}: {
+  searchParams: Promise<{ token?: string }>;
+}) {
+  const { token } = use(searchParams);
+
+  if (!token) redirect('/signin');
+
+  return (
+    <>
+      <div className="flex flex-col items-center gap-4">
+        <LogoSimple />
+
+        <p className="text-muted-foreground text-center text-sm sm:text-base">
+          Ubah passwordmu
+        </p>
+
+        <ResetPasswordForm />
+      </div>
+    </>
+  );
+}

apps/landing/src/app/(auth)/signin/_actions/signin-action.ts

@@ -0,0 +1,22 @@
+'use server';
+
+import { setAccessToken, setRefreshToken } from '@/lib/cookies';
+import { fetchPostSignin } from '../_http/fetch-post-signin';
+import {
+  type SignInValidationType,
+  signInValidationSchema,
+} from '../_validation/signin-validation';
+
+export async function SigninAction(request: SignInValidationType) {
+  const validRequest = signInValidationSchema.parse(request);
+
+  const { data } = await fetchPostSignin(validRequest);
+
+  const accessToken = data.token.access_token;
+  const refreshToken = data.token.refresh_token;
+
+  await setAccessToken(accessToken);
+  await setRefreshToken(refreshToken);
+
+  return data;
+}