feat: logged in users exports

locales/en-US.json

@@ -244,7 +244,10 @@
       },
       "label": "Profile"
     },
-    "select_a_settings": "Select a settings"
+    "select_a_settings": "Select a settings",
+    "users": {
+      "label": "Logged in users"
+    }
   },
   "state": {
     "edited": "(Edited)",

package.json

@@ -70,6 +70,7 @@
     "@iconify-json/twemoji": "^1.1.7",
     "@nuxtjs/i18n": "^8.0.0-beta.7",
     "@pinia/nuxt": "^0.4.6",
+    "@types/file-saver": "^2.0.5",
     "@types/fnando__sparkline": "^0.3.4",
     "@types/fs-extra": "^9.0.13",
     "@types/js-yaml": "^4.0.5",
@@ -83,6 +84,7 @@
     "emoji-mart": "^5.4.0",
     "eslint": "^8.30.0",
     "esno": "^0.16.3",
+    "file-saver": "^2.0.5",
     "fs-extra": "^11.1.0",
     "jsdom": "^20.0.3",
     "lint-staged": "^13.1.0",

pages/settings.vue

@@ -43,6 +43,12 @@ const isRootPath = computedEager(() => route.name === 'settings')
             :text="$t('settings.preferences.label')"
             to="/settings/preferences"
           />
+          <SettingsNavItem
+            command
+            icon="i-ri-group-line"
+            :text="$t('settings.users.label')"
+            to="/settings/users"
+          />
           <SettingsNavItem
             command
             icon="i-ri:information-line"

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>