feat: Create authorization

src/components/MainMenuBoxes.vue

@@ -1,40 +1,68 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router';
+import { useUserInfo } from '@/composables/useUserInfo';
+import { useQuasar } from 'quasar';
 
 const router = useRouter();
+const userInfo = useUserInfo();
+const $q = useQuasar();
+
 const menuItems = [
   {
     title: 'Create game',
     description: 'Create a new game and invite your friends to play with you.',
     icon: 'add_circle_outline',
     routeName: 'create-Game',
-    color: 'green-9'
+    color: 'green-9',
+    requiresAuth: true
   },
   {
     title: 'Spiel beitreten',
     description: 'Join a game by typing in the game identifier.',
     icon: 'login',
     routeName: 'join-Game',
-    color: 'blue-9'
+    color: 'blue-9',
+    requiresAuth: true
   },
   {
     title: 'Settings',
     description: 'This area is currently under construction.',
     icon: 'settings',
     routeName: 'settings',
-    color: 'grey-8'
+    color: 'grey-8',
+    requiresAuth: false
   },
   {
     title: 'Rules',
     description: 'Look at the rules to have a clear understanding for playing the game.',
     icon: 'settings',
-    routeName: 'rules-Game',
-    color: 'grey-8'
+    routeName: 'rule-Game',
+    color: 'grey-8',
+    requiresAuth: false
   }
 ];
 
-const navigateTo = (routeName: string) => {
-  router.push({ name: routeName });
+const navigateTo = (item: any) => {
+  if (item.requiresAuth && !userInfo.username) {
+    $q.dialog({
+      title: 'Authentication Required',
+      message: 'You need to be logged in to create or join a game. Would you like to log in or sign up?',
+      ok: {
+        label: 'Login',
+        color: 'primary'
+      },
+      cancel: {
+        label: 'Sign Up',
+        color: 'secondary'
+      }
+    }).onOk(() => {
+      router.push({ name: 'login' });
+    }).onCancel(() => {
+      router.push({ name: 'register' });
+    });
+  } else {
+    router.push({ name: item.routeName });
+  }
 };
 </script>
 
@@ -57,7 +85,7 @@ const navigateTo = (routeName: string) => {
       <q-card
         class="menu-card bg-dark text-white q-pa-sm cursor-pointer"
         v-ripple
-        @click="navigateTo(item.routeName)"
+        @click="navigateTo(item)"
       >
         <q-card-section class="row items-center no-wrap">
           <q-avatar

src/components/User.vue

@@ -68,8 +68,21 @@ const handleLogoff = () => {
       </q-menu>
     </div>
 
-    <div v-else class="text-caption text-grey-4">
-      Not Logged In
+    <div v-else class="row items-center q-gutter-x-sm">
+      <q-btn
+        flat
+        color="white"
+        label="Login"
+        @click="router.push({ name: 'login' })"
+        size="sm"
+      />
+      <q-btn
+        outline
+        color="white"
+        label="Sign Up"
+        @click="router.push({ name: 'register' })"
+        size="sm"
+      />
     </div>
 
   </div>