mirror of
https://github.com/SecurityBrewery/catalyst.git
synced 2025-12-06 07:12:46 +01:00
fix: redirect to login (#1082)
This commit is contained in:
@@ -1,5 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
import TanView from '@/components/TanView.vue'
|
||||
import { Button, buttonVariants } from '@/components/ui/button'
|
||||
import {
|
||||
DropdownMenu,
|
||||
@@ -13,7 +12,8 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip
|
||||
|
||||
import { CircleUser } from 'lucide-vue-next'
|
||||
|
||||
import { useQuery } from '@tanstack/vue-query'
|
||||
import type { AuthModel } from 'pocketbase'
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
import { pb } from '@/lib/pocketbase'
|
||||
import { cn } from '@/lib/utils'
|
||||
@@ -24,69 +24,71 @@ defineProps<{
|
||||
|
||||
const variant = 'secondary'
|
||||
|
||||
const {
|
||||
isPending,
|
||||
isError,
|
||||
data: user,
|
||||
error
|
||||
} = useQuery({
|
||||
queryKey: ['user'],
|
||||
queryFn: () => pb.authStore.model
|
||||
})
|
||||
interface User {
|
||||
name: string
|
||||
}
|
||||
|
||||
const user = ref<AuthModel | User>(pb.authStore.model)
|
||||
|
||||
const logout = () => {
|
||||
pb.authStore.clear()
|
||||
window.location.href = '/ui/login'
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
pb.collection('users')
|
||||
.authRefresh()
|
||||
.catch(() => {
|
||||
pb.authStore.clear()
|
||||
window.location.href = '/ui/login'
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TanView :is-error="isError" :is-pending="isPending" :error="error" :value="user">
|
||||
<div class="group flex flex-col gap-4 py-2 data-[collapsed=true]:py-2">
|
||||
<nav
|
||||
class="grid gap-1 px-2 group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2"
|
||||
>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<div>
|
||||
<Tooltip v-if="isCollapsed" :delay-duration="0">
|
||||
<TooltipTrigger as-child>
|
||||
<Button
|
||||
:class="
|
||||
cn(buttonVariants({ variant: variant, size: 'icon' }), 'mx-1 h-9 w-9 px-0')
|
||||
"
|
||||
>
|
||||
<CircleUser class="size-4" />
|
||||
<span class="sr-only">{{ user.name }}</span>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right" class="flex items-center gap-4">
|
||||
{{ user.name }}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Button
|
||||
v-else
|
||||
:class="
|
||||
cn(buttonVariants({ variant: variant, size: 'sm' }), 'w-full justify-start')
|
||||
"
|
||||
>
|
||||
<CircleUser class="mr-2 size-4" />
|
||||
<div class="group flex flex-col gap-4 py-2 data-[collapsed=true]:py-2">
|
||||
<nav
|
||||
v-if="user"
|
||||
class="grid gap-1 px-2 group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2"
|
||||
>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<div>
|
||||
<Tooltip v-if="isCollapsed" :delay-duration="0">
|
||||
<TooltipTrigger as-child>
|
||||
<Button
|
||||
:class="
|
||||
cn(buttonVariants({ variant: variant, size: 'icon' }), 'mx-1 h-9 w-9 px-0')
|
||||
"
|
||||
>
|
||||
<CircleUser class="size-4" />
|
||||
<span class="sr-only">{{ user.name }}</span>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right" class="flex items-center gap-4">
|
||||
{{ user.name }}
|
||||
</Button>
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuLabel>Account</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
@click="logout"
|
||||
class="cursor-pointer text-muted-foreground transition-colors hover:text-foreground"
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Button
|
||||
v-else
|
||||
:class="cn(buttonVariants({ variant: variant, size: 'sm' }), 'w-full justify-start')"
|
||||
>
|
||||
Logout
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</nav>
|
||||
</div>
|
||||
</TanView>
|
||||
<CircleUser class="mr-2 size-4" />
|
||||
{{ user.name }}
|
||||
</Button>
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuLabel>Account</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
@click="logout"
|
||||
class="cursor-pointer text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
Logout
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</nav>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user