# 画面設計書 50-アクセストークン一覧画面

## 概要

本ドキュメントは、Fizzyアプリケーションにおけるアクセストークン一覧画面の設計仕様を定義したものです。ユーザーの個人アクセストークン（API用トークン）を管理する画面について記載しています。

### 本画面の処理概要

本画面は、ユーザーが生成した個人アクセストークンの一覧を表示し、新しいトークンの生成や既存トークンの取り消し（Revoke）を行うための画面です。アクセストークンはFizzy APIへのアクセスに使用されます。

**業務上の目的・背景**：外部システムやスクリプトからFizzy APIにアクセスするためには、認証用のアクセストークンが必要です。本画面は、開発者やパワーユーザーが自身のAPI利用を管理できるようにし、必要に応じてトークンを生成・取り消しできるインターフェースを提供します。これにより、セキュリティを維持しながらAPI連携を可能にします。

**画面へのアクセス方法**：ユーザープロフィール画面（No.38）からリンク、またはURLを直接入力してアクセスします。

**主要な操作・処理内容**：
1. 生成済みアクセストークンの一覧を表示する
2. 各トークンの説明、権限（Read/Write）、作成日時を確認する
3. トークンを取り消す（Revoke）
4. 新しいアクセストークンを生成する

**画面遷移**：
- 遷移元：ユーザープロフィール画面（No.38）
- 遷移先：アクセストークン新規作成画面（No.51）

**権限による表示制御**：認証済みユーザーのみアクセス可能です。自分のIdentityに紐づくトークンのみ表示されます。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 5 | APIアクセストークン管理 | 主機能 | 個人アクセストークンの一覧を表示 |

## 画面種別

一覧

## URL/ルーティング

- パス: `/my/access_tokens`
- HTTPメソッド: GET
- ルート名: `my_access_tokens_path`
- コントローラ: `My::AccessTokensController#index`

## 入出力項目

本画面には入力項目はありません。

## 表示項目

| 項目名 | 説明 | 表示条件 |
|--------|------|----------|
| ページタイトル | "Personal access tokens" | 常時 |
| 戻るリンク | "My profile" | 常時 |
| トークン説明文（0件時） | API利用の説明 | トークンが0件の場合 |
| トークン一覧テーブル | 既存トークンの一覧 | トークンが1件以上の場合 |
| Description列 | トークンの説明 | トークンが1件以上の場合 |
| Permission列 | 権限（Read/Write） | トークンが1件以上の場合 |
| Created列 | 作成日時 | トークンが1件以上の場合 |
| 削除ボタン | トークン取り消し | 各トークンに表示 |
| 新規作成リンク | "Generate a new access token" | 常時 |

## イベント仕様

### 1-戻るリンク押下

ヘッダーの「My profile」リンクをクリックすると、ユーザープロフィール画面（`user_path(Current.user)`）に遷移します。キーボードショートカット（左矢印キー、Escキー）でも同様の動作が可能です。

### 2-削除ボタン押下

各トークンの削除ボタンをクリックすると、確認ダイアログが表示されます。確認後、DELETEリクエストが送信され、トークンが取り消されます。取り消し後は一覧画面にリダイレクトされます。

### 3-新規作成リンク押下

「Generate a new access token」リンクをクリックすると、アクセストークン新規作成画面（`new_my_access_token_path`）に遷移します。

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| 画面表示 | identity_access_tokens | SELECT | ユーザーのアクセストークン一覧を取得 |
| 削除ボタン押下 | identity_access_tokens | DELETE | 指定されたアクセストークンを削除 |

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

#### identity_access_tokens（削除時）

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| DELETE | - | id = params[:id], identity_id = Current.identity.id | 該当するトークンを削除 |

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|---------------|----------|
| MSG-001 | 案内（0件時） | Personal access tokens can be used like a password to access the Fizzy developer API. You can have as many tokens as you need and revoke access to each one at any time. | トークンが0件の場合 |
| MSG-002 | 案内（1件以上時） | Tokens you have generated that can be used to access the Fizzy API. | トークンが1件以上の場合 |
| MSG-003 | 確認 | Are you sure you want to permanently revoke this access token? | 削除ボタン押下時 |

## 例外処理

