refactor: migrate to nuxt compatibilityVersion: 4 (#3298)

app/pages/settings/users/index.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+/* eslint-disable no-alert */
+import type { UserLogin } from '#shared/types'
+import { fileOpen } from 'browser-fs-access'
+
+const { t } = useI18n()
+
+useHydratedHead({
+  title: () => `${t('settings.users.label')} | ${t('nav.settings')}`,
+})
+
+const loggedInUsers = useUsers()
+
+async function exportTokens() {
+  if (import.meta.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 (import.meta.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">
+          <span block i-ri-download-2-line />
+          {{ $t('settings.users.export') }}
+        </button>
+      </template>
+      <button btn-text flex="~ gap-2" items-center @click="importTokens">
+        <span block i-ri-upload-2-line />
+        {{ $t('settings.users.import') }}
+      </button>
+    </div>
+  </MainContent>
+</template>