# 画面設計書 36-ユーザー設定画面

## 概要

本ドキュメントはInvenTreeシステムにおけるユーザー設定画面（UserSettings）の設計仕様を記載したものである。本画面は個人ユーザーが自身のアカウント情報、セキュリティ設定、表示オプション、検索設定、通知設定などをカスタマイズするための画面である。

### 本画面の処理概要

本画面はログイン済みユーザーが自身の個人設定を管理するための画面である。アカウント情報の変更、セキュリティ設定（MFA、メールアドレス管理、SSOプロバイダ連携）、UIの表示オプション、検索動作の設定、通知方法の設定、レポート出力設定などを行える。

**業務上の目的・背景**：ユーザーごとに業務スタイルや好みが異なるため、インターフェースのカスタマイズ機能が重要である。例えば、日付表示形式の変更、検索結果のプレビュー表示制御、通知の受信方法設定などにより、各ユーザーが最も効率的に作業できる環境を構築できる。また、セキュリティ面ではMFA設定やAPIトークン管理により、アカウントのセキュリティレベルをユーザー自身が管理できる。

**画面へのアクセス方法**：ログイン後、ナビゲーションメニューから「設定」→「ユーザー設定」を選択、またはURL `/settings/user/` に直接アクセスする。

**主要な操作・処理内容**：
1. アカウントパネルでプロファイル情報とテーマを確認・変更する
2. セキュリティパネルでメールアドレス、SSO連携、MFA、APIトークンを管理する
3. 表示オプションパネルでUI表示設定を変更する
4. 検索パネルで検索動作の設定を変更する
5. 通知パネルで通知方法を設定する
6. レポートパネルでレポート/ラベル出力設定を変更する
7. プラグインパネルでプラグイン固有のユーザー設定を変更する

**画面遷移**：
- 遷移元：ホーム画面、ナビゲーションメニュー、ユーザープロファイルドロップダウン
- 遷移先：MFA設定画面（セキュリティパネルから）

**権限による表示制御**：本画面はログイン済みユーザーであれば誰でもアクセス可能。未ログイン状態ではSkeletonが表示される。セッション情報セクション（Session Information）はスーパーユーザーのみ表示される。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 37 | ユーザー設定管理 | 主機能 | アカウント・セキュリティ・表示オプション・検索・通知等の個人設定 |
| 33 | 認証・ログイン | 補助機能 | セキュリティ設定（MFA等） |
| 34 | APIトークン管理 | 補助機能 | APIトークンの生成・管理 |

## 画面種別

設定画面（パネル構成）

## URL/ルーティング

| パス | 説明 |
|------|------|
| `/settings/user/` | ユーザー設定画面（デフォルトパネル） |
| `/settings/user/{panel}` | 特定パネルを選択した状態 |

## 入出力項目

各パネルで多数の設定項目を持つ。主要な設定キーを以下に示す。

### 表示オプションパネル (display)

| 設定キー | 説明 |
|----------|------|
| ICONS_IN_NAVBAR | ナビバーにアイコン表示 |
| STICKY_HEADER | ヘッダー固定 |
| STICKY_TABLE_HEADER | テーブルヘッダー固定 |
| SHOW_SPOTLIGHT | スポットライト表示 |
| BARCODE_IN_FORM_FIELDS | フォームにバーコード表示 |
| DATE_DISPLAY_FORMAT | 日付表示形式 |
| FORMS_CLOSE_USING_ESCAPE | ESCキーでフォームを閉じる |
| DISPLAY_STOCKTAKE_TAB | 棚卸タブ表示 |
| ENABLE_LAST_BREADCRUMB | 最終パンくず表示 |
| SHOW_FULL_LOCATION_IN_TABLES | テーブルにフルロケーション表示 |
| SHOW_FULL_CATEGORY_IN_TABLES | テーブルにフルカテゴリ表示 |

### 検索パネル (search)

