Merge pull request #970 from utelecon/202403-en-mfa-new-ui

英語版MFA初期設定ページの新UI化

src/components/en/mfa/AltAddMethod.mdx

@@ -4,10 +4,14 @@
   */}
 
 <li>
-  Click "Add method" in the  [Security info page](https://mysignins.microsoft.com/security-info?domain_hint=univtokyo.onmicrosoft.com).
+  Open [Security info page](https://mysignins.microsoft.com/security-info?domain_hint=univtokyo.onmicrosoft.com).
+</li>
+<li>
+  Click "Add method".
   ![](./alt_add_method.png)
 </li>
 <li>
   For "Which method would you like to add?", select {props.selection} and click "Add".
+  {props.methodSupplement}
   ![](./alt_add_method_pull_down.png)
 </li>

src/components/en/mfa/FirstAccess.mdx

@@ -0,0 +1,3 @@
+<li>Open [security info page](https://account.activedirectory.windowsazure.com/proofup.aspx?proofup=1&whr=utac.u-tokyo.ac.jp).</li>
+<li>Input 10-digit Common ID of UTokyo Account and the password on sign-in form if shown.</li>
+<li>Click "Next" on "More information required" screen. ![](./first_more_information.png)</li>

src/components/en/mfa/FirstEmail.mdx

@@ -0,0 +1,2 @@
+<li>If you haven't already registered, you are required to enter your email address. The email provider does not matter as long as you can receive, but you should use another than ECCS Cloud Email or staff email. Then follow the instruction to input the 6-digit code sent to the address. ![](./first_email.png)</li>
+<li>This step has been completed when you are told "Succeeded". ![](./first_success.png)</li>

src/components/en/mfa/TabSelectorButton.astro

@@ -0,0 +1,32 @@
+---
+// なぜか`.mdx`にすると <script> の中身がbundleされないため`.astro`
+
+import BaseTabSelectorButton from "@components/pages/mfa/BaseTabSelectorButton.astro";
+import MicrosoftAuthenticator from "./select/MicrosoftAuthenticator.mdx";
+import AuthenticatorApplication from "./select/AuthenticatorApplication.mdx";
+import Phone from "./select/Phone.mdx";
+import Fido from "./select/Fido.mdx";
+import type { Step } from "@components/pages/mfa/tabs";
+
+interface Props {
+  step: Step;
+}
+
+const { step } = Astro.props;
+---
+
+<BaseTabSelectorButton
+  step={step}
+  labels={{
+    ms_auth: "Microsoft Authenticator",
+    auth_app: "Other Authenticator Apps",
+    phone: "Phone Number",
+    fido: step === "alt" ? "FIDO Security Key" : undefined,
+  }}
+  guide="Select an verification method you will register."
+>
+  <MicrosoftAuthenticator group={step} slot="ms_auth" />
+  <AuthenticatorApplication group={step} slot="auth_app" />
+  <Phone group={step} slot="phone" />
+  <Fido group={step} slot="fido" />
+</BaseTabSelectorButton>

src/components/en/mfa/TabSelectorGrid.astro

@@ -0,0 +1,27 @@
+---
+// なぜか`.mdx`にすると <script> の中身がbundleされないため`.astro`
+
+import BaseTabSelectorGrid from "@components/pages/mfa/BaseTabSelectorGrid.astro";
+import MicrosoftAuthenticator from "./select/MicrosoftAuthenticator.mdx";
+import AuthenticatorApplication from "./select/AuthenticatorApplication.mdx";
+import Phone from "./select/Phone.mdx";
+import Fido from "./select/Fido.mdx";
+---
+
+<BaseTabSelectorGrid
+  rowLabels={{
+    ms_auth: "Microsoft Authenticator",
+    auth_app: "Other Authenticator Apps",
+    phone: "Phone Number",
+    fido: "FIDO Security Key",
+  }}
+  columnLabels={{
+    first: "Step 1",
+    alt: "Step 2",
+  }}
+>
+  <MicrosoftAuthenticator group="initial" slot="ms_auth" />
+  <AuthenticatorApplication group="initial" slot="auth_app" />
+  <Phone group="initial" slot="phone" />
+  <Fido group="initial" slot="fido" />
+</BaseTabSelectorGrid>

src/components/en/mfa/Tabs.astro

@@ -0,0 +1,33 @@
+---
+// なぜか`.mdx`にすると <script> の中身がbundleされないため`.astro`
+
+import BaseTabs from "@components/pages/mfa/BaseTabs.astro";
+import type { Step } from "@components/pages/mfa/tabs";
+import MicrosoftAuthenticator from "./ms_auth/index.mdx";
+import AuthenticatorApplication from "./auth_app/index.mdx";
+import Phone from "./phone/index.mdx";
+import Fido from "./fido/index.mdx";
+import TabSelectorButton from "./TabSelectorButton.astro";
+
+interface Props {
+  step: Step;
+}
+
+const { step } = Astro.props;
+---
+
+<BaseTabs
+  step={step}
+  labels={{
+    ms_auth: "Microsoft Authenticator",
+    auth_app: "Other Authenticator Apps",
+    phone: "Phone Number",
+    fido: step === "alt" ? "FIDO Security Key" : undefined,
+  }}
+>
+  <TabSelectorButton step={step} slot="selector" />
+  <MicrosoftAuthenticator step={step} slot="ms_auth" />
+  <AuthenticatorApplication step={step} slot="auth_app" />
+  <Phone step={step} slot="phone" />
+  <Fido step={step} slot="fido" />
+</BaseTabs>

src/components/en/mfa/auth_app/index.mdx

@@ -1,5 +1,7 @@
 import { Image } from "astro:assets";
 import If from "@components/utils/If.astro";
+import FirstAccess from "../FirstAccess.mdx";
+import FirstEmail from "../FirstEmail.mdx";
 import AltAddMethod from "../AltAddMethod.mdx";
 
 import firstQr from "./first_qr.png";
@@ -20,6 +22,7 @@ import altQr from "./alt_qr.png";
       </li>
     </Fragment>
     <Fragment slot="else">
+      <FirstAccess />
       <li>
         Click "I want to use a different authenticator app" in the middle of the setup page.
         ![](./first.png)
@@ -29,6 +32,11 @@ import altQr from "./alt_qr.png";
 
   <li>
     Follow the instructions until you reach the QR code page. Scan the QR code with your authenticator app and complete the setup procedure.
+    If you want to use YubiKey and Yubico Authenticator app, see "[Instructions on how to use the Yubico Authenticator for the Multi-Factor Authentication of UTokyo Accounts](../yubikey-totp/)" page for details.
     <Image src={{ firstQr, altQr }[`${props.step}Qr`]} alt="" />
   </li>
-</ol>
+
+  <If cond={props.step !== "alt"}>
+    <FirstEmail />
+  </If>
+</ol>

src/components/en/mfa/fido/index.mdx

@@ -0,0 +1 @@
+For details on the FIDO security key registration procedure, please refer to [How to use FIDO security key for Multi-Factor Authentication for UTokyo Account (in Japanese)](/utokyo_account/mfa/fido-security_key/).

src/components/en/mfa/ms_auth/index.mdx

@@ -1,19 +1,31 @@
 import { Image } from "astro:assets";
 import If from "@components/utils/If.astro";
+import FirstAccess from "../FirstAccess.mdx";
+import FirstEmail from "../FirstEmail.mdx";
 import AltAddMethod from "../AltAddMethod.mdx";
 
 import firstLink from "./first_link.png";
 import firstQr from "./first_qr.png";
 import altLink from "./alt_link.png";
 import altQr from "./alt_qr.png";
+import firstNextNext from "./first_next_next.png";
+import altNextNext from "./alt_next_next.png";
+import firstTry from "./first_try.png";
+import altTry from "./alt_try.png";
+import firstApproved from "./first_approved.png";
+import altApproved from "./alt_approved.png";
 
 {/**
   * @typedef {object} Props
   * @property {import("@components/pages/mfa/tabs").Step} step
   */}
 
 <ol>
-  <li>Install the “Microsoft Authenticator” app on your smartphone<If cond={props.step === "alt"}> (if you haven't already done so)</If>. The Android version can be downloaded from <a href="https://play.google.com/store/apps/details?id=com.azure.authenticator">Google Play</a> and the iPhone version from <a href="https://apps.apple.com/app/microsoft-authenticator/id983156458">App Store</a>.</li>
+  <li>
+    Install the “Microsoft Authenticator” app on your smartphone<If cond={props.step === "alt"}> if you haven't already done</If>. The Android version is available in [Google Play](https://play.google.com/store/apps/details?id=com.azure.authenticator), and the iPhone version is available in [App Store](https://apps.apple.com/app/microsoft-authenticator/id983156458).
+
+    ![](https://play-lh.googleusercontent.com/_1CV99jklLbXuun-6E7eCPR-sKKeZc602rhw_QHZz-qm7xrPdgWsJVc7NtFkkliI8No=w480-h960){:.extra-small}
+  </li>
 
   <If cond={props.step === "alt"}>
     <Fragment>
@@ -24,25 +36,44 @@ import altQr from "./alt_qr.png";
       </li>
     </Fragment>
     <Fragment slot="else">
+      <FirstAccess />
       <li>
-        After installing the app, go back to the setup page. Click "Next" to continue setup for the Microsoft Authenticator app.
+        You are required to set up a verification method. By default, Microsoft Authenticator app is selected, so just click "Next".
         ![](./first_next.png)
       </li>
     </Fragment>
   </If>
 
   <li>
-    The next procedure differs depending on the device that you are using.
+    The next procedure differs depending on the device that you are using: your smartphone (Microsoft Authenticator app has been installed) or else (PC etc.)
 
-    - **Smartphone (the same device where you installed the Microsoft Authenticator app)**: Click "Pair your account to the app by clicking this link".Check that your UTokyo Account appears in the Microsoft Authenticator app.
+    - **Smartphone (the same device where you installed the Microsoft Authenticator app)**: Click "Pair your account to the app by clicking this link". Check that your UTokyo Account appears in the Microsoft Authenticator app. Go back to the browser and click "Next".
       <Image src={{ firstLink, altLink }[`${props.step}Link`]} alt="" />
     - **Other Devices (PC etc.)**
-      1. Read the instructions and click "Next" to go to the QR code page.
+      1. Click "Next" on "Set up your account" screen, and then QR code is shown.
+          <Image src={{ firstNextNext, altNextNext }[`${props.step}NextNext`]} alt="" />
           <Image src={{ firstQr, altQr }[`${props.step}Qr`]} alt="" />
-      2. Open the Microsoft Authenticator app on your smartphone, select "+" from the icon in the upper-right, then "Work or school account", and "Scan QR code".
-          ![](./screen.png)
-      3. Scan the QR code with your device's camera.
-      4. Check that your UTokyo Account appears on the app.
+      1. Open the Microsoft Authenticator app on your smartphone. If you open the app for the first time after installation, you will be asked to accept privacy policy and to select whether to share your app usage data, so follow the instructions.
+          <figure class="gallery">![](./privacy.png){:.small .border}![](./improve.png){:.small .border}</figure>
+      1. If "Secure your digital life" screen like the first image below is shown, tap "Scan a QR code". Instead, screens like the second or third images is shown, tap the "+" icon in the upper right, and select "Work or school account" and "Scan a QR code" in turn. In all cases, you may be asked to allow the app to access the camera, so then do.
+          <figure class="gallery">![](./digital_life.png){:.small .border}![](./empty.png){:.small .border}![](./list_add.png){:.small .border}</figure>
+      1. Scan the QR code with your device's camera. If you are asked to allow the app to notify, then do.
+      1. After succeeding scan, check that your UTokyo Account appears on the app. Go back to the screen with the QR code and click "Next".
           ![](./list.png)
+      {:style="list-style: lower-roman;"}
+  </li>
+
+  <li>
+    Two-digit number is shown on "Let's try it out" screen, and at the same time a prompt opens on Microsoft Authenticator app on your smartphone. Input the number to the prompt and tap "Yes".
+    <figure class="gallery"><Image src={{ firstTry, altTry }[`${props.step}Try`]} alt="" />![](./prompt.png){:.small .border}</figure>
   </li>
+
+  <li>
+    When "Notification approved" is appeared, click "Next".
+    <Image src={{ firstApproved, altApproved }[`${props.step}Approved`]} alt="" />
+  </li>
+
+  <If cond={props.step !== "alt"}>
+    <FirstEmail />
+  </If>
 </ol>

src/components/en/mfa/phone/index.mdx

@@ -1,6 +1,8 @@
 import { Image } from "astro:assets";
 import If from "@components/utils/If.astro";
+import FirstAccess from "../FirstAccess.mdx";
 import FirstAnotherMethod from "../FirstAnotherMethod.mdx";
+import FirstEmail from "../FirstEmail.mdx";
 import AltAddMethod from "../AltAddMethod.mdx";
 
 import first from "./first.png";
@@ -14,9 +16,22 @@ import alt from "./alt.png";
 <ol>
   <If cond={props.step === "alt"}>
     <Fragment>
-      <AltAddMethod selection="the type of phone you want to add" />
+      <AltAddMethod
+        selection="the type of phone you want to add"
+        methodSupplement={
+          <Fragment>
+            You can register one number for each type of phone: "Phone", "Alternate Phone" and "Office Phone".
+            <ul>
+              <li><strong>Phone</strong>: The phone you usually use. You can select text or phone call for the method to verify. If you have selected phone number in the initial setup, the number has been registered as "Phone".</li>
+              <li><strong>Alternate Phone</strong>: A substitute phone such as your home phone. Only phone call verification is available and you cannot select text.</li>
+              <li><strong>Office Phone</strong>: A substitute phone of your company. Only phone call verification is available and you cannot select text. Unlike the others, you can register an extension number.</li>
+            </ul>
+          </Fragment>
+        }
+      />
     </Fragment>
     <Fragment slot="else">
+      <FirstAccess />
       <FirstAnotherMethod selection={`"Phone"`} />
     </Fragment>
   </If>
@@ -31,4 +46,8 @@ import alt from "./alt.png";
   <li>
     You will receive a text or call on your phone to verify your identity. If you selected "Text me a code", you will receive an SMS message with a 6-digit verification code. Input the code in the setup page. If you selected "Call me", you will receive a phone call asking you press the pound key (#) on your phone to verify your identity. Press the key and end the call. (To display the pound key on your smartphone during the call, press the "keypad" button.)
   </li>
-</ol>
+
+  <If cond={props.step !== "alt"}>
+    <FirstEmail />
+  </If>
+</ol>

src/components/en/mfa/select/AuthenticatorApplication.mdx

@@ -0,0 +1,8 @@
+import If from "@components/utils/If.astro";
+
+{/**
+  * @typedef {object} Props
+  * @property {import("@components/pages/mfa/tabs").Group} group
+  */}
+
+If you already use other authenticator apps, such as “Google Authenticator”, you may also use them for your UTokyo Account authentication. If you have more than one phone, you can register the same authenticator apps on these phones, making them two or more verification methods.

src/components/en/mfa/select/Fido.mdx

@@ -0,0 +1,8 @@
+import If from "@components/utils/If.astro";
+
+{/**
+  * @typedef {object} Props
+  * @property {import("@components/pages/mfa/tabs").Group} group
+  */}
+
+You can use a dedicated device called FIDO security key to authenticate. There are some systems where you cannot use it, so you have to register another method as primary and use them as alternative. For more details, see [How to use FIDO security key for Multi-Factor Authentication for UTokyo Account (in Japanese)](/utokyo_account/mfa/fido-security_key/).

src/components/en/mfa/select/MicrosoftAuthenticator.mdx

@@ -0,0 +1,8 @@
+import If from "@components/utils/If.astro";
+
+{/**
+  * @typedef {object} Props
+  * @property {import("@components/pages/mfa/tabs").Group} group
+  */}
+
+“Microsoft Authenticator” is an MFA authentication application provided by Microsoft. Using this app is convenient since UTokyo Account’s MFA adopts Microsoft’s system. <If cond={props.group !== "first"}>If you have more than one phone, you can register the same authenticator apps on these phones, making them two or more verification methods.</If>

src/components/en/mfa/select/Phone.mdx

@@ -0,0 +1,8 @@
+import If from "@components/utils/If.astro";
+
+{/**
+  * @typedef {object} Props
+  * @property {import("@components/pages/mfa/tabs").Group} group
+  */}
+
+You can add your phone number and receive an SMS message or a call (voice guidance) to verify your identity. <If cond={props.group !== "first"}> You can register a different phone number for each "Phone", "Alternate Phone" and "Office Phone".</If>

src/components/ja/mfa/TabSelectorGrid.astro

@@ -9,12 +9,16 @@ import Fido from "./select/Fido.mdx";
 ---
 
 <BaseTabSelectorGrid
-  labels={{
+  rowLabels={{
     ms_auth: "Microsoft Authenticator",
     auth_app: "その他の認証アプリ",
     phone: "電話番号",
     fido: "FIDO セキュリティキー",
   }}
+  columnLabels={{
+    first: "手順1",
+    alt: "手順2",
+  }}
 >
   <MicrosoftAuthenticator group="initial" slot="ms_auth" />
   <AuthenticatorApplication group="initial" slot="auth_app" />

src/components/pages/mfa/BaseTabSelectorButton.astro

@@ -1,9 +1,9 @@
 ---
-import type { Labels, Selection, Step } from "./tabs";
+import type { RowLabels, Selection, Step } from "./tabs";
 
 interface Props {
   step: Step;
-  labels: Labels;
+  labels: RowLabels;
   guide: string;
 }