enhance(frontend): 設定に2要素認証のガイドへの導線を追加 (MisskeyIO#603)

locales/en-US.yml

@@ -1242,6 +1242,7 @@ enableHorizontalSwipe: "Swipe to switch tabs"
 loading: "Loading"
 surrender: "Cancel"
 gameRetry: "Retry"
+here: "here"
 _bubbleGame:
   howToPlay: "How to play"
   hold: "Hold"
@@ -2014,6 +2015,7 @@ _2fa:
   backupCodesDescription: "You can use these codes to gain access to your account in case of becoming unable to use your two-factor authentificator app. Each can only be used once. Please keep them in a safe place."
   backupCodeUsedWarning: "A backup code has been used. Please reconfigure two-factor authentification as soon as possible if you are no longer able to use it."
   backupCodesExhaustedWarning: "All backup codes have been used. Should you lose access to your two-factor authentification app, you will be unable to access this account. Please reconfigure two-factor authentification."
+  howto2fa: "If you are having trouble setting up, please refer to {link}."
 _permissions:
   "read:account": "View your account information"
   "write:account": "Edit your account information"

locales/index.d.ts

@@ -5023,6 +5023,10 @@ export interface Locale extends ILocale {
      * このユーザーをミュートする
      */
     "muteThisUser": string;
+    /**
+     * こちら
+     */
+    "here": string;
     "_bubbleGame": {
         /**
          * 遊び方
@@ -7844,6 +7848,10 @@ export interface Locale extends ILocale {
          * バックアップコードが全て使用されました。認証アプリを利用できない場合、これ以上アカウントにアクセスできなくなります。認証アプリを再登録してください。
          */
         "backupCodesExhaustedWarning": string;
+        /**
+         * 設定方法でお困りの際は、{link}を参照してください。
+         */
+        "howto2fa": ParameterizedString<"link">;
     };
     "_permissions": {
         /**

locales/ja-JP.yml

@@ -1251,6 +1251,7 @@ selectCategory: "カテゴリを選択"
 reportComplete: "通報完了"
 blockThisUser: "このユーザーをブロックする"
 muteThisUser: "このユーザーをミュートする"
+here: "こちら"
 
 _bubbleGame:
   howToPlay: "遊び方"
@@ -2061,6 +2062,7 @@ _2fa:
   backupCodesDescription: "認証アプリが使用できなくなった場合、以下のバックアップコードを使ってアカウントにアクセスできます。これらのコードは必ず安全な場所に保管してください。各コードは一回だけ使用できます。"
   backupCodeUsedWarning: "バックアップコードが使用されました。認証アプリが使えなくなっている場合、なるべく早く認証アプリを再設定してください。"
   backupCodesExhaustedWarning: "バックアップコードが全て使用されました。認証アプリを利用できない場合、これ以上アカウントにアクセスできなくなります。認証アプリを再登録してください。"
+  howto2fa: "設定方法でお困りの際は、{link}を参照してください。"
 
 _permissions:
   "read:account": "アカウントの情報を見る"

locales/ko-KR.yml

@@ -1235,6 +1235,7 @@ withSensitive: "민감한 파일이 포함된 노트 보기"
 userSaysSomethingSensitive: "{name}의 민감한 파일이 포함된 게시물"
 enableHorizontalSwipe: "스와이프하여 탭 전환"
 surrender: "그만두기"
+here: "여기"
 _bubbleGame:
   howToPlay: "설명"
   _howToPlay:
@@ -1992,6 +1993,7 @@ _2fa:
   backupCodesDescription: "인증 앱을 사용할 수 없게 된 경우 아래 백업 코드를 사용하여 계정에 액세스 할 수 있습니다.이 코드들은 반드시 안전한 장소에 보관하십시오.각 코드는 한 번만 사용할 수 있습니다."
   backupCodeUsedWarning: "백업 코드가 사용되었습니다.인증 앱을 사용할 수 없게 된 경우, 조속히 인증 앱을 다시 설정해 주십시오."
   backupCodesExhaustedWarning: "백업 코드가 모두 사용되었습니다.인증 앱을 사용할 수 없는 경우 더 이상 계정에 액세스하는 것이 불가능합니다.인증 앱을 다시 등록해 주세요."
+  howto2fa: "설정 방법에 대한 자세한 내용은 {link}를 참조하세요."
 _permissions:
   "read:account": "계정의 정보를 봅니다"
   "write:account": "계정의 정보를 변경합니다"

packages/frontend/src/pages/settings/2fa.vue

@@ -21,16 +21,24 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<template #caption>{{ i18n.ts.totpDescription }}</template>
 			<template #suffix><i v-if="$i.twoFactorEnabled" class="ti ti-check" style="color: var(--success)"></i></template>
 
-			<div v-if="$i.twoFactorEnabled" class="_gaps_s">
+			<div class="_gaps_s">
-				<div v-text="i18n.ts._2fa.alreadyRegistered"/>
+				<MkInfo>
-				<template v-if="$i.securityKeysList.length > 0">
+					<Mfm :text="i18n.tsx._2fa.howto2fa({ link: `[${i18n.ts.here}](https://go.misskey.io/howto-2fa)`})"/>
-					<MkButton @click="renewTOTP">{{ i18n.ts._2fa.renewTOTP }}</MkButton>
+				</MkInfo>
-					<MkInfo>{{ i18n.ts._2fa.whyTOTPOnlyRenew }}</MkInfo>
-				</template>
-				<MkButton v-else danger @click="unregisterTOTP">{{ i18n.ts.unregister }}</MkButton>
-			</div>
 
-			<MkButton v-else-if="!$i.twoFactorEnabled" primary gradate @click="registerTOTP">{{ i18n.ts._2fa.registerTOTP }}</MkButton>
+				<div v-if="$i.twoFactorEnabled" class="_gaps_s">
+					<div v-text="i18n.ts._2fa.alreadyRegistered"/>
+					<template v-if="$i.securityKeysList.length > 0">
+						<MkButton @click="renewTOTP">{{ i18n.ts._2fa.renewTOTP }}</MkButton>
+						<MkInfo>{{ i18n.ts._2fa.whyTOTPOnlyRenew }}</MkInfo>
+					</template>
+					<MkButton v-else danger @click="unregisterTOTP">{{ i18n.ts.unregister }}</MkButton>
+				</div>
+
+				<MkButton v-else-if="!$i.twoFactorEnabled" primary gradate @click="registerTOTP">
+					{{ i18n.ts._2fa.registerTOTP }}
+				</MkButton>
+			</div>
 		</MkFolder>
 
 		<MkFolder>