elk/pages/settings/users/index.vue
Joaquín Sánchez ab2881b9a2
refactor: remove useHeadFixed workaround (#1938)
Co-authored-by: Ayaka Rizumu <464388324@qq.com>
2023-04-01 04:14:12 -07:00

94 lines
2.9 KiB
Vue

<script lang="ts" setup>
/* eslint-disable no-alert */
import { fileOpen } from 'browser-fs-access'
import type { UserLogin } from '~/types'
const { t } = useI18n()
useHead({
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>