template-monorepo/frontend

Gateway Frontend

一般使用者前台 + 簡易管理後台，對應本 repo 的 Gateway API。

技術

• Vite + React + TypeScript + React Router
• 無 UI 框架，表單與頁面導覽即可日常使用

啟動（推薦一鍵後端）

# 終端 1：後端全套（首次約 1–2 分鐘，等 ZITADEL 起來）
make dev-up

# 終端 2：前端
make frontend-dev

開啟 http://localhost:5173 · 註冊 OTP 到 http://localhost:8025（MailHog）

關閉：make dev-down

頁面結構

使用者前台

路徑	功能
/login	登入
/register	註冊（寄 Email OTP）
/register/confirm	輸入 6 碼完成註冊
/app	首頁（個人摘要、驗證狀態、角色）
/app/profile	編輯顯示名稱、語系、幣別、電話
/app/security	商業 Email/手機驗證、TOTP 綁定

管理後台（需 tenant_admin 或 tenant_owner）

路徑	功能
/admin	總覽、Policy 重載
/admin/roles	角色列表、新增、改名、刪除
/admin/users	依 UID 查詢 / 指派 / 撤銷角色

有管理權限時，使用者前台頂部會出現「管理後台」連結。

本機預設

• 租戶：k6-tenant
• 邀請碼：K6INVITE（需先 make k6-seed-fixtures 或對應 Mongo 資料）
• OTP：開發環境到 MailHog http://localhost:8025 查看

取得管理員權限

make k6-seed-admin
# 將輸出的 ADMIN_ACCESS_TOKEN 貼到瀏覽器 — 需自行在 localStorage 設 access_token
# 或：用 seed 產生的帳密在 /login 登入（若 ZITADEL password grant 可用）

較簡單做法：完成一般註冊登入後，在 Mongo 手動指派 tenant_admin，或跑 k6-seed-admin 用新帳號登入。

環境變數

變數	說明
VITE_API_BASE	API 根網址；留空則走 Vite proxy /api → :8888

建置

npm run build   # → dist/