画面設計: 認証・ログイン

関連: ia.md §2.6 / auth-rbac.md / api.md §2

対象画面

• /login — ログイン
• /auth/reset/request — パスワードリセット要求
• /auth/reset/confirm — リセット確定
• 同意取得画面（初回ログイン時オーバーレイ、UC-N-01）

ログイン /login

レイアウト

• モバイル：中央揃え・縦積み、フォーム幅 90%
• PC：左側にブランドビジュアル、右側にフォーム（幅 400）

要素

• ロゴ + サービス名（日本語／ベトナム語切替）
• メールアドレス入力（type=email、required）
• パスワード入力（type=password、required、表示切替ボタン）
• ログインボタン（primary、loading表示）
• 「パスワードを忘れた」リンク → /auth/reset/request
• 言語切替（日本語／ベトナム語）
• 利用規約・プライバシーポリシーへのリンク（ログイン画面ではチェック不要。明示的同意は下記「同意取得オーバーレイ」で取得する）

バリデーション

• メール形式：Zod email()
• パスワード：空でないこと（要件詳細は登録画面側）
• エラー時：下部にサマリー type.sm color.danger

エラー応答

HTTP	表示
401	「メールアドレスまたはパスワードが正しくありません」（一般化して存在秘匿）
429	「試行回数上限。○分後に再試行してください」
500	「一時的なエラー。時間をおいて再試行を」

パスワードリセット

/auth/reset/request

• メール入力＋送信
• 成功時：「メールを確認してください」画面に遷移（実際の送信有無は秘匿）
• 実装注意：メール存在有無でレスポンスを変えない

/auth/reset/confirm

• URL トークン検証
• 新しいパスワード（+確認）
• 要件：12文字以上・英数混在
• 成功時：ログイン画面へ誘導

テナント選択（複数ロール所持時）

• ログイン成功後、RoleAssignment が 2 件以上ある場合のみ /auth/tenant を表示
• 単一所属ならスキップし即ホームへ
• 選択後、セッションにアクティブテナントを固定（UI ヘッダーで切替可能、切替は再ログイン相当扱い）

MFA 画面（対象ロールのみ）

• 必須：org_admin（OA）、operator（SU）
• 推奨：teacher（TA）、trainer（TM）
• 画面：TOTP 入力（将来 WebAuthn 切替）
• 失敗 5 回でアカウントロック（OA 解錠フロー）

同意取得オーバーレイ

初回ログイン後、テナント選択・MFA 後、/app/home 等の前に表示。

要素

• 目的：学習行動の計測・保存・分析・企業への開示範囲の説明
• 各項目ごとにチェック（学習ログ／企業開示）
• 「詳細」でプライバシーポリシー遷移
• 同意 → ホームへ / 不同意 → ログアウト + 「利用できる範囲に制限があります」の説明

i18n キー（抜粋）

auth.login.title
auth.login.email.label
auth.login.password.label
auth.login.submit
auth.reset.request.title
auth.reset.confirm.title
auth.consent.title
auth.consent.learning_log.description
auth.consent.employer_disclosure.description

アクセシビリティ

• 全フォームにラベル、aria-invalid を適切に
• フォーカスリング：color.primary.500 ベース
• Enter 送信対応

モック挙動（M1）

• URL クエリ ?role=learner などで疑似ログイン即遷移可能
• 実際の認証ロジックなし、UI のみ検証目的

未確定

• SSO（将来）の扱い
• WebAuthn 切替時期