| 例外ケース | 対応 |
|-----------|------|
| 認証されていない | ログイン画面へリダイレクト |
| 存在しないトークンの削除 | 404エラー |

## 備考

- トークン一覧は作成日時の降順（`order(created_at: :desc)`）で表示される
- 削除ボタンには`turbo_confirm`で確認ダイアログが表示される
- `view-transition-name`によるView Transitionsが適用されている
- 権限は`humanize`で人間可読形式に変換される（read → Read, write → Write）
- 作成日時は`local_datetime_tag`ヘルパーで表示される
- トークン値自体はこの画面では表示されない（生成直後の画面でのみ表示）

---

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

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

### 推奨読解順序

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

アクセストークンに関わるモデルの構造を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | access_token.rb | `app/models/identity/access_token.rb` | AccessTokenモデルの構造と権限を確認 |
| 1-2 | identity.rb | `app/models/identity.rb` | IdentityとAccessTokenの関連を確認 |

**読解のコツ**: `Identity::AccessToken`はIdentityに属し、`has_secure_token`でトークンを自動生成します。`enum :permission`で読み取り専用/読み書き可能の権限を管理します。

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

処理の起点となるコントローラを特定します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | access_tokens_controller.rb | `app/controllers/my/access_tokens_controller.rb` | index/destroyアクションの実装を確認 |

**主要処理フロー**:
1. **行2-3**: `index`アクション - トークン一覧を作成日時の降順で取得
2. **行23-26**: `destroy`アクション - 指定されたトークンを削除しリダイレクト
3. **行29-31**: `my_access_tokens` - Current.identity.access_tokensを返す

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | index.html.erb | `app/views/my/access_tokens/index.html.erb` | 一覧表示の構造を確認 |
| 3-2 | _access_token.html.erb | `app/views/my/access_tokens/_access_token.html.erb` | 個別トークンの表示と削除ボタンを確認 |

**主要処理フロー**:
- **index.html.erb 行12-29**: トークン有無による条件分岐
- **index.html.erb 行14-26**: テーブル形式でのトークン一覧表示
- **index.html.erb 行31-34**: 新規作成リンク
- **_access_token.html.erb 行2-3**: 説明と権限の表示
- **_access_token.html.erb 行4**: 作成日時の表示
- **_access_token.html.erb 行5-11**: 削除ボタン（確認ダイアログ付き）

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

```
My::AccessTokensController#index
    │
    ├─ my_access_tokens
    │      └─ Current.identity.access_tokens
    │
    ├─ @access_tokens.order(created_at: :desc)
    │
    └─ index.html.erb レンダリング
           │
           ├─ @access_tokens.any?
           │      │
           │      ├─ true ──▶ テーブル表示
           │      │              └─ render partial: "_access_token", collection
           │      │
           │      └─ false ──▶ 説明文表示
           │
           └─ 新規作成リンク

My::AccessTokensController#destroy
    │
    ├─ my_access_tokens.find(params[:id])
    │
    ├─ destroy!
    │
    └─ redirect_to my_access_tokens_path
```

### データフロー図

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

なし                  AccessTokensController#index       index.html.erb
    ───────────▶           │
                           ├─▶ Current.identity.access_tokens
                           │
                           └─▶ order(created_at: :desc)
                                     │
                                     └─▶ _access_token.html.erb × N
                                            │
                                            ├─ description
                                            ├─ permission.humanize
                                            ├─ created_at
                                            └─ 削除ボタン
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| access_tokens_controller.rb | `app/controllers/my/access_tokens_controller.rb` | コントローラ | データ取得・画面制御・削除処理 |
| index.html.erb | `app/views/my/access_tokens/index.html.erb` | ビュー | トークン一覧画面 |
| _access_token.html.erb | `app/views/my/access_tokens/_access_token.html.erb` | パーシャル | 個別トークンの表示 |
| new.html.erb | `app/views/my/access_tokens/new.html.erb` | ビュー | 新規作成画面 |
| show.html.erb | `app/views/my/access_tokens/show.html.erb` | ビュー | トークン表示画面 |
| access_token.rb | `app/models/identity/access_token.rb` | モデル | アクセストークンエンティティ |
| identity.rb | `app/models/identity.rb` | モデル | Identityエンティティ |
| routes.rb | `config/routes.rb` | 設定 | ルーティング定義（行176） |
