feat: redirect to login page when logged out and make navbar actions …

…functional

roster/src/components/NavBar.vue

@@ -6,20 +6,51 @@
 			:options="[
 				{
 					label: 'My Account',
+					onClick: () => goTo('/me'),
 				},
 				{
 					label: 'Log Out',
+					onClick: () => logout.submit(),
 				},
 				{
 					label: 'Switch to Desk',
+					onClick: () => goTo('/app'),
 				},
 			]"
 		>
-			<Avatar size="lg" class="cursor-pointer" />
+			<Avatar
+				:label="props.user?.full_name"
+				:image="props.user?.user_image"
+				size="lg"
+				class="cursor-pointer"
+			/>
 		</Dropdown>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { Dropdown, Avatar } from "frappe-ui";
+import { Dropdown, Avatar, createResource } from "frappe-ui";
+import router from "../router";
+
+import User from "../views/Home.vue";
+
+const props = defineProps<{
+	user: User;
+}>();
+
+const goTo = (path: string) => {
+	window.location.href = path;
+};
+
+// RESOURCES
+
+const logout = createResource({
+	url: "logout",
+	onSuccess() {
+		goTo("/login");
+	},
+	onError(error: { messages: string[] }) {
+		raiseToast("error", error.messages[0]);
+	},
+});
 </script>

roster/src/views/Home.vue

@@ -1,13 +1,31 @@
 <template>
-	<div class="bg-gray-50 min-h-screen">
-		<NavBar />
+	<div v-if="user.data" class="bg-gray-50 min-h-screen">
+		<NavBar :user="user.data" />
 		<MonthView />
 		<Toasts />
 	</div>
 </template>
 
 <script setup lang="ts">
-import { Toasts } from "frappe-ui";
+import { Toasts, createResource } from "frappe-ui";
+import router from "../router";
+
 import NavBar from "../components/NavBar.vue";
 import MonthView from "./MonthView.vue";
+
+export type User = {
+	[K in "name" | "first_name" | "full_name" | "user_image"]: string;
+} & {
+	roles: string[];
+};
+
+// RESOURCES
+
+const user = createResource({
+	url: "hrms.api.get_current_user_info",
+	auto: true,
+	onError() {
+		window.location.href = "/login?redirect-to=%2Froster";
+	},
+});
 </script>