feat(auth): implement multi-step authentication flow

This commit introduces a complete user authentication system, replacing the previous placeholder login page. The new flow includes signup, login, and OTP verification, all integrated with backend webhooks. - Adds `AuthPage` to manage the view state between login, signup, and OTP forms. - Implements `LoginForm` with support for both email and WhatsApp credentials. - Implements `SignupForm` with password strength and confirmation validation. - Adds `OtpForm` for two-factor verification after a successful signup. - Integrates `axios` for making API calls to the backend webhooks. - Updates styling with a new background, custom brand colors, and the Poppins font. BREAKING CHANGE: The `LoginPage` component has been deleted and is replaced by the new `AuthPage` component. Any imports of `LoginPage` must be updated.
feat(auth): implement multi-step authentication flow with UI
2025-08-02 16:32:07 +07:00 · 2025-08-02 15:26:12 +07:00 · 2025-08-01 12:54:14 +07:00
15 changed files with 1011 additions and 78 deletions
--- a/.kilocode/rules/memory-bank/context.md
+++ b/.kilocode/rules/memory-bank/context.md
@@ -4,7 +4,12 @@
 Initializing the memory bank for the Webapp Rental Peralatan Camping project.

 ## Recent changes
- Created `architecture.md` and `tech.md` based on `adventure-rental-app/prd.md`.
+- Analyzed project structure, dependencies, and project brief files for `adventure-rental-app`.
+- Updated `tech.md` to reflect the use of Vite for `adventure-rental-app`.
+- Analyzed project structure and dependencies for `kawruh-app`.
+- Analyzed project structure and files in `motel-app/`.
+- Analyzed project structure and files in `pakrete-app/`.

 ## Next steps
- Summarize project understanding and ask for user verification.
+- Ask user to verify the summarized information for `pakrete-app/`.
+- Update memory bank files based on user feedback for `pakrete-app/`.
--- a/.kilocode/rules/memory-bank/tech.md
+++ b/.kilocode/rules/memory-bank/tech.md
@@ -1,14 +1,14 @@
 # Tech: Webapp Rental Peralatan Camping

 ## Technologies Used
- **Frontend:** React.js (with Create React App)
+- **Frontend:** React.js (with Vite)
 - **Backend Orchestration:** n8n
 - **Database:** PostgreSQL
 - **Payment Gateway Integration:** Local payment providers (e.g., Midtrans, Xendit, Duitku)
 - **Email Service Provider:** (To be determined, integrated via n8n)

 ## Development Setup
- **Frontend:** Node.js, npm/yarn, React development server (from CRA).
+- **Frontend:** Node.js, npm/yarn, Vite development server.
 - **Backend:** Docker for n8n, PostgreSQL database instance.
 - **Version Control:** Git.

--- a/adventure-rental-app/index.html
+++ b/adventure-rental-app/index.html
@@ -3,8 +3,11 @@
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>Adventure Rental</title>
  </head>
  <body>
    <div id="root"></div>
--- a/adventure-rental-app/package-lock.json
+++ b/adventure-rental-app/package-lock.json
@@ -8,6 +8,7 @@
      "name": "adventure-rental-app",
      "version": "0.0.0",
      "dependencies": {
+        "axios": "^1.11.0",
        "react": "^19.1.0",
        "react-dom": "^19.1.0"
      },
@@ -1607,6 +1608,12 @@
      "dev": true,
      "license": "Python-2.0"
    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
    "node_modules/autoprefixer": {
      "version": "10.4.21",
      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
@@ -1645,6 +1652,17 @@
        "postcss": "^8.1.0"
      }
    },
