Skip to content

Commit 1d2bab2

Browse files
ngyngcphungyngcphu
authored
Merge pull request #67 from LabSyncro/feat/auth-with-hmi
Feat/auth with hmi
2 parents 587869c + 7db120d commit 1d2bab2

13 files changed

Lines changed: 589 additions & 353 deletions

File tree

‎.DS_Store‎

-8 KB
Binary file not shown.

‎.gitignore‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,7 @@ build/
66
.cache/
77
.env
88
zapatos/
9-
.DS_Store
9+
.DS_Store
10+
.cursor
11+
docs
12+
tasks

‎components/app/NavBar.vue‎

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,39 @@
11
<script setup lang="ts">
2-
const { hasPermission, hasRole } = usePermission();
2+
const { hasPermission } = usePermission();
33
</script>
44

55
<template>
66
<nav
7-
class="bg-tertiary-darker flex justify-center md:justify-start md:pl-28 text-white items-stretch text-normal md:text-lg">
8-
<NuxtLink class="flex items-center cursor-pointer h-16 px-2 sm:px-5 hover:bg-primary-darker" href="/devices"> Thiết
9-
bị </NuxtLink>
10-
<NuxtLink v-if="hasPermission('/admin/labs:own')" class="flex items-center cursor-pointer h-16 px-2 sm:px-5 hover:bg-primary-darker" href="/admin/labs">
7+
class="bg-tertiary-darker flex justify-center md:justify-start md:pl-28 text-white items-stretch text-normal md:text-lg"
8+
>
9+
<NuxtLink
10+
class="flex items-center cursor-pointer h-16 px-2 sm:px-5 hover:bg-primary-darker"
11+
href="/devices"
12+
>
13+
Thiết bị
14+
</NuxtLink>
15+
<NuxtLink
16+
v-if="hasPermission('/admin/labs:own')"
17+
class="flex items-center cursor-pointer h-16 px-2 sm:px-5 hover:bg-primary-darker"
18+
href="/admin/labs"
19+
>
1120
Phòng thí nghiệm
1221
</NuxtLink>
13-
<NuxtLink v-if="hasPermission('/borrow-return:edit')" class="flex items-center cursor-pointer h-16 px-2 sm:px-5 hover:bg-primary-darker" href="/borrow-return">
22+
<NuxtLink
23+
v-if="hasPermission('/borrow-return:edit')"
24+
class="flex items-center cursor-pointer h-16 px-2 sm:px-5 hover:bg-primary-darker"
25+
href="/borrow-return"
26+
>
1427
Mượn / Trả thiết bị
1528
</NuxtLink>
16-
<UserQrButton v-if="hasRole(['student', 'teacher'])" />
17-
<button class="cursor-pointer h-16 px-2.5 sm:px-5 hover:bg-primary-darker"> Bài viết </button>
18-
<button class="cursor-pointer h-16 px-2.5 sm:px-5 hover:bg-primary-darker"> Quy định </button>
19-
<button class="cursor-pointer h-16 px-2.5 sm:px-5 hover:bg-primary-darker"> Liên hệ </button>
29+
<button class="cursor-pointer h-16 px-2.5 sm:px-5 hover:bg-primary-darker">
30+
Bài viết
31+
</button>
32+
<button class="cursor-pointer h-16 px-2.5 sm:px-5 hover:bg-primary-darker">
33+
Quy định
34+
</button>
35+
<button class="cursor-pointer h-16 px-2.5 sm:px-5 hover:bg-primary-darker">
36+
Liên hệ
37+
</button>
2038
</nav>
2139
</template>

‎components/app/UserAvatar.vue‎

Lines changed: 36 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,27 @@
11
<script setup lang="ts">
2-
import { ChevronDown } from 'lucide-vue-next';
3-
4-
const { data, signOut } = useAuth();;
5-
const { hasPermission } = usePermission();
2+
import { ChevronDown } from "lucide-vue-next";
63
4+
const { data, signOut } = useAuth();
5+
const { hasPermission, hasRole } = usePermission();
76
</script>
87

