elk/composables/users.ts

455 lines
14 KiB
TypeScript
Raw Normal View History

2022-11-22 23:08:36 +00:00
import { login as loginMasto } from 'masto'
import type { Account, AccountCredentials, Instance, MastoClient, WsEvents } from 'masto'
2022-12-13 13:22:27 +00:00
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'
2022-11-22 23:08:36 +00:00
const mock = process.mock
2023-01-03 01:26:14 +00:00
export const GUEST_ID = '[anonymous]'
const initializeUsers = async (): Promise<Ref<UserLogin[]> | RemovableRef<UserLogin[]>> => {
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<UserLogin[]>(defaultUsers)
: await useAsyncIDBKeyval<UserLogin[]>(STORAGE_KEY_USERS, defaultUsers, { deep: true })
if (removeUsersOnLocalStorage)
globalThis.localStorage.removeItem(STORAGE_KEY_USERS)
return users
}
const users = await initializeUsers()
const instances = useLocalStorage<Record<string, Instance>>(STORAGE_KEY_SERVERS, mock ? mock.server : {}, { deep: true })
const currentUserId = useLocalStorage<string>(STORAGE_KEY_CURRENT_USER, mock ? mock.user.account.id : '')
2023-01-03 02:29:58 +00:00
const isGuestId = computed(() => !currentUserId.value || currentUserId.value.startsWith(`${GUEST_ID}@`))
2023-01-03 09:39:00 +00:00
const defaultUser: UserLogin<false> = {
server: DEFAULT_SERVER,
guest: true,
}
2022-11-22 23:08:36 +00:00
2023-01-03 09:39:00 +00:00
export const currentUser = computed<UserLogin>(() => {
let user: UserLogin | undefined
if (!currentUserId.value) {
// Fallback to the first account
user = users.value[0]
}
else if (isGuestId.value) {
2023-01-03 01:26:14 +00:00
const server = currentUserId.value.replace(`${GUEST_ID}@`, '')
2023-01-03 09:39:00 +00:00
user = users.value.find(user => user.guest && user.server === server)
2023-01-03 01:23:16 +00:00
}
2023-01-03 09:39:00 +00:00
else {
user = users.value.find(user => user.account?.id === currentUserId.value)
}
return user || defaultUser
2023-01-03 01:23:16 +00:00
})
2022-12-13 13:49:22 +00:00
2023-01-03 09:39:00 +00:00
export const currentServer = computed<string>(() => currentUser.value.server)
2023-01-03 00:11:10 +00:00
export const currentInstance = computed<null | Instance>(() => {
return instances.value[currentServer.value] ?? null
})
2023-01-03 10:57:18 +00:00
export const checkAuth = (val: UserLogin | undefined): val is UserLogin<true> => !!(val && !val.guest)
export const isGuest = computed(() => !checkAuth(currentUser.value))
2023-01-03 09:39:00 +00:00
export const getUniqueUserId = (user: UserLogin) =>
user.guest ? `${GUEST_ID}@${user.server}` : user.account.id
2023-01-03 02:14:54 +00:00
export const isSameUser = (a: UserLogin | undefined, b: UserLogin | undefined) =>
2023-01-03 02:29:58 +00:00
a && b && getUniqueUserId(a) === getUniqueUserId(b)
2022-11-22 23:08:36 +00:00
2023-01-03 00:11:10 +00:00
export const currentUserHandle = computed(() =>
2023-01-03 09:39:00 +00:00
currentUser.value.guest ? GUEST_ID : currentUser.value.account!.acct,
)
2022-11-23 03:48:01 +00:00
// 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
2022-11-25 14:21:07 +00:00
export const characterLimit = computed(() => currentInstance.value?.configuration.statuses.maxCharacters ?? DEFAULT_POST_CHARS_LIMIT)
2023-01-03 09:39:00 +00:00
async function loginTo({ server, token, vapidKey, pushSubscription, guest = false }: { guest?: boolean } & Omit<UserLogin, 'guest'>) {
const route = useRoute()
const router = useRouter()
2023-01-03 09:39:00 +00:00
2023-01-03 10:09:15 +00:00
const oldServer = currentUser.value.server
2023-01-03 09:39:00 +00:00
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 }
}
}
2022-11-22 23:08:36 +00:00
const masto = await loginMasto({
2023-01-03 09:39:00 +00:00
url: `https://${user.server}`,
accessToken: user.token,
disableVersionCheck: true,
2022-12-21 01:06:39 +00:00
// Suppress warning of `masto/fetch` usage
disableExperimentalWarning: true,
2022-11-22 23:08:36 +00:00
})
2023-01-03 09:39:00 +00:00
if (user.guest) {
2023-01-03 00:11:10 +00:00
const instance = await masto.instances.fetch()
instances.value[server] = instance
2022-11-29 20:51:52 +00:00
}
else {
2023-01-03 09:39:00 +00:00
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
}
2023-01-03 09:39:00 +00:00
if (needPush)
users.value.push(user)
currentUserId.value = getUniqueUserId(user)
// This only cleans up the URL; page content should stay the same
2023-01-03 10:09:15 +00:00
if (!user.guest && (route.path === '/signin/callback' || route.path === '/')) {
await router.push('/home')
}
2023-01-03 10:09:15 +00:00
else if (isGuest.value && route.meta.middleware === 'auth') {
await router.push(`/${server}/public`)
}
2023-01-03 09:39:00 +00:00
else if ('server' in route.params && user.server !== route.params.server) {
2023-01-03 10:09:15 +00:00
if (!route.params.account.includes('@'))
// convert to long handle
route.params.account += `@${oldServer}`
await router.push({
...route,
2023-01-03 09:39:00 +00:00
params: {
...route.params,
server: user.server,
},
force: true,
})
}
return masto
2022-11-22 23:08:36 +00:00
}
2023-01-03 09:39:00 +00:00
export type LoginTo = typeof loginTo
2022-11-23 04:20:59 +00:00
2023-01-03 02:14:54 +00:00
export const switchUser = (user: UserLogin, masto: ElkMasto) => {
const router = useRouter()
2023-01-03 09:39:00 +00:00
if (!user.guest && !isGuest.value && user.account.id === currentUser.value.account!.id)
2023-01-03 02:14:54 +00:00
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()
2023-01-02 23:00:12 +00:00
if (!account.acct.includes('@'))
account.acct = `${account.acct}@${currentInstance.value!.uri}`
setAccountInfo(currentUserId.value, account)
2023-01-02 23:00:12 +00:00
cacheAccount(account, currentServer.value, true)
}
export function getUsersIndexByUserId(userId: string) {
return users.value.findIndex(u => u.account?.id === userId)
}
2023-01-03 09:39:00 +00:00
export async function removePushNotificationData(user: UserLogin<true>, fromSWPushManager = true) {
// clear push subscription
user.pushSubscription = undefined
2023-01-03 00:11:10 +00:00
const { acct } = user.account!
// clear request notification permission
delete useLocalStorage<PushNotificationRequest>(STORAGE_KEY_NOTIFICATION, {}).value[acct]
// clear push notification policy
delete useLocalStorage<PushNotificationPolicy>(STORAGE_KEY_NOTIFICATION_POLICY, {}).value[acct]
2022-12-23 18:28:10 +00:00
const pwaEnabled = useRuntimeConfig().public.pwaEnabled
// we remove the sw push manager if required and there are no more accounts with subscriptions
2022-12-23 18:28:10 +00:00
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
}
}
}
2023-01-03 01:23:16 +00:00
export async function removePushNotifications(user: UserLogin<true>) {
2022-12-23 18:28:10 +00:00
if (!user.pushSubscription)
return
// unsubscribe push notifications
try {
await useMasto().pushSubscriptions.remove()
}
catch {
// ignore
}
}
2023-01-03 09:39:00 +00:00
// do not sign out if there is only one guest user
export const canSignOut = computed(() =>
users.value.length > 1 || !users.value[0].guest,
)
2022-11-23 04:20:59 +00:00
export async function signout() {
// TODO: confirm
2023-01-03 09:39:00 +00:00
if (!canSignOut.value)
2022-11-23 04:20:59 +00:00
return
2023-01-03 02:29:58 +00:00
const index = users.value.findIndex(u => isSameUser(u, currentUser.value))
2022-11-26 19:33:36 +00:00
if (index !== -1) {
// Clear stale data
2022-12-13 13:22:27 +00:00
clearUserLocalStorage()
if (!users.value.some((u, i) => u.server === currentUser.value.server && i !== index))
delete instances.value[currentUser.value.server]
2022-11-23 04:20:59 +00:00
2023-01-03 10:57:18 +00:00
if (checkAuth(currentUser.value)) {
2023-01-03 01:23:16 +00:00
await removePushNotifications(currentUser.value)
await removePushNotificationData(currentUser.value)
}
2022-11-29 05:43:06 +00:00
currentUserId.value = ''
2022-11-26 19:33:36 +00:00
// Remove the current user from the users
users.value.splice(index, 1)
}
2023-01-03 09:39:00 +00:00
// Set currentUserId to next user
currentUserId.value = getUniqueUserId(users.value[0] ? users.value[0] : defaultUser)
2022-11-23 04:20:59 +00:00
2023-01-03 02:29:58 +00:00
const masto = useMasto()
await masto.loginTo(currentUser.value)
2022-11-23 04:20:59 +00:00
}
2022-12-02 02:18:57 +00:00
const notifications = reactive<Record<string, undefined | [Promise<WsEvents>, 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<void> {
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()
2022-12-13 14:03:30 +00:00
return {
notifications: computed(() => id ? notifications[id]?.[1] ?? 0 : 0),
disconnect,
clearNotifications,
}
}
2022-12-02 02:18:57 +00:00
export function checkLogin() {
if (!currentUser.value) {
openSigninDialog()
return false
}
return true
}
2022-12-13 13:22:27 +00:00
/**
* Create reactive storage for the current user
*/
export function useUserLocalStorage<T extends object>(key: string, initial: () => T) {
2022-12-13 13:49:22 +00:00
// @ts-expect-error bind value to the function
const storages = useUserLocalStorage._ = useUserLocalStorage._ || new Map<string, Ref<Record<string, any>>>()
if (!storages.has(key))
storages.set(key, useLocalStorage(key, {}, { deep: true }))
const all = storages.get(key) as Ref<Record<string, T>>
return computed(() => {
2023-01-03 09:39:00 +00:00
const id = currentUser.value.guest
2023-01-03 01:26:14 +00:00
? GUEST_ID
: currentUser.value.account!.acct
2022-12-13 13:49:22 +00:00
all.value[id] = Object.assign(initial(), all.value[id] || {})
return all.value[id]
})
2022-12-13 13:22:27 +00:00
}
/**
* Clear all storages for the given account
*/
export function clearUserLocalStorage(account?: Account) {
if (!account)
account = currentUser.value.account
2022-12-13 13:22:27 +00:00
if (!account)
return
const id = `${account.acct}@${currentInstance.value?.uri || currentServer.value}`
2022-12-13 14:03:30 +00:00
// @ts-expect-error bind value to the function
;(useUserLocalStorage._ as Map<string, Ref<Record<string, any>>>).forEach((storage) => {
2022-12-13 13:22:27 +00:00
if (storage.value[id])
delete storage.value[id]
})
}
export const createMasto = () => {
const api = shallowRef<MastoClient | null>(null)
const apiPromise = ref<Promise<MastoClient> | 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<MastoClient> => {
2023-01-03 09:39:00 +00:00
return apiPromise.value = (loginTo as any)(...args).then((r: any) => {
api.value = r
return masto
2023-01-03 09:39:00 +00:00
}).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) {
2022-12-26 08:34:30 +00:00
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
}