多要素認証ページの画像更新 + リファクタリング

[haxibami]

多要素認証のページ全体の手入れです、主な内容は以下の通りです

手順の修正

• 古くなっていた手順画像を更新し、文言を修正しました

画像の共通化と <ArrowOverlay> コンポーネントの使用

• <ArrowOverlay> コンポーネントを使ってスクリーンショットに矢印を付けることで、複数の本人確認方法の説明で同じ画像を使い回せるようにしました
  • これにより今後の画像更新の手間が減り、更新漏れも少なくなります

<AltAddMethod> コンポーネントの幅広い使用

• <AltAddMethod> コンポーネントを、できるだけ多くの場面で使うようにしました

認証アプリを使う手順のコンポーネント化

• 認証アプリを使う手順のうち、QRコードを表示させる段階までは、Yubico Authenticatorを使う手順と重複していたため、<ShowQr> コンポーネントに集約しました

他の本人確認方法を使う手順のコンポーネント化

• デフォルトの本人確認方法からほかの方法に切り替えるための手順説明が複数の箇所で記述されており、記述にも揺れがあったため、<SigninAnotherMethod> コンポーネントに集約しました

TODO（このPRのマージ後に行うこと）

• 一つ目の本人確認方法の登録手順についても、画像を更新する
• 英語版も更新する
• パスキーの登録手順も案内する

[github-actions]

🚀 Deployed on https://deploy-preview-1836--utelecon.netlify.app

[seieric]

以下のページについて、修正部分の文章と画像が整合性のとれる形で配置されていることを確認しました。 具体的には、説明の文章とそれに対する画像の内容が一致していることをチェックしました。

• /utokyo_account/mfa/change/
• /utokyo_account/mfa/fido-security_key/
• /utokyo_account/mfa/initial/
• /utokyo_account/mfa/reregister/
• /utokyo_account/mfa/yubikey-totp/

また、src/components/ja/mfa以下の画像ファイルについて未使用の画像が残されていないことの確認として、少なくとも各画像が1つ以上のファイルから参照されていることを確認しました。

なお、説明されているアカウント設定時の画面遷移やアプリの挙動そのものについては確認していません。