enhance(frontend): Input の変更から API を叩く箇所の debounce と AbortController の追加 (MisskeyIO#722)
- MkSignin のログインで、user が取得できるまでログインがクリックできないようにした - パスワードマネージャの自動ログインが動かなくなるが、元々動作していなかったため問題ないと思われる
This commit is contained in:
riku6460
GitHub
parent
47b6b97c9c
commit
970ad7c81e
@ -46,6 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
<script lang="ts">
|
||||
import { markRaw, ref, shallowRef, computed, onUpdated, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
|
||||
import sanitizeHtml from 'sanitize-html';
|
||||
import { debounce } from 'throttle-debounce';
|
||||
import contains from '@/scripts/contains.js';
|
||||
import { char2twemojiFilePath, char2fluentEmojiFilePath } from '@/scripts/emoji-base.js';
|
||||
import { acct } from '@/filters/user.js';
|
||||
@ -189,6 +190,7 @@ const mfmTags = ref<string[]>([]);
|
||||
const mfmParams = ref<string[]>([]);
|
||||
const select = ref(-1);
|
||||
const zIndex = os.claimZIndex('high');
|
||||
const abortController = ref<AbortController>();
|
||||
|
||||
function complete<T extends keyof CompleteInfo>(type: T, value: CompleteInfo[T]['payload']) {
|
||||
emit('done', { type, value });
|
||||
@ -217,6 +219,39 @@ function setPosition() {
|
||||
}
|
||||
}
|
||||
|
||||
const searchUsers = debounce(1000, (query: string, cacheKey: string) => {
|
||||
if (abortController.value) {
|
||||
abortController.value.abort();
|
||||
}
|
||||
abortController.value = new AbortController();
|
||||
misskeyApi('users/search-by-username-and-host', {
|
||||
username: query,
|
||||
limit: 10,
|
||||
detail: false,
|
||||
}, undefined, abortController.value.signal).then(searchedUsers => {
|
||||
users.value = searchedUsers as any[];
|
||||
fetching.value = false;
|
||||
// キャッシュ
|
||||
sessionStorage.setItem(cacheKey, JSON.stringify(searchedUsers));
|
||||
});
|
||||
});
|
||||
|
||||
const searchHashtags = debounce(1000, (query: string, cacheKey: string) => {
|
||||
if (abortController.value) {
|
||||
abortController.value.abort();
|
||||
}
|
||||
abortController.value = new AbortController();
|
||||
misskeyApi('hashtags/search', {
|
||||
query,
|
||||
limit: 30,
|
||||
}, undefined, abortController.value.signal).then(searchedHashtags => {
|
||||
hashtags.value = searchedHashtags as any[];
|
||||
fetching.value = false;
|
||||
// キャッシュ
|
||||
sessionStorage.setItem(cacheKey, JSON.stringify(searchedHashtags));
|
||||
});
|
||||
});
|
||||
|
||||
function exec() {
|
||||
select.value = -1;
|
||||
if (suggests.value) {
|
||||
@ -238,16 +273,7 @@ function exec() {
|
||||
users.value = JSON.parse(cache);
|
||||
fetching.value = false;
|
||||
} else {
|
||||
misskeyApi('users/search-by-username-and-host', {
|
||||
username: props.q,
|
||||
limit: 10,
|
||||
detail: false,
|
||||
}).then(searchedUsers => {
|
||||
users.value = searchedUsers as any[];
|
||||
fetching.value = false;
|
||||
// キャッシュ
|
||||
sessionStorage.setItem(cacheKey, JSON.stringify(searchedUsers));
|
||||
});
|
||||
searchUsers(props.q, cacheKey);
|
||||
}
|
||||
} else if (props.type === 'hashtag') {
|
||||
if (!props.q || props.q === '') {
|
||||
@ -261,15 +287,7 @@ function exec() {
|
||||
hashtags.value = hashtags;
|
||||
fetching.value = false;
|
||||
} else {
|
||||
misskeyApi('hashtags/search', {
|
||||
query: props.q,
|
||||
limit: 30,
|
||||
}).then(searchedHashtags => {
|
||||
hashtags.value = searchedHashtags as any[];
|
||||
fetching.value = false;
|
||||
// キャッシュ
|
||||
sessionStorage.setItem(cacheKey, JSON.stringify(searchedHashtags));
|
||||
});
|
||||
searchHashtags(props.q, cacheKey);
|
||||
}
|
||||
}
|
||||
} else if (props.type === 'emoji') {
|
||||
|
||||
@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
{{ message }}
|
||||
</MkInfo>
|
||||
<div v-if="!totpLogin" class="normal-signin _gaps_m">
|
||||
<MkInput v-model="username" :placeholder="i18n.ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autocomplete="username webauthn" autofocus required data-cy-signin-username @update:modelValue="onUsernameChange">
|
||||
<MkInput v-model="username" :debounce="true" :placeholder="i18n.ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autocomplete="username webauthn" autofocus required data-cy-signin-username @update:modelValue="onUsernameChange">
|
||||
<template #prefix>@</template>
|
||||
<template #suffix>@{{ host }}</template>
|
||||
</MkInput>
|
||||
@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
<template #prefix><i class="ti ti-lock"></i></template>
|
||||
<template #caption><button class="_textButton" type="button" @click="resetPassword">{{ i18n.ts.forgotPassword }}</button></template>
|
||||
</MkInput>
|
||||
<MkButton type="submit" large primary rounded :disabled="signing" style="margin: 0 auto;">{{ signing ? i18n.ts.loggingIn : i18n.ts.login }}</MkButton>
|
||||
<MkButton type="submit" large primary rounded :disabled="!user || signing" style="margin: 0 auto;">{{ signing ? i18n.ts.loggingIn : i18n.ts.login }}</MkButton>
|
||||
</div>
|
||||
<div v-if="totpLogin" class="2fa-signin" :class="{ securityKeys: user && user.securityKeys }">
|
||||
<div v-if="user && user.securityKeys" class="twofa-group tap-group">
|
||||
@ -64,6 +64,7 @@ import { login } from '@/account.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
|
||||
const signing = ref(false);
|
||||
const userAbortController = ref<AbortController>();
|
||||
const user = ref<Misskey.entities.UserDetailed | null>(null);
|
||||
const username = ref('');
|
||||
const password = ref('');
|
||||
@ -97,9 +98,13 @@ const props = defineProps({
|
||||
});
|
||||
|
||||
function onUsernameChange(): void {
|
||||
if (userAbortController.value) {
|
||||
userAbortController.value.abort();
|
||||
}
|
||||
userAbortController.value = new AbortController();
|
||||
misskeyApi('users/show', {
|
||||
username: username.value,
|
||||
}).then(userResponse => {
|
||||
}, undefined, userAbortController.value.signal).then(userResponse => {
|
||||
user.value = userResponse;
|
||||
}, () => {
|
||||
user.value = null;
|
||||
|
||||
@ -16,16 +16,16 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
<template #header>{{ i18n.ts.selectUser }}</template>
|
||||
<div>
|
||||
<div :class="$style.form">
|
||||
<MkInput v-if="localOnly" v-model="username" :autofocus="true" @update:modelValue="search">
|
||||
<MkInput v-if="localOnly" v-model="username" :debounce="true" :autofocus="true" @update:modelValue="search">
|
||||
<template #label>{{ i18n.ts.username }}</template>
|
||||
<template #prefix>@</template>
|
||||
</MkInput>
|
||||
<FormSplit v-else :minWidth="170">
|
||||
<MkInput v-model="username" :autofocus="true" @update:modelValue="search">
|
||||
<MkInput v-model="username" :debounce="true" :autofocus="true" @update:modelValue="search">
|
||||
<template #label>{{ i18n.ts.username }}</template>
|
||||
<template #prefix>@</template>
|
||||
</MkInput>
|
||||
<MkInput v-model="host" :datalist="[hostname]" @update:modelValue="search">
|
||||
<MkInput v-model="host" :debounce="true" :datalist="[hostname]" @update:modelValue="search">
|
||||
<template #label>{{ i18n.ts.host }}</template>
|
||||
<template #prefix>@</template>
|
||||
</MkInput>
|
||||
@ -92,18 +92,23 @@ const users = ref<Misskey.entities.UserLite[]>([]);
|
||||
const recentUsers = ref<Misskey.entities.UserDetailed[]>([]);
|
||||
const selected = ref<Misskey.entities.UserLite | null>(null);
|
||||
const dialogEl = ref();
|
||||
const abortController = ref<AbortController>();
|
||||
|
||||
function search() {
|
||||
if (abortController.value) {
|
||||
abortController.value.abort();
|
||||
}
|
||||
if (username.value === '' && host.value === '') {
|
||||
users.value = [];
|
||||
return;
|
||||
}
|
||||
abortController.value = new AbortController();
|
||||
misskeyApi('users/search-by-username-and-host', {
|
||||
username: username.value,
|
||||
host: props.localOnly ? '.' : host.value,
|
||||
limit: 10,
|
||||
detail: false,
|
||||
}).then(_users => {
|
||||
}, undefined, abortController.value.signal).then(_users => {
|
||||
users.value = _users.filter((u) => {
|
||||
if (props.includeSelf) {
|
||||
return true;
|
||||
|
||||
@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
<MkSpacer :contentMax="700">
|
||||
<div class="_gaps_m">
|
||||
<div class="_gaps_m">
|
||||
<MkInput v-model="endpoint" :datalist="endpoints" @update:modelValue="onEndpointChange()">
|
||||
<MkInput v-model="endpoint" :debounce="true" :datalist="endpoints" @update:modelValue="onEndpointChange()">
|
||||
<template #label>Endpoint</template>
|
||||
</MkInput>
|
||||
<MkTextarea v-model="body" code>
|
||||
@ -50,6 +50,7 @@ const endpoints = ref<string[]>([]);
|
||||
const sending = ref(false);
|
||||
const res = ref('');
|
||||
const withCredential = ref(true);
|
||||
const endpointAbortController = ref<AbortController>();
|
||||
|
||||
misskeyApi('endpoints').then(endpointResponse => {
|
||||
endpoints.value = endpointResponse;
|
||||
@ -68,7 +69,11 @@ function send() {
|
||||
}
|
||||
|
||||
function onEndpointChange() {
|
||||
misskeyApi('endpoint', { endpoint: endpoint.value }, withCredential.value ? undefined : null).then(resp => {
|
||||
if (endpointAbortController.value) {
|
||||
endpointAbortController.value.abort();
|
||||
}
|
||||
endpointAbortController.value = new AbortController();
|
||||
misskeyApi('endpoint', { endpoint: endpoint.value }, withCredential.value ? undefined : null, endpointAbortController.value.signal).then(resp => {
|
||||
const endpointBody = {};
|
||||
for (const p of resp.params) {
|
||||
endpointBody[p.name] =
|
||||
|
||||
Loading…
Reference in New Issue
Block a user