feat(auth): add global axios interceptor for handling authentication errors and redirecting to the auth page; introduce new identities page for managing user identities

meshchatx/src/frontend/js/WebSocketConnection.js

@@ -19,7 +19,7 @@ class WebSocketConnection {
         try {
             const response = await window.axios.get("/api/v1/app/info");
             this.isDemoMode = response.data.app_info?.is_demo === true;
-        } catch (e) {
+        } catch {
             // If we can't check, assume not demo mode and try to connect
         }
 

meshchatx/src/frontend/main.js

@@ -31,6 +31,20 @@ const vuetify = createVuetify();
 // provide axios globally
 window.axios = axios;
 
+// setup global axios interceptor for auth errors
+axios.interceptors.response.use(
+    (response) => response,
+    (error) => {
+        if (error.response?.status === 401 || error.response?.status === 403) {
+            // only redirect if we're not already on the auth page
+            if (router.currentRoute.value.name !== "auth") {
+                router.push("/auth");
+            }
+        }
+        return Promise.reject(error);
+    }
+);
+
 const router = createRouter({
     history: createWebHashHistory(),
     routes: [
@@ -152,6 +166,11 @@ const router = createRouter({
             path: "/settings",
             component: defineAsyncComponent(() => import("./components/settings/SettingsPage.vue")),
         },
+        {
+            name: "identities",
+            path: "/identities",
+            component: defineAsyncComponent(() => import("./components/settings/IdentitiesPage.vue")),
+        },
         {
             name: "blocked",
             path: "/blocked",