Skip to content

Commit

Permalink
enhance(frontend): Input の変更から API を叩く箇所の debounce と AbortController …
Browse files Browse the repository at this point in the history 
…の追加 (MisskeyIO#722)

- MkSignin のログインで、user が取得できるまでログインがクリックできないようにした
  - パスワードマネージャの自動ログインが動かなくなるが、元々動作していなかったため問題ないと思われる
  • Loading branch information
@riku6460
riku6460 authored Sep 16, 2024
1 parent 47b6b97 commit 970ad7c
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 28 deletions.
56 changes: 37 additions & 19 deletions packages/frontend/src/components/MkAutocomplete.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 });
Expand Down Expand Up @@ -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) {
Expand All @@ -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 === '') {
Expand All @@ -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') {
Expand Down
11 changes: 8 additions & 3 deletions packages/frontend/src/components/MkSignin.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@ 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>
<MkInput v-if="!user || user && !user.usePasswordLessLogin" v-model="password" :placeholder="i18n.ts.password" type="password" autocomplete="current-password webauthn" :withPasswordToggle="true" required data-cy-signin-password>
<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">
Expand Down Expand Up @@ -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('');
Expand Down Expand Up @@ -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;
Expand Down
13 changes: 9 additions & 4 deletions packages/frontend/src/components/MkUserSelectDialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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;
Expand Down
9 changes: 7 additions & 2 deletions packages/frontend/src/pages/api-console.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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;
Expand All @@ -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] =
Expand Down

0 comments on commit 970ad7c

Please sign in to comment.