Compare commits
3 Commits
f2f98c74f9
...
18b23119ef
| Author | SHA1 | Date | |
|---|---|---|---|
|
18b23119ef | ||
|
|
c9e7daf801 | ||
|
|
c845ea5827 |
@@ -4,7 +4,12 @@
|
|||||||
Initializing the memory bank for the Webapp Rental Peralatan Camping project.
|
Initializing the memory bank for the Webapp Rental Peralatan Camping project.
|
||||||
|
|
||||||
## Recent changes
|
## 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
|
## 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/`.
|
||||||
@@ -1,14 +1,14 @@
|
|||||||
# Tech: Webapp Rental Peralatan Camping
|
# Tech: Webapp Rental Peralatan Camping
|
||||||
|
|
||||||
## Technologies Used
|
## Technologies Used
|
||||||
- **Frontend:** React.js (with Create React App)
|
- **Frontend:** React.js (with Vite)
|
||||||
- **Backend Orchestration:** n8n
|
- **Backend Orchestration:** n8n
|
||||||
- **Database:** PostgreSQL
|
- **Database:** PostgreSQL
|
||||||
- **Payment Gateway Integration:** Local payment providers (e.g., Midtrans, Xendit, Duitku)
|
- **Payment Gateway Integration:** Local payment providers (e.g., Midtrans, Xendit, Duitku)
|
||||||
- **Email Service Provider:** (To be determined, integrated via n8n)
|
- **Email Service Provider:** (To be determined, integrated via n8n)
|
||||||
|
|
||||||
## Development Setup
|
## 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.
|
- **Backend:** Docker for n8n, PostgreSQL database instance.
|
||||||
- **Version Control:** Git.
|
- **Version Control:** Git.
|
||||||
|
|
||||||
|
|||||||
@@ -3,8 +3,11 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<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" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Vite + React</title>
|
<title>Adventure Rental</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
261
adventure-rental-app/package-lock.json
generated
261
adventure-rental-app/package-lock.json
generated
@@ -8,6 +8,7 @@
|
|||||||
"name": "adventure-rental-app",
|
"name": "adventure-rental-app",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"axios": "^1.11.0",
|
||||||
"react": "^19.1.0",
|
"react": "^19.1.0",
|
||||||
"react-dom": "^19.1.0"
|
"react-dom": "^19.1.0"
|
||||||
},
|
},
|
||||||
@@ -1607,6 +1608,12 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "Python-2.0"
|
"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": {
|
"node_modules/autoprefixer": {
|
||||||
"version": "10.4.21",
|
"version": "10.4.21",
|
||||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
|
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
|
||||||
@@ -1645,6 +1652,17 @@
|
|||||||
"postcss": "^8.1.0"
|
"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": {
|
"node_modules/balanced-match": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
"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": "^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": {
|
"node_modules/callsites": {
|
||||||
"version": "3.1.0",
|
"version": "3.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
|
||||||
@@ -1838,6 +1869,18 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"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": {
|
"node_modules/commander": {
|
||||||
"version": "4.1.1",
|
"version": "4.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
|
||||||
@@ -1922,6 +1965,15 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"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": {
|
"node_modules/didyoumean": {
|
||||||
"version": "1.2.2",
|
"version": "1.2.2",
|
||||||
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
|
||||||
@@ -1936,6 +1988,20 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"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": {
|
"node_modules/eastasianwidth": {
|
||||||
"version": "0.2.0",
|
"version": "0.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
|
||||||
@@ -1957,6 +2023,51 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"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": {
|
"node_modules/esbuild": {
|
||||||
"version": "0.25.8",
|
"version": "0.25.8",
|
||||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.8.tgz",
|
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.8.tgz",
|
||||||
@@ -2340,6 +2451,26 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "ISC"
|
"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": {
|
"node_modules/foreground-child": {
|
||||||
"version": "3.3.1",
|
"version": "3.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
|
||||||
@@ -2357,6 +2488,22 @@
|
|||||||
"url": "https://github.com/sponsors/isaacs"
|
"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": {
|
"node_modules/fraction.js": {
|
||||||
"version": "4.3.7",
|
"version": "4.3.7",
|
||||||
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
|
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
|
||||||
@@ -2390,7 +2537,6 @@
|
|||||||
"version": "1.1.2",
|
"version": "1.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
|
||||||
"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
|
"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"funding": {
|
"funding": {
|
||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
@@ -2406,6 +2552,43 @@
|
|||||||
"node": ">=6.9.0"
|
"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": {
|
"node_modules/glob": {
|
||||||
"version": "10.4.5",
|
"version": "10.4.5",
|
||||||
"resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
|
"resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
|
||||||
@@ -2479,6 +2662,18 @@
|
|||||||
"url": "https://github.com/sponsors/sindresorhus"
|
"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": {
|
"node_modules/has-flag": {
|
||||||
"version": "4.0.0",
|
"version": "4.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
|
||||||
@@ -2489,11 +2684,37 @@
|
|||||||
"node": ">=8"
|
"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": {
|
"node_modules/hasown": {
|
||||||
"version": "2.0.2",
|
"version": "2.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
|
||||||
"integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
|
"integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"function-bind": "^1.1.2"
|
"function-bind": "^1.1.2"
|
||||||
@@ -2788,6 +3009,15 @@
|
|||||||
"yallist": "^3.0.2"
|
"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": {
|
"node_modules/merge2": {
|
||||||
"version": "1.4.1",
|
"version": "1.4.1",
|
||||||
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
|
||||||
@@ -2825,6 +3055,27 @@
|
|||||||
"url": "https://github.com/sponsors/jonschlinkert"
|
"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": {
|
"node_modules/minimatch": {
|
||||||
"version": "3.1.2",
|
"version": "3.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
||||||
@@ -3261,6 +3512,12 @@
|
|||||||
"node": ">= 0.8.0"
|
"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": {
|
"node_modules/punycode": {
|
||||||
"version": "2.3.1",
|
"version": "2.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
|
||||||
|
|||||||
@@ -10,6 +10,7 @@
|
|||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"axios": "^1.11.0",
|
||||||
"react": "^19.1.0",
|
"react": "^19.1.0",
|
||||||
"react-dom": "^19.1.0"
|
"react-dom": "^19.1.0"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
import LoginPage from './LoginPage'
|
import AuthPage from './AuthPage'
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<LoginPage />
|
<AuthPage />
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
42
adventure-rental-app/src/AuthPage.jsx
Normal file
42
adventure-rental-app/src/AuthPage.jsx
Normal file
@@ -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;
|
||||||
117
adventure-rental-app/src/ForgotPasswordForm.jsx
Normal file
117
adventure-rental-app/src/ForgotPasswordForm.jsx
Normal file
@@ -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;
|
||||||
200
adventure-rental-app/src/LoginForm.jsx
Normal file
200
adventure-rental-app/src/LoginForm.jsx
Normal file
@@ -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;
|
||||||
@@ -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;
|
|
||||||
125
adventure-rental-app/src/OtpForm.jsx
Normal file
125
adventure-rental-app/src/OtpForm.jsx
Normal file
@@ -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;
|
||||||
63
adventure-rental-app/src/ResetPasswordForm.jsx
Normal file
63
adventure-rental-app/src/ResetPasswordForm.jsx
Normal file
@@ -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;
|
||||||
158
adventure-rental-app/src/SignupForm.jsx
Normal file
158
adventure-rental-app/src/SignupForm.jsx
Normal file
@@ -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;
|
||||||
@@ -1,3 +1,19 @@
|
|||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -5,7 +5,21 @@ export default {
|
|||||||
"./src/**/*.{js,ts,jsx,tsx}",
|
"./src/**/*.{js,ts,jsx,tsx}",
|
||||||
],
|
],
|
||||||
theme: {
|
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: [],
|
plugins: [],
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user