feat: avoid reloading the page when changing accounts (#180)

zio/stable
Daniel Roe 2022-11-27 15:13:04 +00:00 committed by GitHub
parent e2000321c5
commit 729b36a606
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 56 additions and 56 deletions

View File

@ -10,13 +10,16 @@ useHead({
], ],
}) })
// We want to trigger rerendering the page when account changes
const key = computed(() => useMasto().instances.config.url || 'default')
// eslint-disable-next-line no-unused-expressions // eslint-disable-next-line no-unused-expressions
isDark.value isDark.value
</script> </script>
<template> <template>
<NuxtLoadingIndicator color="repeating-linear-gradient(to right,var(--c-primary) 0%,var(--c-primary-active) 100%)" /> <NuxtLoadingIndicator color="repeating-linear-gradient(to right,var(--c-primary) 0%,var(--c-primary-active) 100%)" />
<NuxtLayout> <NuxtLayout :key="key">
<NuxtPage /> <NuxtPage />
</NuxtLayout> </NuxtLayout>
<TeleportTarget <TeleportTarget

View File

@ -1 +1,7 @@
export const useMasto = () => useNuxtApp().$masto import type { MastoClient } from 'masto'
export const useMasto = () => useNuxtApp().$masto.api
export const setMasto = (masto: MastoClient) => {
useNuxtApp().$masto?.replace(masto)
}

View File

@ -27,28 +27,37 @@ export const currentInstance = computed<null | Instance>(() => currentUserId.val
export const characterLimit = computed(() => currentInstance.value?.configuration.statuses.maxCharacters ?? DEFAULT_POST_CHARS_LIMIT) export const characterLimit = computed(() => currentInstance.value?.configuration.statuses.maxCharacters ?? DEFAULT_POST_CHARS_LIMIT)
export async function loginTo(user: UserLogin & { account?: AccountCredentials }) { export async function loginTo(user?: Omit<UserLogin, 'account'> & { account?: AccountCredentials }) {
const existing = users.value.find(u => u.server === user.server && u.token === user.token) if (user) {
if (existing) { const existing = users.value.find(u => u.server === user.server && u.token === user.token)
if (currentUserId.value === existing.account?.id) if (existing && currentUserId.value !== user.account?.id)
return null currentUserId.value = user.account?.id
currentUserId.value = user.account?.id
await reloadPage()
return true
} }
const masto = await loginMasto({ const masto = await loginMasto({
url: `https://${user.server}`, url: `https://${user?.server || DEFAULT_SERVER}`,
accessToken: user.token, accessToken: user?.token,
}) })
const me = await masto.accounts.verifyCredentials()
user.account = me
users.value.push(user) if (user?.token) {
currentUserId.value = me.id try {
servers.value[me.id] = await masto.instances.fetch() const me = await masto.accounts.verifyCredentials()
await reloadPage() user.account = me
return true
if (!users.value.some(u => u.server === user.server && u.token === user.token))
users.value.push(user as UserLogin)
currentUserId.value = me.id
servers.value[me.id] = await masto.instances.fetch()
}
catch {
await signout()
}
}
setMasto(masto)
return masto
} }
export async function signout() { export async function signout() {
@ -72,10 +81,8 @@ export async function signout() {
// Set currentUserId to next user if available // Set currentUserId to next user if available
currentUserId.value = users.value[0]?.account?.id currentUserId.value = users.value[0]?.account?.id
await reloadPage() if (!currentUserId.value)
} await useRouter().push('/public')
export async function reloadPage(path = '/') { await loginTo(currentUser.value)
await nextTick()
location.pathname = path
} }

View File

@ -1,8 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
definePageMeta({ definePageMeta({
middleware: 'auth', middleware: 'auth',
alias: ['/signin/callback'],
}) })
if (useRoute().path === '/signin/callback') {
// This only cleans up the URL; page content should stay the same
useRouter().push('/home')
}
const paginator = useMasto().timelines.getHomeIterable() const paginator = useMasto().timelines.getHomeIterable()
</script> </script>

View File

@ -1,21 +0,0 @@
<script setup lang="ts">
definePageMeta({
layout: 'none',
})
const router = useRouter()
const { query } = useRoute()
onMounted(async () => {
await loginTo(query as any)
router.push('/')
})
</script>
<template>
<div h-full flex>
<div ma>
Login...
</div>
</div>
</template>

View File

@ -1,23 +1,22 @@
import { login } from 'masto' import type { MastoClient } from 'masto'
import { currentUser } from '../composables/users' import { currentUser } from '../composables/users'
import { DEFAULT_SERVER } from '~/constants'
export default defineNuxtPlugin(async () => { export default defineNuxtPlugin(async () => {
try { try {
const accessToken = currentUser.value?.token const { query } = useRoute()
const user = typeof query.server === 'string' && typeof query.token === 'string'
? { server: query.server, token: query.token }
: currentUser.value
// TODO: improve upstream to make this synchronous (delayed auth) // TODO: improve upstream to make this synchronous (delayed auth)
const masto = await login({ const masto = await loginTo(user) as MastoClient
url: `https://${currentUser.value?.server || DEFAULT_SERVER}`,
accessToken,
})
if (accessToken)
masto.accounts.verifyCredentials().catch(() => signout())
return { return {
provide: { provide: {
masto, masto: shallowReactive({
replace(api: MastoClient) { this.api = api },
api: masto,
}),
}, },
} }
} }