apps/dashboard: fix user icon display

Author: aitjcize

apps/dashboard/src/components/NavBar.vue

@@ -39,7 +39,11 @@
             <span
               class="text-white text-lg font-bold flex items-center justify-center h-full w-full"
             >
-              {{ authStore.user?.username?.charAt(0).toUpperCase() || "U" }}
+              {{
+                authStore.user && authStore.user.username
+                  ? authStore.user.username.charAt(0).toUpperCase()
+                  : "U"
+              }}
             </span>
           </div>
         </label>

apps/dashboard/src/stores/authStore.js

@@ -86,10 +86,23 @@ export const useAuthStore = defineStore("auth", {
       if (token) {
         this.token = token;
 
-        // You could also verify the token with the server here
-        // or decode the JWT to get user info
+        try {
+          // Extract user info from JWT token
+          // JWT tokens are in the format: header.payload.signature
+          const payload = token.split(".")[1];
+          if (payload) {
+            // Decode the base64 payload
+            const decodedPayload = JSON.parse(atob(payload));
+            if (decodedPayload.username) {
+              this.user = { username: decodedPayload.username };
+              return;
+            }
+          }
+        } catch (error) {
+          console.error("Error decoding JWT token:", error);
+        }
 
-        // For simplicity, we'll just set a basic user object
+        // Fallback to default user if token parsing fails
         this.user = { username: "User" };
       }
     },

apps/dashboard/vite.config.js

@@ -3,9 +3,7 @@ import vue from "@vitejs/plugin-vue";
 import { fileURLToPath, URL } from "node:url";
 
 // Get API server configuration from environment variables or use defaults
-const API_HOST = process.env.VITE_API_HOST || "localhost";
-const API_PORT = process.env.VITE_API_PORT || "9000";
-const API_SERVER = `http://${API_HOST}:${API_PORT}`;
+const API_URL = process.env.VITE_API_URL || "http://localhost:9000";
 
 export default defineConfig({
   plugins: [vue()],
@@ -18,7 +16,7 @@ export default defineConfig({
   server: {
     proxy: {
       "/api": {
-        target: API_SERVER,
+        target: API_URL,
         changeOrigin: true,
         ws: true, // Enable WebSocket proxy
       },