feat: 2FAのバックアップコードの実装 (#121)

packages/frontend/src/components/MkSignin.vue

@@ -32,7 +32,7 @@
 					<template #label>{{ i18n.ts.password }}</template>
 					<template #prefix><i class="ti ti-lock"></i></template>
 				</MkInput>
-				<MkInput v-model="token" type="text" pattern="^[0-9]{6}$" autocomplete="one-time-code" :spellcheck="false" required>
+				<MkInput v-model="token" type="text" pattern="^([0-9]{6}|[A-Z0-9]{32})$" autocomplete="one-time-code" :spellcheck="false" required>
 					<template #label>{{ i18n.ts.token }}</template>
 					<template #prefix><i class="ti ti-123"></i></template>
 				</MkInput>

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

@@ -3,6 +3,13 @@
 	<template #label>{{ i18n.ts['2fa'] }}</template>
 
 	<div v-if="$i" class="_gaps_s">
+		<MkInfo v-if="$i.twoFactorEnabled && $i.twoFactorBackupCodes === 'partial'" warn class="info">
+			{{ i18n.ts._2fa.twoFactorBackupSecretWarning }}
+		</MkInfo>
+		<MkInfo v-if="$i.twoFactorEnabled && $i.twoFactorBackupCodes === 'none'" warn class="info">
+			{{ i18n.ts._2fa.twoFactorBackupSecretExhausted }}
+		</MkInfo>
+
 		<MkFolder>
 			<template #icon><i class="ti ti-shield-lock"></i></template>
 			<template #label>{{ i18n.ts.totp }}</template>
@@ -114,13 +121,13 @@ async function registerTOTP() {
 	});
 	if (token.canceled) return;
 
-	await os.apiWithDialog('i/2fa/done', {
+	const { backupCodes } = await os.apiWithDialog('i/2fa/done', {
 		token: token.result.toString(),
 	});
 
 	await os.alert({
 		type: 'success',
-		text: i18n.ts._2fa.step4,
+		text: i18n.t('_2fa.step4', { codes: backupCodes.join('\n') }),
 	});
 }