qdadm 0.26.3 → 0.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qdadm",
-  "version": "0.26.3",
+  "version": "0.27.0",
   "description": "Vue 3 framework for admin dashboards with PrimeVue",
   "author": "quazardous",
   "license": "MIT",

package/src/components/index.js

@@ -55,3 +55,6 @@ export { default as EmptyState } from './display/EmptyState.vue'
 export { default as IntensityBar } from './display/IntensityBar.vue'
 export { default as BoolCell } from './BoolCell.vue'
 export { default as SeverityTag } from './SeverityTag.vue'
+
+// Pages
+export { default as LoginPage } from './pages/LoginPage.vue'

package/src/components/pages/LoginPage.vue

@@ -0,0 +1,267 @@
+<script setup>
+/**
+ * LoginPage - Generic login page component
+ *
+ * Uses authAdapter from qdadm context for authentication.
+ * Customizable via props and slots for app branding.
+ *
+ * Usage:
+ *   <LoginPage />
+ *   <LoginPage title="My App" icon="pi pi-lock" />
+ *   <LoginPage :logo="LogoComponent" />
+ *
+ * With slot:
+ *   <LoginPage>
+ *     <template #footer>
+ *       <p>Demo accounts: admin, user</p>
+ *     </template>
+ *   </LoginPage>
+ */
+import { ref, inject, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useToast } from 'primevue/usetoast'
+import Card from 'primevue/card'
+import InputText from 'primevue/inputtext'
+import Password from 'primevue/password'
+import Button from 'primevue/button'
+
+const props = defineProps({
+  /**
+   * Override app title (defaults to qdadm app.name config)
+   */
+  title: {
+    type: String,
+    default: null
+  },
+  /**
+   * PrimeIcons icon class (e.g., 'pi pi-lock')
+   */
+  icon: {
+    type: String,
+    default: 'pi pi-shield'
+  },
+  /**
+   * Custom logo component (replaces icon)
+   */
+  logo: {
+    type: Object,
+    default: null
+  },
+  /**
+   * Username field label
+   */
+  usernameLabel: {
+    type: String,
+    default: 'Username'
+  },
+  /**
+   * Password field label
+   */
+  passwordLabel: {
+    type: String,
+    default: 'Password'
+  },
+  /**
+   * Submit button label
+   */
+  submitLabel: {
+    type: String,
+    default: 'Sign In'
+  },
+  /**
+   * Route to redirect after successful login
+   */
+  redirectTo: {
+    type: String,
+    default: '/'
+  },
+  /**
+   * Default username value
+   */
+  defaultUsername: {
+    type: String,
+    default: ''
+  },
+  /**
+   * Default password value
+   */
+  defaultPassword: {
+    type: String,
+    default: ''
+  },
+  /**
+   * Emit business signal on login (requires orchestrator)
+   */
+  emitSignal: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['login', 'error'])
+
+const router = useRouter()
+const toast = useToast()
+const authAdapter = inject('authAdapter', null)
+const orchestrator = inject('qdadmOrchestrator', null)
+const appConfig = inject('qdadmApp', {})
+
+const username = ref(props.defaultUsername)
+const password = ref(props.defaultPassword)
+const loading = ref(false)
+
+const displayTitle = computed(() => props.title || appConfig.name || 'Admin')
+
+async function handleLogin() {
+  if (!authAdapter?.login) {
+    toast.add({
+      severity: 'error',
+      summary: 'Configuration Error',
+      detail: 'No auth adapter configured',
+      life: 5000
+    })
+    return
+  }
+
+  loading.value = true
+  try {
+    const result = await authAdapter.login({
+      username: username.value,
+      password: password.value
+    })
+
+    // Emit business signal if enabled
+    if (props.emitSignal && orchestrator?.signals) {
+      orchestrator.signals.emit('auth:login', { user: result.user })
+    }
+
+    // Emit component event
+    emit('login', result)
+
+    router.push(props.redirectTo)
+  } catch (error) {
+    toast.add({
+      severity: 'error',
+      summary: 'Login Failed',
+      detail: error.message || 'Invalid credentials',
+      life: 3000
+    })
+    emit('error', error)
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="qdadm-login-page">
+    <Card class="qdadm-login-card">
+      <template #title>
+        <div class="qdadm-login-header">
+          <slot name="logo">
+            <component v-if="logo" :is="logo" class="qdadm-login-logo" />
+            <i v-else :class="icon" class="qdadm-login-icon"></i>
+          </slot>
+          <h1>{{ displayTitle }}</h1>
+        </div>
+      </template>
+      <template #content>
+        <form @submit.prevent="handleLogin" class="qdadm-login-form">
+          <div class="qdadm-login-field">
+            <label for="qdadm-username">{{ usernameLabel }}</label>
+            <InputText
+              v-model="username"
+              id="qdadm-username"
+              class="w-full"
+              autocomplete="username"
+              :disabled="loading"
+            />
+          </div>
+          <div class="qdadm-login-field">
+            <label for="qdadm-password">{{ passwordLabel }}</label>
+            <Password
+              v-model="password"
+              id="qdadm-password"
+              class="w-full"
+              :feedback="false"
+              toggleMask
+              :disabled="loading"
+            />
+          </div>
+          <Button
+            type="submit"
+            :label="submitLabel"
+            icon="pi pi-sign-in"
+            class="w-full"
+            :loading="loading"
+          />
+          <slot name="footer"></slot>
+        </form>
+      </template>
+    </Card>
+  </div>
+</template>
+
+<style scoped>
+.qdadm-login-page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--p-surface-100);
+}
+
+.qdadm-login-card {
+  width: 100%;
+  max-width: 400px;
+  margin: 1rem;
+}
+
+.qdadm-login-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  justify-content: center;
+}
+
+.qdadm-login-header h1 {
+  margin: 0;
+  font-size: 1.5rem;
+  color: var(--p-text-color);
+}
+
+.qdadm-login-icon {
+  font-size: 2rem;
+  color: var(--p-primary-500);
+}
+
+.qdadm-login-logo {
+  height: 2rem;
+  width: auto;
+}
+
+.qdadm-login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.qdadm-login-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.qdadm-login-field label {
+  font-weight: 500;
+  color: var(--p-text-color);
+}
+
+/* Responsive */
+@media (max-width: 480px) {
+  .qdadm-login-card {
+    max-width: 100%;
+    margin: 0.5rem;
+  }
+}
+</style>

