From 50da7d2a2728745bcf29cf71fb230c85a1845060 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?=
 <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sat, 30 Mar 2024 15:34:05 +0900
Subject: [PATCH] =?UTF-8?q?enhance(frontend):=202=E8=A6=81=E7=B4=A0?=
 =?UTF-8?q?=E8=AA=8D=E8=A8=BC=E3=82=BB=E3=83=83=E3=83=88=E3=82=A2=E3=83=83?=
 =?UTF-8?q?=E3=83=97=E3=82=A6=E3=82=A3=E3=82=B6=E3=83=BC=E3=83=89=E3=81=AB?=
 =?UTF-8?q?=E3=82=A2=E3=83=97=E3=83=AA=E3=82=92=E8=B5=B7=E5=8B=95=E3=81=99?=
 =?UTF-8?q?=E3=82=8B=E3=83=9C=E3=82=BF=E3=83=B3=E3=82=92=E6=96=B0=E8=A8=AD?=
 =?UTF-8?q?=20(#13636)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* enhance(frontend): 2要素認証セットアップウィザードにアプリを起動するボタンを新設

* add comment

* use css module
---
 locales/index.d.ts                               | 10 +++++-----
 locales/ja-JP.yml                                |  4 ++--
 packages/frontend/src/components/MkButton.vue    |  2 ++
 .../frontend/src/pages/settings/2fa.qrdialog.vue | 16 +++++++++++++---
 4 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index e1250946f3..428cf9135c 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -4928,6 +4928,10 @@ export interface Locale extends ILocale {
      * バックアップコードを使う
      */
     "useBackupCode": string;
+    /**
+     * アプリを起動
+     */
+    "launchApp": string;
     "_bubbleGame": {
         /**
          * 遊び方
@@ -7542,13 +7546,9 @@ export interface Locale extends ILocale {
          */
         "step1": ParameterizedString<"a" | "b">;
         /**
-         * 次に、表示されているQRコードをアプリでスキャンします。
+         * 次に、表示されているQRコードをアプリでスキャンするか、ボタンをクリックして端末上でアプリを開きます。
          */
         "step2": string;
-        /**
-         * QRコードをクリックすると、お使いの端末にインストールされている認証アプリやキーリングに登録できます。
-         */
-        "step2Click": string;
         /**
          * デスクトップアプリを使用する場合は次のURIを入力します
          */
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 1c4df27d92..9e76e420c3 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1228,6 +1228,7 @@ gameRetry: "リトライ"
 notUsePleaseLeaveBlank: "使用しない場合は空欄にしてください"
 useTotp: "ワンタイムパスワードを使う"
 useBackupCode: "バックアップコードを使う"
+launchApp: "アプリを起動"
 
 _bubbleGame:
   howToPlay: "遊び方"
@@ -1983,8 +1984,7 @@ _2fa:
   alreadyRegistered: "既に設定は完了しています。"
   registerTOTP: "認証アプリの設定を開始"
   step1: "まず、{a}や{b}などの認証アプリをお使いのデバイスにインストールします。"
-  step2: "次に、表示されているQRコードをアプリでスキャンします。"
-  step2Click: "QRコードをクリックすると、お使いの端末にインストールされている認証アプリやキーリングに登録できます。"
+  step2: "次に、表示されているQRコードをアプリでスキャンするか、ボタンをクリックして端末上でアプリを開きます。"
   step2Uri: "デスクトップアプリを使用する場合は次のURIを入力します"
   step3Title: "確認コードを入力"
   step3: "アプリに表示されている確認コード（トークン）を入力します。"
diff --git a/packages/frontend/src/components/MkButton.vue b/packages/frontend/src/components/MkButton.vue
index 817f1aadf3..3489255b91 100644
--- a/packages/frontend/src/components/MkButton.vue
+++ b/packages/frontend/src/components/MkButton.vue
@@ -23,6 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	v-else class="_button"
 	:class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike }]"
 	:to="to ?? '#'"
+	:behavior="linkBehavior"
 	@mousedown="onMousedown"
 >
 	<div ref="ripples" :class="$style.ripples" :data-children-class="$style.ripple"></div>
@@ -43,6 +44,7 @@ const props = defineProps<{
 	inline?: boolean;
 	link?: boolean;
 	to?: string;
+	linkBehavior?: null | 'window' | 'browser';
 	autofocus?: boolean;
 	wait?: boolean;
 	danger?: boolean;
diff --git a/packages/frontend/src/pages/settings/2fa.qrdialog.vue b/packages/frontend/src/pages/settings/2fa.qrdialog.vue
index 2ef664b9a3..73253b1ef4 100644
--- a/packages/frontend/src/pages/settings/2fa.qrdialog.vue
+++ b/packages/frontend/src/pages/settings/2fa.qrdialog.vue
@@ -33,8 +33,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 									<a href="https://support.google.com/accounts/answer/1066447" rel="noopener" target="_blank" class="_link">Google Authenticator</a>
 								</template>
 							</I18n>
-							<div>{{ i18n.ts._2fa.step2 }}<br>{{ i18n.ts._2fa.step2Click }}</div>
-							<a :href="twoFactorData.url"><img :class="$style.qr" :src="twoFactorData.qr"></a>
+							<div>{{ i18n.ts._2fa.step2 }}</div>
+							<div>
+								<a :class="$style.qrRoot" :href="twoFactorData.url"><img :class="$style.qr" :src="twoFactorData.qr"></a>
+								<!-- QRコード側にマージンが入っているので直下でOK -->
+								<div><MkButton inline rounded link :to="twoFactorData.url" :linkBehavior="'browser'">{{ i18n.ts.launchApp }}</MkButton></div>
+							</div>
 							<MkKeyValue :copy="twoFactorData.url">
 								<template #key>{{ i18n.ts._2fa.step2Uri }}</template>
 								<template #value>{{ twoFactorData.url }}</template>
@@ -177,8 +181,14 @@ function allDone() {
 	transform: translateX(-50px);
 }
 
-.qr {
+.qrRoot {
+	display: block;
+	margin: 0 auto;
 	width: 200px;
 	max-width: 100%;
 }
+
+.qr {
+	width: 100%;
+}
 </style>