| 設定キー | 説明 |
|----------|------|
| SEARCH_WHOLE | 全体検索 |
| SEARCH_REGEX | 正規表現検索 |
| SEARCH_NOTES | ノート検索 |
| SEARCH_PREVIEW_RESULTS | プレビュー結果数 |
| SEARCH_PREVIEW_SHOW_PARTS | 部品プレビュー表示 |
| SEARCH_HIDE_INACTIVE_PARTS | 非アクティブ部品非表示 |
| SEARCH_PREVIEW_SHOW_STOCK | 在庫プレビュー表示 |
| SEARCH_PREVIEW_HIDE_UNAVAILABLE_STOCK | 利用不可在庫非表示 |
| SEARCH_PREVIEW_SHOW_LOCATIONS | ロケーションプレビュー表示 |
| SEARCH_PREVIEW_SHOW_COMPANIES | 会社プレビュー表示 |
| SEARCH_PREVIEW_SHOW_BUILD_ORDERS | 製造オーダープレビュー表示 |
| SEARCH_PREVIEW_SHOW_PURCHASE_ORDERS | 購買オーダープレビュー表示 |
| SEARCH_PREVIEW_SHOW_SALES_ORDERS | 販売オーダープレビュー表示 |

### レポートパネル (reporting)

| 設定キー | 説明 |
|----------|------|
| REPORT_INLINE | レポートインライン表示 |
| LABEL_INLINE | ラベルインライン表示 |
| LABEL_DEFAULT_PRINTER | デフォルトプリンター |

## 表示項目

### パネル一覧

| パネル名 | ラベル | アイコン | 説明 |
|---------|--------|---------|------|
| account | Account | IconUserCircle | アカウント情報・テーマ設定 |
| security | Security | IconLock | セキュリティ設定（メール、SSO、MFA、トークン） |
| display | Display Options | IconDeviceDesktop | 表示オプション設定 |
| search | Search | IconSearch | 検索動作設定 |
| notifications | Notifications | IconBellCog | 通知方法設定 |
| reporting | Reporting | IconFileAnalytics | レポート出力設定 |
| plugins | Plugin Settings | IconPlugConnected | プラグイン固有ユーザー設定 |

### アカウントパネルの構成 (AccountContent)

- AccountDetailPanel：ユーザー詳細情報の表示・編集
- UserTheme：テーマ設定（ダーク/ライトモード等）

### セキュリティパネルの構成 (SecurityContent)

| セクション | 説明 | 条件 |
|-----------|------|------|
| Email Addresses | メールアドレス管理 | 常に表示 |
| Single Sign On | SSOプロバイダ連携管理 | SSO有効時のみ |
| Multi-Factor Authentication | MFA設定 | 常に表示 |
| Access Tokens | APIトークン管理 | 常に表示 |
| Session Information | セッション情報 | スーパーユーザーのみ |

## イベント仕様

### 1-ページ読み込み

**トリガー**：画面アクセス時

**処理内容**：
- useUserState()でユーザー認証状態を確認
- 未ログイン時はSkeletonを表示
- ログイン時はパネル一覧をレンダリング

### 2-パネル選択

**トリガー**：サイドバーまたはタブからパネルを選択

**処理内容**：
- URLが更新される
- 選択されたパネルのコンテンツがレンダリング

### 3-設定値変更

**トリガー**：設定項目の値を変更

**処理内容**：
- UserSettingListコンポーネントが変更を検知
- `PATCH /api/settings/user/{key}/`でサーバーに設定値を送信
- 成功時は自動保存

### 4-メールアドレス追加（セキュリティパネル）

**トリガー**：メールアドレス追加フォームを送信

**処理内容**：
- `POST /api/_allauth/browser/v1/account/email`でメールアドレス追加
- 確認メールが送信される
- リスト更新

### 5-SSOプロバイダ連携（セキュリティパネル）

**トリガー**：SSOプロバイダボタンをクリック

**処理内容**：
- ProviderLogin関数でOAuth認証フローを開始
- 認証成功後、プロバイダがアカウントに紐付け

### 6-MFA設定（セキュリティパネル）

**トリガー**：MFA設定操作

**処理内容**：
- MFASettingsコンポーネントが設定UIを表示
- MFA有効化/無効化処理

### 7-APIトークン生成（セキュリティパネル）

**トリガー**：トークン生成ボタンをクリック

