From df6c006515d41847ba6cad48ca5d2ced50272e63 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 28 Aug 2023 16:46:12 +0900
Subject: [PATCH] tweak

---
 .../backend/src/server/api/endpoints/i/2fa/done.ts |  4 +---
 .../frontend/src/pages/settings/2fa.qrdialog.vue   | 14 +++++++-------
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/backend/src/server/api/endpoints/i/2fa/done.ts b/packages/backend/src/server/api/endpoints/i/2fa/done.ts
index 01c9532ca8..2d1457b9b5 100644
--- a/packages/backend/src/server/api/endpoints/i/2fa/done.ts
+++ b/packages/backend/src/server/api/endpoints/i/2fa/done.ts
@@ -54,9 +54,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				throw new Error('not verified');
 			}
 
-			const backupCodes = Array.from({ length: 20 }, () => {
-				return new OTPAuth.Secret().base32;
-			});
+			const backupCodes = Array.from({ length: 5 }, () => new OTPAuth.Secret().base32);
 
 			await this.userProfilesRepository.update(me.id, {
 				twoFactorSecret: profile.twoFactorTempSecret,
diff --git a/packages/frontend/src/pages/settings/2fa.qrdialog.vue b/packages/frontend/src/pages/settings/2fa.qrdialog.vue
index 97ceae6bd2..cf6b0227fd 100644
--- a/packages/frontend/src/pages/settings/2fa.qrdialog.vue
+++ b/packages/frontend/src/pages/settings/2fa.qrdialog.vue
@@ -33,10 +33,7 @@ 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>
+							<div>{{ i18n.ts._2fa.step2 }}<br>{{ i18n.ts._2fa.step2Click }}</div>
 							<a :href="twoFactorData.url"><img :class="$style.qr" :src="twoFactorData.qr"></a>
 							<MkKeyValue :copy="twoFactorData.url">
 								<template #key>{{ i18n.ts._2fa.step2Uri }}</template>
@@ -80,9 +77,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 								<div class="_gaps">
 									<MkInfo warn>{{ i18n.ts._2fa.backupCodesDescription }}</MkInfo>
 
-									<ul v-for="code in backupCodes" :key="code" class="_gaps_s" style="margin: 0;">
-										<li class="_monospace">{{ code }}</li>
-									</ul>
+									<div v-for="(code, i) in backupCodes" :key="code" class="_gaps_s">
+										<MkKeyValue :copy="code">
+											<template #key>#{{ i + 1 }}</template>
+											<template #value><code class="_monospace">{{ code }}</code></template>
+										</MkKeyValue>
+									</div>
 								</div>
 							</MkFolder>
 						</div>