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
isDark.value
</script>
<template>
<NuxtLoadingIndicator color="repeating-linear-gradient(to right,var(--c-primary) 0%,var(--c-primary-active) 100%)" />
<NuxtLayout>
<NuxtLayout :key="key">
<NuxtPage />
</NuxtLayout>
<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 async function loginTo(user: UserLogin & { account?: AccountCredentials }) {
export async function loginTo(user?: Omit<UserLogin, 'account'> & { account?: AccountCredentials }) {
if (user) {
const existing = users.value.find(u => u.server === user.server && u.token === user.token)
if (existing) {
if (currentUserId.value === existing.account?.id)
return null
if (existing && currentUserId.value !== user.account?.id)
currentUserId.value = user.account?.id
await reloadPage()
return true
}
const masto = await loginMasto({
url: `https://${user.server}`,
accessToken: user.token,
url: `https://${user?.server || DEFAULT_SERVER}`,
accessToken: user?.token,
})
if (user?.token) {
try {
const me = await masto.accounts.verifyCredentials()
user.account = me
users.value.push(user)
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()
await reloadPage()
return true
}
catch {
await signout()
}
}
setMasto(masto)
return masto
}
export async function signout() {
@ -72,10 +81,8 @@ export async function signout() {
// Set currentUserId to next user if available
currentUserId.value = users.value[0]?.account?.id
await reloadPage()
}
if (!currentUserId.value)
await useRouter().push('/public')
export async function reloadPage(path = '/') {
await nextTick()
location.pathname = path
await loginTo(currentUser.value)
}

View File

@ -1,8 +1,14 @@
<script setup lang="ts">
definePageMeta({
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()
</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 { DEFAULT_SERVER } from '~/constants'
export default defineNuxtPlugin(async () => {
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)
const masto = await login({
url: `https://${currentUser.value?.server || DEFAULT_SERVER}`,
accessToken,
})
if (accessToken)
masto.accounts.verifyCredentials().catch(() => signout())
const masto = await loginTo(user) as MastoClient
return {
provide: {
masto,
masto: shallowReactive({
replace(api: MastoClient) { this.api = api },
api: masto,
}),
},
}
}