<script lang="ts" setup> /* eslint-disable no-alert */ import { fileOpen } from 'browser-fs-access' import type { UserLogin } from '~/types' const { t } = useI18n() useHydratedHead({ title: () => `${t('settings.users.label')} | ${t('nav.settings')}`, }) const loggedInUsers = useUsers() async function exportTokens() { if (process.server) return if (!confirm('Please aware that the tokens represent the **full access** to your accounts, and should be treated as sensitive information. Are you sure you want to export the tokens?')) return const { saveAs } = await import('file-saver') const data = { '/': 'Generated by Elk, you can import it to Elk to restore the tokens.', '//': 'This file represents the **full access** to your accounts, and should be treated as sensitive information.', 'version': 1, 'origin': location.origin, 'users': loggedInUsers.value, } const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json;charset=utf-8' }) saveAs(blob, `elk-users-tokens-${new Date().toISOString().slice(0, 10)}.json`) } async function importTokens() { if (process.server) return const file = await fileOpen({ description: 'Token File', mimeTypes: ['application/json'], }) try { const content = await file.text() const data = JSON.parse(content) if (data.version !== 1) throw new Error('Invalid version') const users = data.users as UserLogin[] const newUsers: UserLogin[] = [] for (const user of users) { if (loggedInUsers.value.some(u => u.server === user.server && u.account.id === user.account.id)) continue newUsers.push(user) } if (newUsers.length === 0) { alert('No new users found') return } if (!confirm(`Found ${newUsers.length} new users, are you sure you want to import them?`)) return loggedInUsers.value = [...loggedInUsers.value, ...newUsers] } catch (e) { console.error(e) alert('Invalid Elk tokens file') } } </script> <template> <MainContent back-on-small-screen> <template #title> <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop"> <span>{{ $t('settings.users.label') }}</span> </div> </template> <div p6> <template v-if="loggedInUsers.length"> <div flex="~ col gap2"> <div v-for="user of loggedInUsers" :key="user.account.id"> <AccountInfo :account="user.account" :hover-card="false" /> </div> </div> <div my4 border="t base" /> <button btn-text flex="~ gap-2" items-center @click="exportTokens"> <div i-ri-download-2-line /> {{ $t('settings.users.export') }} </button> </template> <button btn-text flex="~ gap-2" items-center @click="importTokens"> <div i-ri-upload-2-line /> {{ $t('settings.users.import') }} </button> </div> </MainContent> </template>