+    "node_modules/axios": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.11.0.tgz",
+      "integrity": "sha512-1Lx3WLFQWm3ooKDYZD1eXmoGO9fxYQjrycfHFC8P0sCfQVXyROp0p9PFWBehewBOdCwHc+f/b8I0fMto5eSfwA==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.4",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
    "node_modules/balanced-match": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1722,6 +1740,19 @@
        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
      }
    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
    "node_modules/callsites": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -1838,6 +1869,18 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
    "node_modules/commander": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -1922,6 +1965,15 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
    "node_modules/didyoumean": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -1936,6 +1988,20 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
    "node_modules/eastasianwidth": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -1957,6 +2023,51 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
    "node_modules/esbuild": {
      "version": "0.25.8",
      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.8.tgz",
@@ -2340,6 +2451,26 @@
      "dev": true,
      "license": "ISC"
    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
+      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/foreground-child": {
      "version": "3.3.1",
      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
@@ -2357,6 +2488,22 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
+    "node_modules/form-data": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
+      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/fraction.js": {
      "version": "4.3.7",
      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -2390,7 +2537,6 @@
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
      "license": "MIT",
      "funding": {
        "url": "https://github.com/sponsors/ljharb"
@@ -2406,6 +2552,43 @@
        "node": ">=6.9.0"
      }
    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
    "node_modules/glob": {
      "version": "10.4.5",
      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
@@ -2479,6 +2662,18 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/has-flag": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -2489,11 +2684,37 @@
        "node": ">=8"
      }
    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/hasown": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "function-bind": "^1.1.2"
@@ -2788,6 +3009,15 @@
        "yallist": "^3.0.2"
      }
    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
    "node_modules/merge2": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -2825,6 +3055,27 @@
        "url": "https://github.com/sponsors/jonschlinkert"
      }
    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
    "node_modules/minimatch": {
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -3261,6 +3512,12 @@
        "node": ">= 0.8.0"
      }
    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
    "node_modules/punycode": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
--- a/adventure-rental-app/package.json
+++ b/adventure-rental-app/package.json
@@ -10,6 +10,7 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "axios": "^1.11.0",
    "react": "^19.1.0",
    "react-dom": "^19.1.0"
  },
--- a/adventure-rental-app/src/App.jsx
+++ b/adventure-rental-app/src/App.jsx
@@ -1,8 +1,8 @@
-import LoginPage from './LoginPage'
+import AuthPage from './AuthPage'

 function App() {
  return (
-    <LoginPage />
+    <AuthPage />
  )
 }