package/src/composables/index.js

@@ -20,3 +20,4 @@ export { useSignals } from './useSignals'
 export { useZoneRegistry } from './useZoneRegistry'
 export { useHooks } from './useHooks'
 export { useLayoutResolver, createLayoutComponents, layoutMeta, LAYOUT_TYPES } from './useLayoutResolver'
+export { useSSE } from './useSSE'

package/src/composables/useSSE.js

@@ -0,0 +1,212 @@
+/**
+ * useSSE - Server-Sent Events composable
+ *
+ * Manages EventSource connection with automatic reconnection and cleanup.
+ * Uses authAdapter.getToken() for authentication if available.
+ *
+ * Usage:
+ *   const { connected, error, reconnect, close } = useSSE('/api/events', {
+ *     eventHandlers: {
+ *       'bot:status': (data) => console.log('Bot status:', data),
+ *       'task:complete': (data) => handleTaskComplete(data)
+ *     }
+ *   })
+ *
+ * Options:
+ *   - eventHandlers: Object mapping event names to handler functions
+ *   - reconnectDelay: Delay in ms before reconnecting (default: 5000)
+ *   - autoConnect: Start connection immediately (default: true)
+ *   - withCredentials: Include credentials in request (default: false)
+ *   - tokenParam: Query param name for token (default: 'token')
+ *   - getToken: Custom token getter function (default: uses authAdapter)
+ */
+
+import { ref, inject, onUnmounted, onMounted } from 'vue'
+
+export function useSSE(url, options = {}) {
+  const {
+    eventHandlers = {},
+    reconnectDelay = 5000,
+    autoConnect = true,
+    withCredentials = false,
+    tokenParam = 'token',
+    getToken: customGetToken = null
+  } = options
+
+  const authAdapter = inject('authAdapter', null)
+
+  const connected = ref(false)
+  const error = ref(null)
+  const reconnecting = ref(false)
+
+  let eventSource = null
+  let reconnectTimer = null
+
+  /**
+   * Get authentication token
+   */
+  const getToken = () => {
+    // Custom getter takes precedence
+    if (customGetToken) {
+      return customGetToken()
+    }
+    // Try authAdapter
+    if (authAdapter?.getToken) {
+      return authAdapter.getToken()
+    }
+    // Fallback to localStorage
+    return localStorage.getItem('auth_token')
+  }
+
+  /**
+   * Build SSE URL with token
+   */
+  const buildUrl = () => {
+    const token = getToken()
+    const sseUrl = new URL(url, window.location.origin)
+
+    if (token && tokenParam) {
+      sseUrl.searchParams.set(tokenParam, token)
+    }
+
+    return sseUrl.toString()
+  }
+
+  /**
+   * Connect to SSE endpoint
+   */
+  const connect = () => {
+    // Clean up existing connection
+    if (eventSource) {
+      eventSource.close()
+      eventSource = null
+    }
+
+    // Clear any pending reconnect
+    if (reconnectTimer) {
+      clearTimeout(reconnectTimer)
+      reconnectTimer = null
+    }
+
+    try {
+      const sseUrl = buildUrl()
+
+      eventSource = new EventSource(sseUrl, {
+        withCredentials
+      })
+
+      eventSource.onopen = () => {
+        connected.value = true
+        error.value = null
+        reconnecting.value = false
+      }
+
+      eventSource.onerror = (err) => {
+        connected.value = false
+        error.value = 'Connection error'
+
+        // Close broken connection
+        if (eventSource) {
+          eventSource.close()
+          eventSource = null
+        }
+
+        // Schedule reconnect
+        if (reconnectDelay > 0) {
+          reconnecting.value = true
+          reconnectTimer = setTimeout(() => {
+            if (!connected.value) {
+              connect()
+            }
+          }, reconnectDelay)
+        }
+      }
+
+      // Register custom event handlers
+      for (const [eventName, handler] of Object.entries(eventHandlers)) {
+        if (eventName === 'message') continue // Handle below
+
+        eventSource.addEventListener(eventName, (event) => {
+          try {
+            const data = JSON.parse(event.data)
+            handler(data, event)
+          } catch (err) {
+            console.error(`[useSSE] Error parsing event "${eventName}":`, err)
+            // Call handler with raw data on parse error
+            handler(event.data, event)
+          }
+        })
+      }
+
+      // Handle generic message events
+      eventSource.onmessage = (event) => {
+        if (!eventHandlers.message) return
+
+        try {
+          const data = JSON.parse(event.data)
+          eventHandlers.message(data, event)
+        } catch (err) {
+          console.error('[useSSE] Error parsing message:', err)
+          eventHandlers.message(event.data, event)
+        }
+      }
+
+    } catch (err) {
+      error.value = err.message
+      connected.value = false
+    }
+  }
+
+  /**
+   * Close connection
+   */
+  const close = () => {
+    if (reconnectTimer) {
+      clearTimeout(reconnectTimer)
+      reconnectTimer = null
+    }
+
+    if (eventSource) {
+      eventSource.close()
+      eventSource = null
+    }
+
+    connected.value = false
+    reconnecting.value = false
+  }
+
+  /**
+   * Reconnect (close and connect)
+   */
+  const reconnect = () => {
+    close()
+    connect()
+  }
+
+  // Auto-connect on mount if enabled
+  onMounted(() => {
+    if (autoConnect) {
+      connect()
+    }
+  })
+
+  // Cleanup on unmount
+  onUnmounted(() => {
+    close()
+  })
+
+  return {
+    /** Reactive connection state */
+    connected,
+    /** Reactive error message */
+    error,
+    /** Reactive reconnecting state */
+    reconnecting,
+    /** Manually connect */
+    connect,
+    /** Close connection */
+    close,
+    /** Reconnect (close + connect) */
+    reconnect
+  }
+}