enhance(frontend): TOTPの入力ダイアログを改良 (#13607)

* enhance(frontend): TOTPの入力ダイアログを改良

* Update Changelog
This commit is contained in:
かっこかり 2024-03-22 15:03:21 +09:00 committed by GitHub
parent 40bb6069ec
commit c9c6424205
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 41 additions and 19 deletions

View file

@ -16,7 +16,8 @@
- Enhance: リアクション受け入れが「いいねのみ」の場合はリアクション絵文字一覧を表示しないように - Enhance: リアクション受け入れが「いいねのみ」の場合はリアクション絵文字一覧を表示しないように
- Enhance: 設定>プラグインのページからプラグインの簡易的なログやエラーを見られるように - Enhance: 設定>プラグインのページからプラグインの簡易的なログやエラーを見られるように
- 実装の都合により、プラグインは1つエラーを起こした時に即時停止するようになりました - 実装の都合により、プラグインは1つエラーを起こした時に即時停止するようになりました
- Enhance: ページのデザインを変更 - Enhance: ページのデザインを変更
- Enhance: 2要素認証ワンタイムパスワードの入力欄を改善
- Fix: 一部のページ内リンクが正しく動作しない問題を修正 - Fix: 一部のページ内リンクが正しく動作しない問題を修正
- Fix: 周年の実績が閏年を考慮しない問題を修正 - Fix: 周年の実績が閏年を考慮しない問題を修正
- Fix: ローカルURLのプレビューポップアップが左上に表示される - Fix: ローカルURLのプレビューポップアップが左上に表示される

8
locales/index.d.ts vendored
View file

@ -4920,6 +4920,14 @@ export interface Locale extends ILocale {
* 使 * 使
*/ */
"notUsePleaseLeaveBlank": string; "notUsePleaseLeaveBlank": string;
/**
* 使
*/
"useTotp": string;
/**
* 使
*/
"useBackupCode": string;
"_bubbleGame": { "_bubbleGame": {
/** /**
* *

View file

@ -1226,6 +1226,8 @@ loading: "読み込み中"
surrender: "やめる" surrender: "やめる"
gameRetry: "リトライ" gameRetry: "リトライ"
notUsePleaseLeaveBlank: "使用しない場合は空欄にしてください" notUsePleaseLeaveBlank: "使用しない場合は空欄にしてください"
useTotp: "ワンタイムパスワードを使う"
useBackupCode: "バックアップコードを使う"
_bubbleGame: _bubbleGame:
howToPlay: "遊び方" howToPlay: "遊び方"

View file

@ -22,6 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
:autocomplete="autocomplete" :autocomplete="autocomplete"
:autocapitalize="autocapitalize" :autocapitalize="autocapitalize"
:spellcheck="spellcheck" :spellcheck="spellcheck"
:inputmode="inputmode"
:step="step" :step="step"
:list="id" :list="id"
:min="min" :min="min"
@ -63,6 +64,7 @@ const props = defineProps<{
mfmAutocomplete?: boolean | SuggestionType[], mfmAutocomplete?: boolean | SuggestionType[],
autocapitalize?: string; autocapitalize?: string;
spellcheck?: boolean; spellcheck?: boolean;
inputmode?: 'none' | 'text' | 'search' | 'email' | 'url' | 'numeric' | 'tel' | 'decimal';
step?: any; step?: any;
datalist?: string[]; datalist?: string[];
min?: number; min?: number;

View file

@ -19,18 +19,21 @@ SPDX-License-Identifier: AGPL-3.0-only
<div style="margin-top: 16px;">{{ i18n.ts.authenticationRequiredToContinue }}</div> <div style="margin-top: 16px;">{{ i18n.ts.authenticationRequiredToContinue }}</div>
</div> </div>
<div class="_gaps"> <form @submit.prevent="done">
<MkInput ref="passwordInput" v-model="password" :placeholder="i18n.ts.password" type="password" autocomplete="current-password webauthn" :withPasswordToggle="true"> <div class="_gaps">
<template #prefix><i class="ti ti-password"></i></template> <MkInput ref="passwordInput" v-model="password" :placeholder="i18n.ts.password" type="password" autocomplete="current-password webauthn" required :withPasswordToggle="true">
</MkInput> <template #prefix><i class="ti ti-password"></i></template>
</MkInput>
<MkInput v-if="$i.twoFactorEnabled" v-model="token" type="text" pattern="^([0-9]{6}|[A-Z0-9]{32})$" autocomplete="one-time-code" :spellcheck="false"> <MkInput v-if="$i.twoFactorEnabled" v-model="token" type="text" :pattern="isBackupCode ? '^[A-Z0-9]{32}$' :'^[0-9]{6}$'" autocomplete="one-time-code" required :spellcheck="false" :inputmode="isBackupCode ? undefined : 'numeric'">
<template #label>{{ i18n.ts.token }} ({{ i18n.ts['2fa'] }})</template> <template #label>{{ i18n.ts.token }} ({{ i18n.ts['2fa'] }})</template>
<template #prefix><i class="ti ti-123"></i></template> <template #prefix><i v-if="isBackupCode" class="ti ti-key"></i><i v-else class="ti ti-123"></i></template>
</MkInput> <template #caption><button class="_textButton" type="button" @click="isBackupCode = !isBackupCode">{{ isBackupCode ? i18n.ts.useTotp : i18n.ts.useBackupCode }}</button></template>
</MkInput>
<MkButton :disabled="(password ?? '') == '' || ($i.twoFactorEnabled && (token ?? '') == '')" primary rounded style="margin: 0 auto;" @click="done"><i class="ti ti-lock-open"></i> {{ i18n.ts.continue }}</MkButton> <MkButton :disabled="(password ?? '') == '' || ($i.twoFactorEnabled && (token ?? '') == '')" type="submit" primary rounded style="margin: 0 auto;"><i class="ti ti-lock-open"></i> {{ i18n.ts.continue }}</MkButton>
</div> </div>
</form>
</MkSpacer> </MkSpacer>
</MkModalWindow> </MkModalWindow>
</template> </template>
@ -54,6 +57,7 @@ const emit = defineEmits<{
const dialog = shallowRef<InstanceType<typeof MkModalWindow>>(); const dialog = shallowRef<InstanceType<typeof MkModalWindow>>();
const passwordInput = shallowRef<InstanceType<typeof MkInput>>(); const passwordInput = shallowRef<InstanceType<typeof MkInput>>();
const password = ref(''); const password = ref('');
const isBackupCode = ref(false);
const token = ref<string | null>(null); const token = ref<string | null>(null);
function onClose() { function onClose() {
@ -61,7 +65,7 @@ function onClose() {
if (dialog.value) dialog.value.close(); if (dialog.value) dialog.value.close();
} }
function done(res) { function done() {
emit('done', { password: password.value, token: token.value }); emit('done', { password: password.value, token: token.value });
if (dialog.value) dialog.value.close(); if (dialog.value) dialog.value.close();
} }

View file

@ -31,15 +31,15 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="user && user.securityKeys" class="or-hr"> <div v-if="user && user.securityKeys" class="or-hr">
<p class="or-msg">{{ i18n.ts.or }}</p> <p class="or-msg">{{ i18n.ts.or }}</p>
</div> </div>
<div class="twofa-group totp-group"> <div class="twofa-group totp-group _gaps">
<p style="margin-bottom:0;">{{ i18n.ts['2fa'] }}</p>
<MkInput v-if="user && user.usePasswordLessLogin" v-model="password" type="password" autocomplete="current-password" :withPasswordToggle="true" required> <MkInput v-if="user && user.usePasswordLessLogin" v-model="password" type="password" autocomplete="current-password" :withPasswordToggle="true" required>
<template #label>{{ i18n.ts.password }}</template> <template #label>{{ i18n.ts.password }}</template>
<template #prefix><i class="ti ti-lock"></i></template> <template #prefix><i class="ti ti-lock"></i></template>
</MkInput> </MkInput>
<MkInput v-model="token" type="text" pattern="^([0-9]{6}|[A-Z0-9]{32})$" autocomplete="one-time-code" :spellcheck="false" required> <MkInput v-model="token" type="text" :pattern="isBackupCode ? '^[A-Z0-9]{32}$' :'^[0-9]{6}$'" autocomplete="one-time-code" required :spellcheck="false" :inputmode="isBackupCode ? undefined : 'numeric'">
<template #label>{{ i18n.ts.token }}</template> <template #label>{{ i18n.ts.token }} ({{ i18n.ts['2fa'] }})</template>
<template #prefix><i class="ti ti-123"></i></template> <template #prefix><i v-if="isBackupCode" class="ti ti-key"></i><i v-else class="ti ti-123"></i></template>
<template #caption><button class="_textButton" type="button" @click="isBackupCode = !isBackupCode">{{ isBackupCode ? i18n.ts.useTotp : i18n.ts.useBackupCode }}</button></template>
</MkInput> </MkInput>
<MkButton type="submit" :disabled="signing" large primary rounded style="margin: 0 auto;">{{ signing ? i18n.ts.loggingIn : i18n.ts.login }}</MkButton> <MkButton type="submit" :disabled="signing" large primary rounded style="margin: 0 auto;">{{ signing ? i18n.ts.loggingIn : i18n.ts.login }}</MkButton>
</div> </div>
@ -70,6 +70,7 @@ const password = ref('');
const token = ref(''); const token = ref('');
const host = ref(toUnicode(configHost)); const host = ref(toUnicode(configHost));
const totpLogin = ref(false); const totpLogin = ref(false);
const isBackupCode = ref(false);
const queryingKey = ref(false); const queryingKey = ref(false);
const credentialRequest = ref<CredentialRequestOptions | null>(null); const credentialRequest = ref<CredentialRequestOptions | null>(null);

View file

@ -52,7 +52,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSpacer :marginMin="20" :marginMax="28"> <MkSpacer :marginMin="20" :marginMax="28">
<div class="_gaps"> <div class="_gaps">
<div>{{ i18n.ts._2fa.step3Title }}</div> <div>{{ i18n.ts._2fa.step3Title }}</div>
<MkInput v-model="token" autocomplete="one-time-code"></MkInput> <MkInput v-model="token" autocomplete="one-time-code" inputmode="numeric"></MkInput>
<div>{{ i18n.ts._2fa.step3 }}</div> <div>{{ i18n.ts._2fa.step3 }}</div>
</div> </div>
<div class="_buttonsCenter" style="margin-top: 16px;"> <div class="_buttonsCenter" style="margin-top: 16px;">

View file

@ -80,7 +80,7 @@ import MkSwitch from '@/components/MkSwitch.vue';
import FormSection from '@/components/form/section.vue'; import FormSection from '@/components/form/section.vue';
import MkFolder from '@/components/MkFolder.vue'; import MkFolder from '@/components/MkFolder.vue';
import * as os from '@/os.js'; import * as os from '@/os.js';
import { signinRequired } from '@/account.js'; import { signinRequired, updateAccount } from '@/account.js';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
const $i = signinRequired(); const $i = signinRequired();
@ -116,6 +116,10 @@ async function unregisterTOTP(): Promise<void> {
os.apiWithDialog('i/2fa/unregister', { os.apiWithDialog('i/2fa/unregister', {
password: auth.result.password, password: auth.result.password,
token: auth.result.token, token: auth.result.token,
}).then(res => {
updateAccount({
twoFactorEnabled: false,
});
}).catch(error => { }).catch(error => {
os.alert({ os.alert({
type: 'error', type: 'error',