2fa setting

locales/ja-JP.yml

@@ -330,6 +330,12 @@ token: "トークン"
 twoStepAuthentication: "二段階認証"
 moderator: "モデレーター"
 nUsersMentioned: "{n}人が投稿"
+securityKey: "セキュリティキー"
+securityKeyName: "キーの名前"
+registerSecurityKey: "セキュリティキーを登録する"
+lastUsed: "最後の使用"
+unregister: "登録を解除"
+passwordLessLogin: "パスワード無しログイン"
 
 _2fa:
   registerDevice: "デバイスを登録"
@@ -337,6 +343,7 @@ _2fa:
   step2: "次に、表示されているQRコードをアプリでスキャンします。"
   step3: "アプリに表示されているトークンを入力して完了です。"
   step4: "これからログインするときも、同じようにトークンを入力します。"
+  securityKeyInfo: "FIDO2をサポートするハードウェアセキュリティキーを使用してログインするように設定できます。"
 
 _permissions:
   "read:account": "アカウントの情報を見る"

src/client/pages/settings/2fa.vue

@@ -11,26 +11,17 @@
 			<template v-if="supportsCredentials">
 				<hr class="totp-method-sep">
 
-				<h2 class="heading">{{ $t('security-key-header') }}</h2>
+				<h2 class="heading">{{ $t('securityKey') }}</h2>
-				<p>{{ $t('security-key') }}</p>
+				<p>{{ $t('_2fa.securityKeyInfo') }}</p>
 				<div class="key-list">
 					<div class="key" v-for="key in $store.state.i.securityKeysList">
-						<h3>
+						<h3>{{ key.name }}</h3>
-							{{ key.name }}
+						<div class="last-used">{{ $t('lastUsed') }}<mk-time :time="key.lastUsed"/></div>
-						</h3>
+						<mk-button @click="unregisterKey(key)">{{ $t('unregister') }}</mk-button>
-						<div class="last-used">
-							{{ $t('last-used') }}
-							<mk-time :time="key.lastUsed"/>
-						</div>
-						<mk-button @click="unregisterKey(key)">
-							{{ $t('unregister') }}
-						</mk-button>
 					</div>
 				</div>
 
-				<mk-switch v-model="usePasswordLessLogin" @change="updatePasswordLessLogin" v-if="$store.state.i.securityKeysList.length > 0">
+				<mk-switch v-model="usePasswordLessLogin" @change="updatePasswordLessLogin" v-if="$store.state.i.securityKeysList.length > 0">{{ $t('passwordLessLogin') }}</mk-switch>
-					{{ $t('use-password-less-login') }}
-				</mk-switch>
 
 				<mk-info warn v-if="registration && registration.error">{{ $t('something-went-wrong') }} {{ registration.error }}</mk-info>
 				<mk-button v-if="!registration || registration.error" @click="addSecurityKey">{{ $t('register') }}</mk-button>
@@ -43,11 +34,9 @@
 					<li v-if="registration.stage >= 1">
 						<mk-form :disabled="registration.stage != 1 || registration.saving">
 							<mk-input v-model="keyName" :max="30">
-								<span>{{ $t('security-key-name') }}</span>
+								<span>{{ $t('securityKeyName') }}</span>
 							</mk-input>
-							<mk-button @click="registerKey" :disabled="this.keyName.length == 0">
+							<mk-button @click="registerKey" :disabled="keyName.length == 0">{{ $t('registerSecurityKey') }}</mk-button>
-								{{ $t('register-security-key') }}
-							</mk-button>
 							<fa icon="spinner" pulse fixed-width v-if="registration.saving && registration.stage == 1" />
 						</mk-form>
 					</li>