feat: sign out

This commit is contained in:
Anthony Fu 2022-11-23 12:20:59 +08:00
parent 1f63a42dac
commit 8dc1fb6493
8 changed files with 76 additions and 33 deletions

View file

@ -7,5 +7,5 @@ defineProps<{
</script> </script>
<template> <template>
<img :src="account.avatar" :alt="account.username" rounded bg-gray:10> <img :src="account.avatar" :alt="account.username" rounded-full bg-gray:10>
</template> </template>

View file

@ -1,9 +1,48 @@
<script setup lang="ts"> <script setup lang="ts">
const accounts = useAccounts() const allAccounts = useAccounts()
const sortedAccounts = computed(() => {
return [
currentUser.value!,
...allAccounts.value.filter(account => account.token !== currentUser.value?.token),
].filter(Boolean)
})
</script> </script>
<template> <template>
<div flex flex-col gap-4 p4> <div max-w-40rem mxa p4 flex="~ col gap2">
<AccountInfo :account="currentUser?.account" :link="false" @click="openAccountSwitcher" /> <h1 text-2xl>
Switch Account
</h1>
<div mx--2>
<template v-for="acc of sortedAccounts" :key="acc.id">
<AccountInfo
:account="acc.account"
:link="false"
:full-server="true"
rounded p2
hover:bg-active cursor-pointer
@click="loginTo(acc)"
>
<template v-if="acc.token === currentUser?.token">
<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 />
Add another account
</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 @{{ currentUser.account!.acct }}
</button>
</div>
</div> </div>
</template> </template>

View file

@ -1,33 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { isAccountSwitcherOpen, isSigninDialogOpen } from '~/composables/dialog' import { isAccountSwitcherOpen, isSigninDialogOpen } from '~/composables/dialog'
const accounts = useAccounts()
</script> </script>
<template> <template>
<ModalDrawer <ModalDrawer v-model="isAccountSwitcherOpen">
v-model="isAccountSwitcherOpen" <AccountSwitcher />
>
<div max-w-60rem mxa p4>
<h1 text-2xl>
Switch Account
</h1>
<template v-for="acc of accounts" :key="acc.id">
<AccountInfo
:account="acc.account"
:link="false"
:full-server="true"
py4 border="b base"
@click="loginTo(acc)"
/>
</template>
<div py2 mx--2>
<button btn-text flex="~ gap-1" items-center @click="openSigninDialog">
<div i-ri:user-add-line />
Add another account
</button>
</div>
</div>
</ModalDrawer> </ModalDrawer>
<ModalDialog v-model="isSigninDialogOpen"> <ModalDialog v-model="isSigninDialogOpen">
<AccountSignIn m6 /> <AccountSignIn m6 />

View file

@ -26,6 +26,7 @@ export async function loginTo(user: UserLogin) {
if (currentId.value === accounts.value[existing].account?.id) if (currentId.value === accounts.value[existing].account?.id)
return null return null
currentId.value = user.account?.id currentId.value = user.account?.id
await reloadPage()
return true return true
} }
@ -38,5 +39,25 @@ export async function loginTo(user: UserLogin) {
accounts.value.push(user) accounts.value.push(user)
currentId.value = me.id currentId.value = me.id
await reloadPage()
return true return true
} }
export async function signout() {
// TODO: confirm
if (!currentUser.value)
return
const index = accounts.value.findIndex(u => u.account?.id === currentUser.value?.account?.id)
if (index === -1)
return
accounts.value.splice(index, 1)
currentId.value = accounts.value[0]?.account?.id
await reloadPage()
}
export async function reloadPage(path = '/') {
await nextTick()
location.pathname = path
}

View file

@ -9,7 +9,13 @@
</template> </template>
<AccountSignInEntry v-else /> <AccountSignInEntry v-else />
<div flex-auto /> <div flex-auto />
<AccountSwitcher v-if="currentUser" /> <AccountInfo
v-if="currentUser"
p4
:account="currentUser?.account"
:link="false"
@click="openAccountSwitcher"
/>
</slot> </slot>
</div> </div>
</div> </div>

View file

@ -7,9 +7,6 @@ const { query } = useRoute()
onMounted(async () => { onMounted(async () => {
await loginTo(query as any) await loginTo(query as any)
await nextTick()
await nextTick()
location.pathname = '/'
}) })
</script> </script>

View file

@ -3,10 +3,12 @@
--c-primary-active: #3a7b8c; --c-primary-active: #3a7b8c;
--c-border: #88888820; --c-border: #88888820;
--c-bg-base: #fff; --c-bg-base: #fff;
--c-bg-active: #efefef;
--c-text-base: #222; --c-text-base: #222;
} }
.dark { .dark {
--c-bg-base: #111; --c-bg-base: #111;
--c-bg-active: #222;
--c-text-base: #fff; --c-text-base: #fff;
} }

View file

@ -14,6 +14,7 @@ export default defineConfig({
{ {
'border-base': 'border-$c-border', 'border-base': 'border-$c-border',
'bg-base': 'bg-$c-bg-base', 'bg-base': 'bg-$c-bg-base',
'bg-active': 'bg-$c-bg-active',
'text-base': 'text-$c-text-base', 'text-base': 'text-$c-text-base',
'interact-disabled': 'disabled:opacity-50 disabled:pointer-events-none disabled:saturate-0', 'interact-disabled': 'disabled:opacity-50 disabled:pointer-events-none disabled:saturate-0',
'btn-solid': 'px-4 py-2 rounded text-white bg-$c-primary hover:bg-$c-primary-active interact-disabled', 'btn-solid': 'px-4 py-2 rounded text-white bg-$c-primary hover:bg-$c-primary-active interact-disabled',