# 画面設計書 5-パスワード編集画面

## 概要

本ドキュメントは、Chatwootアプリケーションのパスワード編集画面に関する設計書です。パスワードリセットメールから遷移し、新しいパスワードを設定する機能を提供する画面について記述しています。

### 本画面の処理概要

パスワード編集画面は、パスワードリセットメールに含まれるリンクからアクセスし、ユーザーが新しいパスワードを設定するための画面です。リセットトークンの検証と新パスワードの設定を行います。

**業務上の目的・背景**：パスワードリセットフローの最終段階として、ユーザーが安全に新しいパスワードを設定できる機能が必要です。本画面は、リセットトークンによる本人確認を経て、パスワードの再設定を可能にします。パスワード確認入力により、誤入力を防止し、ユーザー体験を向上させています。

**画面へのアクセス方法**：パスワードリセットメールに含まれるリンクからアクセスします。URLには `reset_password_token` クエリパラメータが含まれており、このトークンがない場合はログイン画面にリダイレクトされます。

**主要な操作・処理内容**：
1. 新しいパスワードを入力する
2. パスワード確認を入力する
3. 送信ボタンを押下して新しいパスワードを設定する

**画面遷移**：
- 遷移元：パスワードリセットメールのリンク
- 遷移先：ダッシュボードホーム画面（設定成功後）、ログイン画面（トークンなしの場合）

**権限による表示制御**：
- 有効なリセットトークンがない場合はログイン画面にリダイレクト
- セッションを無視するメタ情報（`ignoreSession: true`）が設定されている

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 4 | パスワードリセット | 主機能 | 新しいパスワードの設定 |

## 画面種別

編集（パスワード設定）

## URL/ルーティング

| パス | ルート名 | 説明 |
|------|----------|------|
| `/app/auth/password/edit` | `auth_password_edit` | パスワード編集画面 |

### クエリパラメータ

| パラメータ | 型 | 説明 |
|-----------|-----|------|
| `reset_password_token` | String | パスワードリセットトークン（必須） |
| `config` | String | 設定情報 |
| `route_url` | String | リダイレクトURL |

### ルートメタ情報

| メタキー | 値 | 説明 |
|---------|-----|------|
| `ignoreSession` | `true` | セッション状態を無視 |

## 入出力項目

### 入力項目

| 項目名 | 項目ID | 型 | 必須 | バリデーション | 説明 |
|--------|--------|-----|------|----------------|------|
| パスワード | `password` | password | Yes | required, 6文字以上 | 新しいパスワード |
| パスワード確認 | `confirmPassword` | password | Yes | required, 6文字以上, パスワードと一致 | パスワード確認入力 |

### 出力項目

パスワード設定成功時はダッシュボードにリダイレクトされるため、本画面での出力項目はありません。

## 表示項目

| 項目名 | 説明 | 表示条件 |
|--------|------|----------|
| タイトル | 「新しいパスワードを設定」 | 常時 |
| パスワード入力欄 | 新しいパスワード入力 | 常時 |
| パスワード確認入力欄 | パスワード確認入力 | 常時 |
| 送信ボタン | パスワード設定実行ボタン | 常時 |

## イベント仕様

### 1-送信ボタン押下

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

**処理フロー**:
1. フロントエンドでバリデーション実行
   - パスワード必須チェック
   - パスワード最小文字数チェック（6文字）
   - パスワード確認必須チェック
   - パスワード確認最小文字数チェック（6文字）
   - パスワードとパスワード確認の一致チェック
2. API `PUT /api/v1/auth/password` に新パスワードとトークンを送信
3. レスポンスに応じた処理:
   - 成功: 認証情報を設定し、ダッシュボードにリダイレクト
   - 失敗: エラーメッセージをアラート表示

**データフロー**:
```
[ユーザー入力]
    │
    ▼
[バリデーション]
    │
    │ 成功
    ▼
[setNewPassword API呼び出し]
    │
    ├─ 成功 ─▶ [認証情報設定] → [ダッシュボードへリダイレクト]
    │
    └─ 失敗 ─▶ [エラーアラート表示]
```

### 2-コンポーネントマウント時

**トリガー**: コンポーネントのマウント