98
<template>
109
<div class="relative">
1110
<DropdownMenu>
1211
<DropdownMenuTrigger>
1312
<div class="flex items-center cursor-pointer">
14-
<div class="h-9 w-9 rounded-full border-slate-dark border-[2px] bg-primary-lighter relative">
13+
<div
14+
class="h-9 w-9 rounded-full border-slate-dark border-[2px] bg-primary-lighter relative"
15+
>
1516
<img
16-
class="h-[100%] aspect-auto inline-block rounded-full" :src="data?.user?.image || ''"
17-
alt="User's avatar">
17+
class="h-[100%] aspect-auto inline-block rounded-full"
18+
:src="data?.user?.image || ''"
19+
alt="User's avatar"
20+
/>
1821
<div
19-
class="w-3 h-3 absolute bg-safe-darker rounded-full z-50 border-white border-[2px] top-6 right-[-2px]"
20-
aria-hidden />
22+
class="w-3 h-3 absolute bg-safe-darker rounded-full z-50 border-white border-[2px] top-6 right-[-2px]"
23+
aria-hidden
24+
/>
2125
</div>
2226
<ChevronDown class="h-4 w-4 ml-2 text-gray-500" :stroke-width="3" />
2327
</div>
@@ -26,21 +30,40 @@ class="w-3 h-3 absolute bg-safe-darker rounded-full z-50 border-white border-[2p
2630
<DropdownMenuContent class="w-56">
2731
<div class="flex items-center p-2 border-b">
2832
<div class="h-8 w-8 rounded-full bg-gray-200 mr-2">
29-
<img :src="data?.user?.image || ''" class="h-full w-full rounded-full" alt="User's avatar">
33+
<img
34+
:src="data?.user?.image || ''"
35+
class="h-full w-full rounded-full"
36+
alt="User's avatar"
37+
/>
3038
</div>
3139
<div class="flex flex-col">
3240
<span class="text-md font-medium">{{ data?.user?.name }}</span>
33-
<span class="text-normal text-gray-500">{{ data?.user?.roles.map(role => role.name).join(', ') }}</span>
41+
<span class="text-normal text-gray-500">{{
42+
data?.user?.roles.map((role) => role.name).join(", ")
43+
}}</span>
3444
</div>
3545
</div>
3646

37-
<NuxtLink v-if="hasPermission('/settings/users:own')" href="/settings/users">
47+
<DropdownMenuItem
48+
v-if="hasRole(['student', 'teacher'])"
49+
class="cursor-pointer"
50+
>
51+
<UserQrButton class="w-full h-auto" />
52+
</DropdownMenuItem>
53+
54+
<NuxtLink
55+
v-if="hasPermission('/settings/users:own')"
56+
href="/settings/users"
57+
>
3858
<DropdownMenuItem class="cursor-pointer">
3959
<span class="text-normal">Cài đặt</span>
4060
</DropdownMenuItem>
4161
</NuxtLink>
4262

43-
<DropdownMenuItem class="text-red-600 cursor-pointer hover:!bg-red-400" @click="signOut({ callbackUrl: '/' })">
63+
<DropdownMenuItem
64+
class="text-red-600 cursor-pointer hover:!bg-red-400"
65+
@click="signOut({ callbackUrl: '/' })"
66+
>
4467
<span class="text-normal">Đăng xuất</span>
4568
</DropdownMenuItem>
4669
</DropdownMenuContent>

‎components/app/UserQrButton.vue‎

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,24 @@
11
<script setup lang="ts">
2-
import { useToast } from 'vue-toastification';
2+
import { useRouter } from "vue-router";
3+
import { useToast } from "vue-toastification";
34
5+
const router = useRouter();
46
const { userId } = usePermission();
5-
const showQrModal = ref(false);
67
7-
function openQrModal() {
8+
function handleClick() {
89
if (!userId.value) {
9-
// User not logged in, handle this case
1010
const toast = useToast();
11-
toast.error('Vui lòng đăng nhập để sử dụng tính năng này');
11+
toast.error("Vui lòng đăng nhập để sử dụng tính năng này");
1212
return;
1313
}
14-
15-
showQrModal.value = true;
14+
15+
router.push("/qr");
1616
}
1717
</script>
1818

1919
<template>
20-
<button @click="openQrModal" class="cursor-pointer h-16 px-2.5 sm:px-5 hover:bg-primary-darker flex items-center">
20+
<button @click="handleClick" class="cursor-pointer h-40 flex items-center text-md">
2121
<Icon aria-hidden name="i-heroicons-qr-code" class="mr-1.5" />
2222
QR của tôi
2323
</button>
24-
25-
<OneTimeQrModal
26-
:is-open="showQrModal"
27-
:user-id="userId || ''"
28-
@close="showQrModal = false"
29-
/>
3024
</template>

0 commit comments

Comments
 (0)