# 画面設計書 3-新規登録画面

## 概要

本ドキュメントはInvenTreeシステムの新規登録画面の設計仕様を記載する。新規ユーザーがアカウントを作成するための画面である。

### 本画面の処理概要

新規登録画面は、新規ユーザーがInvenTreeシステムにアカウントを登録するための画面である。ユーザー名、メールアドレス、パスワードを入力して登録フォームを送信するか、SSO（シングルサインオン）プロバイダーを使用して外部アカウントと連携して登録することができる。

**業務上の目的・背景**：新しいユーザーがシステムにアクセスするためのアカウント作成機能を提供する。サーバー設定により登録機能の有効/無効を制御でき、組織のポリシーに応じた運用が可能。SSO登録をサポートすることで、既存の企業認証インフラストラクチャとの統合を実現する。

**画面へのアクセス方法**：ログイン画面の「Register」リンクをクリックするか、ブラウザで `/register` URLに直接アクセスする。

**主要な操作・処理内容**：
1. ユーザー名の入力
2. メールアドレスの入力
3. パスワードの入力と確認入力
4. 登録ボタン押下によるアカウント作成
5. SSOプロバイダー選択による外部アカウント連携登録
6. ログイン画面への戻り

**画面遷移**：
- 遷移元：ログイン画面（Registerリンク経由）
- 遷移先：ホーム画面（登録成功時）、ログイン画面（戻るリンク経由）

**権限による表示制御**：
- サーバー設定により標準登録フォームの表示/非表示が制御される
- サーバー設定によりSSO登録の表示/非表示が制御される
- 両方とも無効の場合、登録機能が利用不可であることを示すアラートが表示される

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 33 | 認証・ログイン | 主機能 | 新規ユーザー登録フォームの入力・送信処理 |
| 32 | ユーザーアカウント管理 | 遷移先機能 | ユーザーアカウント作成処理 |

## 画面種別

登録画面

## URL/ルーティング

| パス | 説明 |
|------|------|
| `/register` | 新規登録画面 |

## 入出力項目

### 入力項目

| No | 項目名 | 項目ID | 必須 | 型 | 最大長 | 説明 |
|----|--------|--------|------|-----|--------|------|
| 1 | ユーザー名 | username | Yes | テキスト | - | アカウントのユーザー名 |
| 2 | メールアドレス | email | Yes | メール | - | 確認メール送信先 |
| 3 | パスワード | password | Yes | パスワード | - | アカウントのパスワード |
| 4 | パスワード確認 | password2 | Yes | パスワード | - | パスワードの確認入力 |

### 出力項目

なし

## 表示項目

| No | 項目名 | 表示条件 | 説明 |
|----|--------|----------|------|
| 1 | 画面タイトル | 常時 | "Register" |
| 2 | ユーザー名入力欄 | 登録有効時 | テキスト入力フィールド |
| 3 | メールアドレス入力欄 | 登録有効時 | メール入力フィールド |
| 4 | パスワード入力欄 | 登録有効時 | パスワード入力フィールド |
| 5 | パスワード確認入力欄 | 登録有効時 | パスワード確認入力フィールド |
| 6 | 登録ボタン | 登録有効時 | Register ボタン |
| 7 | SSOプロバイダーボタン | SSO登録有効時 | 各プロバイダーの登録ボタン |
| 8 | 区切り線 | 両方有効時 | "Or use SSO" |
| 9 | 登録無効アラート | 両方無効時 | 登録が利用不可であることを示すアラート |
| 10 | ログイン画面リンク | 常時 | "Go back to login" リンク |

## イベント仕様

### 1-登録ボタン押下

入力情報を使用してアカウント登録を実行する。

**処理フロー**：
1. パスワードとパスワード確認が一致するか検証
2. 不一致の場合、エラーを表示して処理中断
3. CSRFトークンの確認・取得（`ensureCsrf`）
4. `POST /api/auth/v1/auth/signup` APIを呼び出し
5. 登録成功時：
   - 「Registration successful / Please confirm your email address...」通知を表示
   - ホーム画面へ遷移
6. 登録失敗時（400エラー）：
   - 各フィールドにエラーメッセージを表示
   - 「Input error / Check your input and try again.」通知を表示

### 2-SSOボタン押下

外部認証プロバイダーを使用して登録する。

**処理フロー**：
1. CSRFトークンを取得
2. `POST /api/auth/v1/auth/provider/redirect` へフォームサブミット
3. 外部プロバイダーの認証画面へリダイレクト
4. 認証後、`/logged-in` へコールバック

### 3-ログイン画面リンク押下

ログイン画面へ遷移する。

**処理フロー**：
1. `/login` へナビゲート

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| 登録成功 | auth_user | INSERT | ユーザーアカウントの作成 |
| 登録成功 | user_profile | INSERT | ユーザープロファイルの作成 |
| 登録成功 | email_confirmation | INSERT | メール確認トークンの作成 |

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

#### auth_user

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| INSERT | username | 入力されたユーザー名 | 一意制約あり |
| INSERT | email | 入力されたメールアドレス | - |
| INSERT | password | ハッシュ化されたパスワード | Djangoハッシュ化 |
| INSERT | is_active | True/False | メール確認要否による |

## メッセージ仕様