**処理フロー**:
1. `resetPasswordToken` propsの存在確認
2. トークンがない場合はログイン画面にリダイレクト

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| パスワード設定成功 | users | UPDATE | `encrypted_password`の更新、リセットトークンのクリア |

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

#### users

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| UPDATE | encrypted_password | 新パスワードをハッシュ化 | 暗号化パスワード |
| UPDATE | reset_password_token | NULL | トークンクリア |
| UPDATE | reset_password_sent_at | NULL | 送信日時クリア |
| UPDATE | updated_at | 現在時刻 | 更新日時 |

## メッセージ仕様

| メッセージID | メッセージ種別 | メッセージ内容 | 表示条件 |
|-------------|---------------|---------------|----------|
| SET_NEW_PASSWORD.API.ERROR_MESSAGE | エラー | パスワードの設定に失敗しました | 設定失敗時 |
| SET_NEW_PASSWORD.PASSWORD.ERROR | エラー | パスワードは6文字以上で入力してください | パスワードバリデーションエラー時 |
| SET_NEW_PASSWORD.CONFIRM_PASSWORD.ERROR | エラー | パスワードが一致しません | パスワード確認バリデーションエラー時 |

## 例外処理

| 例外条件 | 状態・動作 |
|---------|----------|
| リセットトークンなし | ログイン画面にリダイレクト |
| リセットトークン無効 | エラーメッセージを表示 |
| リセットトークン期限切れ | エラーメッセージを表示 |
| パスワード不一致 | バリデーションエラー表示 |
| ネットワークエラー | エラーメッセージを表示 |
| サーバーエラー（500系） | エラーメッセージを表示 |

## 備考

- リセットトークンがない場合は即座にログイン画面にリダイレクトされる
- パスワードの一致確認は`isEqPassword`カスタムバリデーターで実装
- 設定成功後は自動的にログイン状態となり、ダッシュボードにリダイレクト
- `ignoreSession`メタ情報により、既存のセッション状態は無視される

---

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

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

### 推奨読解順序

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

パスワード設定処理で扱われるデータ構造を理解します。

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

**読解のコツ**: `PUT auth/password` エンドポイントに対して、リセットトークン、パスワード、パスワード確認を送信します。

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | Edit.vue | `app/javascript/v3/views/auth/password/Edit.vue` | パスワード編集画面のメインコンポーネント |
| 2-2 | routes.js | `app/javascript/v3/views/routes.js` | ルーティング定義、`ignoreSession`メタ情報 |

**主要処理フロー**:
1. **行36-42**: `mounted`ライフサイクルフックでトークン確認
2. **行43-60**: バリデーションルール定義（isEqPasswordカスタムバリデーター）
3. **行67-83**: `submitForm`メソッドでAPI呼び出しとレスポンス処理

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

```
Edit.vue (パスワード編集画面)
    │
    ├─ mounted()
    │      │
    │      └─ [トークン確認] → リダイレクト（トークンなしの場合）
    │
    └─ submitForm()
           │
           ├─ setNewPassword() [auth.js]
           │      │
           │      └─ wootAPI.put('auth/password')
           │             │
           │             └─ [Backend] passwords_controller#update
           │
           └─ [成功] → setAuthCredentials() → redirect
                       [失敗] → showAlertMessage()
```

### データフロー図

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

credentials.password     ──▶   Edit.vue                  ──▶   ダッシュボード
credentials.confirmPassword    (submitForm)                     リダイレクト
resetPasswordToken                │
                                  ▼
                              [バリデーション]
                                  │
                                  ▼
                              setNewPassword() [auth.js]
                                  │
                                  ▼
                              PUT /api/v1/auth/password
                              {
                                reset_password_token,
                                password,
                                password_confirmation
                              }
                                  │
                                  ▼
                              [Backend]
                              passwords_controller#update
                                  │
                         ┌────────┴────────┐
                         ▼                 ▼
                    [成功]             [失敗]
                      │                  │
                      ▼                  ▼
                認証情報保存         エラー表示
                リダイレクト
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| Edit.vue | `app/javascript/v3/views/auth/password/Edit.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` | ソース | ボタンコンポーネント |
| globals.js | `app/javascript/dashboard/constants/globals.js` | 設定 | DEFAULT_REDIRECT_URL定義 |
| en.json | `app/javascript/dashboard/i18n/locale/en/setNewPassword.json` | 設定 | i18n翻訳ファイル |
