Implemented actual authentication guards, began implementing main login user flows

ui/src/App.vue

@@ -16,13 +16,14 @@ import AlertDescription from './components/ui/alert/AlertDescription.vue';
 
 const userStore = useUserStore();
 
-onMounted(async () => {
-  const res = await fetch(`${import.meta.env.VITE_APIHOST}/members/me`, {
-    credentials: 'include',
-  });
-  const data = await res.json();
-  userStore.user = data;
-});
+// onMounted(async () => {
+//   const res = await fetch(`${import.meta.env.VITE_APIHOST}/members/me`, {
+//     credentials: 'include',
+//   });
+//   const data = await res.json();
+//   console.log(data);
+//   userStore.user = data;
+// });
 
 async function logout() {
   await fetch(`${import.meta.env.VITE_APIHOST}/logout`, {

ui/src/api/member.ts

@@ -12,7 +12,9 @@ export type Member = {
 const addr = import.meta.env.VITE_APIHOST;
 
 export async function getMembers(): Promise<Member[]> {
-    const response = await fetch(`${addr}/members`);
+    const response = await fetch(`${addr}/members`, {
+        credentials: 'include'
+    });
     if (!response.ok) {
         throw new Error("Failed to fetch members");
     }

ui/src/pages/Application.vue

@@ -23,6 +23,7 @@ onMounted(async () => {
         const router = useRoute();
         const appIDRaw = router.params.id.toString();
         const raw = await loadApplication(appIDRaw);
+        console.log(raw);
         if (raw === null) {
             //new app
             appData.value = null
@@ -43,7 +44,7 @@ onMounted(async () => {
             readOnly.value = true;
         }
     } catch (e) {
-        console.error(e)
+        console.error(e);
     }
     loading.value = false;
 })

ui/src/pages/Join.vue

@@ -0,0 +1,24 @@
+<template>
+    <div class="min-h-screen flex items-center justify-center ">
+        <div class="w-full max-w-2xl mx-auto p-8 text-center">
+            <h1 class="text-4xl sm:text-5xl font-extrabold  mb-4">
+                welcome to the 17th
+            </h1>
+            <p class=" mb-8">
+                Welcome — click below to get started.
+            </p>
+
+            <Button class="w-44" @click="goToLogin">Get started</Button>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import Button from '@/components/ui/button/Button.vue';
+
+
+function goToLogin() {
+    window.location.href = 'https://aj17thdevapi.nexuszone.net/login';
+}
+
+</script>

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>

ui/src/router/index.js

@@ -1,45 +1,67 @@
+import { useUserStore } from '@/stores/user'
 import { createRouter, createWebHistory } from 'vue-router'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
-    { path: '/applications', component: () => import('@/pages/ManageApplications.vue') },
-    { path: '/applications/:id', component: () => import('@/pages/Application.vue') },
-    { path: '/rankChange', component: () => import('@/pages/RankChange.vue') },
-    { path: '/members', component: () => import('@/pages/memberList.vue') },
-    { path: '/loa', component: () => import('@/pages/SubmitLOA.vue') },
-    { path: '/transfer', component: () => import('@/pages/Transfer.vue') },
-    { path: '/calendar', component: () => import('@/pages/Calendar.vue') },
+    // PUBLIC
+    { path: '/join', component: () => import('@/pages/Join.vue') },
+
+    // AUTH REQUIRED
+    { path: '/apply', component: () => import('@/pages/Application.vue'), meta: { requiresAuth: true } },
+
+    // MEMBER ROUTES
+    { path: '/members', component: () => import('@/pages/memberList.vue'), meta: { requiresAuth: true, memberOnly: true } },
+    { path: '/loa', component: () => import('@/pages/SubmitLOA.vue'), meta: { requiresAuth: true, memberOnly: true } },
+    { path: '/transfer', component: () => import('@/pages/Transfer.vue'), meta: { requiresAuth: true, memberOnly: true } },
+    { path: '/calendar', component: () => import('@/pages/Calendar.vue'), meta: { requiresAuth: true, memberOnly: true } },
+
+    // ADMIN / STAFF ROUTES
     {
       path: '/administration',
+      meta: { requiresAuth: true, memberOnly: true, roles: ['staff', 'admin'] },
       children: [
-        {
-          path: 'applications',
-          component: () => import('@/pages/ManageApplications.vue')
-        },
-        {
-          path: 'rankChange',
-          component: () => import('@/pages/RankChange.vue')
-        },
-        {
-          path: 'applications/:id',
-          component: () => import('@/pages/Application.vue')
-        },
-        {
-          path: 'transfer',
-          component: () => import('@/pages/ManageTransfers.vue')
-        },
-        {
-          path: 'loa',
-          component: () => import('@/pages/ManageLOA.vue')
-        },
-        {
-          path: 'roles',
-          component: () => import('@/pages/ManageRoles.vue')
-        }
+        { path: 'applications', component: () => import('@/pages/ManageApplications.vue') },
+        { path: 'rankChange', component: () => import('@/pages/RankChange.vue') },
+        { path: 'applications/:id', component: () => import('@/pages/Application.vue') },
+        { path: 'transfer', component: () => import('@/pages/ManageTransfers.vue') },
+        { path: 'loa', component: () => import('@/pages/ManageLOA.vue') },
+        { path: 'roles', component: () => import('@/pages/ManageRoles.vue') }
       ]
-    }
+    },
+
+    // UNAUTHORIZED PAGE
+    { path: '/unauthorized', component: () => import('@/pages/Unauthorized.vue') }
   ]
 })
 
-export default router
+router.beforeEach(async (to) => {
+  const userStore = useUserStore()
+
+  // Make sure user state is loaded before checking
+  if (!userStore.loaded) {
+    console.log('loaduser')
+    await userStore.loadUser();
+  }
+
+  // Not logged in
+  if (to.meta.requiresAuth && !userStore.isLoggedIn) {
+    // Redirect back to original page after login
+    const redirectUrl = encodeURIComponent(window.location.origin + to.fullPath)
+    window.location.href = `https://aj17thdevapi.nexuszone.net/login?redirect=${redirectUrl}`
+    return false // Prevent Vue Router from continuing
+  }
+
+
+  // // Must be a member
+  // if (to.meta.memberOnly && userStore.status !== 'member') {
+  //   return '/unauthorized'
+  // }
+
+  // // Must have specific role
+  // if (to.meta.roles && !to.meta.roles.includes(userStore.role)) {
+  //   return '/unauthorized'
+  // }
+})
+
+export default router;

ui/src/stores/user.ts

@@ -3,8 +3,25 @@ import { defineStore } from 'pinia'
 
 export const useUserStore = defineStore('user', () => {
     const user = ref(null)
-    const roles = ref<string[]>([])
+    const roles = computed(() => { user.value.roles })
+    const loaded = ref(false);
 
     const isLoggedIn = computed(() => user.value !== null)
-    return { user, isLoggedIn, roles }
+
+    async function loadUser() {
+        //@ts-ignore
+        const res = await fetch(`${import.meta.env.VITE_APIHOST}/members/me`, {
+            credentials: 'include',
+        });
+
+        if (res.ok) {
+            const data = await res.json();
+            console.log(data);
+            user.value = data;
+        }
+
+        loaded.value = true;
+    }
+
+    return { user, isLoggedIn, roles, loadUser, loaded }
 })