enhance(frontend): 2要素認証セットアップウィザードにアプリを起動するボタンを新設 (#13636)
* enhance(frontend): 2要素認証セットアップウィザードにアプリを起動するボタンを新設 * add comment * use css module
This commit is contained in:
parent
2a851437ff
commit
50da7d2a27
|
@ -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を入力します
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -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: "アプリに表示されている確認コード(トークン)を入力します。"
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue