elk/components/user/UserSwitcher.vue

49 lines
1.3 KiB
Vue
Raw Normal View History

2022-11-23 03:48:01 +00:00
<script setup lang="ts">
2022-11-23 04:25:48 +00:00
const all = useUsers()
2022-11-23 04:20:59 +00:00
2022-11-23 04:25:48 +00:00
const sorted = computed(() => {
2022-11-23 04:20:59 +00:00
return [
currentUser.value!,
2022-11-23 04:25:48 +00:00
...all.value.filter(account => account.token !== currentUser.value?.token),
2022-11-23 04:20:59 +00:00
].filter(Boolean)
})
2022-11-23 03:48:01 +00:00
</script>
<template>
2022-11-23 04:20:59 +00:00
<div max-w-40rem mxa p4 flex="~ col gap2">
<h1 text-2xl>
2022-11-23 08:58:07 +00:00
Account
2022-11-23 04:20:59 +00:00
</h1>
<div mx--2>
2022-11-23 04:25:48 +00:00
<template v-for="user of sorted" :key="user.id">
2022-11-23 04:20:59 +00:00
<AccountInfo
2022-11-23 04:25:48 +00:00
:account="user.account"
2022-11-23 04:20:59 +00:00
:link="false"
:full-server="true"
rounded p2
2022-11-23 17:16:36 +00:00
:class="user.token !== currentUser?.token ? 'hover:bg-active cursor-pointer transition-100' : ''"
2022-11-23 04:25:48 +00:00
@click="loginTo(user)"
2022-11-23 04:20:59 +00:00
>
2022-11-23 04:25:48 +00:00
<template v-if="user.token === currentUser?.token">
2022-11-23 04:20:59 +00:00
<div flex-auto />
<div i-ri:check-line text-primary mya text-2xl />
</template>
</AccountInfo>
</template>
</div>
<div mx--4 border="t base" pt2>
<button btn-text flex="~ gap-1" items-center @click="openSigninDialog">
<div i-ri:user-add-line />
2022-11-23 08:58:07 +00:00
Add an existing account
2022-11-23 04:20:59 +00:00
</button>
<button
v-if="currentUser" btn-text hover:text-red4 flex="~ gap-1" items-center
@click="signout"
>
<div i-ri:logout-box-line />
Sign out {{ getAccountHandle(currentUser.account!) }}
2022-11-23 04:20:59 +00:00
</button>
</div>
2022-11-23 03:48:01 +00:00
</div>
</template>