fix AltAddMethod.mdx and related explanation

Author: aymkx

src/components/ja/mfa/common/AltAddMethod.mdx

@@ -3,6 +3,11 @@
   * @property {string} selection
   */}
 
+import { Image } from "astro:assets";
+import If from "@components/utils/If.astro"
+import ArrowOverlay from "@components/ArrowOverlay.astro";
+import altAddMethodWindow from "./alt_add_method_window.png";
+
 <li>
   [多要素認証の設定ページ](https://mysignins.microsoft.com/security-info?domain_hint=univtokyo.onmicrosoft.com)にアクセスしてください．
 </li>
@@ -13,5 +18,10 @@
 <li>
   「サインイン方法の追加」欄で{props.selection}を押してください．
   {props.methodSupplement}
-  ![](./alt_add_method_window.png)
+  <If cond={props.selection === "「Microsoft Authenticator」"}>
+    <ArrowOverlay image={altAddMethodWindow} x={420} y={290} />
+    <Fragment slot="else">
+      <Image src={altAddMethodWindow} alt="" />
+    </Fragment>
+  </If>
 </li>

src/components/ja/mfa/common/alt_add_method_window.png

@@ -29,7 +29,7 @@ import altApproved from "./alt_approved.png";
 
   <If cond={props.step === "alt"}>
     <Fragment>
-      <AltAddMethod selection="「認証アプリ」" />
+      <AltAddMethod selection="「Microsoft Authenticator」" />
       <li>
         Microsoft Authenticatorの設定をする画面が表示されるので，そのまま「次へ」を押してください．
         ![](./alt_next.png)

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

@@ -0,0 +1,97 @@
+---
+import type { ImageMetadata } from "astro";
+import { Image } from "astro:assets";
+
+type Props = {
+  image: ImageMetadata;
+  x: number | string;
+  y: number | string;
+  scale?: number;
+  reverse?: boolean;
+  vertical?: boolean;
+} & Record<string, any>;
+
+const {
+  image: { width, height },
+  x,
+  y,
+  scale: rawScale = 1,
+  reverse = false,
+  vertical = false,
+  ...props
+} = Astro.props;
+
+props.alt ??= "";
+
+const defaultSize = { width: 1280, height: 720 };
+
+const scale =
+  Math.max(width / defaultSize.width, height / defaultSize.height) * rawScale;
+
+function parseCoord(
+  rawX: string | number | null | undefined,
+  rawY: string | number | null | undefined,
+  width?: number,
+  height?: number
+): { x: number; y: number } | undefined {
+  const parse = (coord: number | string | null | undefined, max = 1) =>
+    typeof coord === "string" && coord.endsWith("%")
+      ? (Number(coord.substring(0, coord.length - 1)) * max) / 100
+      : Number(coord);
+
+  const x = parse(rawX, width),
+    y = parse(rawY, height);
+
+  return !Number.isNaN(x) && !Number.isNaN(y) ? { x, y } : undefined;
+}
+
+const pointAt = parseCoord(x, y, defaultSize.width, defaultSize.height);
+
+const xor = (a: boolean, b: boolean) => (a || b) && !(a && b);
+
+const tl = (xor(reverse, vertical) ? -130 : 130) * scale; // tail length
+const tw = 20 * scale; // tail width
+const hl = (xor(reverse, vertical) ? -70 : 70) * scale; // head length
+const ho = 20 * scale; // head overhang
+
+const path =
+  pointAt !== undefined
+    ? [
+        `M ${pointAt.x} ${pointAt.y}`,
+        "l",
+        vertical ? `${-ho - tw / 2} ${-hl}` : `${-hl} ${-ho - tw / 2}`,
+        vertical ? "h" : "v",
+        ho,
+        vertical ? "v" : "h",
+        -tl,
+        vertical ? "h" : "v",
+        tw,
+        vertical ? "v" : "h",
+        tl,
+        vertical ? "h" : "v",
+        ho,
+        "Z",
+      ].join(" ")
+    : "";
+---
+
+<div>
+  <Image src={Astro.props.image} {...props} />
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox={`0 0 ${width} ${height}`}>
+    <path d={path} fill="#ff3333" stroke="none"></path>
+  </svg>
+</div>
+
+<style>
+  div {
+    position: relative;
+  }
+
+  div > svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    max-width: 100%;
+    max-height: 100%;
+  }
+</style>