feat: logged in users exports

pages/settings/users/index.vue

@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import type { UserLogin } from '~/types'
+
+const { lg } = breakpoints
+
+const loggedInUsers = useUsers()
+
+async function exportTokens() {
+  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() {
+  const input = document.createElement('input') as HTMLInputElement
+  input.type = 'file'
+  input.accept = 'application/json'
+  input.multiple = false
+
+  input.addEventListener('change', async (e) => {
+    const file = (e.target as any)?.files?.[0] as File
+    if (!file)
+      return
+
+    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')
+    }
+  })
+
+  input.click()
+}
+</script>
+
+<template>
+  <MainContent :back="!lg">
+    <template #title>
+      <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+        <span>{{ $t('settings.users.label') }}</span>
+      </div>
+    </template>
+    <div p4>
+      <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 />
+        Export User Tokens
+      </button>
+      <button btn-text flex="~ gap-2" items-center @click="importTokens">
+        <div i-ri-upload-2-line />
+        Import User Tokens
+      </button>
+    </div>
+  </MainContent>
+</template>