een-api-toolkit 0.3.38 → 0.3.46

package/examples/vue-automations/src/views/Callback.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { handleAuthCallback } from 'een-api-toolkit'
+
+const router = useRouter()
+const error = ref<string | null>(null)
+const processing = ref(true)
+
+onMounted(async () => {
+  const url = new URL(window.location.href)
+  const code = url.searchParams.get('code')
+  const state = url.searchParams.get('state')
+  const errorParam = url.searchParams.get('error')
+
+  if (errorParam) {
+    error.value = `OAuth error: ${errorParam}`
+    processing.value = false
+    return
+  }
+
+  if (!code || !state) {
+    error.value = 'Missing authorization code or state parameter'
+    processing.value = false
+    return
+  }
+
+  const result = await handleAuthCallback(code, state)
+
+  if (result.error) {
+    error.value = result.error.message
+    processing.value = false
+    return
+  }
+
+  // Success - redirect to automations
+  router.push('/automations')
+})
+</script>
+
+<template>
+  <div class="callback">
+    <div v-if="processing" class="loading">
+      <h2>Authenticating...</h2>
+      <p>Please wait while we complete the login process.</p>
+    </div>
+
+    <div v-else-if="error" class="error-state">
+      <h2>Authentication Failed</h2>
+      <p class="error">{{ error }}</p>
+      <router-link to="/login">
+        <button>Try Again</button>
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.callback {
+  text-align: center;
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+h2 {
+  margin-bottom: 20px;
+}
+
+.loading p {
+  color: #666;
+}
+
+.error-state .error {
+  margin-bottom: 20px;
+}
+</style>

package/examples/vue-automations/src/views/Home.vue

@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import { useAuthStore, getCurrentUser, getStorageStrategy, STORAGE_STRATEGY_DESCRIPTIONS, type UserProfile, type EenError } from 'een-api-toolkit'
+import { computed, ref, onMounted } from 'vue'
+
+const authStore = useAuthStore()
+const isAuthenticated = computed(() => authStore.isAuthenticated)
+
+const storageStrategy = getStorageStrategy()
+const storageDescription = STORAGE_STRATEGY_DESCRIPTIONS[storageStrategy]
+
+// Reactive state for current user
+const user = ref<UserProfile | null>(null)
+const loading = ref(false)
+const error = ref<EenError | null>(null)
+
+async function fetchUser() {
+  if (!isAuthenticated.value) return
+
+  loading.value = true
+  error.value = null
+
+  const result = await getCurrentUser()
+  if (result.error) {
+    error.value = result.error
+    user.value = null
+  } else {
+    user.value = result.data
+  }
+
+  loading.value = false
+}
+
+onMounted(() => {
+  if (isAuthenticated.value) {
+    fetchUser()
+  }
+})
+</script>
+
+<template>
+  <div class="home">
+    <h2>Welcome to the EEN Automations Example</h2>
+
+    <div v-if="isAuthenticated" data-testid="authenticated">
+      <div v-if="loading" class="loading">Loading user info...</div>
+      <div v-else-if="error" class="error">{{ error.message }}</div>
+      <div v-else-if="user" class="user-info" data-testid="user-info">
+        <p>Logged in as: <strong>{{ user.firstName }} {{ user.lastName }}</strong></p>
+        <p>Email: {{ user.email }}</p>
+      </div>
+
+      <div class="actions">
+        <router-link to="/automations">
+          <button data-testid="view-automations-button">View Automations</button>
+        </router-link>
+      </div>
+    </div>
+
+    <div v-else class="login-prompt" data-testid="not-authenticated">
+      <p>Please log in to view automation rules.</p>
+      <router-link to="/login">
+        <button data-testid="login-button">Login</button>
+      </router-link>
+    </div>
+
+    <div class="description">
+      <h3>About This Example</h3>
+      <p>
+        This example demonstrates how to use the automation functions from the
+        EEN API Toolkit to display and filter automation rules.
+      </p>
+      <h4>Features</h4>
+      <ul>
+        <li>List event alert condition rules</li>
+        <li>List alert condition rules with actions and insights</li>
+        <li>List alert action rules</li>
+        <li>List alert actions (notifications, webhooks, etc.)</li>
+        <li>Filter by enabled status</li>
+        <li>Pagination support</li>
+      </ul>
+      <h4>Functions Used</h4>
+      <ul>
+        <li><code>listEventAlertConditionRules()</code></li>
+        <li><code>listAlertConditionRules()</code></li>
+        <li><code>listAlertActionRules()</code></li>
+        <li><code>listAlertActions()</code></li>
+      </ul>
+      <p class="storage-note" data-testid="storage-strategy">
+        Storage strategy: <strong>{{ storageStrategy }}</strong> ({{ storageDescription }})
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.home {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+h2 {
+  margin-bottom: 20px;
+}
+
+.user-info {
+  background: #f5f5f5;
+  padding: 15px;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+
+.user-info p {
+  margin: 5px 0;
+}
+
+.actions {
+  margin: 20px 0;
+}
+
+.login-prompt {
+  text-align: center;
+  padding: 20px;
+  background: #f5f5f5;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+
+.login-prompt p {
+  margin-bottom: 15px;
+}
+
+.description {
+  margin-top: 40px;
+  padding-top: 20px;
+  border-top: 1px solid #eee;
+}
+
+.description h3 {
+  margin-bottom: 10px;
+}
+
+.description h4 {
+  margin-top: 15px;
+  margin-bottom: 10px;
+}
+
+.description p {
+  color: #666;
+  margin-bottom: 15px;
+}
+
+.description ul {
+  list-style: disc;
+  padding-left: 20px;
+  color: #666;
+}
+
+.description code {
+  background: #f0f0f0;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 0.9em;
+}
+
+.storage-note {
+  margin-top: 20px;
+  padding-top: 15px;
+  border-top: 1px solid #ddd;
+  font-size: 0.85em;
+  color: #888;
+}
+</style>

package/examples/vue-automations/src/views/Login.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { getAuthUrl } from 'een-api-toolkit'
+
+function login() {
+  // Redirect to EEN OAuth login
+  window.location.href = getAuthUrl()
+}
+</script>
+
+<template>
+  <div class="login">
+    <h2 data-testid="login-title">Login</h2>
+    <p>Click the button below to login with your Eagle Eye Networks account.</p>
+    <button @click="login" data-testid="login-button">Login with Eagle Eye Networks</button>
+  </div>
+</template>
+
+<style scoped>
+.login {
+  text-align: center;
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+h2 {
+  margin-bottom: 20px;
+}
+
+p {
+  margin-bottom: 20px;
+  color: #666;
+}
+</style>

package/examples/vue-automations/src/views/Logout.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { revokeToken, useAuthStore } from 'een-api-toolkit'
+
+const router = useRouter()
+const authStore = useAuthStore()
+const error = ref<string | null>(null)
+const processing = ref(true)
+
+onMounted(async () => {
+  if (!authStore.isAuthenticated) {
+    // Already logged out
+    router.push('/')
+    return
+  }
+
+  const result = await revokeToken()
+
+  if (result.error) {
+    error.value = result.error.message
+    processing.value = false
+    return
+  }
+
+  // Success - redirect to home
+  router.push('/')
+})
+</script>
+
+<template>
+  <div class="logout">
+    <div v-if="processing" class="loading">
+      <h2>Logging out...</h2>
+      <p>Please wait while we complete the logout process.</p>
+    </div>
+
+    <div v-else-if="error" class="error-state">
+      <h2>Logout Failed</h2>
+      <p class="error">{{ error }}</p>
+      <router-link to="/">
+        <button>Return Home</button>
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.logout {
+  text-align: center;
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+h2 {
+  margin-bottom: 20px;
+}
+
+.loading p {
+  color: #666;
+}
+
+.error-state .error {
+  margin-bottom: 20px;
+}
+</style>

package/examples/vue-automations/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/examples/vue-automations/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/examples/vue-automations/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts", "playwright.config.ts"]
+}

package/examples/vue-automations/vite.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  server: {
+    // IMPORTANT: Must use 127.0.0.1:3333 for EEN OAuth callback
+    // The EEN Identity Provider only permits this specific redirect URI
+    host: '127.0.0.1',
+    port: 3333
+  }
+})

package/examples/vue-bridges/e2e/auth.spec.ts

@@ -203,4 +203,101 @@ test.describe('Vue Bridges Example - Auth', () => {
     await expect(page.locator('[data-testid="not-authenticated"]')).toBeVisible({ timeout: TIMEOUTS.UI_UPDATE })
     await expect(page.locator('[data-testid="nav-login"]')).toBeVisible()
   })
+
+  test('after logout, localStorage is cleared and new login flow is required', async ({ page }) => {
+    skipIfNoProxy()
+    skipIfNoCredentials()
+
+    // First login
+    await performLogin(page, TEST_USER!, TEST_PASSWORD!)
+    await expect(page.locator('[data-testid="nav-logout"]')).toBeVisible({ timeout: TIMEOUTS.UI_UPDATE })
+
+    // Verify we're authenticated
+    await expect(page.locator('[data-testid="nav-bridges"]')).toBeVisible()
+
+    // Logout
+    await page.click('[data-testid="nav-logout"]')
+    await page.waitForURL('**/')
+    await expect(page.locator('[data-testid="not-authenticated"]')).toBeVisible({ timeout: TIMEOUTS.UI_UPDATE })
+
+    // Verify localStorage is cleared (session data removed)
+    const tokenAfterLogout = await page.evaluate(() => localStorage.getItem('een_token'))
+    expect(tokenAfterLogout).toBeNull()
+
+    const sessionIdAfterLogout = await page.evaluate(() => localStorage.getItem('een_sessionId'))
+    expect(sessionIdAfterLogout).toBeNull()
+
+    const hostnameAfterLogout = await page.evaluate(() => localStorage.getItem('een_hostname'))
+    expect(hostnameAfterLogout).toBeNull()
+
+    // Verify the app shows not-authenticated state (proves our session is cleared)
+    await expect(page.locator('[data-testid="not-authenticated"]')).toBeVisible()
+    await expect(page.locator('[data-testid="nav-login"]')).toBeVisible()
+    await expect(page.locator('[data-testid="nav-logout"]')).not.toBeVisible()
+
+    // Click login to start new OAuth flow
+    await page.click('[data-testid="login-button"]')
+    await page.waitForURL('/login')
+
+    // Click OAuth login button - this initiates the OAuth redirect
+    await page.click('button:has-text("Login with Eagle Eye Networks")')
+
+    // Wait for either:
+    // 1. OAuth page (if IDP session expired) - user needs to enter credentials
+    // 2. Callback/bridges page (if IDP remembers user via cookies) - auto-login
+    // Either way, our localStorage was cleared and user had to initiate a new login
+    await page.waitForURL(/eagleeyenetworks\.com|127\.0\.0\.1:3333/, { timeout: TIMEOUTS.AUTH_COMPLETE })
+
+    // If we ended up back at our app (auto-login via IDP cookies), verify we're authenticated again
+    const currentUrl = page.url()
+    if (currentUrl.includes('127.0.0.1:3333')) {
+      // Auto-logged in - wait for the full flow to complete
+      await page.waitForURL('**/bridges', { timeout: TIMEOUTS.AUTH_COMPLETE })
+      await expect(page.locator('[data-testid="nav-bridges"]')).toBeVisible({ timeout: TIMEOUTS.UI_UPDATE })
+      await expect(page.locator('[data-testid="nav-logout"]')).toBeVisible()
+
+      // Verify localStorage has new token (proves it was cleared and refilled)
+      const newToken = await page.evaluate(() => localStorage.getItem('een_token'))
+      expect(newToken).not.toBeNull()
+    } else {
+      // At OAuth page - user needs to enter credentials
+      const emailInput = page.locator('#authentication--input__email')
+      await expect(emailInput).toBeVisible({ timeout: TIMEOUTS.ELEMENT_VISIBLE })
+    }
+  })
+
+  test('localStorage: second tab shares session without re-login', async ({ page, context }) => {
+    skipIfNoProxy()
+    skipIfNoCredentials()
+
+    // First tab: login
+    await performLogin(page, TEST_USER!, TEST_PASSWORD!)
+    await expect(page.locator('[data-testid="nav-logout"]')).toBeVisible({ timeout: TIMEOUTS.UI_UPDATE })
+
+    // Verify localStorage has token
+    const tokenInFirstTab = await page.evaluate(() => localStorage.getItem('een_token'))
+    expect(tokenInFirstTab).not.toBeNull()
+
+    // Open second tab in same browser context (shares localStorage)
+    const secondTab = await context.newPage()
+    await secondTab.goto('/')
+
+    // Second tab should be authenticated immediately (no login needed)
+    // because localStorage is shared and App.vue calls initialize()
+    await expect(secondTab.locator('[data-testid="nav-logout"]')).toBeVisible({ timeout: TIMEOUTS.UI_UPDATE })
+    await expect(secondTab.locator('[data-testid="nav-bridges"]')).toBeVisible()
+    await expect(secondTab.locator('[data-testid="nav-login"]')).not.toBeVisible()
+
+    // Verify second tab has the same token from localStorage
+    const tokenInSecondTab = await secondTab.evaluate(() => localStorage.getItem('een_token'))
+    expect(tokenInSecondTab).toBe(tokenInFirstTab)
+
+    // Navigate to bridges in second tab - should work without login
+    await secondTab.click('[data-testid="nav-bridges"]')
+    await secondTab.waitForURL('**/bridges')
+    await expect(secondTab.locator('.bridge-grid, .no-bridges')).toBeVisible({ timeout: TIMEOUTS.ELEMENT_VISIBLE })
+
+    // Clean up second tab
+    await secondTab.close()
+  })
 })

package/examples/vue-bridges/src/App.vue

@@ -1,9 +1,15 @@
 <script setup lang="ts">
+import { onMounted, computed } from 'vue'
 import { useAuthStore } from 'een-api-toolkit'
-import { computed } from 'vue'
 
 const authStore = useAuthStore()
 const isAuthenticated = computed(() => authStore.isAuthenticated)
+
+// Initialize auth store from storage on app mount
+// This restores the session if a valid token exists in localStorage/sessionStorage
+onMounted(() => {
+  authStore.initialize()
+})
 </script>
 
 <template>

package/examples/vue-cameras/src/App.vue

@@ -1,9 +1,15 @@
 <script setup lang="ts">
+import { onMounted, computed } from 'vue'
 import { useAuthStore } from 'een-api-toolkit'
-import { computed } from 'vue'
 
 const authStore = useAuthStore()
 const isAuthenticated = computed(() => authStore.isAuthenticated)
+
+// Initialize auth store from storage on app mount
+// This restores the session if a valid token exists in localStorage/sessionStorage
+onMounted(() => {
+  authStore.initialize()
+})
 </script>
 
 <template>

package/examples/vue-event-subscriptions/src/App.vue

@@ -1,12 +1,18 @@
 <script setup lang="ts">
+import { onMounted, computed } from 'vue'
 import { useAuthStore } from 'een-api-toolkit'
-import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 
 const authStore = useAuthStore()
 const router = useRouter()
 
 const isAuthenticated = computed(() => authStore.isAuthenticated)
+
+// Initialize auth store from storage on app mount
+// This restores the session if a valid token exists in localStorage/sessionStorage
+onMounted(() => {
+  authStore.initialize()
+})
 const refreshFailed = computed(() => authStore.refreshFailed)
 const refreshFailedMessage = computed(() => authStore.refreshFailedMessage)
 const isRefreshing = computed(() => authStore.isRefreshing)

package/examples/vue-event-subscriptions/src/views/LiveEvents.vue

@@ -380,7 +380,7 @@ watch(selectedSubscriptionId, (newId) => {
       <ul class="warning-list">
         <li>SSE URLs are single-use. Once disconnected, the subscription cannot be reconnected.</li>
         <li>To receive events again after disconnecting, create a new subscription.</li>
-        <li>Subscriptions have a 15-minute TTL and expire if not connected.</li>
+        <li>SSE subscriptions have a server-determined 15-minute TTL (not configurable) and expire if not connected.</li>
       </ul>
     </div>
 

package/examples/vue-events/src/App.vue

@@ -1,9 +1,15 @@
 <script setup lang="ts">
+import { onMounted, computed } from 'vue'
 import { useAuthStore } from 'een-api-toolkit'
-import { computed } from 'vue'
 
 const authStore = useAuthStore()
 const isAuthenticated = computed(() => authStore.isAuthenticated)
+
+// Initialize auth store from storage on app mount
+// This restores the session if a valid token exists in localStorage/sessionStorage
+onMounted(() => {
+  authStore.initialize()
+})
 </script>
 
 <template>

package/examples/vue-layouts/src/App.vue

@@ -1,9 +1,15 @@
 <script setup lang="ts">
+import { onMounted, computed } from 'vue'
 import { useAuthStore } from 'een-api-toolkit'
-import { computed } from 'vue'
 
 const authStore = useAuthStore()
 const isAuthenticated = computed(() => authStore.isAuthenticated)
+
+// Initialize auth store from storage on app mount
+// This restores the session if a valid token exists in localStorage/sessionStorage
+onMounted(() => {
+  authStore.initialize()
+})
 </script>
 
 <template>

package/examples/vue-users/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "een-api-toolkit-example",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "een-api-toolkit-example",
-      "version": "0.0.25",
+      "version": "0.0.26",
       "dependencies": {
         "een-api-toolkit": "file:../..",
         "pinia": "^3.0.4",

package/examples/vue-users/package.json

@@ -1,6 +1,6 @@
 {
   "name": "een-api-toolkit-example",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "private": true,
   "type": "module",
   "scripts": {

package/examples/vue-users/src/App.vue

@@ -1,9 +1,15 @@
 <script setup lang="ts">
+import { onMounted, computed } from 'vue'
 import { useAuthStore } from 'een-api-toolkit'
-import { computed } from 'vue'
 
 const authStore = useAuthStore()
 const isAuthenticated = computed(() => authStore.isAuthenticated)
+
+// Initialize auth store from storage on app mount
+// This restores the session if a valid token exists in localStorage/sessionStorage
+onMounted(() => {
+  authStore.initialize()
+})
 </script>
 
 <template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "een-api-toolkit",
-  "version": "0.3.38",
+  "version": "0.3.46",
   "description": "EEN Video platform API v3.0 library for Vue 3",
   "type": "module",
   "main": "./dist/index.cjs",