Compare commits
3
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Hafid Nur
|
3eb86c6ef4 | ||
|
Hafid Nur
|
48d97af044 | ||
|
Hafid Nur
|
36f7d10e7a |
@@ -1,19 +0,0 @@
|
|||||||
#!/usr/bin/env bash
|
|
||||||
set -e
|
|
||||||
if [[ ! -d "/Users/ms/Development/personal/imphnen-frontend-service" ]]; then
|
|
||||||
echo "Cannot find source directory; Did you move it?"
|
|
||||||
echo "(Looking for "/Users/ms/Development/personal/imphnen-frontend-service")"
|
|
||||||
echo 'Cannot force reload with this script - use "direnv reload" manually and then try again'
|
|
||||||
exit 1
|
|
||||||
fi
|
|
||||||
|
|
||||||
# rebuild the cache forcefully
|
|
||||||
_nix_direnv_force_reload=1 direnv exec "/Users/ms/Development/personal/imphnen-frontend-service" true
|
|
||||||
|
|
||||||
# Update the mtime for .envrc.
|
|
||||||
# This will cause direnv to reload again - but without re-building.
|
|
||||||
touch "/Users/ms/Development/personal/imphnen-frontend-service/.envrc"
|
|
||||||
|
|
||||||
# Also update the timestamp of whatever profile_rc we have.
|
|
||||||
# This makes sure that we know we are up to date.
|
|
||||||
touch -r "/Users/ms/Development/personal/imphnen-frontend-service/.envrc" "/Users/ms/Development/personal/imphnen-frontend-service/.direnv"/*.rc
|
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
|
||||||
|
VITE_SUPABASE_URL=https://your-project-id.supabase.co
|
||||||
|
VITE_SUPABASE_ANON_KEY=your-anon-key-here
|
||||||
@@ -1,40 +0,0 @@
|
|||||||
name: Nix Build & Cache
|
|
||||||
|
|
||||||
on:
|
|
||||||
push:
|
|
||||||
branches: ['develop']
|
|
||||||
pull_request:
|
|
||||||
branches: ['develop']
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
build:
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
steps:
|
|
||||||
- uses: actions/checkout@v4
|
|
||||||
|
|
||||||
- name: Install Nix
|
|
||||||
uses: DeterminateSystems/nix-installer-action@main
|
|
||||||
|
|
||||||
- name: Setup Cachix
|
|
||||||
uses: cachix/cachix-action@v15
|
|
||||||
with:
|
|
||||||
name: msdqn
|
|
||||||
authToken: '${{ secrets.CACHIX_AUTH_TOKEN }}'
|
|
||||||
|
|
||||||
- name: Build all packages
|
|
||||||
run: |
|
|
||||||
nix build .#landing -o result-landing
|
|
||||||
nix build .#backoffice -o result-backoffice
|
|
||||||
nix build .#gacha -o result-gacha
|
|
||||||
nix build .#dimentorin -o result-dimentorin
|
|
||||||
nix build .#hackathon -o result-hackathon
|
|
||||||
nix build .#infra -o result-infra
|
|
||||||
|
|
||||||
- name: Show build outputs
|
|
||||||
run: |
|
|
||||||
echo "Landing: $(readlink result-landing)"
|
|
||||||
echo "Backoffice: $(readlink result-backoffice)"
|
|
||||||
echo "Gacha: $(readlink result-gacha)"
|
|
||||||
echo "Dimentorin: $(readlink result-dimentorin)"
|
|
||||||
echo "Hackathon: $(readlink result-hackathon)"
|
|
||||||
echo "Infra: $(readlink result-infra)"
|
|
||||||
@@ -10,7 +10,6 @@ This repository is a **monorepo** for all frontend services of IMPHNEN. The mono
|
|||||||
2. **Backoffice** - Application for <a href="https://gacha.imphnen.dev/" target="_blank">Internal Management Website</a>.
|
2. **Backoffice** - Application for <a href="https://gacha.imphnen.dev/" target="_blank">Internal Management Website</a>.
|
||||||
3. **Dimentorin** - Application for <a href="https://dimentorin.imphnen.dev/" target="_blank">Mentoring Service</a>.
|
3. **Dimentorin** - Application for <a href="https://dimentorin.imphnen.dev/" target="_blank">Mentoring Service</a>.
|
||||||
4. **Landing Page** - Application for <a href="https://imphnen.dev/" target="_blank">Landing Page</a>.
|
4. **Landing Page** - Application for <a href="https://imphnen.dev/" target="_blank">Landing Page</a>.
|
||||||
5. **QR Campaign** - Application for QR Campaign Management.
|
|
||||||
|
|
||||||
## How to install
|
## How to install
|
||||||
|
|
||||||
@@ -55,10 +54,6 @@ Use the following commands to run in development mode:
|
|||||||
```sh
|
```sh
|
||||||
npm run landing:dev
|
npm run landing:dev
|
||||||
```
|
```
|
||||||
- **QR Campaign**:
|
|
||||||
```sh
|
|
||||||
npm run qrcampaign:dev
|
|
||||||
```
|
|
||||||
|
|
||||||
### Build
|
### Build
|
||||||
|
|
||||||
@@ -80,10 +75,6 @@ Use the following commands to build the applications:
|
|||||||
```sh
|
```sh
|
||||||
npm run landing:build
|
npm run landing:build
|
||||||
```
|
```
|
||||||
- **QR Campaign**:
|
|
||||||
```sh
|
|
||||||
npm run qrcampaign:build
|
|
||||||
```
|
|
||||||
|
|
||||||
### Production
|
### Production
|
||||||
|
|
||||||
@@ -105,10 +96,6 @@ Use the following commands to run the applications in production mode:
|
|||||||
```sh
|
```sh
|
||||||
npm run landing:prod
|
npm run landing:prod
|
||||||
```
|
```
|
||||||
- **QR Campaign**:
|
|
||||||
```sh
|
|
||||||
npm run qrcampaign:prod
|
|
||||||
```
|
|
||||||
|
|
||||||
### Storybook
|
### Storybook
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,236 @@
|
|||||||
|
{
|
||||||
|
"message": "Success",
|
||||||
|
"data": [
|
||||||
|
{
|
||||||
|
"id": "afbead4b-2ffa-435e-ae7b-91f26e111fc6",
|
||||||
|
"team_id": "ab436f6e-027f-4831-873b-474345273491",
|
||||||
|
"team": {
|
||||||
|
"id": "ab436f6e-027f-4831-873b-474345273491",
|
||||||
|
"name": "nama timnya apa ya @All",
|
||||||
|
"description": "pikri carry",
|
||||||
|
"city": "Kota Depok",
|
||||||
|
"visibility": "public",
|
||||||
|
"logo": null,
|
||||||
|
"banner": "https://voymsjeqmvwrryetfldy.supabase.co/storage/v1/object/public/hackathon-uploads/teams/9a6dc902-c91b-4276-89cf-31e821531158-1764517227821.png",
|
||||||
|
"leader_id": "9a6dc902-c91b-4276-89cf-31e821531158",
|
||||||
|
"created_at": "2025-11-30T15:40:29.865564Z",
|
||||||
|
"updated_at": "2025-11-30T15:48:52.520850Z"
|
||||||
|
},
|
||||||
|
"rank": 1,
|
||||||
|
"prize": "Rp6.000.000",
|
||||||
|
"announced_at": "2025-12-15T16:41:01.931757Z",
|
||||||
|
"created_at": "2025-12-15T16:41:01.931757Z",
|
||||||
|
"updated_at": "2025-12-15T16:41:01.931757Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "8e591dc6-3cff-4019-bdfc-5e42ea081208",
|
||||||
|
"team_id": "06cbf0f4-cdad-40d0-b0d0-1fa8a3d50968",
|
||||||
|
"team": {
|
||||||
|
"id": "06cbf0f4-cdad-40d0-b0d0-1fa8a3d50968",
|
||||||
|
"name": "TheLastOfUs",
|
||||||
|
"description": "We truly believe in Meaning First — designing innovation, powered by technology.",
|
||||||
|
"city": "Bandung",
|
||||||
|
"visibility": "private",
|
||||||
|
"logo": "https://voymsjeqmvwrryetfldy.supabase.co/storage/v1/object/public/hackathon-uploads/teams/a32c0e81-1fbd-4bec-8e91-4cd6d10f553b-1764074851150.png",
|
||||||
|
"banner": "https://voymsjeqmvwrryetfldy.supabase.co/storage/v1/object/public/hackathon-uploads/teams/a32c0e81-1fbd-4bec-8e91-4cd6d10f553b-1764074852181.png",
|
||||||
|
"leader_id": "a32c0e81-1fbd-4bec-8e91-4cd6d10f553b",
|
||||||
|
"created_at": "2025-11-25T12:47:33.040330Z",
|
||||||
|
"updated_at": "2025-11-25T12:47:33.040330Z"
|
||||||
|
},
|
||||||
|
"rank": 2,
|
||||||
|
"prize": "Rp4.000.000",
|
||||||
|
"announced_at": "2025-12-15T16:41:32.534295Z",
|
||||||
|
"created_at": "2025-12-15T16:41:32.534295Z",
|
||||||
|
"updated_at": "2025-12-15T16:41:32.534295Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "5ca29971-5726-40dd-872c-853a6bfa03d9",
|
||||||
|
"team_id": "9d9ed9db-3523-47ae-a387-66c36dbec983",
|
||||||
|
"team": {
|
||||||
|
"id": "9d9ed9db-3523-47ae-a387-66c36dbec983",
|
||||||
|
"name": "Pecinta Capybara",
|
||||||
|
"description": "Ingin ikut meramaikan suasana.",
|
||||||
|
"city": "Tangerang",
|
||||||
|
"visibility": "public",
|
||||||
|
"logo": "https://voymsjeqmvwrryetfldy.supabase.co/storage/v1/object/public/hackathon-uploads/teams/648f6d3d-a92e-49cc-805e-2f600de87074-1764205746897.jpg",
|
||||||
|
"banner": "https://voymsjeqmvwrryetfldy.supabase.co/storage/v1/object/public/hackathon-uploads/teams/648f6d3d-a92e-49cc-805e-2f600de87074-1764205747479.png",
|
||||||
|
"leader_id": "648f6d3d-a92e-49cc-805e-2f600de87074",
|
||||||
|
"created_at": "2025-11-27T01:09:32.787150Z",
|
||||||
|
"updated_at": "2025-11-29T15:30:43.334609Z"
|
||||||
|
},
|
||||||
|
"rank": 3,
|
||||||
|
"prize": "Rp2.500.000",
|
||||||
|
"announced_at": "2025-12-15T16:41:59.091294Z",
|
||||||
|
"created_at": "2025-12-15T16:41:59.091294Z",
|
||||||
|
"updated_at": "2025-12-15T16:41:59.091294Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "e9f82de6-f5d0-43c1-a0bd-4687f2e4ed5e",
|
||||||
|
"team_id": "95f782f4-433f-489d-a06d-eed89ca83beb",
|
||||||
|
"team": {
|
||||||
|
"id": "95f782f4-433f-489d-a06d-eed89ca83beb",
|
||||||
|
"name": "Savora",
|
||||||
|
"description": "a complete food ordering application for Indonesian SMEs (UMKM)",
|
||||||
|
"city": "Bandung",
|
||||||
|
"visibility": "private",
|
||||||
|
"logo": "https://voymsjeqmvwrryetfldy.supabase.co/storage/v1/object/public/hackathon-uploads/teams/748de15d-374a-4756-89e2-75754e90542f-1764071952995.png",
|
||||||
|
"banner": "https://voymsjeqmvwrryetfldy.supabase.co/storage/v1/object/public/hackathon-uploads/teams/748de15d-374a-4756-89e2-75754e90542f-1764071953753.png",
|
||||||
|
"leader_id": "748de15d-374a-4756-89e2-75754e90542f",
|
||||||
|
"created_at": "2025-11-25T11:57:52.098043Z",
|
||||||
|
"updated_at": "2025-11-25T11:59:14.508877Z"
|
||||||
|
},
|
||||||
|
"rank": 4,
|
||||||
|
"prize": "Rp500.000",
|
||||||
|
"announced_at": "2025-12-15T16:42:39.361469Z",
|
||||||
|
"created_at": "2025-12-15T16:42:39.361469Z",
|
||||||
|
"updated_at": "2025-12-15T16:42:39.361469Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "ed93e080-0913-4c70-b69d-fce9bc0cdda7",
|
||||||
|
"team_id": "f9747574-8c01-4c3e-b20a-7ac1a70b947a",
|
||||||
|
"team": {
|
||||||
|
"id": "f9747574-8c01-4c3e-b20a-7ac1a70b947a",
|
||||||
|
"name": "AMBANET Corporation 🙀😸🤓",
|
||||||
|
"description": "Bersiaplah ambanet bakal mengguncang seluruh team hackathon ygy",
|
||||||
|
"city": "Kota Padang",
|
||||||
|
"visibility": "public",
|
||||||
|
"logo": "https://voymsjeqmvwrryetfldy.supabase.co/storage/v1/object/public/hackathon-uploads/teams/a5ea628a-24d9-4754-b461-3eda53da53bf-1764351234491.png",
|
||||||
|
"banner": "https://voymsjeqmvwrryetfldy.supabase.co/storage/v1/object/public/hackathon-uploads/teams/a5ea628a-24d9-4754-b461-3eda53da53bf-1764219109981.gif",
|
||||||
|
"leader_id": "a5ea628a-24d9-4754-b461-3eda53da53bf",
|
||||||
|
"created_at": "2025-11-27T04:48:53.080955Z",
|
||||||
|
"updated_at": "2025-11-29T13:31:51.276246Z"
|
||||||
|
},
|
||||||
|
"rank": 5,
|
||||||
|
"prize": "Rp500.000",
|
||||||
|
"announced_at": "2025-12-15T16:42:57.065225Z",
|
||||||
|
"created_at": "2025-12-15T16:42:57.065225Z",
|
||||||
|
"updated_at": "2025-12-15T16:42:57.065225Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "7ed55b12-d585-419d-bae2-1a362a57798e",
|
||||||
|
"team_id": "4f3e2e85-3f3f-4880-9104-b3f66bb1c9d9",
|
||||||
|
"team": {
|
||||||
|
"id": "4f3e2e85-3f3f-4880-9104-b3f66bb1c9d9",
|
||||||
|
"name": "Pemuja Deadline Anti Refund",
|
||||||
|
"description": "Diusahakan banyak deadline tapi kg refund ~ \"Angga Kentod\"",
|
||||||
|
"city": "Kota Bandung",
|
||||||
|
"visibility": "public",
|
||||||
|
"logo": "https://voymsjeqmvwrryetfldy.supabase.co/storage/v1/object/public/hackathon-uploads/teams/6cf045e2-d853-4480-91b8-244fb0b76b7f-1764332887921.jpg",
|
||||||
|
"banner": null,
|
||||||
|
"leader_id": "6cf045e2-d853-4480-91b8-244fb0b76b7f",
|
||||||
|
"created_at": "2025-11-27T05:02:35.128625Z",
|
||||||
|
"updated_at": "2025-11-28T12:28:09.697222Z"
|
||||||
|
},
|
||||||
|
"rank": 6,
|
||||||
|
"prize": "Rp200.000",
|
||||||
|
"announced_at": "2025-12-15T16:43:09.471633Z",
|
||||||
|
"created_at": "2025-12-15T16:43:09.471633Z",
|
||||||
|
"updated_at": "2025-12-15T16:43:09.471633Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "0b3a0b5c-2038-4d09-85a7-ae4709702951",
|
||||||
|
"team_id": "9d8cd404-8e69-4efd-a125-fc0863d7afc7",
|
||||||
|
"team": {
|
||||||
|
"id": "9d8cd404-8e69-4efd-a125-fc0863d7afc7",
|
||||||
|
"name": "Aku nak meletup",
|
||||||
|
"description": "masih pemula bg",
|
||||||
|
"city": "Boyolali",
|
||||||
|
"visibility": "public",
|
||||||
|
"logo": "https://voymsjeqmvwrryetfldy.supabase.co/storage/v1/object/public/hackathon-uploads/teams/c79d4b2b-e63f-4187-a8cd-520fde333ab3-1764211224866.jpg",
|
||||||
|
"banner": null,
|
||||||
|
"leader_id": "c79d4b2b-e63f-4187-a8cd-520fde333ab3",
|
||||||
|
"created_at": "2025-11-27T02:40:25.376372Z",
|
||||||
|
"updated_at": "2025-11-27T02:40:25.376372Z"
|
||||||
|
},
|
||||||
|
"rank": 7,
|
||||||
|
"prize": "Rp200.000",
|
||||||
|
"announced_at": "2025-12-15T16:43:22.467439Z",
|
||||||
|
"created_at": "2025-12-15T16:43:22.467439Z",
|
||||||
|
"updated_at": "2025-12-15T16:43:22.467439Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "bb0706b9-b723-4a49-b0b0-3be9af70225b",
|
||||||
|
"team_id": "dd6c62dd-2632-4156-9da5-8ff9a3560f06",
|
||||||
|
"team": {
|
||||||
|
"id": "dd6c62dd-2632-4156-9da5-8ff9a3560f06",
|
||||||
|
"name": "Iseng Hackathon",
|
||||||
|
"description": "HME ITB Oke Champ",
|
||||||
|
"city": "Kota Bandung",
|
||||||
|
"visibility": "public",
|
||||||
|
"logo": null,
|
||||||
|
"banner": null,
|
||||||
|
"leader_id": "d1e4e3bf-098f-453e-bf00-612685d311d9",
|
||||||
|
"created_at": "2025-11-30T03:58:52.429673Z",
|
||||||
|
"updated_at": "2025-11-30T03:58:52.429673Z"
|
||||||
|
},
|
||||||
|
"rank": 8,
|
||||||
|
"prize": "Rp200.000",
|
||||||
|
"announced_at": "2025-12-15T16:43:34.191207Z",
|
||||||
|
"created_at": "2025-12-15T16:43:34.191207Z",
|
||||||
|
"updated_at": "2025-12-15T16:43:34.191207Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "4a3e807c-2cf2-4557-a6af-99fcc726cebb",
|
||||||
|
"team_id": "52316c25-5697-4436-bfc2-02baef8ca956",
|
||||||
|
"team": {
|
||||||
|
"id": "52316c25-5697-4436-bfc2-02baef8ca956",
|
||||||
|
"name": "Gorengan 3 Ronde",
|
||||||
|
"description": "Jam 10 izin turun",
|
||||||
|
"city": "Kota Medan",
|
||||||
|
"visibility": "public",
|
||||||
|
"logo": "https://voymsjeqmvwrryetfldy.supabase.co/storage/v1/object/public/hackathon-uploads/teams/e7bec056-7f63-4642-a763-afa39c3c340e-1764509780084.png",
|
||||||
|
"banner": "https://voymsjeqmvwrryetfldy.supabase.co/storage/v1/object/public/hackathon-uploads/teams/e7bec056-7f63-4642-a763-afa39c3c340e-1764509810717.png",
|
||||||
|
"leader_id": "e7bec056-7f63-4642-a763-afa39c3c340e",
|
||||||
|
"created_at": "2025-11-30T13:36:52.344019Z",
|
||||||
|
"updated_at": "2025-11-30T13:36:52.344019Z"
|
||||||
|
},
|
||||||
|
"rank": 9,
|
||||||
|
"prize": "Rp200.000",
|
||||||
|
"announced_at": "2025-12-15T16:43:51.988908Z",
|
||||||
|
"created_at": "2025-12-15T16:43:51.988908Z",
|
||||||
|
"updated_at": "2025-12-15T16:43:51.988908Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "e18827dd-839d-4e54-9126-c1faebce2c2c",
|
||||||
|
"team_id": "d2b2fb99-e934-405c-836e-711352e0f8a0",
|
||||||
|
"team": {
|
||||||
|
"id": "d2b2fb99-e934-405c-836e-711352e0f8a0",
|
||||||
|
"name": "Spark Developer",
|
||||||
|
"description": "Yang penting yakin untuk menang.",
|
||||||
|
"city": "Kota Batam",
|
||||||
|
"visibility": "public",
|
||||||
|
"logo": "https://voymsjeqmvwrryetfldy.supabase.co/storage/v1/object/public/hackathon-uploads/teams/087921fb-2d17-423b-9628-73de2176360f-1764486044138.png",
|
||||||
|
"banner": "https://voymsjeqmvwrryetfldy.supabase.co/storage/v1/object/public/hackathon-uploads/teams/087921fb-2d17-423b-9628-73de2176360f-1764486059581.jpg",
|
||||||
|
"leader_id": "087921fb-2d17-423b-9628-73de2176360f",
|
||||||
|
"created_at": "2025-11-29T04:49:54.266394Z",
|
||||||
|
"updated_at": "2025-11-30T07:01:02.316185Z"
|
||||||
|
},
|
||||||
|
"rank": 10,
|
||||||
|
"prize": "Rp200.000",
|
||||||
|
"announced_at": "2025-12-15T16:44:02.680036Z",
|
||||||
|
"created_at": "2025-12-15T16:44:02.680036Z",
|
||||||
|
"updated_at": "2025-12-15T16:44:02.680036Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "a0ed8e58-f8e3-491c-8c03-20e82090d6f8",
|
||||||
|
"team_id": "d30d7d03-dce7-4220-9e7f-a537a45c54e0",
|
||||||
|
"team": {
|
||||||
|
"id": "d30d7d03-dce7-4220-9e7f-a537a45c54e0",
|
||||||
|
"name": "Eye of Horus",
|
||||||
|
"description": "Eye of horus",
|
||||||
|
"city": "Garut",
|
||||||
|
"visibility": "public",
|
||||||
|
"logo": "https://voymsjeqmvwrryetfldy.supabase.co/storage/v1/object/public/hackathon-uploads/teams/96dc1c2b-a1ef-441a-93d5-da2ccad37d81-1764145807852.png",
|
||||||
|
"banner": "https://voymsjeqmvwrryetfldy.supabase.co/storage/v1/object/public/hackathon-uploads/teams/96dc1c2b-a1ef-441a-93d5-da2ccad37d81-1764145810329.jpeg",
|
||||||
|
"leader_id": "96dc1c2b-a1ef-441a-93d5-da2ccad37d81",
|
||||||
|
"created_at": "2025-11-26T08:30:10.385714Z",
|
||||||
|
"updated_at": "2025-11-26T09:35:12.386986Z"
|
||||||
|
},
|
||||||
|
"rank": 11,
|
||||||
|
"prize": "hadiah",
|
||||||
|
"announced_at": "2025-12-16T04:19:09.502015Z",
|
||||||
|
"created_at": "2025-12-16T04:19:09.502015Z",
|
||||||
|
"updated_at": "2025-12-16T04:19:09.502015Z"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -7,7 +7,6 @@ import {
|
|||||||
useAuthStore,
|
useAuthStore,
|
||||||
useMyTeams,
|
useMyTeams,
|
||||||
useTeamById,
|
useTeamById,
|
||||||
useTeamSubmission,
|
|
||||||
useWinners,
|
useWinners,
|
||||||
} from '@imphnen-frontend-service/service';
|
} from '@imphnen-frontend-service/service';
|
||||||
import QRCode from 'qrcode';
|
import QRCode from 'qrcode';
|
||||||
@@ -38,20 +37,8 @@ const formatOrdinalRank = (rank: number): string => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Keep the template size aligned with the SVG native size (842x595) using an integer multiplier.
|
const CERT_WIDTH = 1000;
|
||||||
// This reduces sub-pixel scaling artifacts (blur) on thin lines when rasterizing with html2canvas.
|
const CERT_HEIGHT = (CERT_WIDTH * 595) / 842; // matches blank_winner_cert.svg aspect ratio
|
||||||
const CERT_WIDTH = 842 * 2;
|
|
||||||
const CERT_HEIGHT = 595 * 2;
|
|
||||||
|
|
||||||
// Balance between output sharpness and file size.
|
|
||||||
// Output resolution will be (CERT_WIDTH * EXPORT_SCALE) x (CERT_HEIGHT * EXPORT_SCALE).
|
|
||||||
const EXPORT_SCALE = 2;
|
|
||||||
|
|
||||||
// The original layout was tuned around a ~1000px-wide template.
|
|
||||||
// We keep the same visual proportions by scaling fixed pixel values.
|
|
||||||
const LAYOUT_BASE_WIDTH = 1000;
|
|
||||||
const LAYOUT_SCALE = CERT_WIDTH / LAYOUT_BASE_WIDTH;
|
|
||||||
const s = (px: number) => Math.round(px * LAYOUT_SCALE);
|
|
||||||
|
|
||||||
const CertificateWinnerPage: FC = (): ReactElement => {
|
const CertificateWinnerPage: FC = (): ReactElement => {
|
||||||
const { certId } = useParams<{ certId: string }>();
|
const { certId } = useParams<{ certId: string }>();
|
||||||
@@ -100,12 +87,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
|
|||||||
!!decodedTeamId
|
!!decodedTeamId
|
||||||
);
|
);
|
||||||
|
|
||||||
const { data: submissionData, isLoading: isLoadingSubmission } =
|
|
||||||
useTeamSubmission(decodedTeamId, !!decodedTeamId);
|
|
||||||
|
|
||||||
const team = teamData?.data;
|
const team = teamData?.data;
|
||||||
const submission = submissionData?.data;
|
|
||||||
const submissionName = submission?.project_name || '(Submission unavailable)';
|
|
||||||
|
|
||||||
const memberNames = useMemo(() => {
|
const memberNames = useMemo(() => {
|
||||||
const members = team?.members || [];
|
const members = team?.members || [];
|
||||||
@@ -130,7 +112,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
|
|||||||
const certificateUrl = `${window.location.origin}/certificate/winner/${encodedCertId}`;
|
const certificateUrl = `${window.location.origin}/certificate/winner/${encodedCertId}`;
|
||||||
|
|
||||||
QRCode.toDataURL(certificateUrl, {
|
QRCode.toDataURL(certificateUrl, {
|
||||||
width: s(200),
|
width: 200,
|
||||||
margin: 1,
|
margin: 1,
|
||||||
color: {
|
color: {
|
||||||
dark: '#000000',
|
dark: '#000000',
|
||||||
@@ -148,15 +130,13 @@ const CertificateWinnerPage: FC = (): ReactElement => {
|
|||||||
if (!team?.name) return;
|
if (!team?.name) return;
|
||||||
if (!qrCodeUrl) return;
|
if (!qrCodeUrl) return;
|
||||||
if (!winnerEntry?.rank) return;
|
if (!winnerEntry?.rank) return;
|
||||||
if (isLoadingSubmission) return;
|
|
||||||
|
|
||||||
setIsGenerating(true);
|
setIsGenerating(true);
|
||||||
try {
|
try {
|
||||||
setShowTemplate(true);
|
|
||||||
await new Promise((resolve) => setTimeout(resolve, 1500));
|
await new Promise((resolve) => setTimeout(resolve, 1500));
|
||||||
|
|
||||||
const canvas = await html2canvas(certificateRef.current, {
|
const canvas = await html2canvas(certificateRef.current, {
|
||||||
scale: EXPORT_SCALE,
|
scale: 4,
|
||||||
useCORS: true,
|
useCORS: true,
|
||||||
backgroundColor: '#ffffff',
|
backgroundColor: '#ffffff',
|
||||||
logging: false,
|
logging: false,
|
||||||
@@ -178,14 +158,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
generateCertificate();
|
generateCertificate();
|
||||||
}, [
|
}, [team?.name, memberNames, qrCodeUrl, winnerEntry?.rank]);
|
||||||
team?.name,
|
|
||||||
memberNames,
|
|
||||||
qrCodeUrl,
|
|
||||||
winnerEntry?.rank,
|
|
||||||
isLoadingSubmission,
|
|
||||||
submissionName,
|
|
||||||
]);
|
|
||||||
|
|
||||||
const handleDownloadCertificate = () => {
|
const handleDownloadCertificate = () => {
|
||||||
if (!certificateImage) return;
|
if (!certificateImage) return;
|
||||||
@@ -350,8 +323,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
|
|||||||
style={{
|
style={{
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
backgroundImage: 'url(/images/blank_winner_cert.svg)',
|
backgroundImage: 'url(/images/blank_winner_cert.svg)',
|
||||||
backgroundSize: '100% 100%',
|
backgroundSize: 'cover',
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
backgroundPosition: 'center',
|
backgroundPosition: 'center',
|
||||||
width: `${CERT_WIDTH}px`,
|
width: `${CERT_WIDTH}px`,
|
||||||
height: `${CERT_HEIGHT}px`,
|
height: `${CERT_HEIGHT}px`,
|
||||||
@@ -367,7 +339,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
|
|||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
top: '35%',
|
top: '37%',
|
||||||
left: '3.5%',
|
left: '3.5%',
|
||||||
width: '55%',
|
width: '55%',
|
||||||
}}
|
}}
|
||||||
@@ -378,7 +350,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
|
|||||||
fontWeight: 'bold',
|
fontWeight: 'bold',
|
||||||
color: '#59bef5',
|
color: '#59bef5',
|
||||||
textAlign: 'left',
|
textAlign: 'left',
|
||||||
fontSize: `${s(28)}px`,
|
fontSize: '28px',
|
||||||
lineHeight: '1.2',
|
lineHeight: '1.2',
|
||||||
wordBreak: 'break-word',
|
wordBreak: 'break-word',
|
||||||
margin: 0,
|
margin: 0,
|
||||||
@@ -392,7 +364,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
|
|||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
top: '40.5%',
|
top: '42.5%',
|
||||||
left: '3.5%',
|
left: '3.5%',
|
||||||
width: '55%',
|
width: '55%',
|
||||||
}}
|
}}
|
||||||
@@ -402,7 +374,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
|
|||||||
style={{
|
style={{
|
||||||
margin: 0,
|
margin: 0,
|
||||||
fontFamily: 'Poppins, sans-serif',
|
fontFamily: 'Poppins, sans-serif',
|
||||||
fontSize: `${s(18)}px`,
|
fontSize: '18px',
|
||||||
lineHeight: '1.35',
|
lineHeight: '1.35',
|
||||||
color: '#59bef5',
|
color: '#59bef5',
|
||||||
}}
|
}}
|
||||||
@@ -420,7 +392,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
|
|||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
top: '60%',
|
top: '62%',
|
||||||
left: '3.5%',
|
left: '3.5%',
|
||||||
width: '60%',
|
width: '60%',
|
||||||
}}
|
}}
|
||||||
@@ -429,7 +401,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
|
|||||||
style={{
|
style={{
|
||||||
margin: 0,
|
margin: 0,
|
||||||
fontFamily: 'Poppins, sans-serif',
|
fontFamily: 'Poppins, sans-serif',
|
||||||
fontSize: `${s(18)}px`,
|
fontSize: '18px',
|
||||||
lineHeight: '1.35',
|
lineHeight: '1.35',
|
||||||
color: '#6B6B6B',
|
color: '#6B6B6B',
|
||||||
}}
|
}}
|
||||||
@@ -438,10 +410,6 @@ const CertificateWinnerPage: FC = (): ReactElement => {
|
|||||||
<br />
|
<br />
|
||||||
<b>JUARA {winnerEntry.rank}</b> pada Hackathon IMPHNEN x
|
<b>JUARA {winnerEntry.rank}</b> pada Hackathon IMPHNEN x
|
||||||
Kolosal.ai
|
Kolosal.ai
|
||||||
<br />
|
|
||||||
<span>
|
|
||||||
dengan nama project: <b>{submissionName}</b>
|
|
||||||
</span>
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -452,7 +420,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
|
|||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
top: '8%',
|
top: '8%',
|
||||||
right: '8.5%',
|
right: '8.5%',
|
||||||
width: `${s(190)}px`,
|
width: '190px',
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
}}
|
}}
|
||||||
@@ -462,12 +430,12 @@ const CertificateWinnerPage: FC = (): ReactElement => {
|
|||||||
display: 'inline-flex',
|
display: 'inline-flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
padding: `${s(6)}px ${s(16)}px`,
|
padding: '6px 16px',
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
fontFamily: 'Poppins, sans-serif',
|
fontFamily: 'Poppins, sans-serif',
|
||||||
fontWeight: 700,
|
fontWeight: 700,
|
||||||
color: '#78350F',
|
color: '#78350F',
|
||||||
fontSize: `${s(24)}px`,
|
fontSize: '24px',
|
||||||
lineHeight: '1',
|
lineHeight: '1',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
@@ -482,8 +450,8 @@ const CertificateWinnerPage: FC = (): ReactElement => {
|
|||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
top: '33%',
|
top: '33%',
|
||||||
right: '9.3%',
|
right: '9.3%',
|
||||||
width: `${s(190)}px`,
|
width: '190px',
|
||||||
height: `${s(190)}px`,
|
height: '190px',
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
@@ -493,11 +461,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
|
|||||||
<img
|
<img
|
||||||
src={qrCodeUrl}
|
src={qrCodeUrl}
|
||||||
alt="Certificate QR Code"
|
alt="Certificate QR Code"
|
||||||
style={{
|
style={{ width: '190px', height: '190px', display: 'block' }}
|
||||||
width: `${s(190)}px`,
|
|
||||||
height: `${s(190)}px`,
|
|
||||||
display: 'block',
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,3 +0,0 @@
|
|||||||
import baseConfig from '../../eslint.config.mjs';
|
|
||||||
|
|
||||||
export default [...baseConfig];
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<title>IMPHNEN Infrastructure</title>
|
|
||||||
<base href="/" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
||||||
<link rel="icon" type="image/x-icon" href="/logos/simple.svg" />
|
|
||||||
<link rel="stylesheet" href="/src/index.css" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="root"></div>
|
|
||||||
<script type="module" src="/src/main.tsx"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
import { join } from 'path';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
plugins: {
|
|
||||||
'@tailwindcss/postcss': {
|
|
||||||
base: join(import.meta.dirname, '../../'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "infra",
|
|
||||||
"$schema": "../../node_modules/nx/schemas/project-schema.json",
|
|
||||||
"sourceRoot": "apps/infra/src",
|
|
||||||
"projectType": "application",
|
|
||||||
"tags": [],
|
|
||||||
"targets": {}
|
|
||||||
}
|
|
||||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 351 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 511 KiB |
@@ -1,235 +0,0 @@
|
|||||||
const apps = [
|
|
||||||
{ name: 'Landing', domain: 'imphnen.dev', type: 'Next.js', color: 'blue' },
|
|
||||||
{ name: 'Gacha', domain: 'gacha.imphnen.dev', type: 'Vite', color: 'green' },
|
|
||||||
{ name: 'Backoffice', domain: 'backoffice.imphnen.dev', type: 'Vite', color: 'green' },
|
|
||||||
{ name: 'Dimentorin', domain: 'dimentorin.imphnen.dev', type: 'Vite', color: 'green' },
|
|
||||||
{ name: 'Hackathon', domain: 'hackathon.imphnen.dev', type: 'Vite', color: 'green' },
|
|
||||||
{ name: 'Infra', domain: 'infra.imphnen.dev', type: 'Vite', color: 'green' },
|
|
||||||
];
|
|
||||||
|
|
||||||
const techStack = [
|
|
||||||
{ category: 'OS', items: ['NixOS 24.11'] },
|
|
||||||
{ category: 'Web Server', items: ['Nginx'] },
|
|
||||||
{ category: 'SSL', items: ['Let\'s Encrypt (ACME)'] },
|
|
||||||
{ category: 'Build', items: ['Nix Flakes', 'Nx Monorepo'] },
|
|
||||||
{ category: 'Frontend', items: ['React', 'Next.js', 'Vite', 'TailwindCSS'] },
|
|
||||||
{ category: 'Secrets', items: ['sops-nix'] },
|
|
||||||
];
|
|
||||||
|
|
||||||
export default function App() {
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen bg-[#0a0a0a]">
|
|
||||||
{/* Header */}
|
|
||||||
<header className="border-b border-zinc-800 bg-[#0a0a0a]/80 backdrop-blur-sm sticky top-0 z-50">
|
|
||||||
<div className="container mx-auto px-6 py-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center font-bold">
|
|
||||||
I
|
|
||||||
</div>
|
|
||||||
<span className="text-xl font-semibold">IMPHNEN Infrastructure</span>
|
|
||||||
</div>
|
|
||||||
<a
|
|
||||||
href="https://github.com/IMPHNEN"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-zinc-400 hover:text-white transition-colors"
|
|
||||||
>
|
|
||||||
GitHub
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main className="container mx-auto px-6 py-12">
|
|
||||||
{/* Hero */}
|
|
||||||
<section className="text-center mb-16">
|
|
||||||
<h1 className="text-4xl md:text-5xl font-bold mb-4">
|
|
||||||
Infrastructure Overview
|
|
||||||
</h1>
|
|
||||||
<p className="text-zinc-400 text-lg max-w-2xl mx-auto">
|
|
||||||
Declarative NixOS infrastructure powering IMPHNEN's frontend applications
|
|
||||||
on Hetzner Cloud.
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Architecture Diagram */}
|
|
||||||
<section className="mb-16">
|
|
||||||
<h2 className="text-2xl font-semibold mb-6">Architecture</h2>
|
|
||||||
<div className="card bg-[#141414] border-zinc-800 p-8">
|
|
||||||
<div className="flex flex-col items-center gap-6">
|
|
||||||
{/* Internet */}
|
|
||||||
<div className="flex items-center gap-2 text-zinc-400">
|
|
||||||
<span className="text-2xl">🌐</span>
|
|
||||||
<span>Internet</span>
|
|
||||||
</div>
|
|
||||||
<div className="w-px h-8 bg-zinc-700" />
|
|
||||||
|
|
||||||
{/* Cloudflare */}
|
|
||||||
<div className="card bg-orange-500/10 border-orange-500/30 px-6 py-3">
|
|
||||||
<span className="badge badge-orange">Cloudflare</span>
|
|
||||||
<p className="text-sm text-zinc-400 mt-1">DNS + CDN + DDoS Protection</p>
|
|
||||||
</div>
|
|
||||||
<div className="w-px h-8 bg-zinc-700" />
|
|
||||||
|
|
||||||
{/* Hetzner VPS */}
|
|
||||||
<div className="card bg-[#1a1a1a] border-zinc-700 w-full max-w-3xl">
|
|
||||||
<div className="text-center mb-4">
|
|
||||||
<span className="badge badge-purple">Hetzner Cloud VPS</span>
|
|
||||||
<p className="text-sm text-zinc-400 mt-1">NixOS | 167.235.70.37</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Nginx */}
|
|
||||||
<div className="card bg-green-500/10 border-green-500/30 mb-4">
|
|
||||||
<div className="text-center">
|
|
||||||
<span className="badge badge-green">Nginx</span>
|
|
||||||
<p className="text-sm text-zinc-400 mt-1">Reverse Proxy + Static Files + SSL Termination</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Apps Grid */}
|
|
||||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
|
||||||
{apps.map((app) => (
|
|
||||||
<div
|
|
||||||
key={app.name}
|
|
||||||
className="card bg-[#0a0a0a] border-zinc-800 text-center p-3"
|
|
||||||
>
|
|
||||||
<p className="font-medium text-sm">{app.name}</p>
|
|
||||||
<p className="text-xs text-zinc-500">{app.domain}</p>
|
|
||||||
<span className={`badge badge-${app.color} mt-2 text-xs`}>
|
|
||||||
{app.type}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Deployed Apps */}
|
|
||||||
<section className="mb-16">
|
|
||||||
<h2 className="text-2xl font-semibold mb-6">Deployed Applications</h2>
|
|
||||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
||||||
{apps.map((app) => (
|
|
||||||
<a
|
|
||||||
key={app.name}
|
|
||||||
href={`https://${app.domain}`}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="card bg-[#141414] border-zinc-800 hover:border-zinc-600 transition-colors group"
|
|
||||||
>
|
|
||||||
<div className="flex items-start justify-between">
|
|
||||||
<div>
|
|
||||||
<h3 className="font-semibold group-hover:text-blue-400 transition-colors">
|
|
||||||
{app.name}
|
|
||||||
</h3>
|
|
||||||
<p className="text-sm text-zinc-500">{app.domain}</p>
|
|
||||||
</div>
|
|
||||||
<span className={`badge badge-${app.color}`}>{app.type}</span>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Tech Stack */}
|
|
||||||
<section className="mb-16">
|
|
||||||
<h2 className="text-2xl font-semibold mb-6">Technology Stack</h2>
|
|
||||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
||||||
{techStack.map((tech) => (
|
|
||||||
<div key={tech.category} className="card bg-[#141414] border-zinc-800">
|
|
||||||
<h3 className="text-sm text-zinc-500 uppercase tracking-wider mb-2">
|
|
||||||
{tech.category}
|
|
||||||
</h3>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{tech.items.map((item) => (
|
|
||||||
<span key={item} className="badge badge-blue">
|
|
||||||
{item}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Deployment Flow */}
|
|
||||||
<section className="mb-16">
|
|
||||||
<h2 className="text-2xl font-semibold mb-6">Deployment Flow</h2>
|
|
||||||
<div className="card bg-[#141414] border-zinc-800">
|
|
||||||
<div className="flex flex-col md:flex-row items-center justify-between gap-4">
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="w-12 h-12 bg-zinc-800 rounded-full flex items-center justify-center mx-auto mb-2">
|
|
||||||
<span>1</span>
|
|
||||||
</div>
|
|
||||||
<p className="text-sm font-medium">Push to GitHub</p>
|
|
||||||
<p className="text-xs text-zinc-500">develop branch</p>
|
|
||||||
</div>
|
|
||||||
<div className="hidden md:block text-zinc-600">→</div>
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="w-12 h-12 bg-zinc-800 rounded-full flex items-center justify-center mx-auto mb-2">
|
|
||||||
<span>2</span>
|
|
||||||
</div>
|
|
||||||
<p className="text-sm font-medium">Update Flake</p>
|
|
||||||
<p className="text-xs text-zinc-500">nix flake update</p>
|
|
||||||
</div>
|
|
||||||
<div className="hidden md:block text-zinc-600">→</div>
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="w-12 h-12 bg-zinc-800 rounded-full flex items-center justify-center mx-auto mb-2">
|
|
||||||
<span>3</span>
|
|
||||||
</div>
|
|
||||||
<p className="text-sm font-medium">Remote Build</p>
|
|
||||||
<p className="text-xs text-zinc-500">nixos-rebuild</p>
|
|
||||||
</div>
|
|
||||||
<div className="hidden md:block text-zinc-600">→</div>
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-2">
|
|
||||||
<span>✓</span>
|
|
||||||
</div>
|
|
||||||
<p className="text-sm font-medium">Live</p>
|
|
||||||
<p className="text-xs text-zinc-500">Zero downtime</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Repositories */}
|
|
||||||
<section>
|
|
||||||
<h2 className="text-2xl font-semibold mb-6">Repositories</h2>
|
|
||||||
<div className="grid md:grid-cols-2 gap-4">
|
|
||||||
<a
|
|
||||||
href="https://github.com/IMPHNEN/imphnen-frontend-service"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="card bg-[#141414] border-zinc-800 hover:border-zinc-600 transition-colors"
|
|
||||||
>
|
|
||||||
<h3 className="font-semibold mb-1">imphnen-frontend-service</h3>
|
|
||||||
<p className="text-sm text-zinc-400">
|
|
||||||
Nx monorepo containing all frontend applications
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://github.com/IMPHNEN/imphnen-infrastructure"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="card bg-[#141414] border-zinc-800 hover:border-zinc-600 transition-colors"
|
|
||||||
>
|
|
||||||
<h3 className="font-semibold mb-1">imphnen-infrastructure</h3>
|
|
||||||
<p className="text-sm text-zinc-400">
|
|
||||||
NixOS flake configuration for server deployment
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
{/* Footer */}
|
|
||||||
<footer className="border-t border-zinc-800 mt-16">
|
|
||||||
<div className="container mx-auto px-6 py-8 text-center text-zinc-500 text-sm">
|
|
||||||
<p>IMPHNEN Infrastructure © {new Date().getFullYear()}</p>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,58 +0,0 @@
|
|||||||
@import 'tailwindcss';
|
|
||||||
|
|
||||||
@theme {
|
|
||||||
--color-primary: #3b82f6;
|
|
||||||
--color-primary-hover: #2563eb;
|
|
||||||
}
|
|
||||||
|
|
||||||
@layer base {
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
||||||
background-color: #0a0a0a;
|
|
||||||
color: #ffffff;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@layer components {
|
|
||||||
.card {
|
|
||||||
background: #141414;
|
|
||||||
border: 1px solid #27272a;
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0.25rem 0.75rem;
|
|
||||||
border-radius: 9999px;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-blue {
|
|
||||||
background: rgba(59, 130, 246, 0.2);
|
|
||||||
color: #60a5fa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-green {
|
|
||||||
background: rgba(34, 197, 94, 0.2);
|
|
||||||
color: #4ade80;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-purple {
|
|
||||||
background: rgba(168, 85, 247, 0.2);
|
|
||||||
color: #c084fc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-orange {
|
|
||||||
background: rgba(249, 115, 22, 0.2);
|
|
||||||
color: #fb923c;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
import { createRoot } from 'react-dom/client';
|
|
||||||
import { StrictMode } from 'react';
|
|
||||||
import App from './app/App';
|
|
||||||
import './index.css';
|
|
||||||
|
|
||||||
const rootElement = document.getElementById('root');
|
|
||||||
|
|
||||||
if (!rootElement) throw new Error('Failed to find the root element');
|
|
||||||
|
|
||||||
createRoot(rootElement).render(
|
|
||||||
<StrictMode>
|
|
||||||
<App />
|
|
||||||
</StrictMode>
|
|
||||||
);
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
{
|
|
||||||
"extends": "./tsconfig.json",
|
|
||||||
"compilerOptions": {
|
|
||||||
"outDir": "../../dist/out-tsc",
|
|
||||||
"types": ["node", "vite/client"]
|
|
||||||
},
|
|
||||||
"exclude": ["src/**/*.spec.ts", "src/**/*.test.ts", "src/**/*.spec.tsx", "src/**/*.test.tsx"],
|
|
||||||
"include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
|
|
||||||
}
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"jsx": "react-jsx",
|
|
||||||
"allowJs": false,
|
|
||||||
"esModuleInterop": false,
|
|
||||||
"allowSyntheticDefaultImports": true,
|
|
||||||
"strict": true,
|
|
||||||
"types": ["vite/client"]
|
|
||||||
},
|
|
||||||
"files": [],
|
|
||||||
"include": [],
|
|
||||||
"references": [
|
|
||||||
{
|
|
||||||
"path": "./tsconfig.app.json"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"extends": "../../tsconfig.base.json"
|
|
||||||
}
|
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
/// <reference types='vitest' />
|
|
||||||
import { defineConfig } from 'vite';
|
|
||||||
import react from '@vitejs/plugin-react';
|
|
||||||
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
|
|
||||||
import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
|
|
||||||
|
|
||||||
export default defineConfig(() => ({
|
|
||||||
root: __dirname,
|
|
||||||
cacheDir: '../../node_modules/.vite/apps/infra',
|
|
||||||
server: {
|
|
||||||
port: 3006,
|
|
||||||
host: 'localhost',
|
|
||||||
},
|
|
||||||
preview: {
|
|
||||||
port: 3007,
|
|
||||||
host: 'localhost',
|
|
||||||
},
|
|
||||||
plugins: [react(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
|
|
||||||
build: {
|
|
||||||
outDir: '../../dist/apps/infra',
|
|
||||||
emptyOutDir: true,
|
|
||||||
reportCompressedSize: true,
|
|
||||||
commonjsOptions: {
|
|
||||||
transformMixedEsModules: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -54,19 +54,9 @@ export function HeroSection() {
|
|||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ duration: 0.5 }}
|
transition={{ duration: 0.5 }}
|
||||||
>
|
>
|
||||||
<div className="flex flex-wrap items-center gap-2">
|
<span className="inline-flex items-center rounded-full border px-3 py-1 text-sm w-fit">
|
||||||
<span className="inline-flex items-center rounded-full border px-3 py-1 text-sm">
|
|
||||||
{communityLabel}
|
{communityLabel}
|
||||||
</span>
|
</span>
|
||||||
<a
|
|
||||||
href="https://ancikri.com"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="inline-flex items-center rounded-full border px-3 py-1 text-sm hover:bg-muted transition-colors"
|
|
||||||
>
|
|
||||||
Powered By Ancikri
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<h1 className="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold tracking-tighter bg-clip-text text-transparent bg-gradient-to-r from-foreground via-foreground to-foreground/70">
|
<h1 className="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold tracking-tighter bg-clip-text text-transparent bg-gradient-to-r from-foreground via-foreground to-foreground/70">
|
||||||
|
|||||||
@@ -104,21 +104,11 @@ export default function Footer() {
|
|||||||
<ul className="space-y-2"></ul>
|
<ul className="space-y-2"></ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-8 border-t pt-8 text-center space-y-2">
|
<div className="mt-8 border-t pt-8 text-center">
|
||||||
<p className="text-xs text-muted-foreground">
|
<p className="text-xs text-muted-foreground">
|
||||||
© {new Date().getFullYear()} IMPHNEN - Ingin Menjadi Programmer
|
© {new Date().getFullYear()} IMPHNEN - Ingin Menjadi Programmer
|
||||||
Handal, Namun Enggan Ngoding. All rights reserved.
|
Handal, Namun Enggan Ngoding. All rights reserved.
|
||||||
</p>
|
</p>
|
||||||
<p className="text-xs text-muted-foreground">
|
|
||||||
Powered by{' '}
|
|
||||||
<Link
|
|
||||||
href="https://ancikri.com"
|
|
||||||
target="_blank"
|
|
||||||
className="font-medium text-foreground hover:underline"
|
|
||||||
>
|
|
||||||
Ancikri
|
|
||||||
</Link>
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|||||||
@@ -1,23 +1,13 @@
|
|||||||
import localFont from 'next/font/local';
|
import { Bai_Jamjuree, Poppins } from 'next/font/google';
|
||||||
|
|
||||||
export const baiJamjureeFont = localFont({
|
export const baiJamjureeFont = Bai_Jamjuree({
|
||||||
src: [
|
subsets: ['latin'],
|
||||||
{ path: '../../public/fonts/BaiJamjuree-Light.ttf', weight: '300', style: 'normal' },
|
weight: ['300', '400', '500', '600', '700'],
|
||||||
{ path: '../../public/fonts/BaiJamjuree-Regular.ttf', weight: '400', style: 'normal' },
|
|
||||||
{ path: '../../public/fonts/BaiJamjuree-Medium.ttf', weight: '500', style: 'normal' },
|
|
||||||
{ path: '../../public/fonts/BaiJamjuree-SemiBold.ttf', weight: '600', style: 'normal' },
|
|
||||||
{ path: '../../public/fonts/BaiJamjuree-Bold.ttf', weight: '700', style: 'normal' },
|
|
||||||
],
|
|
||||||
display: 'swap',
|
display: 'swap',
|
||||||
});
|
});
|
||||||
|
|
||||||
export const poppinsFont = localFont({
|
export const poppinsFont = Poppins({
|
||||||
src: [
|
subsets: ['latin'],
|
||||||
{ path: '../../public/fonts/Poppins-Light.ttf', weight: '300', style: 'normal' },
|
weight: ['300', '400', '500', '600', '700'],
|
||||||
{ path: '../../public/fonts/Poppins-Regular.ttf', weight: '400', style: 'normal' },
|
|
||||||
{ path: '../../public/fonts/Poppins-Medium.ttf', weight: '500', style: 'normal' },
|
|
||||||
{ path: '../../public/fonts/Poppins-SemiBold.ttf', weight: '600', style: 'normal' },
|
|
||||||
{ path: '../../public/fonts/Poppins-Bold.ttf', weight: '700', style: 'normal' },
|
|
||||||
],
|
|
||||||
display: 'swap',
|
display: 'swap',
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,17 +0,0 @@
|
|||||||
FROM node:22-alpine AS deps
|
|
||||||
WORKDIR /app
|
|
||||||
COPY package.json package-lock.json ./
|
|
||||||
RUN npm ci --prefer-offline --no-audit --no-fund
|
|
||||||
|
|
||||||
FROM node:22-alpine AS builder
|
|
||||||
WORKDIR /app
|
|
||||||
COPY --from=deps /app/node_modules ./node_modules
|
|
||||||
COPY . .
|
|
||||||
ENV NX_DAEMON=false
|
|
||||||
RUN npm run qrcampaign:build
|
|
||||||
|
|
||||||
FROM nginx:alpine AS runner
|
|
||||||
RUN rm -rf /usr/share/nginx/html/*
|
|
||||||
COPY --from=builder /app/dist/apps/qrcampaign /usr/share/nginx/html
|
|
||||||
EXPOSE 80
|
|
||||||
CMD ["nginx", "-g", "daemon off;"]
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
import nx from '@nx/eslint-plugin';
|
|
||||||
import baseConfig from '../../eslint.config.mjs';
|
|
||||||
|
|
||||||
export default [
|
|
||||||
...baseConfig,
|
|
||||||
...nx.configs['flat/react'],
|
|
||||||
{
|
|
||||||
files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
|
|
||||||
// Override or add rules here
|
|
||||||
rules: {},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<title>QR Code Generator - IMPHNEN</title>
|
|
||||||
<base href="/" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
||||||
<meta name="description" content="QR Code Generator - IMPHNEN" />
|
|
||||||
<meta name="keywords" content="qr, campaign, imphnen" />
|
|
||||||
<link rel="icon" type="image/svg+xml" href="/images/imphnen-logo.svg" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="root"></div>
|
|
||||||
<script type="module" src="/src/main.tsx"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
import { join } from 'path';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
plugins: {
|
|
||||||
'@tailwindcss/postcss': {
|
|
||||||
base: join(import.meta.dirname, '../../'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "qrcampaign",
|
|
||||||
"$schema": "../../node_modules/nx/schemas/project-schema.json",
|
|
||||||
"sourceRoot": "apps/qrcampaign/src",
|
|
||||||
"projectType": "application",
|
|
||||||
"tags": [],
|
|
||||||
"// targets": "to see all targets run: nx show project qrcampaign --web",
|
|
||||||
"targets": {}
|
|
||||||
}
|
|
||||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 351 KiB |
@@ -1,23 +0,0 @@
|
|||||||
import { Link } from 'react-router-dom';
|
|
||||||
|
|
||||||
export default function NotFoundPage() {
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
|
||||||
<div className="text-center">
|
|
||||||
<h1 className="text-9xl font-bold text-gray-200 mb-4">404</h1>
|
|
||||||
<h2 className="text-3xl font-semibold text-gray-900 mb-4">
|
|
||||||
Page Not Found
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-600 mb-8">
|
|
||||||
The page you are looking for doesn't exist or has been moved.
|
|
||||||
</p>
|
|
||||||
<Link
|
|
||||||
to="/"
|
|
||||||
className="inline-block px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
|
|
||||||
>
|
|
||||||
Go Back Home
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,262 +0,0 @@
|
|||||||
import { useState, useEffect } from 'react';
|
|
||||||
import { ColumnDef } from '@tanstack/react-table';
|
|
||||||
import { DataTable } from '@imphnen-frontend-service/ui/organisms';
|
|
||||||
import {
|
|
||||||
campaignService,
|
|
||||||
Campaign,
|
|
||||||
CreateCampaignRequest,
|
|
||||||
} from '../../features/admin/api/campaign.service';
|
|
||||||
import {
|
|
||||||
DeleteOutlined,
|
|
||||||
CheckCircleOutlined,
|
|
||||||
PlusOutlined,
|
|
||||||
} from '@ant-design/icons';
|
|
||||||
|
|
||||||
export default function CampaignsPage() {
|
|
||||||
const [campaigns, setCampaigns] = useState<Campaign[]>([]);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const [showCreateModal, setShowCreateModal] = useState(false);
|
|
||||||
const [createLoading, setCreateLoading] = useState(false);
|
|
||||||
const [formData, setFormData] = useState<CreateCampaignRequest>({
|
|
||||||
name: '',
|
|
||||||
url: '',
|
|
||||||
});
|
|
||||||
|
|
||||||
const fetchCampaigns = async () => {
|
|
||||||
try {
|
|
||||||
setLoading(true);
|
|
||||||
setError(null);
|
|
||||||
const data = await campaignService.getCampaigns();
|
|
||||||
setCampaigns(data);
|
|
||||||
} catch (err) {
|
|
||||||
setError('Failed to load campaigns');
|
|
||||||
console.error('Error fetching campaigns:', err);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetchCampaigns();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleCreateCampaign = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
try {
|
|
||||||
setCreateLoading(true);
|
|
||||||
await campaignService.createCampaign(formData);
|
|
||||||
setShowCreateModal(false);
|
|
||||||
setFormData({ name: '', url: '' });
|
|
||||||
await fetchCampaigns();
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error creating campaign:', err);
|
|
||||||
alert('Failed to create campaign');
|
|
||||||
} finally {
|
|
||||||
setCreateLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleActivateCampaign = async (campaignId: string) => {
|
|
||||||
try {
|
|
||||||
await campaignService.activateCampaign(campaignId);
|
|
||||||
await fetchCampaigns();
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error activating campaign:', err);
|
|
||||||
alert('Failed to activate campaign');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDeleteCampaign = async (
|
|
||||||
campaignId: string,
|
|
||||||
campaignName: string
|
|
||||||
) => {
|
|
||||||
if (!confirm(`Are you sure you want to delete "${campaignName}"?`)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
await campaignService.deleteCampaign(campaignId);
|
|
||||||
await fetchCampaigns();
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error deleting campaign:', err);
|
|
||||||
alert('Failed to delete campaign');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const columns: ColumnDef<Campaign>[] = [
|
|
||||||
{
|
|
||||||
accessorKey: 'name',
|
|
||||||
header: 'Name',
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<div className="font-medium text-gray-900">{row.original.name}</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'url',
|
|
||||||
header: 'URL',
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<a
|
|
||||||
href={row.original.url}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-primary-600 hover:underline"
|
|
||||||
>
|
|
||||||
{row.original.url}
|
|
||||||
</a>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'is_active',
|
|
||||||
header: 'Status',
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<span
|
|
||||||
className={`px-2 py-1 rounded-2xl text-xs font-medium ${
|
|
||||||
row.original.is_active
|
|
||||||
? 'bg-success-100 text-success-800'
|
|
||||||
: 'bg-gray-100 text-gray-800'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{row.original.is_active ? 'Active' : 'Inactive'}
|
|
||||||
</span>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'created_at',
|
|
||||||
header: 'Created At',
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<span className="text-gray-600">
|
|
||||||
{new Date(row.original.created_at).toLocaleDateString()}
|
|
||||||
</span>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'actions',
|
|
||||||
header: 'Actions',
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<div className="flex gap-2">
|
|
||||||
{!row.original.is_active && (
|
|
||||||
<button
|
|
||||||
onClick={() => handleActivateCampaign(row.original.id)}
|
|
||||||
className="p-2 text-success-600 hover:bg-success-50 rounded-md transition-colors cursor-pointer"
|
|
||||||
title="Activate Campaign"
|
|
||||||
>
|
|
||||||
<CheckCircleOutlined />
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
<button
|
|
||||||
onClick={() =>
|
|
||||||
handleDeleteCampaign(row.original.id, row.original.name)
|
|
||||||
}
|
|
||||||
className="p-2 text-danger-600 hover:bg-danger-50 rounded-md transition-colors cursor-pointer"
|
|
||||||
title="Delete Campaign"
|
|
||||||
>
|
|
||||||
<DeleteOutlined />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return (
|
|
||||||
<div className="p-6">
|
|
||||||
<div className="text-center py-12">
|
|
||||||
<div className="text-gray-600">Loading campaigns...</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
return (
|
|
||||||
<div className="p-6">
|
|
||||||
<div className="bg-red-50 border border-red-200 rounded-lg p-4 text-red-800">
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="p-6">
|
|
||||||
<div className="flex justify-between items-center mb-6">
|
|
||||||
<div>
|
|
||||||
<h1 className="text-2xl font-bold text-gray-900">
|
|
||||||
Campaign Management
|
|
||||||
</h1>
|
|
||||||
<p className="text-gray-600 mt-1">Manage your QR campaigns</p>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={() => setShowCreateModal(true)}
|
|
||||||
className="flex items-center gap-2 bg-primary-500 text-white px-4 py-2 rounded-lg hover:bg-primary-600 transition-colors cursor-pointer"
|
|
||||||
>
|
|
||||||
<PlusOutlined />
|
|
||||||
Create Campaign
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<DataTable data={campaigns} columns={columns} pageSize={10} />
|
|
||||||
|
|
||||||
{/* Create Campaign Modal */}
|
|
||||||
{showCreateModal && (
|
|
||||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
|
||||||
<div className="bg-white rounded-lg p-6 w-full max-w-md">
|
|
||||||
<h2 className="text-xl font-bold mb-4">Create New Campaign</h2>
|
|
||||||
<form onSubmit={handleCreateCampaign}>
|
|
||||||
<div className="mb-4">
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
Campaign Name
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={formData.name}
|
|
||||||
onChange={(e) =>
|
|
||||||
setFormData({ ...formData, name: e.target.value })
|
|
||||||
}
|
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
||||||
placeholder="IMPHNEN Promo Campaign"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="mb-6">
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
Campaign URL
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="url"
|
|
||||||
value={formData.url}
|
|
||||||
onChange={(e) =>
|
|
||||||
setFormData({ ...formData, url: e.target.value })
|
|
||||||
}
|
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
||||||
placeholder="https://imphnen.dev/promo"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="flex gap-3 justify-end">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => {
|
|
||||||
setShowCreateModal(false);
|
|
||||||
setFormData({ name: '', url: '' });
|
|
||||||
}}
|
|
||||||
className="px-4 py-2 text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors cursor-pointer"
|
|
||||||
disabled={createLoading}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
className="px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors disabled:opacity-50 cursor-pointer"
|
|
||||||
disabled={createLoading}
|
|
||||||
>
|
|
||||||
{createLoading ? 'Creating...' : 'Create'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
import { Outlet } from 'react-router-dom';
|
|
||||||
import { RequireAdmin } from '../features/admin/components/RequireAdmin';
|
|
||||||
|
|
||||||
export default function AdminLayout() {
|
|
||||||
return (
|
|
||||||
<RequireAdmin>
|
|
||||||
<Outlet />
|
|
||||||
</RequireAdmin>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
export default function AdminPage() {
|
|
||||||
return <div className="p-4">Select a menu item from the sidebar.</div>;
|
|
||||||
}
|
|
||||||
@@ -1,199 +0,0 @@
|
|||||||
import { useState, useEffect } from 'react';
|
|
||||||
import { ColumnDef } from '@tanstack/react-table';
|
|
||||||
import { DataTable } from '@imphnen-frontend-service/ui/organisms';
|
|
||||||
import { userService, User } from '../../features/admin/api/user.service';
|
|
||||||
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
|
|
||||||
|
|
||||||
export default function UsersPage() {
|
|
||||||
const [users, setUsers] = useState<User[]>([]);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const [editingUserId, setEditingUserId] = useState<string | null>(null);
|
|
||||||
const [selectedRole, setSelectedRole] = useState<string>('');
|
|
||||||
|
|
||||||
const fetchUsers = async () => {
|
|
||||||
try {
|
|
||||||
setLoading(true);
|
|
||||||
setError(null);
|
|
||||||
const data = await userService.getUsers();
|
|
||||||
setUsers(data);
|
|
||||||
} catch (err) {
|
|
||||||
setError('Failed to load users');
|
|
||||||
console.error('Error fetching users:', err);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetchUsers();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleUpdateRole = async (userId: string, currentRole: string) => {
|
|
||||||
if (editingUserId === userId) {
|
|
||||||
// Save the role
|
|
||||||
try {
|
|
||||||
await userService.updateUserRole(userId, selectedRole);
|
|
||||||
setEditingUserId(null);
|
|
||||||
setSelectedRole('');
|
|
||||||
await fetchUsers();
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error updating user role:', err);
|
|
||||||
alert('Failed to update user role');
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Start editing
|
|
||||||
setEditingUserId(userId);
|
|
||||||
setSelectedRole(currentRole);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDeleteUser = async (userId: string, userName: string) => {
|
|
||||||
if (!confirm(`Are you sure you want to delete user "${userName}"?`)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
await userService.deleteUser(userId);
|
|
||||||
await fetchUsers();
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error deleting user:', err);
|
|
||||||
alert('Failed to delete user');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const columns: ColumnDef<User>[] = [
|
|
||||||
{
|
|
||||||
accessorKey: 'name',
|
|
||||||
header: 'Name',
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<div className="font-medium text-gray-900">{row.original.name}</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'email',
|
|
||||||
header: 'Email',
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<div className="text-gray-600">{row.original.email}</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'role',
|
|
||||||
header: 'Role',
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const isEditing = editingUserId === row.original.id;
|
|
||||||
return (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
{isEditing ? (
|
|
||||||
<select
|
|
||||||
value={selectedRole}
|
|
||||||
onChange={(e) => setSelectedRole(e.target.value)}
|
|
||||||
className="px-2 py-1 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
||||||
>
|
|
||||||
<option value="user">User</option>
|
|
||||||
<option value="admin">Admin</option>
|
|
||||||
</select>
|
|
||||||
) : (
|
|
||||||
<span
|
|
||||||
className={`px-2 py-1 rounded-2xl text-xs font-medium ${
|
|
||||||
row.original.role === 'admin'
|
|
||||||
? 'bg-danger-100 text-danger-800'
|
|
||||||
: 'bg-primary-100 text-primary-800'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{row.original.role.charAt(0).toUpperCase() +
|
|
||||||
row.original.role.slice(1)}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'created_at',
|
|
||||||
header: 'Created At',
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<span className="text-gray-600">
|
|
||||||
{new Date(row.original.created_at).toLocaleDateString()}
|
|
||||||
</span>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'actions',
|
|
||||||
header: 'Actions',
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const isEditing = editingUserId === row.original.id;
|
|
||||||
return (
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<button
|
|
||||||
onClick={() =>
|
|
||||||
handleUpdateRole(row.original.id, row.original.role)
|
|
||||||
}
|
|
||||||
className={`p-2 rounded-md transition-colors cursor-pointer ${
|
|
||||||
isEditing
|
|
||||||
? 'text-success-600 hover:bg-success-50'
|
|
||||||
: 'text-primary-600 hover:bg-primary-50'
|
|
||||||
}`}
|
|
||||||
title={isEditing ? 'Save Role' : 'Change Role'}
|
|
||||||
>
|
|
||||||
<EditOutlined />
|
|
||||||
</button>
|
|
||||||
{isEditing && (
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
setEditingUserId(null);
|
|
||||||
setSelectedRole('');
|
|
||||||
}}
|
|
||||||
className="p-2 text-gray-600 hover:bg-gray-50 rounded-md transition-colors cursor-pointer"
|
|
||||||
title="Cancel"
|
|
||||||
>
|
|
||||||
✕
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
{!isEditing && (
|
|
||||||
<button
|
|
||||||
onClick={() =>
|
|
||||||
handleDeleteUser(row.original.id, row.original.name)
|
|
||||||
}
|
|
||||||
className="p-2 text-danger-600 hover:bg-danger-50 rounded-md transition-colors cursor-pointer"
|
|
||||||
title="Delete User"
|
|
||||||
>
|
|
||||||
<DeleteOutlined />
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return (
|
|
||||||
<div className="p-6">
|
|
||||||
<div className="text-center py-12">
|
|
||||||
<div className="text-gray-600">Loading users...</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
return (
|
|
||||||
<div className="p-6">
|
|
||||||
<div className="bg-red-50 border border-red-200 rounded-lg p-4 text-red-800">
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="p-6">
|
|
||||||
<div className="mb-6">
|
|
||||||
<h1 className="text-2xl font-bold text-gray-900">User Management</h1>
|
|
||||||
<p className="text-gray-600 mt-1">Manage users and their roles</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<DataTable data={users} columns={columns} pageSize={10} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,183 +0,0 @@
|
|||||||
import { FC, ReactElement, useEffect, useState, useRef } from 'react';
|
|
||||||
import { useNavigate } from 'react-router';
|
|
||||||
import { useGitHubCallback } from '@imphnen-frontend-service/service';
|
|
||||||
import { toast } from 'sonner';
|
|
||||||
|
|
||||||
const CallbackPage: FC = (): ReactElement => {
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const { mutateAsync: exchangeGitHubCode } = useGitHubCallback();
|
|
||||||
const [isProcessing, setIsProcessing] = useState(true);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const hasRunRef = useRef(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const handleCallback = async () => {
|
|
||||||
if (hasRunRef.current) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
hasRunRef.current = true;
|
|
||||||
|
|
||||||
try {
|
|
||||||
// Check URL hash for Supabase email confirmation callback
|
|
||||||
const hashParams = new URLSearchParams(
|
|
||||||
globalThis.location.hash.substring(1)
|
|
||||||
);
|
|
||||||
const urlParams = new URLSearchParams(globalThis.location.search);
|
|
||||||
|
|
||||||
const type = hashParams.get('type') || urlParams.get('type');
|
|
||||||
const accessToken =
|
|
||||||
hashParams.get('access_token') || urlParams.get('access_token');
|
|
||||||
|
|
||||||
// Debug: log what we received
|
|
||||||
console.log('[Callback] Params:', {
|
|
||||||
type,
|
|
||||||
accessToken: !!accessToken,
|
|
||||||
hash: globalThis.location.hash,
|
|
||||||
search: globalThis.location.search,
|
|
||||||
});
|
|
||||||
|
|
||||||
// Handle Supabase email callbacks (has access_token in hash or query)
|
|
||||||
// This includes: signup confirmation, email confirmation, password recovery
|
|
||||||
if (accessToken) {
|
|
||||||
setIsProcessing(false);
|
|
||||||
|
|
||||||
// Password recovery - type is 'recovery' or we have access_token from reset email
|
|
||||||
if (type === 'recovery' || type === 'magiclink') {
|
|
||||||
toast.success('Email verified! Please set your new password.');
|
|
||||||
navigate('/auth/reset-password?access_token=' + accessToken);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Signup/Email confirmation
|
|
||||||
if (type === 'signup' || type === 'email_confirmation') {
|
|
||||||
toast.success(
|
|
||||||
'Email verified successfully! Please log in to continue.'
|
|
||||||
);
|
|
||||||
navigate('/auth/login');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// If we have access_token but unknown type, assume it's password recovery
|
|
||||||
// (Supabase sometimes sends without explicit type)
|
|
||||||
toast.success('Email verified! Please set your new password.');
|
|
||||||
navigate('/auth/reset-password?access_token=' + accessToken);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get the code from URL query params (GitHub OAuth)
|
|
||||||
const code = urlParams.get('code');
|
|
||||||
|
|
||||||
if (!code) {
|
|
||||||
throw new Error('No authorization code received');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Exchange the code for tokens using backend API (GitHub OAuth)
|
|
||||||
const result = await exchangeGitHubCode({ code });
|
|
||||||
|
|
||||||
toast.success('Login successful!');
|
|
||||||
setIsProcessing(false);
|
|
||||||
|
|
||||||
// Check if user has completed onboarding (has location)
|
|
||||||
if (result.user.location) {
|
|
||||||
globalThis.location.replace('/dashboard');
|
|
||||||
} else {
|
|
||||||
globalThis.location.replace('/onboarding/user');
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('[Callback] Error:', err);
|
|
||||||
setError((err as Error).message);
|
|
||||||
setIsProcessing(false);
|
|
||||||
toast.error('An error occurred during login');
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
navigate('/auth/login');
|
|
||||||
}, 3000);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
handleCallback();
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
// Check if error is related to private email
|
|
||||||
const isPrivateEmailError =
|
|
||||||
error.toLowerCase().includes('failed to create user') ||
|
|
||||||
error.toLowerCase().includes('email') ||
|
|
||||||
error.toLowerCase().includes('user record');
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex justify-center items-center min-h-screen bg-gray-50 px-4">
|
|
||||||
<div className="bg-white w-full max-w-2xl p-8 rounded-2xl shadow-lg border border-red-200">
|
|
||||||
<div className="text-center mb-6">
|
|
||||||
<div className="text-red-500 text-5xl mb-4">⚠️</div>
|
|
||||||
<h2 className="text-2xl font-bold text-gray-900 mb-2">
|
|
||||||
GitHub Login Failed
|
|
||||||
</h2>
|
|
||||||
<p className="text-red-600 mb-4 whitespace-pre-line">{error}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{isPrivateEmailError && (
|
|
||||||
<div className="bg-amber-50 border border-amber-200 rounded-lg p-4 mb-6">
|
|
||||||
<h3 className="font-semibold text-amber-800 mb-2">
|
|
||||||
Is your GitHub email set to private?
|
|
||||||
</h3>
|
|
||||||
<p className="text-amber-700 text-sm mb-3">
|
|
||||||
GitHub login requires a public email address. Please follow
|
|
||||||
these steps:
|
|
||||||
</p>
|
|
||||||
<ol className="text-amber-700 text-sm list-decimal list-inside space-y-1 mb-3">
|
|
||||||
<li>
|
|
||||||
Go to{' '}
|
|
||||||
<a
|
|
||||||
href="https://github.com/settings/emails"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="underline hover:text-amber-900"
|
|
||||||
>
|
|
||||||
GitHub Email Settings
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>Uncheck "Keep my email addresses private"</li>
|
|
||||||
<li>
|
|
||||||
Or go to{' '}
|
|
||||||
<a
|
|
||||||
href="https://github.com/settings/profile"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="underline hover:text-amber-900"
|
|
||||||
>
|
|
||||||
Profile Settings
|
|
||||||
</a>{' '}
|
|
||||||
and set a public email
|
|
||||||
</li>
|
|
||||||
<li>Try signing in with GitHub again</li>
|
|
||||||
</ol>
|
|
||||||
<p className="text-amber-600 text-xs">
|
|
||||||
Alternatively, you can sign up using email and password instead.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<p className="text-gray-600 text-sm mt-6 text-center">
|
|
||||||
Redirecting to login page in 3 seconds...
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex justify-center items-center min-h-screen bg-gray-50">
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div>
|
|
||||||
<h2 className="text-xl font-semibold text-gray-900 mb-2">
|
|
||||||
Completing login...
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-600">Please wait</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default CallbackPage;
|
|
||||||
@@ -1,125 +0,0 @@
|
|||||||
import { useState } from 'react';
|
|
||||||
import { useForgotPassword } from '@imphnen-frontend-service/service';
|
|
||||||
import { Link, useNavigate } from 'react-router';
|
|
||||||
import { toast } from 'sonner';
|
|
||||||
import { Icon } from '@iconify/react';
|
|
||||||
|
|
||||||
export default function ForgotPasswordPage() {
|
|
||||||
const [email, setEmail] = useState('');
|
|
||||||
const [emailSent, setEmailSent] = useState(false);
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const forgotPasswordMutation = useForgotPassword();
|
|
||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
if (!email) {
|
|
||||||
toast.error('Please enter your email');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
await forgotPasswordMutation.mutateAsync({ email });
|
|
||||||
|
|
||||||
setEmailSent(true);
|
|
||||||
toast.success('Password reset email sent! Check your inbox.');
|
|
||||||
} catch (err) {
|
|
||||||
toast.error((err as Error).message || 'Failed to send reset email');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (emailSent) {
|
|
||||||
return (
|
|
||||||
<div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
|
|
||||||
<div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 text-center">
|
|
||||||
<div className="mb-6">
|
|
||||||
<div className="mx-auto w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
|
|
||||||
<span className="text-3xl">✓</span>
|
|
||||||
</div>
|
|
||||||
<h2 className="text-3xl font-bold text-gray-900 mb-2">
|
|
||||||
Check Your Email
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-600">
|
|
||||||
We've sent a password reset link to <strong>{email}</strong>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-4">
|
|
||||||
<p className="text-sm text-gray-600">
|
|
||||||
Click the link in the email to reset your password. The link will
|
|
||||||
expire in 1 hour.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<Link to="/auth/login">
|
|
||||||
<button className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 transition-colors">
|
|
||||||
Back to Login
|
|
||||||
</button>
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={() => setEmailSent(false)}
|
|
||||||
className="w-full py-3 text-gray-600 hover:text-gray-900 transition-colors"
|
|
||||||
>
|
|
||||||
Send another email
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
|
|
||||||
<div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200">
|
|
||||||
<div className="flex items-center justify-between mb-6">
|
|
||||||
<button
|
|
||||||
onClick={() => navigate('/auth/login')}
|
|
||||||
className="cursor-pointer text-primary-500 hover:text-primary-600 text-base font-sans flex items-center"
|
|
||||||
>
|
|
||||||
<Icon icon="ic:baseline-chevron-left" width="24" height="24" />
|
|
||||||
Back to Login
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="text-center mb-8">
|
|
||||||
<h2 className="text-3xl font-bold text-gray-900 mb-2">
|
|
||||||
Forgot Password?
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-600">
|
|
||||||
No worries, we'll send you reset instructions
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form onSubmit={handleSubmit} className="space-y-4">
|
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
htmlFor="email"
|
|
||||||
className="block text-sm font-medium text-gray-700 mb-1"
|
|
||||||
>
|
|
||||||
Email Address
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
id="email"
|
|
||||||
type="email"
|
|
||||||
value={email}
|
|
||||||
onChange={(e) => setEmail(e.target.value)}
|
|
||||||
placeholder="your@email.com"
|
|
||||||
disabled={forgotPasswordMutation.isPending}
|
|
||||||
className="bg-white text-gray-900 w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={forgotPasswordMutation.isPending}
|
|
||||||
className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
|
|
||||||
>
|
|
||||||
{forgotPasswordMutation.isPending
|
|
||||||
? 'Sending...'
|
|
||||||
: 'Send Reset Link'}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,234 +0,0 @@
|
|||||||
import { useState, useEffect } from 'react';
|
|
||||||
import { GithubOutlined } from '@ant-design/icons';
|
|
||||||
import { useNavigate, Link } from 'react-router';
|
|
||||||
import { toast } from 'sonner';
|
|
||||||
import { Icon } from '@iconify/react';
|
|
||||||
import { useAuthStore } from '../../features/auth/store/auth.store';
|
|
||||||
|
|
||||||
export default function LoginPage() {
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const login = useAuthStore((state) => state.login);
|
|
||||||
const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
|
|
||||||
|
|
||||||
const [isGithubLoading, setIsGithubLoading] = useState(false);
|
|
||||||
const [email, setEmail] = useState('');
|
|
||||||
const [password, setPassword] = useState('');
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const [showPassword, setShowPassword] = useState(false);
|
|
||||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (isAuthenticated) {
|
|
||||||
navigate('/');
|
|
||||||
}
|
|
||||||
}, [isAuthenticated, navigate]);
|
|
||||||
|
|
||||||
// Check for password reset tokens in URL and redirect to reset-password page
|
|
||||||
useEffect(() => {
|
|
||||||
const hashParams = new URLSearchParams(
|
|
||||||
globalThis.location.hash.substring(1)
|
|
||||||
);
|
|
||||||
const urlParams = new URLSearchParams(globalThis.location.search);
|
|
||||||
|
|
||||||
const accessToken =
|
|
||||||
hashParams.get('access_token') || urlParams.get('access_token');
|
|
||||||
const type = hashParams.get('type') || urlParams.get('type');
|
|
||||||
|
|
||||||
// If we have an access_token, this is likely a password reset redirect that landed on the wrong page
|
|
||||||
if (accessToken) {
|
|
||||||
console.log(
|
|
||||||
'[Login] Detected access_token, redirecting to reset-password page'
|
|
||||||
);
|
|
||||||
|
|
||||||
// Check if it's a password recovery
|
|
||||||
if (type === 'recovery' || type === 'magiclink' || !type) {
|
|
||||||
toast.info('Redirecting to password reset...');
|
|
||||||
navigate('/auth/reset-password?access_token=' + accessToken);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [navigate]);
|
|
||||||
|
|
||||||
const handleEmailLogin = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
setError(null);
|
|
||||||
|
|
||||||
if (!email || !password) {
|
|
||||||
setError('Please enter both email and password');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setIsSubmitting(true);
|
|
||||||
try {
|
|
||||||
const success = await login(email, password);
|
|
||||||
|
|
||||||
if (success) {
|
|
||||||
toast.success('Login successful!');
|
|
||||||
navigate('/');
|
|
||||||
} else {
|
|
||||||
setError('Login failed. Please check your credentials.');
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('[Login] Email login failed:', err);
|
|
||||||
setError('Login failed. Please try again.');
|
|
||||||
} finally {
|
|
||||||
setIsSubmitting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleGithubLogin = async () => {
|
|
||||||
// TODO: Implement GitHub login with new auth service if needed
|
|
||||||
toast.info('GitHub login coming soon');
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
|
|
||||||
<div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200">
|
|
||||||
{/* <div className="flex items-center justify-between mb-6">
|
|
||||||
<button
|
|
||||||
onClick={() => navigate('/')}
|
|
||||||
className="cursor-pointer text-primary-500 hover:text-primary-600 text-base font-sans flex items-center"
|
|
||||||
>
|
|
||||||
<Icon icon="ic:baseline-chevron-left" width="24" height="24" />
|
|
||||||
Back to Homepage
|
|
||||||
</button>
|
|
||||||
</div> */}
|
|
||||||
|
|
||||||
<div className="text-center mb-8">
|
|
||||||
<h2 className="text-3xl font-bold text-gray-900 mb-2">
|
|
||||||
Welcome Back
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-600">Sign in to continue to IMPHNEN</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{error && (
|
|
||||||
<div className="mb-6 p-3 bg-red-50 border border-red-200 rounded-lg">
|
|
||||||
<p className="text-red-600 text-sm">{error}</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Traditional Login Form */}
|
|
||||||
<form onSubmit={handleEmailLogin} className="space-y-4 mb-6">
|
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
htmlFor="email"
|
|
||||||
className="block text-sm font-medium text-gray-700 mb-1"
|
|
||||||
>
|
|
||||||
Email
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
id="email"
|
|
||||||
type="email"
|
|
||||||
value={email}
|
|
||||||
onChange={(e) => setEmail(e.target.value)}
|
|
||||||
placeholder="yourname@example.com"
|
|
||||||
disabled={isSubmitting}
|
|
||||||
className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white text-gray-900 placeholder:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<div className="flex items-center justify-between mb-1">
|
|
||||||
<label
|
|
||||||
htmlFor="password"
|
|
||||||
className="block text-sm font-medium text-gray-700"
|
|
||||||
>
|
|
||||||
Password
|
|
||||||
</label>
|
|
||||||
<Link
|
|
||||||
to="/auth/forgot-password"
|
|
||||||
className="text-sm text-primary-600 hover:text-primary-700 font-medium"
|
|
||||||
>
|
|
||||||
Forgot password?
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
<div className="relative">
|
|
||||||
<input
|
|
||||||
id="password"
|
|
||||||
type={showPassword ? 'text' : 'password'}
|
|
||||||
value={password}
|
|
||||||
onChange={(e) => setPassword(e.target.value)}
|
|
||||||
placeholder="••••••••"
|
|
||||||
disabled={isSubmitting}
|
|
||||||
className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white text-gray-900 placeholder:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed pr-10"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setShowPassword(!showPassword)}
|
|
||||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
|
|
||||||
>
|
|
||||||
<Icon
|
|
||||||
icon={showPassword ? 'mdi:eye-off' : 'mdi:eye'}
|
|
||||||
className="text-xl"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={isSubmitting}
|
|
||||||
className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors cursor-pointer"
|
|
||||||
>
|
|
||||||
{isSubmitting ? 'Signing in...' : 'Sign in'}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div className="relative my-6">
|
|
||||||
<div className="absolute inset-0 flex items-center">
|
|
||||||
<div className="w-full border-t border-gray-300"></div>
|
|
||||||
</div>
|
|
||||||
<div className="relative flex justify-center text-sm">
|
|
||||||
<span className="px-2 bg-white text-gray-500">
|
|
||||||
Or continue with
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={handleGithubLogin}
|
|
||||||
disabled={isGithubLoading}
|
|
||||||
type="button"
|
|
||||||
className="w-full py-3 flex items-center justify-center gap-2 bg-gray-100 border border-gray-300 rounded-lg font-semibold text-gray-900 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:bg-gray-100 disabled:cursor-not-allowed transition-colors cursor-pointer"
|
|
||||||
>
|
|
||||||
<GithubOutlined className="text-xl" />
|
|
||||||
<span>
|
|
||||||
{isGithubLoading ? 'Connecting...' : 'Sign in with GitHub'}
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<p className="mt-3 text-xs text-center text-gray-500">
|
|
||||||
Make sure your GitHub email is{' '}
|
|
||||||
<a
|
|
||||||
href="https://github.com/settings/emails"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-primary-600 hover:underline"
|
|
||||||
>
|
|
||||||
set to public
|
|
||||||
</a>{' '}
|
|
||||||
for GitHub sign in to work.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="mt-6 text-center">
|
|
||||||
<p className="text-gray-600 text-sm">
|
|
||||||
Don't have an account?{' '}
|
|
||||||
<Link
|
|
||||||
to="/auth/signup"
|
|
||||||
className="text-primary-600 hover:text-primary-700 font-semibold"
|
|
||||||
>
|
|
||||||
Sign up
|
|
||||||
</Link>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-6 text-center">
|
|
||||||
<p className="text-gray-500 text-xs">
|
|
||||||
By signing in, you agree to our Terms of Service and Privacy Policy
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,171 +0,0 @@
|
|||||||
import { useState, useEffect } from 'react';
|
|
||||||
import {
|
|
||||||
useResetPassword,
|
|
||||||
useAuthStore,
|
|
||||||
} from '@imphnen-frontend-service/service';
|
|
||||||
import { useNavigate } from 'react-router';
|
|
||||||
import { toast } from 'sonner';
|
|
||||||
import { Icon } from '@iconify/react';
|
|
||||||
|
|
||||||
export default function ResetPasswordPage() {
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const { clearSession } = useAuthStore();
|
|
||||||
const resetPasswordMutation = useResetPassword();
|
|
||||||
const [password, setPassword] = useState('');
|
|
||||||
const [confirmPassword, setConfirmPassword] = useState('');
|
|
||||||
const [accessToken, setAccessToken] = useState<string | null>(null);
|
|
||||||
const [showPassword, setShowPassword] = useState(false);
|
|
||||||
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// Get the access_token from URL hash (Supabase sends it as hash fragment)
|
|
||||||
// or from query params (when redirected from callback page)
|
|
||||||
const hashParams = new URLSearchParams(
|
|
||||||
globalThis.location.hash.substring(1)
|
|
||||||
);
|
|
||||||
const queryParams = new URLSearchParams(globalThis.location.search);
|
|
||||||
const token =
|
|
||||||
hashParams.get('access_token') || queryParams.get('access_token');
|
|
||||||
|
|
||||||
if (token) {
|
|
||||||
setAccessToken(token);
|
|
||||||
} else {
|
|
||||||
toast.error('Invalid or expired reset link');
|
|
||||||
setTimeout(() => navigate('/auth/forgot-password'), 2000);
|
|
||||||
}
|
|
||||||
}, [navigate]);
|
|
||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
if (password !== confirmPassword) {
|
|
||||||
toast.error('Passwords do not match');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (password.length < 6) {
|
|
||||||
toast.error('Password must be at least 6 characters');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!accessToken) {
|
|
||||||
toast.error('Invalid reset token');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
await resetPasswordMutation.mutateAsync({
|
|
||||||
access_token: accessToken,
|
|
||||||
new_password: password,
|
|
||||||
});
|
|
||||||
|
|
||||||
toast.success('Password updated successfully!');
|
|
||||||
|
|
||||||
// Clear session and redirect to login
|
|
||||||
clearSession();
|
|
||||||
navigate('/auth/login');
|
|
||||||
} catch (err) {
|
|
||||||
toast.error((err as Error).message || 'Failed to reset password');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!accessToken) {
|
|
||||||
return (
|
|
||||||
<div className="flex justify-center items-center min-h-screen bg-gray-50">
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div>
|
|
||||||
<p className="text-gray-600">Verifying reset link...</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
|
|
||||||
<div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200">
|
|
||||||
<div className="text-center mb-8">
|
|
||||||
<h2 className="text-3xl font-bold text-gray-900 mb-2">
|
|
||||||
Set New Password
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-600">Enter your new password below</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form onSubmit={handleSubmit} className="space-y-4">
|
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
htmlFor="password"
|
|
||||||
className="block text-sm font-medium text-gray-700 mb-1"
|
|
||||||
>
|
|
||||||
New Password
|
|
||||||
</label>
|
|
||||||
<div className="relative">
|
|
||||||
<input
|
|
||||||
id="password"
|
|
||||||
type={showPassword ? 'text' : 'password'}
|
|
||||||
value={password}
|
|
||||||
onChange={(e) => setPassword(e.target.value)}
|
|
||||||
placeholder="••••••••"
|
|
||||||
disabled={resetPasswordMutation.isPending}
|
|
||||||
className="w-full px-4 py-2.5 pr-12 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed bg-white text-gray-900"
|
|
||||||
required
|
|
||||||
minLength={6}
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setShowPassword(!showPassword)}
|
|
||||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
|
|
||||||
>
|
|
||||||
<Icon
|
|
||||||
icon={showPassword ? 'mdi:eye-off' : 'mdi:eye'}
|
|
||||||
className="text-xl"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
htmlFor="confirmPassword"
|
|
||||||
className="block text-sm font-medium text-gray-700 mb-1"
|
|
||||||
>
|
|
||||||
Confirm New Password
|
|
||||||
</label>
|
|
||||||
<div className="relative">
|
|
||||||
<input
|
|
||||||
id="confirmPassword"
|
|
||||||
type={showConfirmPassword ? 'text' : 'password'}
|
|
||||||
value={confirmPassword}
|
|
||||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
|
||||||
placeholder="••••••••"
|
|
||||||
disabled={resetPasswordMutation.isPending}
|
|
||||||
className="w-full px-4 py-2.5 pr-12 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed bg-white text-gray-900"
|
|
||||||
required
|
|
||||||
minLength={6}
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
|
|
||||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
|
|
||||||
>
|
|
||||||
<Icon
|
|
||||||
icon={showConfirmPassword ? 'mdi:eye-off' : 'mdi:eye'}
|
|
||||||
className="text-xl"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={resetPasswordMutation.isPending}
|
|
||||||
className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
|
|
||||||
>
|
|
||||||
{resetPasswordMutation.isPending
|
|
||||||
? 'Updating...'
|
|
||||||
: 'Update Password'}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,305 +0,0 @@
|
|||||||
import { useState } from 'react';
|
|
||||||
import { useGitHubAuth } from '@imphnen-frontend-service/service';
|
|
||||||
import { GithubOutlined } from '@ant-design/icons';
|
|
||||||
import { useNavigate, Link } from 'react-router';
|
|
||||||
import { toast } from 'sonner';
|
|
||||||
import { Icon } from '@iconify/react';
|
|
||||||
import { useAuthStore } from '../../features/auth/store/auth.store';
|
|
||||||
import { useForm } from 'react-hook-form';
|
|
||||||
import { zodResolver } from '@hookform/resolvers/zod';
|
|
||||||
import { z } from 'zod';
|
|
||||||
|
|
||||||
const signupSchema = z
|
|
||||||
.object({
|
|
||||||
fullname: z
|
|
||||||
.string()
|
|
||||||
.min(1, 'Full name is required')
|
|
||||||
.min(2, 'Full name must be at least 2 characters'),
|
|
||||||
email: z
|
|
||||||
.string()
|
|
||||||
.min(1, 'Email is required')
|
|
||||||
.email('Please enter a valid email address'),
|
|
||||||
password: z
|
|
||||||
.string()
|
|
||||||
.min(1, 'Password is required')
|
|
||||||
.min(6, 'Password must be at least 6 characters'),
|
|
||||||
confirmPassword: z.string().min(1, 'Please confirm your password'),
|
|
||||||
})
|
|
||||||
.refine((data) => data.password === data.confirmPassword, {
|
|
||||||
message: 'Passwords do not match',
|
|
||||||
path: ['confirmPassword'],
|
|
||||||
});
|
|
||||||
|
|
||||||
type SignupFormData = z.infer<typeof signupSchema>;
|
|
||||||
|
|
||||||
export default function SignupPage() {
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const registerUser = useAuthStore((state) => state.register);
|
|
||||||
|
|
||||||
const { signInWithGitHub } = useGitHubAuth();
|
|
||||||
const [isGithubLoading, setIsGithubLoading] = useState(false);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
||||||
const [showPassword, setShowPassword] = useState(false);
|
|
||||||
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
|
||||||
|
|
||||||
const {
|
|
||||||
register,
|
|
||||||
handleSubmit,
|
|
||||||
formState: { errors, isValid },
|
|
||||||
} = useForm<SignupFormData>({
|
|
||||||
resolver: zodResolver(signupSchema),
|
|
||||||
mode: 'onChange',
|
|
||||||
});
|
|
||||||
|
|
||||||
const onSubmit = async (data: SignupFormData) => {
|
|
||||||
setError(null);
|
|
||||||
setIsSubmitting(true);
|
|
||||||
|
|
||||||
try {
|
|
||||||
await registerUser(data.fullname, data.email, data.password);
|
|
||||||
toast.success('Registration successful! Redirecting...');
|
|
||||||
navigate('/');
|
|
||||||
} catch (err: any) {
|
|
||||||
console.error('[Signup] Email signup failed:', err);
|
|
||||||
// Construct a user-friendly error message
|
|
||||||
const errorMessage =
|
|
||||||
err.response?.data?.message || err.message || 'Signup failed';
|
|
||||||
setError(errorMessage);
|
|
||||||
} finally {
|
|
||||||
setIsSubmitting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleGithubLogin = async () => {
|
|
||||||
try {
|
|
||||||
setIsGithubLoading(true);
|
|
||||||
|
|
||||||
const result = await signInWithGitHub();
|
|
||||||
|
|
||||||
if (result?.url) {
|
|
||||||
globalThis.location.href = result.url;
|
|
||||||
} else {
|
|
||||||
setIsGithubLoading(false);
|
|
||||||
setError('Failed to get GitHub OAuth URL');
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('[Signup] GitHub login failed:', err);
|
|
||||||
setError((err as Error).message || 'GitHub login failed');
|
|
||||||
setIsGithubLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const inputBaseClass =
|
|
||||||
'w-full px-4 py-2.5 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white text-gray-900 placeholder:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed';
|
|
||||||
const inputErrorClass = 'border-red-500';
|
|
||||||
const inputNormalClass = 'border-gray-300';
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
|
|
||||||
<div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200">
|
|
||||||
<div className="flex items-center justify-between mb-6">
|
|
||||||
<button
|
|
||||||
onClick={() => navigate('/')}
|
|
||||||
className="cursor-pointer text-primary-500 hover:text-primary-600 text-base font-sans flex items-center"
|
|
||||||
>
|
|
||||||
<Icon icon="ic:baseline-chevron-left" width="24" height="24" />
|
|
||||||
Back to Homepage
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="text-center mb-8">
|
|
||||||
<h2 className="text-3xl font-bold text-gray-900 mb-2">
|
|
||||||
Create Account
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-600">Join IMPHNEN community</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{error && (
|
|
||||||
<div className="mb-6 p-3 bg-red-50 border border-red-200 rounded-lg">
|
|
||||||
<p className="text-red-600 text-sm">{error}</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
htmlFor="fullname"
|
|
||||||
className="block text-sm font-medium text-gray-700 mb-1"
|
|
||||||
>
|
|
||||||
Full Name
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
id="fullname"
|
|
||||||
type="text"
|
|
||||||
{...register('fullname')}
|
|
||||||
placeholder="John Doe"
|
|
||||||
disabled={isSubmitting}
|
|
||||||
className={`${inputBaseClass} ${
|
|
||||||
errors.fullname ? inputErrorClass : inputNormalClass
|
|
||||||
}`}
|
|
||||||
/>
|
|
||||||
{errors.fullname && (
|
|
||||||
<p className="mt-1 text-sm text-red-500">
|
|
||||||
{errors.fullname.message}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
htmlFor="email"
|
|
||||||
className="block text-sm font-medium text-gray-700 mb-1"
|
|
||||||
>
|
|
||||||
Email
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
id="email"
|
|
||||||
type="email"
|
|
||||||
{...register('email')}
|
|
||||||
placeholder="yourname@example.com"
|
|
||||||
disabled={isSubmitting}
|
|
||||||
className={`${inputBaseClass} ${
|
|
||||||
errors.email ? inputErrorClass : inputNormalClass
|
|
||||||
}`}
|
|
||||||
/>
|
|
||||||
{errors.email && (
|
|
||||||
<p className="mt-1 text-sm text-red-500">
|
|
||||||
{errors.email.message}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
htmlFor="password"
|
|
||||||
className="block text-sm font-medium text-gray-700 mb-1"
|
|
||||||
>
|
|
||||||
Password
|
|
||||||
</label>
|
|
||||||
<div className="relative">
|
|
||||||
<input
|
|
||||||
id="password"
|
|
||||||
type={showPassword ? 'text' : 'password'}
|
|
||||||
{...register('password')}
|
|
||||||
placeholder="••••••••"
|
|
||||||
disabled={isSubmitting}
|
|
||||||
className={`${inputBaseClass} pr-12 ${
|
|
||||||
errors.password ? inputErrorClass : inputNormalClass
|
|
||||||
}`}
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setShowPassword(!showPassword)}
|
|
||||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
|
|
||||||
>
|
|
||||||
<Icon
|
|
||||||
icon={showPassword ? 'mdi:eye-off' : 'mdi:eye'}
|
|
||||||
className="text-xl"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{errors.password && (
|
|
||||||
<p className="mt-1 text-sm text-red-500">
|
|
||||||
{errors.password.message}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
htmlFor="confirmPassword"
|
|
||||||
className="block text-sm font-medium text-gray-700 mb-1"
|
|
||||||
>
|
|
||||||
Confirm Password
|
|
||||||
</label>
|
|
||||||
<div className="relative">
|
|
||||||
<input
|
|
||||||
id="confirmPassword"
|
|
||||||
type={showConfirmPassword ? 'text' : 'password'}
|
|
||||||
{...register('confirmPassword')}
|
|
||||||
placeholder="••••••••"
|
|
||||||
disabled={isSubmitting}
|
|
||||||
className={`${inputBaseClass} pr-12 ${
|
|
||||||
errors.confirmPassword ? inputErrorClass : inputNormalClass
|
|
||||||
}`}
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
|
|
||||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
|
|
||||||
>
|
|
||||||
<Icon
|
|
||||||
icon={showConfirmPassword ? 'mdi:eye-off' : 'mdi:eye'}
|
|
||||||
className="text-xl"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{errors.confirmPassword && (
|
|
||||||
<p className="mt-1 text-sm text-red-500">
|
|
||||||
{errors.confirmPassword.message}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={!isValid || isSubmitting}
|
|
||||||
className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors cursor-pointer"
|
|
||||||
>
|
|
||||||
{isSubmitting ? 'Creating account...' : 'Create Account'}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div className="my-6 flex items-center">
|
|
||||||
<div className="flex-1 border-t border-gray-300"></div>
|
|
||||||
<span className="px-4 text-sm text-gray-500">OR</span>
|
|
||||||
<div className="flex-1 border-t border-gray-300"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={handleGithubLogin}
|
|
||||||
disabled={isGithubLoading}
|
|
||||||
type="button"
|
|
||||||
className="w-full py-3 flex items-center justify-center gap-2 bg-gray-100 border border-gray-300 rounded-lg font-semibold text-gray-900 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:bg-gray-100 disabled:cursor-not-allowed transition-colors cursor-pointer"
|
|
||||||
>
|
|
||||||
<GithubOutlined className="text-xl" />
|
|
||||||
<span>
|
|
||||||
{isGithubLoading ? 'Connecting...' : 'Sign up with GitHub'}
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<p className="mt-3 text-xs text-center text-gray-500">
|
|
||||||
Make sure your GitHub email is{' '}
|
|
||||||
<a
|
|
||||||
href="https://github.com/settings/emails"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-primary-600 hover:underline"
|
|
||||||
>
|
|
||||||
set to public
|
|
||||||
</a>{' '}
|
|
||||||
for GitHub sign up to work.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="mt-6 text-center">
|
|
||||||
<p className="text-gray-600 text-sm">
|
|
||||||
Already have an account?{' '}
|
|
||||||
<Link
|
|
||||||
to="/auth/login"
|
|
||||||
className="text-primary-600 hover:text-primary-700 font-semibold"
|
|
||||||
>
|
|
||||||
Sign in
|
|
||||||
</Link>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-6 text-center">
|
|
||||||
<p className="text-gray-500 text-xs">
|
|
||||||
By signing up, you agree to our Terms of Service and Privacy Policy
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
import { useRouteError, isRouteErrorResponse } from 'react-router-dom';
|
|
||||||
|
|
||||||
export default function ErrorPage() {
|
|
||||||
const error = useRouteError();
|
|
||||||
let errorMessage: string;
|
|
||||||
|
|
||||||
if (isRouteErrorResponse(error)) {
|
|
||||||
errorMessage = error.statusText;
|
|
||||||
} else if (error instanceof Error) {
|
|
||||||
errorMessage = error.message;
|
|
||||||
} else if (typeof error === 'string') {
|
|
||||||
errorMessage = error;
|
|
||||||
} else {
|
|
||||||
console.error(error);
|
|
||||||
errorMessage = 'Unknown error';
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
|
||||||
<div className="text-center">
|
|
||||||
<h1 className="text-6xl font-bold text-red-600 mb-4">Oops!</h1>
|
|
||||||
<p className="text-xl text-gray-700 mb-2">
|
|
||||||
Sorry, an unexpected error has occurred.
|
|
||||||
</p>
|
|
||||||
<p className="text-gray-500 italic">{errorMessage}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,56 +0,0 @@
|
|||||||
import { api } from '../../auth/api/auth.service';
|
|
||||||
|
|
||||||
// Types
|
|
||||||
export interface Campaign {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
url: string;
|
|
||||||
is_active: boolean;
|
|
||||||
created_at: string;
|
|
||||||
updated_at: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface CreateCampaignRequest {
|
|
||||||
name: string;
|
|
||||||
url: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface CampaignsResponse {
|
|
||||||
success: boolean;
|
|
||||||
message: string;
|
|
||||||
data: Campaign[];
|
|
||||||
}
|
|
||||||
|
|
||||||
interface CampaignResponse {
|
|
||||||
success: boolean;
|
|
||||||
message: string;
|
|
||||||
data: Campaign;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface DeleteResponse {
|
|
||||||
success: boolean;
|
|
||||||
message: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const campaignService = {
|
|
||||||
getCampaigns: async (): Promise<Campaign[]> => {
|
|
||||||
const response = await api.get<CampaignsResponse>('/campaigns');
|
|
||||||
return response.data.data;
|
|
||||||
},
|
|
||||||
|
|
||||||
createCampaign: async (data: CreateCampaignRequest): Promise<Campaign> => {
|
|
||||||
const response = await api.post<CampaignResponse>('/campaigns', data);
|
|
||||||
return response.data.data;
|
|
||||||
},
|
|
||||||
|
|
||||||
activateCampaign: async (campaignId: string): Promise<Campaign> => {
|
|
||||||
const response = await api.put<CampaignResponse>(
|
|
||||||
`/campaigns/${campaignId}/activate`
|
|
||||||
);
|
|
||||||
return response.data.data;
|
|
||||||
},
|
|
||||||
|
|
||||||
deleteCampaign: async (campaignId: string): Promise<void> => {
|
|
||||||
await api.delete<DeleteResponse>(`/campaigns/${campaignId}`);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user