# 画面設計書 4-パスワードリセット画面

## 概要

本ドキュメントは、Chatwootアプリケーションのパスワードリセット画面に関する設計書です。ユーザーがパスワードを忘れた場合に、リセット用メールを送信する機能を提供する画面について記述しています。

### 本画面の処理概要

パスワードリセット画面は、ユーザーがパスワードを忘れた場合に、登録メールアドレス宛にパスワードリセット用のリンクを送信する機能を提供します。

**業務上の目的・背景**：ユーザーがパスワードを忘れた場合でも、セルフサービスでパスワードを再設定できる仕組みが必要です。本画面は、セキュリティを維持しながらユーザーのパスワード回復をサポートし、サポート担当者への問い合わせを削減します。メールアドレスの存在確認を行わず、常に成功メッセージを表示することで、アカウント列挙攻撃を防止しています。

**画面へのアクセス方法**：ブラウザで `/app/auth/reset/password` にアクセスするか、ログイン画面から「パスワードをお忘れですか？」リンクをクリックして遷移します。

**主要な操作・処理内容**：
1. メールアドレスを入力する
2. リセットメール送信ボタンを押下してリセット用メールを送信する
3. ログイン画面に戻るリンクを使用する

**画面遷移**：
- 遷移元：ログイン画面（パスワードを忘れたリンク）、直接URL入力
- 遷移先：ログイン画面（戻るリンク）

**権限による表示制御**：
- 未認証ユーザーのみアクセス可能
- `disableUserProfileUpdate`設定がtrueの場合、ログイン画面からのリンクは非表示になるが、直接URLアクセスは可能

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 4 | パスワードリセット | 主機能 | パスワードリセット用メール送信 |

## 画面種別

入力（パスワードリセット要求）

## URL/ルーティング

| パス | ルート名 | 説明 |
|------|----------|------|
| `/app/auth/reset/password` | `auth_reset_password` | パスワードリセット画面 |

## 入出力項目

### 入力項目

| 項目名 | 項目ID | 型 | 必須 | バリデーション | 説明 |
|--------|--------|-----|------|----------------|------|
| メールアドレス | `email` | text | Yes | required, email形式, 4文字以上 | パスワードリセット用メールアドレス |

### 出力項目

| 項目名 | 説明 | 表示条件 |
|--------|------|----------|
| 成功メッセージ | リセットメール送信成功 | API成功時（アラート表示） |
| エラーメッセージ | 送信失敗 | API失敗時（アラート表示） |

## 表示項目

| 項目名 | 説明 | 表示条件 |
|--------|------|----------|
| タイトル | 「パスワードをリセット」 | 常時 |
| 説明文 | リセット手順の説明 | 常時 |
| メールアドレス入力欄 | リセット用メールアドレス入力 | 常時 |
| リセットボタン | リセットメール送信ボタン | 常時 |
| ログインリンク | ログイン画面に戻るリンク | 常時 |

## イベント仕様

### 1-リセットボタン押下

**トリガー**: リセットボタンのクリックまたはフォーム送信

**処理フロー**:
1. フロントエンドでバリデーション実行
   - 必須チェック
   - メールアドレス形式チェック
   - 最小文字数チェック（4文字）
2. API `POST /api/v1/auth/password` にメールアドレスを送信
3. レスポンスに応じた処理:
   - 成功: 成功メッセージをアラート表示
   - 失敗: エラーメッセージをアラート表示
4. ローディング状態を解除

**データフロー**:
```
[ユーザー入力]
    │
    ▼
[バリデーション]
    │
    │ 成功
    ▼
[resetPassword API呼び出し]
    │
    ├─ 成功 ─▶ [成功アラート表示]
    │
    └─ 失敗 ─▶ [エラーアラート表示]
```

### 2-ログインリンク押下

**トリガー**: 「ログインに戻る」リンクのクリック

**処理フロー**:
1. `/auth/login` にルーター遷移
2. ログイン画面を表示

## データベース更新仕様

### 操作別データベース影響一覧

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| リセットメール送信成功 | users | UPDATE | `reset_password_token`、`reset_password_sent_at`の設定 |

