ui/src/components/Navigation/Navbar.vue

@@ -46,7 +46,8 @@ function blurAfter() {
                 <RouterLink to="/">
                     <img src="/17RBN_Logo.png" class="w-10 h-10 object-contain"></img>
                 </RouterLink>
-                <div class="h-15 flex items-center justify-center">
+                <!-- Member navigation -->
+                <div v-if="auth.accountStatus == 'member'" class="h-15 flex items-center justify-center">
                     <NavigationMenu>
                         <NavigationMenuList class="gap-3">
 
@@ -91,7 +92,8 @@ function blurAfter() {
                             </NavigationMenuItem>
 
                             <!-- Administration (Dropdown) -->
-                            <NavigationMenuItem v-if="auth.hasAnyRole(['17th Administrator', '17th HQ', '17th Command', 'Recruiter'])">
+                            <NavigationMenuItem
+                                v-if="auth.hasAnyRole(['17th Administrator', '17th HQ', '17th Command', 'Recruiter'])">
                                 <NavigationMenuTrigger>Administration</NavigationMenuTrigger>
                                 <NavigationMenuContent
                                     class="grid gap-1 p-2 text-left [&_a]:w-full [&_a]:block [&_a]:whitespace-nowrap *:bg-transparent">
@@ -145,6 +147,18 @@ function blurAfter() {
                         </NavigationMenuList>
                     </NavigationMenu>
                 </div>
+                <!-- Guest navigation -->
+                <div v-else class="h-15 flex items-center justify-center">
+                    <NavigationMenu>
+                        <NavigationMenuList>
+                            <NavigationMenuItem>
+                                <NavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
+                                    <RouterLink to="/join" @click="blurAfter">Join</RouterLink>
+                                </NavigationMenuLink>
+                            </NavigationMenuItem>
+                        </NavigationMenuList>
+                    </NavigationMenu>
+                </div>
             </div>
             <!-- right side -->
             <div>

ui/src/composables/useAuth.ts

@@ -5,6 +5,10 @@ import { Role } from "@shared/types/roles"
 export function useAuth() {
     const userStore = useUserStore();
 
+    // Account status control
+    const accountStatus = userStore.state;
+
+    // RBAC
     const roles = computed<string[]>(() => {
         return userStore.user?.roleData?.map((r: Role) => r.name) ?? [];
     });
@@ -28,5 +32,5 @@ export function useAuth() {
         return roles.value.every(name => roleNames.includes(name))
     }
 
-    return { hasRole, hasAnyRole, hasAllRoles }
+    return { hasRole, hasAnyRole, hasAllRoles, accountStatus }
 }

ui/src/stores/user.ts

@@ -5,7 +5,7 @@ export const useUserStore = defineStore('user', () => {
     const user = ref(null)
     const roles = computed(() => new Set(user.value?.roleData?.map(r => r.name) ?? []));
     const loaded = ref(false);
-    const state = computed(() => user.value.state);
+    const state = computed<string | undefined>(() => user.value?.state || undefined);
     const isLoggedIn = computed(() => user.value !== null)
 
     async function loadUser() {