refactor frontend

Signed-off-by: Omar Sánchez Pizarro <omar.sanchez@pistacero.net>

web/frontend/src/presentation/composables/useAuth.js

@@ -0,0 +1,28 @@
+import { ref, computed } from 'vue';
+import authService from '../../application/services/AuthService.js';
+
+export function useAuth() {
+  const currentUser = ref(authService.getCurrentUser());
+
+  const isAuthenticated = computed(() => authService.hasCredentials());
+  const isAdmin = computed(() => authService.isAdmin());
+  const username = computed(() => authService.getUsername());
+
+  function updateUser() {
+    currentUser.value = authService.getCurrentUser();
+  }
+
+  // Listen to auth events
+  if (typeof window !== 'undefined') {
+    window.addEventListener('auth-login', updateUser);
+    window.addEventListener('auth-logout', updateUser);
+  }
+
+  return {
+    currentUser,
+    isAuthenticated,
+    isAdmin,
+    username,
+    updateUser,
+  };
+}

web/frontend/src/presentation/composables/useDarkMode.js

@@ -0,0 +1,37 @@
+import { ref, onMounted } from 'vue';
+
+export function useDarkMode() {
+  const isDark = ref(false);
+
+  function toggle() {
+    isDark.value = !isDark.value;
+    if (isDark.value) {
+      document.documentElement.classList.add('dark');
+      localStorage.setItem('darkMode', 'true');
+    } else {
+      document.documentElement.classList.remove('dark');
+      localStorage.setItem('darkMode', 'false');
+    }
+  }
+
+  function init() {
+    const saved = localStorage.getItem('darkMode');
+    if (saved === 'true' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+      isDark.value = true;
+      document.documentElement.classList.add('dark');
+    } else {
+      isDark.value = false;
+      document.documentElement.classList.remove('dark');
+    }
+  }
+
+  onMounted(() => {
+    init();
+  });
+
+  return {
+    isDark,
+    toggle,
+    init,
+  };
+}

web/frontend/src/presentation/composables/useWebSocket.js

@@ -0,0 +1,43 @@
+import { ref, onMounted, onUnmounted } from 'vue';
+
+export function useWebSocket() {
+  const isConnected = ref(false);
+
+  function handleConnected() {
+    isConnected.value = true;
+  }
+
+  function handleDisconnected() {
+    isConnected.value = false;
+  }
+
+  function handleMessage(callback) {
+    const handler = (event) => {
+      callback(event.detail);
+    };
+    
+    window.addEventListener('ws-message', handler);
+    
+    return () => {
+      window.removeEventListener('ws-message', handler);
+    };
+  }
+
+  onMounted(() => {
+    window.addEventListener('ws-connected', handleConnected);
+    window.addEventListener('ws-disconnected', handleDisconnected);
+    
+    // Check initial state
+    isConnected.value = false; // Will be updated by events
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('ws-connected', handleConnected);
+    window.removeEventListener('ws-disconnected', handleDisconnected);
+  });
+
+  return {
+    isConnected,
+    handleMessage,
+  };
+}