# 画面設計書 8-アカウントなし画面

## 概要

本ドキュメントは、Chatwootアプリケーションのアカウントなし画面に関する設計書です。認証されたユーザーにアカウントが存在しない場合に表示される画面について記述しています。

### 本画面の処理概要

アカウントなし画面は、ユーザーが正常にログインしたにもかかわらず、所属するアカウントが存在しない場合に表示される画面です。状況に応じたメッセージを表示し、ログアウト機能を提供します。

**業務上の目的・背景**：アカウント削除後やアカウントメンバーからの除外後にログインしようとした場合、ユーザーはダッシュボードにアクセスできません。本画面は、そのような状況をユーザーに明確に伝え、適切な次のアクションを案内します。Chatwoot Cloud版とセルフホスト版で異なるメッセージを表示し、それぞれの環境に適した案内を提供します。

**画面へのアクセス方法**：ユーザーがログイン後、所属するアカウントが存在しないことが検出された場合に自動的にリダイレクトされます。URL直接アクセスも可能です（`/app/no-accounts`）。

**主要な操作・処理内容**：
1. アカウントなし状態の確認と適切なメッセージの表示
2. ログアウトボタンによるログアウト処理

**画面遷移**：
- 遷移元：ログイン後のアカウント存在チェック
- 遷移先：ログイン画面（ログアウト後）

**権限による表示制御**：
- 認証済みユーザーがアクセス可能
- アカウント所属がないユーザーに対して表示

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 8 | アカウント作成・管理 | 主機能 | アカウントが存在しない状態の表示 |

## 画面種別

エラー（アカウント状態通知）

## URL/ルーティング

| パス | ルート名 | 説明 |
|------|----------|------|
| `/app/no-accounts` | `no_accounts` | アカウントなし画面 |

## 入出力項目

### 入力項目

本画面ではユーザーによる入力項目はありません。

### 出力項目

| 項目名 | 説明 | 表示条件 |
|--------|------|----------|
| タイトル | アカウントなしタイトル | 常時 |
| メッセージ | 状況説明（Cloud版/セルフホスト版で異なる） | 常時 |

## 表示項目

| 項目名 | 説明 | 表示条件 |
|--------|------|----------|
| 空状態コンポーネント | EmptyStateコンポーネントによる表示 | 常時 |
| タイトル | 「アカウントが見つかりません」 | 常時 |
| メッセージ（Cloud版） | Cloud版向けの案内メッセージ | Chatwoot Cloud環境 |
| メッセージ（セルフホスト版） | セルフホスト版向けの案内メッセージ | セルフホスト環境 |
| ログアウトボタン | ログアウト実行ボタン | 常時 |

## イベント仕様

### 1-ログアウトボタン押下

**トリガー**: ログアウトボタンのクリック

**処理フロー**:
1. `handleLogout`関数を呼び出し
2. `Auth.logout()`を実行してログアウト処理
3. 認証情報をクリアし、ログイン画面にリダイレクト

**データフロー**:
```
[ログアウトボタン押下]
    │
    ▼
[handleLogout()]
    │
    ▼
[Auth.logout()]
    │
    ▼
[認証情報クリア]
    │
    ▼
[ログイン画面へリダイレクト]
```

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

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

本画面ではデータベースの更新は行いません。ログアウト処理はクライアントサイドの認証情報クリアのみです。

## メッセージ仕様

| メッセージID | メッセージ種別 | メッセージ内容 | 表示条件 |
|-------------|---------------|---------------|----------|
| APP_GLOBAL.NO_ACCOUNTS.TITLE | 情報 | アカウントが見つかりません | 常時 |
| APP_GLOBAL.NO_ACCOUNTS.MESSAGE_CLOUD | 情報 | Cloud版向け案内メッセージ | Cloud環境 |
| APP_GLOBAL.NO_ACCOUNTS.MESSAGE_SELF_HOSTED | 情報 | セルフホスト版向け案内メッセージ | セルフホスト環境 |
| APP_GLOBAL.NO_ACCOUNTS.LOGOUT | ボタン | ログアウト | 常時 |

## 例外処理

| 例外条件 | 状態・動作 |
|---------|----------|
| ログアウト処理エラー | ログイン画面にリダイレクト（エラーは無視） |

## 備考

- `isOnChatwootCloud` getterでCloud環境かセルフホスト環境かを判定
- 環境に応じて適切なメッセージを表示（管理者への問い合わせ案内など）
- EmptyStateコンポーネントを使用して一貫したエラー表示を提供
- ログアウトボタンは`variant="smooth"`、`color-scheme="secondary"`のスタイルで表示

---

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

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

### 推奨読解順序

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

アカウント状態判定で使用されるデータを理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | dashboard.routes.js | `app/javascript/dashboard/routes/dashboard/dashboard.routes.js` | ルーティング定義 |
| 1-2 | globalConfig getters | `app/javascript/dashboard/store/modules/globalConfig.js` | isOnChatwootCloud getter |

**読解のコツ**: `useMapGetter`フックでVuexストアのgetterを使用しています。

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | Index.vue | `app/javascript/dashboard/routes/dashboard/noAccounts/Index.vue` | アカウントなし画面のメインコンポーネント |

**主要処理フロー**:
1. **行10**: `useMapGetter`でisOnChatwootCloud getterを取得
2. **行12-17**: `message` computed propertyで環境に応じたメッセージを選択
3. **行19-21**: `handleLogout`関数でログアウト処理

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

```
Index.vue (アカウントなし画面)
    │
    ├─ computed: message
    │      │
    │      └─ isOnChatwootCloud ? MESSAGE_CLOUD : MESSAGE_SELF_HOSTED
    │
    └─ handleLogout()
           │
           └─ Auth.logout()
                  │
                  └─ [認証情報クリア] → [ログイン画面へリダイレクト]
```

### データフロー図

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

globalConfig.          ──▶   Index.vue                  ──▶   画面表示
isOnChatwootCloud            (computed: message)
                                 │
                                 ▼
                             [環境判定]
                             isOnChatwootCloud
                                 │
                     ┌───────────┴───────────┐
                     ▼                       ▼
                [Cloud版]              [セルフホスト版]
                     │                       │
                     ▼                       ▼
              MESSAGE_CLOUD         MESSAGE_SELF_HOSTED
                     │                       │
                     └───────────┬───────────┘
                                 ▼
                             [EmptyState表示]
                             タイトル + メッセージ
                                 │
                                 ▼
                             [ログアウトボタン]
                                 │
                             [押下時]
                                 │
                                 ▼
                             [Auth.logout()]
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| Index.vue | `app/javascript/dashboard/routes/dashboard/noAccounts/Index.vue` | ソース | アカウントなし画面メインコンポーネント |
| dashboard.routes.js | `app/javascript/dashboard/routes/dashboard/dashboard.routes.js` | ソース | ルーティング定義 |
| EmptyState.vue | `app/javascript/dashboard/components/widgets/EmptyState.vue` | ソース | 空状態表示コンポーネント |
| Button.vue | `app/javascript/dashboard/components-next/button/Button.vue` | ソース | ボタンコンポーネント |
| auth.js | `app/javascript/dashboard/api/auth.js` | ソース | 認証API（logout） |
| globalConfig.js | `app/javascript/dashboard/store/modules/globalConfig.js` | ソース | グローバル設定Vuexモジュール |
| en.json | `app/javascript/dashboard/i18n/locale/en/appGlobal.json` | 設定 | i18n翻訳ファイル |
