WIREFRAME — F-AUTH-003 パスワードリセット

📝 実装注記

1. 画面構成

認証系の中央寄せカード型レイアウト(最大幅480px)。サービスロゴ→リセットカード(4状態内包)→フッターリンクの構成。状態①申請(メールアドレス入力)→状態②送信完了(メール確認待ち)→状態③新パスワード設定(メール内リンクからのアクセス)→状態④設定完了の4状態を1ファイルに収める。状態①②はF-AUTH-001(ログインページ)からの遷移。状態③は外部リンク(メール内URL)からの直接アクセス。各状態は4ステップのインジケーターで現在位置を可視化する。

2. 権限制御

本画面は未認証状態のユーザーのみアクセス可。認証済みユーザーがアクセスした場合はF-AUTH-004(アカウント種別判定)により対応するトップ画面にリダイレクト。状態③(新パスワード設定)へのアクセスはURLに含まれるリセットトークン(`key`パラメータ)の検証を必須とする。トークンが無効・期限切れの場合はエラーメッセージを表示し、状態①に誘導する。法人管理者・事業所管理者・個人アカウント・事業所アカウントすべてが本フローでパスワードをリセット可能。

3. データ表示

状態①: 入力されたメールアドレスからのアカウント特定は、個人情報の正本を持つSpiral(SaaS)側への照会で行う(`wp_users.user_email`はダミー値のため照合に使わない)。未登録アドレスの場合も同一の送信完了画面を表示する(メールアドレス存在有無の漏洩防止)。状態③: URLパラメータ`?key={token}&login={userlogin}`を`check_password_reset_key()`で検証。状態④: 変更完了時にSendGrid(C-MAIL-001)からパスワード変更通知メールを送信する。

4. インタラクション

状態①「送信」ボタン押下: `/wp-json/lms/v1/auth/password-reset-request` にPOST→`get_password_reset_key()`でトークン生成→SendGrid経由でメール送信→状態②へ遷移。「再送する」: メールアドレス入力画面(状態①)に戻る。状態③「パスワードを再設定する」ボタン: `/wp-json/lms/v1/auth/password-reset-confirm` にPOST→`reset_password()`で更新→全セッション無効化→状態④へ遷移。パスワード表示トグル(👁)で`type="password"`/`type="text"`を切替。パスワード確認欄の不一致はリアルタイムでインライン表示。

5. レスポンシブ

PC表示(1200px)を基準設計。カードは最大幅480pxの中央配置のため、タブレット・スマホでもほぼ同一レイアウトを維持。スマホ(480px以下)ではカード幅を100%に拡張し左右パディングを16pxに縮小。4ステップインジケーターはスマホでラベルが折り返す可能性があるため、スマホ実装時はラベルを省略し数字のみ表示を検討する。サービスロゴのサイズをスマホでは縮小する。

6. パフォーマンス・セキュリティ

リセットトークンはWordPress標準の`get_password_reset_key()`で生成(ランダム20文字)。有効期限は24時間(暫定。`password_reset_expiration`フィルターで変更可)。トークンはWordPress標準の`user_activation_key`(`wp_users`カラム)で管理し、使用後は即時無効化(1回限り有効)。レートリミット: 同一メールアドレスへの送信は1時間に1回まで。あわせてIPアドレス別の短時間制限(暫定: 1分間に5回)を設ける。CSRF対策: WordPressのnonce(`wp_create_nonce('lms-password-reset')`)をhiddenフィールドに埋め込む。新パスワード設定時は`wp_set_auth_cookie()`を発行しない(設定完了後、ログイン画面(F-AUTH-001)に誘導する)。完了後は全デバイスのセッション(`wp_session`)を`wp_destroy_all_sessions()`で無効化する。

💡 本ワイヤーフレームはPC表示(1200px幅)を基準としています。タブレット・スマホ表示は別途レスポンシブ設計が必要です。