enhance(frontend): 2要素認証セットアップウィザードにアプリを起動するボタンを新設 (#13636)

* enhance(frontend): 2要素認証セットアップウィザードにアプリを起動するボタンを新設

* add comment

* use css module
This commit is contained in:
かっこかり 2024-03-30 15:34:05 +09:00 committed by GitHub
parent 2a851437ff
commit 50da7d2a27
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 22 additions and 10 deletions

10
locales/index.d.ts vendored
View file

@ -4928,6 +4928,10 @@ export interface Locale extends ILocale {
* 使 * 使
*/ */
"useBackupCode": string; "useBackupCode": string;
/**
*
*/
"launchApp": string;
"_bubbleGame": { "_bubbleGame": {
/** /**
* *
@ -7542,13 +7546,9 @@ export interface Locale extends ILocale {
*/ */
"step1": ParameterizedString<"a" | "b">; "step1": ParameterizedString<"a" | "b">;
/** /**
* QRコードをアプリでスキャンします * QRコードをアプリでスキャンするか
*/ */
"step2": string; "step2": string;
/**
* QRコードをクリックすると使
*/
"step2Click": string;
/** /**
* 使URIを入力します * 使URIを入力します
*/ */

View file

@ -1228,6 +1228,7 @@ gameRetry: "リトライ"
notUsePleaseLeaveBlank: "使用しない場合は空欄にしてください" notUsePleaseLeaveBlank: "使用しない場合は空欄にしてください"
useTotp: "ワンタイムパスワードを使う" useTotp: "ワンタイムパスワードを使う"
useBackupCode: "バックアップコードを使う" useBackupCode: "バックアップコードを使う"
launchApp: "アプリを起動"
_bubbleGame: _bubbleGame:
howToPlay: "遊び方" howToPlay: "遊び方"
@ -1983,8 +1984,7 @@ _2fa:
alreadyRegistered: "既に設定は完了しています。" alreadyRegistered: "既に設定は完了しています。"
registerTOTP: "認証アプリの設定を開始" registerTOTP: "認証アプリの設定を開始"
step1: "まず、{a}や{b}などの認証アプリをお使いのデバイスにインストールします。" step1: "まず、{a}や{b}などの認証アプリをお使いのデバイスにインストールします。"
step2: "次に、表示されているQRコードをアプリでスキャンします。" step2: "次に、表示されているQRコードをアプリでスキャンするか、ボタンをクリックして端末上でアプリを開きます。"
step2Click: "QRコードをクリックすると、お使いの端末にインストールされている認証アプリやキーリングに登録できます。"
step2Uri: "デスクトップアプリを使用する場合は次のURIを入力します" step2Uri: "デスクトップアプリを使用する場合は次のURIを入力します"
step3Title: "確認コードを入力" step3Title: "確認コードを入力"
step3: "アプリに表示されている確認コード(トークン)を入力します。" step3: "アプリに表示されている確認コード(トークン)を入力します。"

View file

@ -23,6 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
v-else class="_button" v-else class="_button"
:class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike }]" :class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike }]"
:to="to ?? '#'" :to="to ?? '#'"
:behavior="linkBehavior"
@mousedown="onMousedown" @mousedown="onMousedown"
> >
<div ref="ripples" :class="$style.ripples" :data-children-class="$style.ripple"></div> <div ref="ripples" :class="$style.ripples" :data-children-class="$style.ripple"></div>
@ -43,6 +44,7 @@ const props = defineProps<{
inline?: boolean; inline?: boolean;
link?: boolean; link?: boolean;
to?: string; to?: string;
linkBehavior?: null | 'window' | 'browser';
autofocus?: boolean; autofocus?: boolean;
wait?: boolean; wait?: boolean;
danger?: boolean; danger?: boolean;

View file

@ -33,8 +33,12 @@ 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> <a href="https://support.google.com/accounts/answer/1066447" rel="noopener" target="_blank" class="_link">Google Authenticator</a>
</template> </template>
</I18n> </I18n>
<div>{{ i18n.ts._2fa.step2 }}<br>{{ i18n.ts._2fa.step2Click }}</div> <div>{{ i18n.ts._2fa.step2 }}</div>
<a :href="twoFactorData.url"><img :class="$style.qr" :src="twoFactorData.qr"></a> <div>
<a :class="$style.qrRoot" :href="twoFactorData.url"><img :class="$style.qr" :src="twoFactorData.qr"></a>
<!-- QRコード側にマージンが入っているので直下でOK -->
<div><MkButton inline rounded link :to="twoFactorData.url" :linkBehavior="'browser'">{{ i18n.ts.launchApp }}</MkButton></div>
</div>
<MkKeyValue :copy="twoFactorData.url"> <MkKeyValue :copy="twoFactorData.url">
<template #key>{{ i18n.ts._2fa.step2Uri }}</template> <template #key>{{ i18n.ts._2fa.step2Uri }}</template>
<template #value>{{ twoFactorData.url }}</template> <template #value>{{ twoFactorData.url }}</template>
@ -177,8 +181,14 @@ function allDone() {
transform: translateX(-50px); transform: translateX(-50px);
} }
.qr { .qrRoot {
display: block;
margin: 0 auto;
width: 200px; width: 200px;
max-width: 100%; max-width: 100%;
} }
.qr {
width: 100%;
}
</style> </style>