| No | メッセージID | メッセージ種別 | メッセージ内容 | 表示条件 |
|----|-------------|---------------|---------------|----------|
| 1 | registration-success | 成功 | Registration successful / Please confirm your email address to complete the registration | 登録成功時 |
| 2 | input-error | エラー | Input error / Check your input and try again. | バリデーションエラー時 |
| 3 | password-mismatch | エラー | Passwords do not match | パスワード不一致時（フィールドエラー） |

## 例外処理

| No | 例外条件 | 処理内容 |
|----|----------|----------|
| 1 | パスワード不一致 | password2フィールドにエラーを表示、処理中断 |
| 2 | バリデーションエラー（400） | 各フィールドにサーバーからのエラーメッセージを表示 |
| 3 | 登録機能無効 | アラートを表示（"Registration not active / This might be related to..."） |

## 備考

- 登録成功後、メール確認が必要な場合がある（サーバー設定による）
- SSOプロバイダーとの連携時は、外部プロバイダーの認証フローに依存する
- 登録機能が無効な場合、エラーコードリンク（INVE-W11）が表示される

---

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

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

### 推奨読解順序

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

登録処理に関連するデータ構造を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | ApiEndpoints.tsx | `src/frontend/lib/enums/ApiEndpoints.tsx` | `auth_signup`エンドポイント定義（行30） |
| 1-2 | ServerApiState.tsx | `src/frontend/src/states/ServerApiState.tsx` | `registration_enabled`, `sso_registration_enabled`の状態管理 |

**読解のコツ**: サーバー設定による登録機能の有効/無効判定ロジックを理解する。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | Register.tsx | `src/frontend/src/pages/Auth/Register.tsx` | シンプルな構造、RegistrationFormコンポーネントの利用 |

**主要処理フロー**:
1. **行9-11**: コンポーネント定義とuseNavigate
2. **行13-26**: JSX描画（Wrapper内にRegistrationFormとログインリンク）

#### Step 3: 登録フォームコンポーネントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | AuthenticationForm.tsx | `src/frontend/src/components/forms/AuthenticationForm.tsx` | RegistrationFormコンポーネント（行214-355） |

**主要処理フロー**:
- **行214-232**: フォーム状態と登録設定の初期化
- **行234-286**: `handleRegistration`関数
  - 行236-241: パスワード一致検証
  - 行246-251: 登録API呼び出し
  - 行252-259: 成功時の処理
  - 行262-285: エラー時の処理
- **行289-355**: JSX描画（登録フォーム、SSOボタン、無効時アラート）

#### Step 4: 認証処理関数を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | auth.tsx | `src/frontend/src/functions/auth.tsx` | `ensureCsrf`関数、`ProviderLogin`関数 |

**主要処理フロー**:
- **行326-331**: `ensureCsrf` - CSRFトークンの確認・取得
- **行518-529**: `ProviderLogin` - SSO認証リダイレクト

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

```
Register.tsx (エントリーポイント)
    │
    ├─ useNavigate()
    │
    ├─ Wrapper (titleText="Register")
    │      │
    │      ├─ RegistrationForm
    │      │      │
    │      │      ├─ useServerApiState
    │      │      │      ├─ auth_config
    │      │      │      ├─ registration_enabled()
    │      │      │      └─ sso_registration_enabled()
    │      │      │
    │      │      ├─ handleRegistration()
    │      │      │      ├─ パスワード検証
    │      │      │      ├─ ensureCsrf()
    │      │      │      └─ POST /api/auth/v1/auth/signup
    │      │      │
    │      │      └─ SsoButton[]
    │      │             └─ ProviderLogin()
    │      │
    │      └─ "Go back to login" リンク
    │             └─ navigate('/login')
    │
    └─ Layout.tsx (Wrapper)
```

### データフロー図

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

ユーザー名
メールアドレス  ────────▶ handleRegistration()
パスワード                       │
パスワード確認                   ├─ パスワード検証
                                │
                                ├─ ensureCsrf()
                                │
                                ├─ POST auth/signup ─────▶ ユーザー作成
                                │
                                ├─ 成功時 ───────────────▶ /home へ遷移
                                │
                                └─ 失敗時 ───────────────▶ エラー表示

SSOプロバイダー選択 ───▶ ProviderLogin() ──────▶ 外部認証へリダイレクト
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| Register.tsx | `src/frontend/src/pages/Auth/Register.tsx` | ソース | 新規登録画面メインコンポーネント |
| AuthenticationForm.tsx | `src/frontend/src/components/forms/AuthenticationForm.tsx` | ソース | 登録フォームコンポーネント（RegistrationForm） |
| auth.tsx | `src/frontend/src/functions/auth.tsx` | ソース | 認証関連関数（ensureCsrf, ProviderLogin） |
| Layout.tsx | `src/frontend/src/pages/Auth/Layout.tsx` | ソース | 認証画面レイアウト |
| ServerApiState.tsx | `src/frontend/src/states/ServerApiState.tsx` | ソース | サーバーAPI状態管理 |
| ApiEndpoints.tsx | `src/frontend/lib/enums/ApiEndpoints.tsx` | ソース | APIエンドポイント定義 |
| router.tsx | `src/frontend/src/router.tsx` | ソース | ルーティング定義 |
| SSOButton.tsx | `src/frontend/src/components/buttons/SSOButton.tsx` | ソース | SSOボタンコンポーネント |
