import { login as loginMasto } from 'masto' import type { Account, AccountCredentials, Instance, MastoClient, WsEvents } from 'masto' import type { Ref } from 'vue' import type { RemovableRef } from '@vueuse/core' import type { ElkMasto, UserLogin } from '~/types' import { DEFAULT_POST_CHARS_LIMIT, DEFAULT_SERVER, STORAGE_KEY_CURRENT_USER, STORAGE_KEY_NOTIFICATION, STORAGE_KEY_NOTIFICATION_POLICY, STORAGE_KEY_SERVERS, STORAGE_KEY_USERS, } from '~/constants' import type { PushNotificationPolicy, PushNotificationRequest } from '~/composables/push-notifications/types' import { useAsyncIDBKeyval } from '~/composables/idb' const mock = process.mock export const GUEST_ID = '[anonymous]' const initializeUsers = async (): Promise | RemovableRef> => { let defaultUsers = mock ? [mock.user] : [] // Backward compatibility with localStorage let removeUsersOnLocalStorage = false if (globalThis?.localStorage) { const usersOnLocalStorageString = globalThis.localStorage.getItem(STORAGE_KEY_USERS) if (usersOnLocalStorageString) { defaultUsers = JSON.parse(usersOnLocalStorageString) removeUsersOnLocalStorage = true } } const users = process.server ? ref(defaultUsers) : await useAsyncIDBKeyval(STORAGE_KEY_USERS, defaultUsers, { deep: true }) if (removeUsersOnLocalStorage) globalThis.localStorage.removeItem(STORAGE_KEY_USERS) return users } const users = await initializeUsers() const instances = useLocalStorage>(STORAGE_KEY_SERVERS, mock ? mock.server : {}, { deep: true }) const currentUserId = useLocalStorage(STORAGE_KEY_CURRENT_USER, mock ? mock.user.account.id : '') const isGuestId = computed(() => !currentUserId.value || currentUserId.value.startsWith(`${GUEST_ID}@`)) const defaultUser: UserLogin = { server: DEFAULT_SERVER, guest: true, } export const currentUser = computed(() => { let user: UserLogin | undefined if (!currentUserId.value) { // Fallback to the first account user = users.value[0] } else if (isGuestId.value) { const server = currentUserId.value.replace(`${GUEST_ID}@`, '') user = users.value.find(user => user.guest && user.server === server) } else { user = users.value.find(user => user.account?.id === currentUserId.value) } return user || defaultUser }) export const currentServer = computed(() => currentUser.value.server) export const currentInstance = computed(() => { return instances.value[currentServer.value] ?? null }) export const checkAuth = (val: UserLogin | undefined): val is UserLogin => !!(val && !val.guest) export const isGuest = computed(() => !checkAuth(currentUser.value)) export const getUniqueUserId = (user: UserLogin) => user.guest ? `${GUEST_ID}@${user.server}` : user.account.id export const isSameUser = (a: UserLogin | undefined, b: UserLogin | undefined) => a && b && getUniqueUserId(a) === getUniqueUserId(b) export const currentUserHandle = computed(() => currentUser.value.guest ? GUEST_ID : currentUser.value.account!.acct, ) // when multiple tabs: we need to reload window when sign in, switch account or sign out if (process.client) { const windowReload = () => { document.visibilityState === 'visible' && window.location.reload() } watch(currentUserId, async (id, oldId) => { // when sign in or switch account if (id) { if (id === currentUser.value?.account?.id) { // when sign in, the other tab will not have the user, idb is not reactive const newUser = users.value.find(user => user.account?.id === id) // if the user is there, then we are switching account if (newUser) { // check if the change is on current tab: if so, don't reload if (document.hasFocus() || document.visibilityState === 'visible') return } } window.addEventListener('visibilitychange', windowReload, { capture: true }) } // when sign out else if (oldId) { const oldUser = users.value.find(user => user.account?.id === oldId) // when sign out, the other tab will not have the user, idb is not reactive if (oldUser) window.addEventListener('visibilitychange', windowReload, { capture: true }) } }, { immediate: true, flush: 'post' }) } export const useUsers = () => users export const characterLimit = computed(() => currentInstance.value?.configuration.statuses.maxCharacters ?? DEFAULT_POST_CHARS_LIMIT) async function loginTo({ server, token, vapidKey, pushSubscription, guest = false }: { guest?: boolean } & Omit) { const route = useRoute() const router = useRouter() const oldServer = currentUser.value.server let user: UserLogin | undefined = token ? users.value.find(u => u.server === server && u.token === token) : ((guest ? undefined : users.value.find(u => u.server === server && u.token)) || users.value.find(u => u.server === server && u.guest)) const needPush = !user if (!user) { if (token) { user = { server, guest: false, token, vapidKey, pushSubscription, account: undefined as any, // to be assigned later } } else { user = { server, guest: true } } } const masto = await loginMasto({ url: `https://${user.server}`, accessToken: user.token, disableVersionCheck: true, // Suppress warning of `masto/fetch` usage disableExperimentalWarning: true, }) if (user.guest) { const instance = await masto.instances.fetch() instances.value[server] = instance } else { const [me, instance, pushSubscription] = await Promise.all([ masto.accounts.verifyCredentials(), masto.instances.fetch(), // if PWA is not enabled, don't get push subscription useRuntimeConfig().public.pwaEnabled // we get 404 response instead empty data ? masto.pushSubscriptions.fetch().catch(() => Promise.resolve(undefined)) : Promise.resolve(undefined), ]) if (!me.acct.includes('@')) me.acct = `${me.acct}@${instance.uri}` user.account = me user.pushSubscription = pushSubscription instances.value[server] = instance } if (needPush) users.value.push(user) currentUserId.value = getUniqueUserId(user) // This only cleans up the URL; page content should stay the same if (!user.guest && (route.path === '/signin/callback' || route.path === '/')) { await router.push('/home') } else if (isGuest.value && route.meta.middleware === 'auth') { await router.push(`/${server}/public`) } else if ('server' in route.params && user.server !== route.params.server) { if (!route.params.account.includes('@')) // convert to long handle route.params.account += `@${oldServer}` await router.push({ ...route, params: { ...route.params, server: user.server, }, force: true, }) } return masto } export type LoginTo = typeof loginTo export const switchUser = (user: UserLogin, masto: ElkMasto) => { const router = useRouter() if (!user.guest && !isGuest.value && user.account.id === currentUser.value.account!.id) router.push(getAccountRoute(user.account)) else masto.loginTo(user) } export function setAccountInfo(userId: string, account: AccountCredentials) { const index = getUsersIndexByUserId(userId) if (index === -1) return false users.value[index].account = account return true } export async function pullMyAccountInfo() { const account = await useMasto().accounts.verifyCredentials() if (!account.acct.includes('@')) account.acct = `${account.acct}@${currentInstance.value!.uri}` setAccountInfo(currentUserId.value, account) cacheAccount(account, currentServer.value, true) } export function getUsersIndexByUserId(userId: string) { return users.value.findIndex(u => u.account?.id === userId) } export async function removePushNotificationData(user: UserLogin, fromSWPushManager = true) { // clear push subscription user.pushSubscription = undefined const { acct } = user.account! // clear request notification permission delete useLocalStorage(STORAGE_KEY_NOTIFICATION, {}).value[acct] // clear push notification policy delete useLocalStorage(STORAGE_KEY_NOTIFICATION_POLICY, {}).value[acct] const pwaEnabled = useRuntimeConfig().public.pwaEnabled // we remove the sw push manager if required and there are no more accounts with subscriptions if (pwaEnabled && fromSWPushManager && (users.value.length === 0 || users.value.every(u => !u.pushSubscription))) { // clear sw push subscription try { const registration = await navigator.serviceWorker.ready const subscription = await registration.pushManager.getSubscription() if (subscription) await subscription.unsubscribe() } catch { // juts ignore } } } export async function removePushNotifications(user: UserLogin) { if (!user.pushSubscription) return // unsubscribe push notifications try { await useMasto().pushSubscriptions.remove() } catch { // ignore } } // do not sign out if there is only one guest user export const canSignOut = computed(() => users.value.length > 1 || !users.value[0].guest, ) export async function signout() { // TODO: confirm if (!canSignOut.value) return const index = users.value.findIndex(u => isSameUser(u, currentUser.value)) if (index !== -1) { // Clear stale data clearUserLocalStorage() if (!users.value.some((u, i) => u.server === currentUser.value.server && i !== index)) delete instances.value[currentUser.value.server] if (checkAuth(currentUser.value)) { await removePushNotifications(currentUser.value) await removePushNotificationData(currentUser.value) } currentUserId.value = '' // Remove the current user from the users users.value.splice(index, 1) } // Set currentUserId to next user currentUserId.value = getUniqueUserId(users.value[0] ? users.value[0] : defaultUser) const masto = useMasto() await masto.loginTo(currentUser.value) } const notifications = reactive, number]>>({}) export const useNotifications = () => { const id = $computed(() => currentUser.value.account?.id) const masto = useMasto() const clearNotifications = () => { if (!id || !notifications[id]) return notifications[id]![1] = 0 } async function connect(): Promise { if (!isMastoInitialised.value || !id || notifications[id] || !currentUser.value.token) return const stream = masto.stream.streamUser() notifications[id] = [stream, 0] ;(await stream).on('notification', () => { if (notifications[id]) notifications[id]![1]++ }) } function disconnect(): void { if (!id || !notifications[id]) return notifications[id]![0].then(stream => stream.disconnect()) notifications[id] = undefined } watch(currentUser, disconnect) connect() return { notifications: computed(() => id ? notifications[id]?.[1] ?? 0 : 0), disconnect, clearNotifications, } } export function checkLogin() { if (!currentUser.value) { openSigninDialog() return false } return true } /** * Create reactive storage for the current user */ export function useUserLocalStorage(key: string, initial: () => T) { // @ts-expect-error bind value to the function const storages = useUserLocalStorage._ = useUserLocalStorage._ || new Map>>() if (!storages.has(key)) storages.set(key, useLocalStorage(key, {}, { deep: true })) const all = storages.get(key) as Ref> return computed(() => { const id = currentUser.value.guest ? GUEST_ID : currentUser.value.account!.acct all.value[id] = Object.assign(initial(), all.value[id] || {}) return all.value[id] }) } /** * Clear all storages for the given account */ export function clearUserLocalStorage(account?: Account) { if (!account) account = currentUser.value.account if (!account) return const id = `${account.acct}@${currentInstance.value?.uri || currentServer.value}` // @ts-expect-error bind value to the function ;(useUserLocalStorage._ as Map>>).forEach((storage) => { if (storage.value[id]) delete storage.value[id] }) } export const createMasto = () => { const api = shallowRef(null) const apiPromise = ref | null>(null) const initialised = computed(() => !!api.value) const masto = new Proxy({} as ElkMasto, { get(_, key: keyof ElkMasto) { if (key === 'loggedIn') return initialised if (key === 'loginTo') { return (...args: any[]): Promise => { return apiPromise.value = (loginTo as any)(...args).then((r: any) => { api.value = r return masto }).catch((err: any) => { console.error(err) // Show error page when Mastodon server is down throw createError({ fatal: true, statusMessage: 'Could not log into account.', }) }) } } if (api.value && key in api.value) return api.value[key as keyof MastoClient] if (!api.value) { return new Proxy({}, { get(_, subkey) { if (typeof subkey === 'string' && subkey.startsWith('iterate')) { return (...args: any[]) => { let paginator: any function next() { paginator = paginator || (api.value as any)?.[key][subkey](...args) return paginator.next() } return { next } } } return (...args: any[]) => apiPromise.value?.then((r: any) => r[key][subkey](...args)) }, }) } return undefined }, }) return masto }