Implemented actual authentication guards, began implementing main login user flows

ui/src/pages/Unauthorized.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="min-h-screen flex flex-col items-center justify-center text-center px-6">
+        <h1 class="text-5xl font-bold mb-4">Unauthorized</h1>
+        <p class="text-lg text-muted-foreground max-w-md mb-6">
+            You don't have permission to access this page.
+            If you think this is a mistake, please contact an administrator.
+        </p>
+
+        <div class="flex flex-col gap-3 sm:flex-row">
+            <Button variant="default" @click="goHome">
+                Go to Home
+            </Button>
+
+            <Button variant="outline" @click="loginIfNeeded">
+                Log In
+            </Button>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import Button from '@/components/ui/button/Button.vue'
+import { useRouter } from 'vue-router'
+import { useUserStore } from '@/stores/user' // adjust path to your store
+
+const router = useRouter()
+const user = useUserStore()
+
+function goHome() {
+    router.push('/')
+}
+
+function loginIfNeeded() {
+    if (!user.isLoggedIn) {
+        window.location.href = 'https://your-auth-service/login'
+    } else {
+        router.push('/')
+    }
+}
+</script>