diff options
| author | かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com> | 2024-03-30 15:34:05 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-03-30 15:34:05 +0900 |
| commit | 50da7d2a2728745bcf29cf71fb230c85a1845060 (patch) | |
| tree | 83a8da1d051f24f66d8a56039b2c2726ae2629d9 /packages/frontend/src | |
| parent | fix: misskey-js、bubble-game、reversiのビルドをesbuildに統合する ... (diff) | |
| download | misskey-50da7d2a2728745bcf29cf71fb230c85a1845060.tar.gz misskey-50da7d2a2728745bcf29cf71fb230c85a1845060.tar.bz2 misskey-50da7d2a2728745bcf29cf71fb230c85a1845060.zip | |
enhance(frontend): 2要素認証セットアップウィザードにアプリを起動するボタンを新設 (#13636)
* enhance(frontend): 2要素認証セットアップウィザードにアプリを起動するボタンを新設
* add comment
* use css module
Diffstat (limited to 'packages/frontend/src')
| -rw-r--r-- | packages/frontend/src/components/MkButton.vue | 2 | ||||
| -rw-r--r-- | packages/frontend/src/pages/settings/2fa.qrdialog.vue | 16 |
2 files changed, 15 insertions, 3 deletions
diff --git a/packages/frontend/src/components/MkButton.vue b/packages/frontend/src/components/MkButton.vue index 817f1aadf3..3489255b91 100644 --- a/packages/frontend/src/components/MkButton.vue +++ b/packages/frontend/src/components/MkButton.vue @@ -23,6 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only 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 }]" :to="to ?? '#'" + :behavior="linkBehavior" @mousedown="onMousedown" > <div ref="ripples" :class="$style.ripples" :data-children-class="$style.ripple"></div> @@ -43,6 +44,7 @@ const props = defineProps<{ inline?: boolean; link?: boolean; to?: string; + linkBehavior?: null | 'window' | 'browser'; autofocus?: boolean; wait?: boolean; danger?: boolean; diff --git a/packages/frontend/src/pages/settings/2fa.qrdialog.vue b/packages/frontend/src/pages/settings/2fa.qrdialog.vue index 2ef664b9a3..73253b1ef4 100644 --- a/packages/frontend/src/pages/settings/2fa.qrdialog.vue +++ b/packages/frontend/src/pages/settings/2fa.qrdialog.vue @@ -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> </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> + <div>{{ i18n.ts._2fa.step2 }}</div> + <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"> <template #key>{{ i18n.ts._2fa.step2Uri }}</template> <template #value>{{ twoFactorData.url }}</template> @@ -177,8 +181,14 @@ function allDone() { transform: translateX(-50px); } -.qr { +.qrRoot { + display: block; + margin: 0 auto; width: 200px; max-width: 100%; } + +.qr { + width: 100%; +} </style> |