**処理内容**：
- ApiTokenTableのcreate機能でトークン作成モーダル表示
- `POST /api/user/token/`でトークン生成
- 生成されたトークンを表示（一度のみ）

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| 設定一覧表示 | common_inventreeusersetting | SELECT | ユーザー設定の取得 |
| 設定値変更 | common_inventreeusersetting | UPDATE | ユーザー設定の更新 |
| メールアドレス一覧表示 | account_emailaddress | SELECT | メールアドレス取得 |
| メールアドレス追加 | account_emailaddress | INSERT | メールアドレス追加 |
| メールアドレス削除 | account_emailaddress | DELETE | メールアドレス削除 |
| SSOプロバイダ一覧 | socialaccount_socialaccount | SELECT | 連携プロバイダ取得 |
| SSOプロバイダ連携解除 | socialaccount_socialaccount | DELETE | プロバイダ連携解除 |
| APIトークン一覧表示 | users_apitoken | SELECT | トークン取得 |
| APIトークン生成 | users_apitoken | INSERT | トークン生成 |
| APIトークン削除 | users_apitoken | DELETE | トークン削除 |

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

#### common_inventreeusersetting

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| SELECT | key, value | user_id=現在のユーザー | UserSettingListのkeysパラメータ |
| UPDATE | value | フォーム入力値 | key, user_id指定でPATCH |

#### users_apitoken

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| SELECT | pk, name, token, created, last_used, revoked | user_id=現在のユーザー | only_myself=trueの場合 |
| INSERT | user_id, name | フォーム入力値 | トークンは自動生成 |
| DELETE | - | pk指定 | 物理削除 |

## メッセージ仕様

| 種別 | メッセージ | 表示条件 |
|------|-----------|----------|
| 成功 | Setting updated | 設定更新成功時 |
| エラー | Error | メールアドレス操作失敗時 |
| エラー | Error while adding email | メールアドレス追加失敗時 |
| 情報 | Not enabled - Single Sign On is not enabled for this server | SSO無効時 |
| 情報 | Not Configured - Currently no email addresses are registered | メールアドレス未登録時 |
| 情報 | There are no providers connected to this account | SSOプロバイダ未連携時 |

## 例外処理

| 例外状況 | 表示内容 | 対応処理 |
|---------|---------|---------|
| 未ログイン | Skeleton | ローディング表示 |
| API通信エラー | エラーメッセージ | 通知表示 |
| APIトークンテーブルエラー | DefaultFallbackコンポーネント | ErrorBoundaryでキャッチ |

## 備考

- 設定変更は即座にサーバーに反映される（自動保存）
- APIトークンは生成時に一度だけ表示され、以降は確認できない
- メールアドレスは確認メール送信による認証が必要
- SSO連携はサーバー側でSSO機能が有効になっている場合のみ利用可能
- MFA設定はMFASetup画面と連携して動作する
- プラグイン設定パネルはglobal=falseでユーザー固有設定を表示

---

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

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

### 推奨読解順序

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

まず、設定データの構造を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | SettingList.tsx | `src/frontend/src/components/settings/SettingList.tsx` | UserSettingListコンポーネントの動作 |

**読解のコツ**: UserSettingListはGlobalSettingListと同様にkeysプロパティで設定キーを指定

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

処理の起点となるページコンポーネントを特定する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | UserSettings.tsx | `src/frontend/src/pages/Index/Settings/UserSettings.tsx` | メインコンポーネント全体（32-163行目） |

**主要処理フロー**:
1. **33-35行目**: useUserState()でユーザー情報とログイン状態を取得
2. **37-134行目**: userSettingsPanelsのuseMemoで全パネル定義
3. **136-138行目**: 未ログイン時はSkeletonを表示
4. **140-162行目**: SettingsHeaderとPanelGroupでレンダリング

#### Step 3: 各パネルコンテンツを理解する

主要なパネルの実装を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | UserPanel.tsx | `src/frontend/src/pages/Index/Settings/AccountSettings/UserPanel.tsx` | AccountContentコンポーネント（6-24行目） |
| 3-2 | SecurityContent.tsx | `src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx` | SecurityContentコンポーネント（41-118行目） |

**主要処理フロー**:
- **UserPanel.tsx 6-24行目**: AccountDetailPanelとUserThemeで構成
- **SecurityContent.tsx 55-117行目**: アコーディオンでEmail/SSO/MFA/Tokenセクション

#### Step 4: セキュリティコンテンツを詳しく理解する

セキュリティパネルの各セクションを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | SecurityContent.tsx | `src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx` | EmailSection（163-306行目） |
| 4-2 | SecurityContent.tsx | `src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx` | ProviderSection（320-410行目） |

**主要処理フロー**:
- **EmailSection 175-193行目**: runServerAction関数でメール操作
- **ProviderSection 341-350行目**: removeProvider関数でSSO連携解除

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

```
UserSettings
    │
    ├─ useUserState() ─── ユーザー認証状態確認
    │      └─ isLoggedIn() = false ───▶ Skeleton表示
    │
    ├─ useMemo(userSettingsPanels)
    │      │
    │      ├─ account: AccountContent
    │      │      ├─ AccountDetailPanel
    │      │      └─ UserTheme
    │      │
    │      ├─ security: SecurityContent
    │      │      ├─ EmailSection
    │      │      │      └─ authApi(auth_email)
    │      │      ├─ ProviderSection (sso_enabled時のみ)
    │      │      │      └─ authApi(auth_providers)
    │      │      ├─ MFASettings
    │      │      ├─ ApiTokenTable (only_myself=true)
    │      │      └─ AuthContextSection (スーパーユーザー時のみ)
    │      │
    │      ├─ display: UserSettingList(keys=[...])
    │      │
    │      ├─ search: UserSettingList(keys=[...])
    │      │
    │      ├─ notifications: PluginSettingsGroup(mixin='notification', global=false)
    │      │
    │      ├─ reporting: UserSettingList(keys=[...])
    │      │
    │      └─ plugins: PluginSettingsGroup(global=false)
    │
    ├─ PageTitle ─── ブラウザタイトル設定
    ├─ SettingsHeader ─── 画面ヘッダー
    └─ PanelGroup
           └─ (各パネルコンテンツ)
```

### データフロー図

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

ログイン状態    ───▶ useUserState()           ───▶ 認証チェック結果
                      │
                      └─ isLoggedIn() = false  ───▶ Skeleton
                            │
                            ▼
                     useMemo(userSettingsPanels)
                            │
                            ▼
パネル選択      ───▶ PanelGroup               ───▶ URL更新
                      │                              + パネルコンテンツ表示
                      ▼
設定キー配列   ───▶ UserSettingList
                      │
                      ├─ GET /api/settings/user/  ───▶ 設定値取得
                      │
                      └─ フォームコントロール     ───▶ 設定項目表示

設定値変更     ───▶ PATCH /api/settings/user/{key}/
                      │
                      └─ 成功/エラー              ───▶ 通知表示

メール操作     ───▶ authApi(auth_email)
                      │
                      └─ POST/PATCH/DELETE       ───▶ メールリスト更新

トークン操作   ───▶ ApiTokenTable
                      │
                      └─ API呼び出し             ───▶ トークンリスト更新
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| UserSettings.tsx | `src/frontend/src/pages/Index/Settings/UserSettings.tsx` | ソース | メインページコンポーネント |
| UserPanel.tsx | `src/frontend/src/pages/Index/Settings/AccountSettings/UserPanel.tsx` | ソース | アカウントパネルコンテンツ |
| SecurityContent.tsx | `src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx` | ソース | セキュリティパネルコンテンツ |
| AccountDetailPanel.tsx | `src/frontend/src/pages/Index/Settings/AccountSettings/AccountDetailPanel.tsx` | ソース | アカウント詳細パネル |
| UserThemePanel.tsx | `src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx` | ソース | テーマ設定パネル |
| MFASettings.tsx | `src/frontend/src/pages/Index/Settings/AccountSettings/MFASettings.tsx` | ソース | MFA設定コンポーネント |
| router.tsx | `src/frontend/src/router.tsx` | ソース | ルーティング定義（161行目） |
| SettingList.tsx | `src/frontend/src/components/settings/SettingList.tsx` | ソース | UserSettingListコンポーネント |
| PluginSettingsGroup.tsx | `src/frontend/src/pages/Index/Settings/PluginSettingsGroup.tsx` | ソース | プラグイン設定グループ |
| ApiTokenTable.tsx | `src/frontend/src/tables/settings/ApiTokenTable.tsx` | ソース | APIトークンテーブル |
| PanelGroup.tsx | `src/frontend/src/components/panels/PanelGroup.tsx` | ソース | パネルグループコンポーネント |
| SettingsHeader.tsx | `src/frontend/src/components/nav/SettingsHeader.tsx` | ソース | 設定ヘッダーコンポーネント |
| UserState.ts | `src/frontend/src/states/UserState.ts` | ソース | ユーザー状態管理 |
| ServerApiState.ts | `src/frontend/src/states/ServerApiState.ts` | ソース | サーバー状態管理（SSO設定等） |
| auth.ts | `src/frontend/src/functions/auth.ts` | ソース | 認証関連関数（authApi, ProviderLogin） |
