# 画面設計書 52-アクセストークン詳細画面

## 概要

本ドキュメントは、Fizzyアプリケーションにおけるアクセストークン詳細画面の設計仕様を記述したものである。

### 本画面の処理概要

本画面は、新規生成されたアクセストークンの値を表示し、ユーザーがコピーできるようにするための画面である。

**業務上の目的・背景**：アクセストークンはセキュリティ上の理由から、生成直後の一度のみ表示される。本画面では生成されたトークン文字列を確認し、クリップボードにコピーできる。ユーザーは必ずこのタイミングでトークンを安全な場所に保存する必要がある。後から再表示することはできないため、本画面の存在は重要である。

**画面へのアクセス方法**：アクセストークン新規作成画面でトークンを生成した直後に自動的にリダイレクトされる。URLには10秒間有効な暗号化トークンIDが含まれる。直接URLにアクセスしても、有効期限切れの場合はアクセストークン一覧画面にリダイレクトされる。

**主要な操作・処理内容**：
1. 生成されたトークンの値を確認する
2. 「Copy access token」ボタンでトークンをクリップボードにコピーする
3. トークンを安全な場所に保存する
4. ヘッダーの「Tokens」リンクで一覧画面に戻る

**画面遷移**：アクセストークン新規作成画面からリダイレクトで遷移してくる。ヘッダーの戻るリンクまたはホットキー（左矢印・ESC）でアクセストークン一覧画面に遷移する。

**権限による表示制御**：ログイン済みユーザーのみアクセス可能。自分自身が生成したトークンのみ閲覧でき、他ユーザーのトークンにはアクセスできない。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 5 | APIアクセストークン管理 | 主機能 | 生成されたアクセストークンを表示 |

## 画面種別

詳細

## URL/ルーティング

| メソッド | パス | アクション |
|---------|------|-----------|
| GET | /my/access_tokens/:id | show（トークン詳細表示） |

※ `:id` は暗号化された有効期限付きトークンID（10秒間有効）

## 入出力項目

本画面には入力項目はない（表示のみ）。

## 表示項目

| 項目名 | 説明 |
|--------|------|
| ページタイトル | "New personal access token" |
| 戻るリンク | "Tokens" - アクセストークン一覧画面へのリンク |
| トークン説明 | 生成時に入力した説明文と権限レベル（例："Github (Read + Write)"） |
| トークン値 | 生成されたトークン文字列（読み取り専用テキストフィールド） |
| 注意メッセージ | "Be sure to save this access token now because you won't be able to see it again." |
| コピーボタン | "Copy access token" - クリップボードにコピー |

## イベント仕様

### 1-Copy access token ボタン押下

トークン値をクリップボードにコピーする。

1. copy-to-clipboardコントローラがクリップボードAPIを呼び出す
2. コピー成功時、ボタンに成功スタイル（btn--success）が適用される
3. アイコン（copy-paste）はコピー操作を視覚的に示す

### 2-戻るリンク（Tokens）押下

アクセストークン一覧画面に遷移する。

### 3-左矢印キー / ESCキー押下

アクセストークン一覧画面に遷移する（ホットキー対応）。

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| 画面表示 | identity_access_tokens | SELECT | トークン情報を取得 |

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

#### identity_access_tokens

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| SELECT | id | 暗号化IDをverifierで復号 | 10秒以内のみ有効 |
| SELECT | description | 表示用に取得 | |
| SELECT | permission | 表示用に取得 | |
| SELECT | token | 表示用に取得 | 生成時のみ表示可能 |

## メッセージ仕様

| 種別 | メッセージ | 表示条件 |
|------|----------|----------|
| 警告 | Be sure to save this access token now because you won't be able to see it again. | 常時表示 |
| エラー | Token is no longer visible | 暗号化IDの有効期限切れ時 |

## 例外処理

| 例外条件 | 処理内容 |
|---------|---------|
| 未ログイン | ログイン画面にリダイレクト |
| 暗号化IDの有効期限切れ（10秒超過） | アクセストークン一覧画面にリダイレクト、"Token is no longer visible"アラート表示 |
| 不正な暗号化ID | InvalidSignature例外をキャッチし、一覧画面にリダイレクト |

## 備考

- トークン値は生成直後の本画面でのみ表示される（セキュリティ対策）
- URLのトークンIDは10秒間の有効期限があるため、リロードすると閲覧不可になる
- クリップボードコピー機能にはStimulusのcopy-to-clipboardコントローラを使用
- View Transitionsを使用したアニメーション対応

---

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

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

### 推奨読解順序

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | access_token.rb | `app/models/identity/access_token.rb` | tokenカラムの存在、permission enumの定義 |

**読解のコツ**: `has_secure_token`によりtokenカラムに自動的にセキュアなランダム文字列が設定される。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | access_tokens_controller.rb | `app/controllers/my/access_tokens_controller.rb` | showアクションの実装、暗号化IDの検証処理 |

**主要処理フロー**:
1. **6-9行目**: showアクション - 暗号化IDをverifierで復号し、トークンを取得
2. **8-9行目**: InvalidSignature例外をキャッチ - 有効期限切れ時のリダイレクト処理
3. **37-39行目**: verifierメソッド - Rails.application.message_verifierで暗号化/復号

#### Step 3: ビューテンプレートを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | show.html.erb | `app/views/my/access_tokens/show.html.erb` | トークン表示、コピーボタン、注意メッセージ |

**主要処理フロー**:
- **5行目**: back_link_toでTokens一覧へのリンク（ホットキー対応）
- **14行目**: トークン説明と権限レベルの表示
- **15行目**: トークン値をreadonly入力フィールドで表示
- **17行目**: 注意メッセージ（再表示不可の警告）
- **19-24行目**: copy-to-clipboardコントローラでコピーボタン実装

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

```
ブラウザ
    │
    └─ GET /my/access_tokens/:encrypted_id
           └─ My::AccessTokensController#show
                  ├─ verifier.verify(params[:id])
                  │      └─ Rails.application.message_verifier(:access_tokens)
                  │             └─ 復号成功 → access_token_id
                  │             └─ 復号失敗 → InvalidSignature例外
                  │
                  ├─ (成功時) my_access_tokens.find(id)
                  │      └─ @access_token に代入
                  │
                  └─ (失敗時) redirect_to一覧画面, alert
```

### データフロー図

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

暗号化ID（URL） ───────────▶ AccessTokensController#show ────▶ show.html.erb
                                   │                              │
                                   ▼                              ▼
                            MessageVerifier.verify           トークン値表示
                                   │                         (readonly input)
                                   ▼                              │
                       identity_access_tokens                     ▼
                           (SELECT)                        クリップボードコピー
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| access_tokens_controller.rb | `app/controllers/my/access_tokens_controller.rb` | コントローラ | showアクションの実装 |
| access_token.rb | `app/models/identity/access_token.rb` | モデル | トークンデータモデル |
| show.html.erb | `app/views/my/access_tokens/show.html.erb` | ビュー | トークン詳細表示 |
| copy_to_clipboard_controller.js | `app/javascript/controllers/copy_to_clipboard_controller.js` | Stimulus | クリップボードコピー機能 |
| hotkey_controller.js | `app/javascript/controllers/hotkey_controller.js` | Stimulus | ホットキー制御 |
