# Gateway Frontend

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

## 技術

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

## 啟動（推薦一鍵後端）

```bash
# 終端 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 dev-up` 會自動建立原始管理員並寫入 Mongo：

| 欄位 | 值 |
|------|-----|
| Email | `admin@k6.local` |
| 密碼 | `Admin-Pass-1!` |
| 租戶 | `k6-tenant` |
| 角色 | `tenant_admin` |

登入後頂部會出現「管理後台」，或在首頁 `/app` 的「權限管理」卡片進入。

手動重跑 seed（冪等）：

```bash
make dev-seed-admin
```

## 環境變數

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

## 建置

```bash
npm run build   # → dist/
```