### テーブル別更新項目詳細

#### users

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| UPDATE | reset_password_token | ランダムトークン生成 | パスワードリセットトークン |
| UPDATE | reset_password_sent_at | 現在時刻 | トークン送信日時 |

## メッセージ仕様

| メッセージID | メッセージ種別 | メッセージ内容 | 表示条件 |
|-------------|---------------|---------------|----------|
| RESET_PASSWORD.API.SUCCESS_MESSAGE | 成功 | パスワードリセット用のメールを送信しました | 送信成功時 |
| RESET_PASSWORD.API.ERROR_MESSAGE | エラー | パスワードリセットに失敗しました | 送信失敗時 |
| RESET_PASSWORD.EMAIL.ERROR | エラー | 有効なメールアドレスを入力してください | バリデーションエラー時 |

## 例外処理

| 例外条件 | 状態・動作 |
|---------|----------|
| メールアドレス未登録 | 成功メッセージを表示（セキュリティ対策） |
| ネットワークエラー | エラーメッセージを表示 |
| サーバーエラー（500系） | エラーメッセージを表示 |
| メール送信サーバーエラー | エラーメッセージを表示 |

## 備考

- セキュリティ対策として、メールアドレスが存在しない場合でも成功メッセージを表示する（アカウント列挙攻撃防止）
- リセットトークンには有効期限がある（バックエンドで管理）
- 複数回リセット要求を行った場合、前回のトークンは無効化される
- API成功時にサーバーから返されるメッセージがある場合は、そちらを優先表示

---

## コードリーディングガイド

本画面を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

パスワードリセット処理で扱われるデータ構造を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | auth.js | `app/javascript/v3/api/auth.js` | resetPassword関数のリクエスト形式 |

**読解のコツ**: `resetPassword`関数（行96-97）はシンプルなPOSTリクエストを行います。

#### Step 2: エントリーポイントを理解する

処理の起点となるVueコンポーネントを特定します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | Index.vue | `app/javascript/v3/views/auth/reset/password/Index.vue` | パスワードリセット画面のメインコンポーネント |
| 2-2 | routes.js | `app/javascript/v3/views/routes.js` | ルーティング定義 |

**主要処理フロー**:
1. **行26-35**: バリデーションルール定義（required, email, minLength）
2. **行37-42**: `showAlertMessage`メソッドでアラート表示
3. **行43-59**: `submit`メソッドでAPI呼び出しとレスポンス処理

### プログラム呼び出し階層図

```
Index.vue (パスワードリセット画面)
    │
    └─ submit()
           │
           ├─ resetPassword() [auth.js]
           │      │
           │      └─ wootAPI.post('auth/password')
           │             │
           │             └─ [Backend] passwords_controller#create
           │
           └─ showAlertMessage()
                  │
                  └─ useAlert()
```

### データフロー図

```
[入力]                      [処理]                              [出力]

credentials.email    ──▶   Index.vue                    ──▶   アラート表示
                           (submit)
                              │
                              ▼
                          resetPassword() [auth.js]
                              │
                              ▼
                          POST /api/v1/auth/password
                          { email }
                              │
                              ▼
                          [Backend]
                          passwords_controller#create
                              │
                     ┌────────┴────────┐
                     ▼                 ▼
                [成功]             [失敗]
                  │                  │
                  ▼                  ▼
            成功アラート        エラーアラート
            トークン生成
            メール送信
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| Index.vue | `app/javascript/v3/views/auth/reset/password/Index.vue` | ソース | パスワードリセット画面メインコンポーネント |
| routes.js | `app/javascript/v3/views/routes.js` | ソース | ルーティング定義 |
| auth.js | `app/javascript/v3/api/auth.js` | ソース | 認証API関数 |
| FormInput.vue | `app/javascript/v3/components/Form/Input.vue` | ソース | 入力フォームコンポーネント |
| Button.vue | `app/javascript/dashboard/components-next/button/Button.vue` | ソース | ボタンコンポーネント |
| en.json | `app/javascript/dashboard/i18n/locale/en/resetPassword.json` | 設定 | i18n翻訳ファイル |
