Force line endings and whitespace, and revamp logout via introduction of a new profile component.

.vscode/settings.json

@@ -13,5 +13,8 @@
   "[vue]": {
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"
   },
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
+  "files.eol": "\n",
+  "files.trimTrailingWhitespace": true,
+  "editor.trimAutoWhitespace": true
 }

eslint.config.js

@@ -75,6 +75,12 @@ export default
         //Enforce semicolon
         '@stylistic/semi': ['warn', 'always'],
         '@stylistic/space-before-function-paren': ['warn', 'never'],
+
+        //Force LF and not CRLF
+        '@stylistic/linebreak-style': ['warn', 'unix'],
+
+        //Force no trailing spaces
+        '@stylistic/no-trailing-spaces': ['warn', { skipBlankLines: false, ignoreComments: false }]
       }
   },
 

quasar.config.js

@@ -23,7 +23,7 @@ export default defineConfig((/* ctx */) =>
     // https://github.com/quasarframework/quasar/tree/dev/extras
     extras: [
       // 'ionicons-v4',
-      // 'mdi-v7',
+      'mdi-v7',
       // 'fontawesome-v6',
       // 'eva-icons',
       // 'themify',

src/layouts/MainLayout.vue

@@ -6,7 +6,6 @@
       persistent
       :model-value="true"
     >
-      <q-list>
       <q-item
         clickable
         v-ripple
@@ -21,7 +20,69 @@
           </q-item-label>
         </q-item-section>
       </q-item>
-
+      <template v-if="authStore.isAuthenticated">
+        <q-card
+          v-if="leftDrawerOpen"
+          bordered
+          flat
+          class="q-ma-sm text-center"
+        >
+          <q-card-section>
+            <q-avatar
+              class="bg-primary cursor-pointer text-white"
+            >
+              <q-icon name="mdi-account" />
+              <q-tooltip>
+                {{ authStore.user.username }}
+              </q-tooltip>
+            </q-avatar>
+            <div class="text-h6">
+              {{ authStore.user.username }}
+            </div>
+            <q-btn
+              class="full-width q-mt-sm"
+              dense
+              outline
+              @click="logout"
+            >
+              Logout
+            </q-btn>
+          </q-card-section>
+        </q-card>
+        <q-list
+          padding
+          class="menu-list"
+          v-else
+        >
+          <q-item
+            clickable
+            v-ripple
+            dense
+            @click="logout"
+            class="q-mb-sm"
+          >
+            <q-tooltip
+              anchor="center right"
+              self="center left"
+            >
+              <span>Logout</span>
+            </q-tooltip>
+            <q-item-section avatar>
+              <q-icon name="logout" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label class="text-h6">
+                Logout
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </template>
+      <q-separator />
+      <q-list
+        padding
+        class="menu-list"
+      >
         <!-- Dynamic Navigation Items -->
         <q-item
           v-for="item in navItems"
@@ -30,6 +91,7 @@
           v-ripple
           :to="{ name: item.name }"
           exact
+          dense
         >
           <q-tooltip
             anchor="center right"
@@ -47,27 +109,6 @@
             </q-item-label>
           </q-item-section>
         </q-item>
-
-        <!-- Logout Button (Conditional) -->
-        <q-item
-          v-if="authStore.isAuthenticated"
-          clickable
-          v-ripple
-          @click="logout"
-        >
-          <q-tooltip
-            anchor="center right"
-            self="center left"
-          >
-            <span>Logout</span>
-          </q-tooltip>
-          <q-item-section avatar>
-            <q-icon name="logout" />
-          </q-item-section>
-          <q-item-section>
-            <q-item-label>Logout</q-item-label>
-          </q-item-section>
-        </q-item>
       </q-list>
     </q-drawer>
 
@@ -86,7 +127,6 @@
         icon="chat"
         color="accent"
         direction="up"
-        padding="sm"
         @click="toggleChat"
       />
     </q-page-sticky>
@@ -95,8 +135,6 @@
     <q-dialog
       v-model="isChatVisible"
       :maximized="$q.screen.lt.sm"
-      fixed
-      persistent
       style="width: max(400px, 25%);"
     >
       <q-card style="width: max(400px, 25%); height: 600px; max-height: 80vh;">
@@ -216,15 +254,27 @@ function toggleLeftDrawer()
 {
   leftDrawerOpen.value = !leftDrawerOpen.value;
 }
-
 async function logout()
 {
+  $q.dialog({
+    title: 'Confirm Logout',
+    message: 'Are you sure you want to logout?',
+    cancel: true,
+    persistent: true
+  }).onOk(async() =>
+  {
     try
     {
       await axios.post('/api/auth/logout');
-    authStore.logout(); // Use the store action to update state
+      authStore.logout();
-    // No need to manually push, router guard should redirect
+
-    // router.push({ name: 'login' });
+      $q.notify({
+        color: 'positive',
+        message: 'Logout successful.',
+        icon: 'check_circle'
+      });
+
+      router.push({ name: 'login' });
     }
     catch (error)
     {
@@ -236,12 +286,26 @@ async function logout()
         icon: 'report_problem'
       });
     }
+  });
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
-/* Add any specific styles for the layout or chat window here */
 .q-dialog .q-card {
-    overflow: hidden; /* Prevent scrollbars on the card itself */
+    overflow: hidden;
+}
+
+.menu-list .q-item {
+  border-radius: 32px;
+  margin: 5px 5px;
+}
+
+.menu-list .q-item:first-child {
+  margin-top: 0px;
+}
+
+.menu-list .q-router-link--active {
+  background-color: var(--q-primary);
+  color: #fff;
 }
 </style>