elk/pages/settings/users/index.vue

<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>