# Wireframe — `/register`

> 文字版 wireframe。結構與 `/login` 近乎相同，差異列於本文。

---

## 佈局

參考 `wf-login.md`，差異如下：

```
Card 內容改為：

  Label: Email
  Input (type=email, required, autoComplete=email)

  Label: 密碼
  Input (type=password, required, autoComplete=new-password)

  Label: 確認密碼
  Input (type=password, required, autoComplete=new-password)
  // 失焦時比對 password，不符顯示 error 紅字

  Button: 建立帳號 (w-full, variant=default)

  Separator + 「已經有帳號？」

  Link → /login
  Button: 登入 (w-full, variant=outline)
```

---

## 驗證（Phase 0 最小化）

- **Email**：`required` + `type=email`（HTML5 內建）
- **密碼**：`required`，無強度驗證
- **確認密碼**：
  - `onBlur` 時比對 password
  - 不符：`aria-invalid=true` + 紅色邊框 + 下方 `<p class="text-xs text-destructive">兩次輸入的密碼不一致</p>`

---

## 提交行為（Phase 0）

```tsx
async function handleRegister(e) {
  e.preventDefault();
  if (password !== confirm) {
    setError('passwordMismatch');
    return;
  }
  // Phase 0: 不接 API
  useAuthStore.getState().login(email);
  router.push('/devices/pair');  // 引導首次配對
}
```

---

## 標題

```
          [Logo]
      visionA Cloud
      Edge AI Platform

     （Card 內上方大標）
         建立帳號
        開始使用 visionA Cloud
```

---

## Phase 1 TODO

見 `flows/flow-auth.md` 第 12 節。