:art: 2FA設定のデザイン向上 / セキュリティキーの名前を変更できるように (#9985)

* wip

* fix

* wip

* wip

* :v:

* rename key

* :art:

* update CHANGELOG.md

* パスワードレスログインの判断はサーバーで

* 日本語

* 日本語

* 日本語

* 日本語

* :v:

* fix

* refactor

* トークン→確認コード

* fix password-less / qr click

* use otpauth

* 日本語

* autocomplete

* パスワードレス設定は外に出す

* :art:

* :art:

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

1 files changed, 82 insertions, 0 deletions

diff --git a/packages/frontend/src/pages/settings/2fa.qrdialog.vue b/packages/frontend/src/pages/settings/2fa.qrdialog.vue
new file mode 100644
index 0000000000..1d836db5f5
--- /dev/null
+++ b/packages/frontend/src/pages/settings/2fa.qrdialog.vue
@@ -0,0 +1,82 @@
+<template>
+<MkModal
+	ref="dialogEl"
+	:prefer-type="'dialog'"
+	:z-priority="'low'"
+	@click="cancel"
+	@close="cancel"
+	@closed="emit('closed')"
+>
+	<div :class="$style.root" class="_gaps_m">
+		<I18n :src="i18n.ts._2fa.step1" tag="div">
+			<template #a>
+				<a href="https://authy.com/" rel="noopener" target="_blank" class="_link">Authy</a>
+			</template>
+			<template #b>
+				<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>
+		<MkKeyValue :copy="twoFactorData.url">
+			<template #key>{{ i18n.ts._2fa.step2Url }}</template>
+			<template #value>{{ twoFactorData.url }}</template>
+		</MkKeyValue>
+		<div class="_buttons">
+			<MkButton primary @click="ok">{{ i18n.ts.next }}</MkButton>
+			<MkButton @click="cancel">{{ i18n.ts.cancel }}</MkButton>
+		</div>
+	</div>
+</MkModal>
+</template>
+
+<script lang="ts" setup>
+import MkButton from '@/components/MkButton.vue';
+import MkModal from '@/components/MkModal.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
+import { i18n } from '@/i18n';
+
+defineProps<{
+	twoFactorData: {
+		qr: string;
+		url: string;
+	};
+}>();
+
+const emit = defineEmits<{
+	(ev: 'ok'): void;
+	(ev: 'cancel'): void;
+	(ev: 'closed'): void;
+}>();
+
+const cancel = () => {
+	emit('cancel');
+	emit('closed');
+};
+
+const ok = () => {
+	emit('ok');
+	emit('closed');
+};
+</script>
+
+<style lang="scss" module>
+.root {
+	position: relative;
+	margin: auto;
+	padding: 32px;
+	min-width: 320px;
+	max-width: calc(100svw - 64px);
+	box-sizing: border-box;
+	background: var(--panel);
+	border-radius: var(--radius);
+}
+
+.qr {
+    width: 20em;
+    max-width: 100%;
+}
+</style>