mirror of https://github.com/elk-zone/elk.git
90 lines
2.8 KiB
Vue
90 lines
2.8 KiB
Vue
|
<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>
|