--- a/adventure-rental-app/src/AuthPage.jsx
+++ b/adventure-rental-app/src/AuthPage.jsx
@@ -0,0 +1,42 @@
+import React, { useState, useCallback } from 'react';
+import LoginForm from './LoginForm';
+import SignupForm from './SignupForm';
+import OtpForm from './OtpForm';
+import ForgotPasswordForm from './ForgotPasswordForm';
+import ResetPasswordForm from './ResetPasswordForm';
+
+const AuthPage = () => {
+  const [view, setView] = useState('login'); // 'login', 'signup', 'otp', 'forgotPassword', 'resetPassword'
+
+  const showSignup = useCallback(() => setView('signup'), []);
+  const showLogin = useCallback(() => setView('login'), []);
+  const showOtp = useCallback(() => setView('otp'), []);
+  const showForgotPassword = useCallback(() => setView('forgotPassword'), []);
+  const showResetPassword = useCallback(() => setView('resetPassword'), []);
+
+  const renderForm = () => {
+    switch (view) {
+      case 'signup':
+        return <SignupForm toggleForm={showLogin} onSuccess={showOtp} />;
+      case 'otp':
+        return <OtpForm onSuccess={showLogin} />;
+      case 'forgotPassword':
+        return <ForgotPasswordForm showLogin={showLogin} showReset={showResetPassword} />;
+      case 'resetPassword':
+        return <ResetPasswordForm showLogin={showLogin} />;
+      case 'login':
+      default:
+        return <LoginForm toggleForm={showSignup} showForgotPassword={showForgotPassword} />;
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4">
+      <div className="w-full max-w-md p-8 space-y-6 bg-black/30 backdrop-blur-xl rounded-2xl shadow-2xl">
+        {renderForm()}
+      </div>
+    </div>
+  );
+};
+
+export default AuthPage;
--- a/adventure-rental-app/src/ForgotPasswordForm.jsx
+++ b/adventure-rental-app/src/ForgotPasswordForm.jsx
@@ -0,0 +1,117 @@
+import React, { useState, useCallback } from 'react';
+import axios from 'axios';
+
+const ForgotPasswordForm = ({ showLogin, showReset }) => {
+  const [mode, setMode] = useState('email'); // 'email' or 'whatsapp'
+  const [identifier, setIdentifier] = useState('');
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [emailError, setEmailError] = useState('');
+
+  const validateEmail = (email) => {
+    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return regex.test(email);
+  };
+
+  const handleIdentifierChange = (e) => {
+    let value = e.target.value;
+    if (mode === 'email') {
+      if (!validateEmail(value) && value.length > 0) {
+        setEmailError('Please enter a valid email address.');
+      } else {
+        setEmailError('');
+      }
+    } else {
+      setEmailError('');
+      if (value.startsWith('0')) {
+        value = value.substring(1);
+      }
+      value = value.replace(/[^0-9]/g, '');
+    }
+    setIdentifier(value);
+  };
+
+  const handleModeChange = useCallback((newMode) => {
+    setMode(newMode);
+    setIdentifier('');
+    setEmailError('');
+    setError('');
+    setSuccess('');
+  }, []);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (mode === 'email' && emailError) {
+      setError('Please fix the errors before submitting.');
+      return;
+    }
+    setLoading(true);
+    setError('');
+    setSuccess('');
+
+    const finalIdentifier = mode === 'whatsapp' ? `62${identifier}` : identifier;
+
+    try {
+      await axios.post('https://api.karyamanswasta.my.id/webhook/forgot-password/adventure', { identifier: finalIdentifier });
+      setSuccess('Password reset link sent. Please check your email/WhatsApp.');
+      // showReset(); // You might want to navigate to reset password form after a delay
+    } catch (err) {
+      setError(err.response?.data?.message || 'Failed to send reset link.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const isFormValid = identifier.trim() !== '' && !emailError;
+
+  return (
+    <>
+      <div className="text-center">
+        <h2 className="text-3xl font-bold text-white">Forgot Password</h2>
+        <p className="mt-2 text-sm text-gray-300">Enter your email or WhatsApp to reset</p>
+      </div>
+      <div className="flex space-x-2 mt-6">
+        <button onClick={() => handleModeChange('email')} className={`w-1/2 py-2 text-sm font-medium rounded-md focus:outline-none transition-colors duration-300 ${mode === 'email' ? 'bg-brand-orange text-white' : 'bg-white/20 text-white hover:bg-white/30'}`}>
+          Email
+        </button>
+        <button onClick={() => handleModeChange('whatsapp')} className={`w-1/2 py-2 text-sm font-medium rounded-md focus:outline-none transition-colors duration-300 ${mode === 'whatsapp' ? 'bg-brand-orange text-white' : 'bg-white/20 text-white hover:bg-white/30'}`}>
+          WhatsApp
+        </button>
+      </div>
+      <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+        <div>
+          <div className="relative">
+            {mode === 'whatsapp' && (
+              <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"><span className="text-white font-medium sm:text-sm">+62</span><span className="text-gray-400 mx-2">|</span></div>
+            )}
+            <input
+              name="identifier"
+              type={mode === 'email' ? 'email' : 'tel'}
+              required
+              className={`appearance-none relative block w-full px-4 py-3 border ${emailError ? 'border-red-500' : 'border-gray-500'} bg-white/20 text-white placeholder-gray-300 focus:outline-none focus:ring-brand-orange focus:border-brand-orange sm:text-sm rounded-md ${mode === 'whatsapp' ? 'pl-16' : ''}`}
+              placeholder={mode === 'email' ? 'Enter your email' : '812...'}
+              value={identifier}
+              onChange={handleIdentifierChange}
+            />
+          </div>
+          {emailError && <p className="mt-2 text-xs text-red-400">{emailError}</p>}
+        </div>
+        {error && <p className="text-sm text-red-300 text-center">{error}</p>}
+        {success && <p className="text-sm text-green-400 text-center">{success}</p>}
+        <div>
+          <button type="submit" disabled={loading || !isFormValid} className="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-bold rounded-md text-white bg-brand-orange hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-orange focus:ring-offset-gray-800 disabled:opacity-60">
+            {loading ? 'Sending...' : 'Reset Password'}
+          </button>
+        </div>
+        <p className="text-center text-sm text-gray-300">
+          <button type="button" onClick={showLogin} className="font-medium text-brand-orange hover:underline">
+            Back to Login
+          </button>
+        </p>
+      </form>
+    </>
+  );
+};
+
+export default ForgotPasswordForm;
--- a/adventure-rental-app/src/LoginForm.jsx
+++ b/adventure-rental-app/src/LoginForm.jsx
@@ -0,0 +1,200 @@
+import React, { useState, useCallback } from 'react';
+import axios from 'axios';
+
+const FlashlightOnIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 text-gray-300 group-hover:text-white">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.463c-5.786 0-10.5-4.714-10.5-10.5 0-3.863 2.07-7.222 5.042-9.016a.75.75 0 01.819.162z" />
+  </svg>
+);
+
+const FlashlightOffIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 text-gray-300 group-hover:text-white">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
+  </svg>
+);
+
+const LoginForm = ({ toggleForm, onSuccess, showForgotPassword }) => {
+  const [loginMode, setLoginMode] = useState('email'); // 'email' or 'whatsapp'
+  const [identifier, setIdentifier] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [emailError, setEmailError] = useState('');
+
+  const validateEmail = (email) => {
+    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return regex.test(email);
+  };
+
+  const handleIdentifierChange = (e) => {
+    let value = e.target.value;
+    if (loginMode === 'email') {
+      if (!validateEmail(value) && value.length > 0) {
+        setEmailError('Please enter a valid email address.');
+      } else {
+        setEmailError('');
+      }
+    } else {
+      setEmailError('');
+      if (value.startsWith('0')) {
+        value = value.substring(1);
+      }
+      value = value.replace(/[^0-9]/g, '');
+    }
+    setIdentifier(value);
+  };
+
+  const handleLogin = async (e) => {
+    e.preventDefault();
+    if (loginMode === 'email' && emailError) {
+      setError('Please fix the errors before submitting.');
+      return;
+    }
+    setLoading(true);
+    setError('');
+
+    const finalIdentifier = loginMode === 'whatsapp' ? `62${identifier}` : identifier;
+
+    try {
+      const response = await axios.post('https://api.karyamanswasta.my.id/webhook/login/adventure', {
+        identifier: finalIdentifier,
+        password,
+      });
+
+      const { token } = response.data;
+      localStorage.setItem('authToken', token);
+      console.log('Login successful, token:', token);
+      onSuccess(); // Call onSuccess to reset the form
+
+    } catch (err) {
+      setError(err.response?.data?.message || 'Login failed. Please check your credentials.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleModeChange = useCallback((mode) => {
+    setLoginMode(mode);
+    setIdentifier('');
+    setPassword('');
+    setEmailError('');
+    setShowPassword(false);
+    setError('');
+  }, []);
+
+  const togglePasswordVisibility = useCallback(() => {
+    setShowPassword(prev => !prev);
+  }, []);
+
+  return (
+    <>
+        <div className="text-center">
+          <h2 className="text-3xl font-bold text-white">
+            Equipment Rental
+          </h2>
+          <p className="mt-2 text-sm text-gray-300">
+            Sign in to continue your adventure
+          </p>
+        </div>
+
+        <div className="flex space-x-2">
+          <button
+            onClick={() => handleModeChange('email')}
+            className={`w-1/2 py-2 text-sm font-medium rounded-md focus:outline-none transition-colors duration-300 ${
+              loginMode === 'email' ? 'bg-brand-orange text-white' : 'bg-white/20 text-white hover:bg-white/30'
+            }`}
+          >
+            Email
+          </button>
+          <button
+            onClick={() => handleModeChange('whatsapp')}
+            className={`w-1/2 py-2 text-sm font-medium rounded-md focus:outline-none transition-colors duration-300 ${
+              loginMode === 'whatsapp' ? 'bg-brand-orange text-white' : 'bg-white/20 text-white hover:bg-white/30'
+            }`}
+          >
+            WhatsApp
+          </button>
+        </div>
+
+        <form className="space-y-6" onSubmit={handleLogin}>
+          <div>
+            <label htmlFor="identifier" className="sr-only">
+              {loginMode === 'email' ? 'Email' : 'WhatsApp Number'}
+            </label>
+            <div className="relative">
+              {loginMode === 'whatsapp' && (
+                <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                  <span className="text-white font-medium sm:text-sm">+62</span>
+                  <span className="text-gray-400 mx-2">|</span>
+                </div>
+              )}
+              <input
+                id="identifier"
+                name="identifier"
+                type={loginMode === 'email' ? 'email' : 'tel'}
+                required
+                className={`appearance-none relative block w-full px-4 py-3 border ${emailError ? 'border-red-500' : 'border-gray-500'} bg-white/20 text-white placeholder-gray-300 focus:outline-none focus:ring-brand-orange focus:border-brand-orange sm:text-sm rounded-md ${
+                  loginMode === 'whatsapp' ? 'pl-16' : ''
+                }`}
+                placeholder={loginMode === 'email' ? 'Enter your email' : '812...'}
+                value={identifier}
+                onChange={handleIdentifierChange}
+              />
+            </div>
+            {emailError && <p className="mt-2 text-xs text-red-400">{emailError}</p>}
+          </div>
+          <div>
+            <label htmlFor="password" className="sr-only">
+              Password
+            </label>
+            <div className="relative">
+              <input
+                id="password"
+                name="password"
+                type={showPassword ? 'text' : 'password'}
+                autoComplete="current-password"
+                required
+                className="appearance-none relative block w-full px-4 py-3 border border-gray-500 bg-white/20 text-white placeholder-gray-300 focus:outline-none focus:ring-brand-orange focus:border-brand-orange sm:text-sm rounded-md"
+                placeholder="Password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+              <button
+                type="button"
+                onClick={togglePasswordVisibility}
+                className="absolute inset-y-0 right-0 z-20 flex items-center pr-3 group focus:outline-none"
+              >
+                {showPassword ? <FlashlightOffIcon /> : <FlashlightOnIcon />}
+              </button>
+            </div>
+          </div>
+
+          {error && (
+            <p className="text-sm text-red-300 text-center">{error}</p>
+          )}
+
+          <div className="flex items-center justify-between text-sm">
+            <button type="button" onClick={toggleForm} className="font-medium text-brand-orange hover:underline">
+              Sign up for an adventure
+            </button>
+            <button type="button" onClick={showForgotPassword} className="font-medium text-gray-300 hover:text-white">
+              Forgot password?
+            </button>
+          </div>
+
+          <div>
+            <button
+              type="submit"
+              disabled={loading}
+              className="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-bold rounded-md text-white bg-brand-orange hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-orange focus:ring-offset-gray-800 disabled:opacity-60"
+            >
+              {loading ? 'Signing In...' : 'Sign In'}
+            </button>
+          </div>
+        </form>
+    </>
+  );
+};
+
+export default LoginForm;
--- a/adventure-rental-app/src/LoginPage.jsx
+++ b/adventure-rental-app/src/LoginPage.jsx
@@ -1,68 +0,0 @@
-import React from 'react';
-
-const LoginPage = () => {
-  return (
-    <div className="flex h-screen">
-      {/* Left side with description and image */}
-      <div className="w-1/2 bg-gray-200 p-10 flex flex-col justify-center items-center text-center">
-        <div className="mb-10">
-          <h1 className="text-4xl font-bold mb-4">Adventure Awaits!</h1>
-          <p className="text-lg">
-            Rent the best camping gear from us and embark on your next great adventure.
-          </p>
-        </div>
-        <div>
-          {/* Placeholder for an image */}
-          <div className="w-64 h-64 bg-gray-400 rounded-lg">
-            <span className="text-gray-600">Image Placeholder</span>
-          </div>
-        </div>
-      </div>
-
-      {/* Right side with login form */}
-      <div className="w-1/2 flex justify-center items-center">
-        <div className="w-full max-w-md p-8 space-y-6 bg-white rounded-lg shadow-md">
-          <h2 className="text-3xl font-bold text-center">Login</h2>
-          <form className="space-y-6">
-            <div>
-              <label htmlFor="email" className="text-sm font-medium text-gray-700">
-                Email address
-              </label>
-              <input
-                id="email"
-                name="email"
-                type="email"
-                autoComplete="email"
-                required
-                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
-              />
-            </div>
-            <div>
-              <label htmlFor="password">
-                Password
-              </label>
-              <input
-                id="password"
-                name="password"
-                type="password"
-                autoComplete="current-password"
-                required
-                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
-              />
-            </div>
-            <div>
-              <button
-                type="submit"
-                className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-              >
-                Sign in
-              </button>
-            </div>
-          </form>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default LoginPage;
--- a/adventure-rental-app/src/OtpForm.jsx
+++ b/adventure-rental-app/src/OtpForm.jsx
@@ -0,0 +1,125 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+const OtpForm = ({ onSuccess }) => {
+  const [emailOtp, setEmailOtp] = useState('');
+  const [whatsappOtp, setWhatsappOtp] = useState('');
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [timer, setTimer] = useState(60); // 1 minute in seconds
+
+  useEffect(() => {
+    if (timer > 0) {
+      const interval = setInterval(() => {
+        setTimer(prev => prev - 1);
+      }, 1000);
+      return () => clearInterval(interval);
+    }
+  }, [timer]);
+
+  const formatTime = (seconds) => {
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds % 60;
+    return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
+  };
+
+  const handleOtpChange = (setter) => (e) => {
+    const value = e.target.value.replace(/[^0-9]/g, '');
+    setter(value);
+  };
+
+  const handleResend = async () => {
+    setLoading(true);
+    setError('');
+    setSuccess('');
+    try {
+      await axios.post('https://api.karyamanswasta.my.id/webhook/otp-request/adventure');
+      setSuccess('A new OTP has been sent.');
+      setTimer(60); // Reset timer
+    } catch (err) {
+      setError('Failed to resend OTP.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleVerify = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+    setSuccess('');
+
+    try {
+      await axios.post('https://api.karyamanswasta.my.id/webhook/otp-verify/adventure', {
+        emailOtp,
+        whatsappOtp,
+      });
+      setSuccess('Account verified successfully! Redirecting to login...');
+      setTimeout(() => {
+        onSuccess();
+      }, 2000);
+    } catch (err) {
+      setError(err.response?.data?.message || 'OTP verification failed.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const isFormValid = emailOtp.length >= 6 && whatsappOtp.length >= 6;
+
+  return (
+    <>
+      <div className="text-center">
+        <h2 className="text-3xl font-bold text-white">Verify Your Account</h2>
+        <p className="mt-2 text-sm text-gray-300">Enter the OTP sent to your email and WhatsApp</p>
+        <p className="mt-4 text-lg font-medium text-brand-orange">{formatTime(timer)}</p>
+      </div>
+      <form className="mt-8 space-y-6" onSubmit={handleVerify}>
+        <input
+          name="emailOtp"
+          type="text"
+          maxLength="6"
+          required
+          className="appearance-none relative block w-full px-4 py-3 border border-gray-500 bg-white/20 text-white placeholder-gray-300 focus:outline-none focus:ring-brand-orange focus:border-brand-orange sm:text-sm rounded-md"
+          placeholder="Email OTP"
+          value={emailOtp}
+          onChange={handleOtpChange(setEmailOtp)}
+        />
+        <input
+          name="whatsappOtp"
+          type="text"
+          maxLength="6"
+          required
+          className="appearance-none relative block w-full px-4 py-3 border border-gray-500 bg-white/20 text-white placeholder-gray-300 focus:outline-none focus:ring-brand-orange focus:border-brand-orange sm:text-sm rounded-md"
+          placeholder="WhatsApp OTP"
+          value={whatsappOtp}
+          onChange={handleOtpChange(setWhatsappOtp)}
+        />
+        {error && <p className="text-sm text-red-300 text-center">{error}</p>}
+        {success && <p className="text-sm text-green-400 text-center">{success}</p>}
+        <div>
+          <button
+            type="submit"
+            disabled={loading || timer === 0 || !isFormValid}
+            className="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-bold rounded-md text-white bg-brand-orange hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-orange focus:ring-offset-gray-800 disabled:opacity-60"
+          >
+            {loading ? 'Verifying...' : 'Verify Account'}
+          </button>
+        </div>
+        {timer === 0 && (
+          <button
+            type="button"
+            onClick={handleResend}
+            disabled={loading}
+            className="w-full text-center text-sm font-medium text-brand-orange hover:underline disabled:opacity-60"
+          >
+            Resend OTP
+          </button>
+        )}
+      </form>
+    </>
+  );
+};
+
+export default OtpForm;
--- a/adventure-rental-app/src/ResetPasswordForm.jsx
+++ b/adventure-rental-app/src/ResetPasswordForm.jsx
@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+
+const ResetPasswordForm = ({ showLogin }) => {
+  const [token, setToken] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (newPassword !== confirmPassword) {
+      setError("Passwords don't match.");
+      return;
+    }
+    setLoading(true);
+    setError('');
+    setSuccess('');
+
+    try {
+      // Assuming you have a webhook for resetting the password
+      await axios.post('https://api.karyamanswasta.my.id/webhook/forgot-password/adventure', { token, newPassword });
+      setSuccess('Password has been sent successfully!');
+      setTimeout(() => {
+        showLogin();
+      }, 2000);
+    } catch (err) {
+      setError(err.response?.data?.message || 'Failed to reset password.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <div className="text-center">
+        <h2 className="text-3xl font-bold text-white">Reset Password</h2>
+        <p className="mt-2 text-sm text-gray-300">Enter the token from your email/WhatsApp and a new password.</p>
+      </div>
+      <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+        <input name="token" type="text" required className="appearance-none relative block w-full px-4 py-3 border border-gray-500 bg-white/20 text-white placeholder-gray-300 focus:outline-none focus:ring-brand-orange focus:border-brand-orange sm:text-sm rounded-md" placeholder="Reset Token" value={token} onChange={(e) => setToken(e.target.value)} />
+        <input name="newPassword" type="password" required className="appearance-none relative block w-full px-4 py-3 border border-gray-500 bg-white/20 text-white placeholder-gray-300 focus:outline-none focus:ring-brand-orange focus:border-brand-orange sm:text-sm rounded-md" placeholder="New Password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} />
+        <input name="confirmPassword" type="password" required className="appearance-none relative block w-full px-4 py-3 border border-gray-500 bg-white/20 text-white placeholder-gray-300 focus:outline-none focus:ring-brand-orange focus:border-brand-orange sm:text-sm rounded-md" placeholder="Confirm New Password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} />
+        {error && <p className="text-sm text-red-300 text-center">{error}</p>}
+        {success && <p className="text-sm text-green-400 text-center">{success}</p>}
+        <div>
+          <button type="submit" disabled={loading} className="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-bold rounded-md text-white bg-brand-orange hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-orange focus:ring-offset-gray-800 disabled:opacity-60">
+            {loading ? 'Resetting...' : 'Reset Password'}
+          </button>
+        </div>
+        <p className="text-center text-sm text-gray-300">
+          <button type="button" onClick={showLogin} className="font-medium text-brand-orange hover:underline">
+            Back to Login
+          </button>
+        </p>
+      </form>
+    </>
+  );
+};
+
+export default ResetPasswordForm;
--- a/adventure-rental-app/src/SignupForm.jsx
+++ b/adventure-rental-app/src/SignupForm.jsx
@@ -0,0 +1,158 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+const FlashlightOnIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 text-gray-300 group-hover:text-white">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.463c-5.786 0-10.5-4.714-10.5-10.5 0-3.863 2.07-7.222 5.042-9.016a.75.75 0 01.819.162z" />
+  </svg>
+);
+
+const FlashlightOffIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 text-gray-300 group-hover:text-white">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
+  </svg>
+);
+
+const PasswordRequirement = ({ meets, label }) => (
+  <p className={`text-xs ${meets ? 'text-green-400' : 'text-gray-400'}`}>
+    {meets ? '✓' : '✗'} {label}
+  </p>
+);
+
+const SignupForm = ({ toggleForm, onSuccess }) => {
+  const [fullName, setFullName] = useState('');
+  const [email, setEmail] = useState('');
+  const [whatsapp, setWhatsapp] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [emailError, setEmailError] = useState('');
+  const [passwordMatchError, setPasswordMatchError] = useState('');
+
+  const validateEmail = (email) => {
+    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return regex.test(email);
+  };
+
+  useEffect(() => {
+    if (password && confirmPassword && password !== confirmPassword) {
+      setPasswordMatchError("Passwords don't match.");
+    } else {
+      setPasswordMatchError('');
+    }
+  }, [password, confirmPassword]);
+
+  const handleEmailChange = (e) => {
+    const value = e.target.value;
+    setEmail(value);
+    if (!validateEmail(value) && value.length > 0) {
+      setEmailError('Please enter a valid email address.');
+    } else {
+      setEmailError('');
+    }
+  };
+
+  const passwordRequirements = {
+    length: password.length >= 8,
+    uppercase: /[A-Z]/.test(password),
+    lowercase: /[a-z]/.test(password),
+    number: /[0-9]/.test(password),
+  };
+  const allRequirementsMet = Object.values(passwordRequirements).every(Boolean);
+
+  const isFormValid = 
+    fullName.trim() !== '' &&
+    email.trim() !== '' &&
+    !emailError &&
+    whatsapp.trim() !== '' &&
+    password.trim() !== '' &&
+    allRequirementsMet &&
+    confirmPassword.trim() !== '' &&
+    !passwordMatchError;
+
+  const handleWhatsappChange = (e) => {
+    let value = e.target.value;
+    if (value.startsWith('0')) {
+      value = value.substring(1);
+    }
+    setWhatsapp(value.replace(/[^0-9]/g, ''));
+  };
+
+  const handleSignup = async (e) => {
+    e.preventDefault();
+    if (!isFormValid) {
+      setError('Please fill in all fields correctly.');
+      return;
+    }
+    setLoading(true);
+    setError('');
+
+    try {
+      await axios.post('https://api.karyamanswasta.my.id/webhook/signup/adventure', {
+        fullName,
+        email,
+        whatsapp: `62${whatsapp}`,
+        password,
+      });
+      onSuccess();
+    } catch (err) {
+      setError(err.response?.data?.message || 'Signup failed. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <div className="text-center">
+        <h2 className="text-3xl font-bold text-white">Create Account</h2>
+        <p className="mt-2 text-sm text-gray-300">Join the adventure</p>
+      </div>
+      <form className="space-y-4" onSubmit={handleSignup}>
+        <input name="fullName" type="text" required className="appearance-none relative block w-full px-4 py-3 border border-gray-500 bg-white/20 text-white placeholder-gray-300 focus:outline-none focus:ring-brand-orange focus:border-brand-orange sm:text-sm rounded-md" placeholder="Full Name" value={fullName} onChange={(e) => setFullName(e.target.value)} />
+        <div>
+          <input name="email" type="email" required className={`appearance-none relative block w-full px-4 py-3 border ${emailError ? 'border-red-500' : 'border-gray-500'} bg-white/20 text-white placeholder-gray-300 focus:outline-none focus:ring-brand-orange focus:border-brand-orange sm:text-sm rounded-md`} placeholder="Email Address" value={email} onChange={handleEmailChange} />
+          {emailError && <p className="mt-2 text-xs text-red-400">{emailError}</p>}
+        </div>
+        <div className="relative">
+          <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"><span className="text-white font-medium sm:text-sm">+62</span><span className="text-gray-400 mx-2">|</span></div>
+          <input name="whatsapp" type="tel" required className="appearance-none relative block w-full px-4 py-3 border border-gray-500 bg-white/20 text-white placeholder-gray-300 focus:outline-none focus:ring-brand-orange focus:border-brand-orange sm:text-sm rounded-md pl-16" placeholder="WhatsApp Number" value={whatsapp} onChange={handleWhatsappChange} />
+        </div>
+        <div className="relative">
+          <input name="password" type={showPassword ? 'text' : 'password'} required className="appearance-none relative block w-full px-4 py-3 border border-gray-500 bg-white/20 text-white placeholder-gray-300 focus:outline-none focus:ring-brand-orange focus:border-brand-orange sm:text-sm rounded-md" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} />
+          <button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute inset-y-0 right-0 z-20 flex items-center pr-3 group focus:outline-none">{showPassword ? <FlashlightOffIcon /> : <FlashlightOnIcon />}</button>
+        </div>
+        <div className="grid grid-cols-2 gap-x-4">
+          <PasswordRequirement meets={passwordRequirements.length} label="8+ characters" />
+          <PasswordRequirement meets={passwordRequirements.uppercase} label="1 uppercase" />
+          <PasswordRequirement meets={passwordRequirements.lowercase} label="1 lowercase" />
+          <PasswordRequirement meets={passwordRequirements.number} label="1 number" />
+        </div>
+        <div>
+          <div className="relative">
+            <input name="confirmPassword" type={showConfirmPassword ? 'text' : 'password'} required className={`appearance-none relative block w-full px-4 py-3 border ${passwordMatchError ? 'border-red-500' : 'border-gray-500'} bg-white/20 text-white placeholder-gray-300 focus:outline-none focus:ring-brand-orange focus:border-brand-orange sm:text-sm rounded-md`} placeholder="Confirm Password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} />
+            <button type="button" onClick={() => setShowConfirmPassword(!showConfirmPassword)} className="absolute inset-y-0 right-0 z-20 flex items-center pr-3 group focus:outline-none">{showConfirmPassword ? <FlashlightOffIcon /> : <FlashlightOnIcon />}</button>
+          </div>
+          {passwordMatchError && <p className="mt-2 text-xs text-red-400">{passwordMatchError}</p>}
+        </div>
+        {error && <p className="text-sm text-red-300 text-center">{error}</p>}
+        <div>
+          <button type="submit" disabled={loading || !isFormValid} className="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-bold rounded-md text-white bg-brand-orange hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-orange focus:ring-offset-gray-800 disabled:opacity-60">
+            {loading ? 'Creating Account...' : 'Sign Up'}
+          </button>
+        </div>
+        <p className="text-center text-sm text-gray-300">
+          Already have an account?{' '}
+          <button type="button" onClick={toggleForm} className="font-medium text-brand-orange hover:underline">
+            Sign In
+          </button>
+        </p>
+      </form>
+    </>
+  );
+};
+
+export default SignupForm;
--- a/adventure-rental-app/src/index.css
+++ b/adventure-rental-app/src/index.css
@@ -1,3 +1,19 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+body {
+  @apply bg-login-bg bg-cover bg-center font-sans;
+}
+
+/* Webkit Autofill Override */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  -webkit-text-fill-color: #fff !important;
+  background-color: transparent !important;
+  -webkit-box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0.10) inset !important;
+  transition: background-color 5000s ease-in-out 0s;
+}
+
--- a/adventure-rental-app/tailwind.config.js
+++ b/adventure-rental-app/tailwind.config.js
@@ -5,7 +5,21 @@ export default {
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
-    extend: {},
+    extend: {
+      colors: {
+        'brand-green': '#4A5D23',
+        'brand-brown': '#8B4513',
+        'brand-light': '#F5F5DC',
+        'brand-gray': '#A9A9A9',
+        'brand-orange': '#D97706', // Adventure Orange
+      },
+      fontFamily: {
+        sans: ['Poppins', 'sans-serif'],
+      },
+      backgroundImage: {
+        'login-bg': "url('https://images.unsplash.com/photo-1723067950251-af96d68b9c1e?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')",
+      }
+    },
  },
  plugins: [],
 }