een-api-toolkit 0.3.30 → 0.3.35

package/examples/vue-layouts/src/router/index.ts

@@ -0,0 +1,62 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import { useAuthStore } from 'een-api-toolkit'
+import Home from '../views/Home.vue'
+import Login from '../views/Login.vue'
+import Callback from '../views/Callback.vue'
+import Layouts from '../views/Layouts.vue'
+import Logout from '../views/Logout.vue'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: Home
+    },
+    {
+      path: '/login',
+      name: 'login',
+      component: Login
+    },
+    {
+      path: '/callback',
+      name: 'callback',
+      component: Callback
+    },
+    {
+      path: '/layouts',
+      name: 'layouts',
+      component: Layouts,
+      meta: { requiresAuth: true }
+    },
+    {
+      path: '/logout',
+      name: 'logout',
+      component: Logout
+    }
+  ]
+})
+
+// Navigation guard for OAuth callback and protected routes
+// IMPORTANT: OAuth callback check MUST come FIRST, before auth check
+// This ensures the callback is processed even if the root route becomes protected
+router.beforeEach((to, _from, next) => {
+  // Handle OAuth callback on root path (EEN IDP redirects to http://127.0.0.1:3333)
+  // Check for code and state params which indicate an OAuth callback
+  if (to.path === '/' && to.query.code && to.query.state) {
+    next({ name: 'callback', query: to.query })
+    return
+  }
+
+  // Check authentication for protected routes
+  const authStore = useAuthStore()
+
+  if (to.meta.requiresAuth && !authStore.isAuthenticated) {
+    next({ name: 'login' })
+  } else {
+    next()
+  }
+})
+
+export default router

package/examples/vue-layouts/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 home
+  router.push('/')
+})
+</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-layouts/src/views/Home.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import { useAuthStore, getCurrentUser, getAuthUrl, getStorageStrategy, STORAGE_STRATEGY_DESCRIPTIONS, type UserProfile, type EenError } from 'een-api-toolkit'
+import { computed, ref, watch } from 'vue'
+
+const authStore = useAuthStore()
+const isAuthenticated = computed(() => authStore.isAuthenticated)
+const loginError = ref<string | null>(null)
+
+const storageStrategy = getStorageStrategy()
+const storageDescription = STORAGE_STRATEGY_DESCRIPTIONS[storageStrategy]
+
+function login() {
+  try {
+    loginError.value = null
+    const authUrl = getAuthUrl()
+    window.location.href = authUrl
+  } catch (err) {
+    loginError.value = err instanceof Error ? err.message : 'Failed to initiate login'
+    console.error('Login error:', err)
+  }
+}
+
+// Reactive state for current user
+const user = ref<UserProfile | null>(null)
+const loading = ref(false)
+const error = ref<EenError | null>(null)
+
+// Guard to prevent concurrent fetch calls
+let fetchInProgress = false
+
+async function fetchUser() {
+  if (fetchInProgress) return
+  fetchInProgress = true
+  loading.value = true
+  error.value = null
+
+  try {
+    const result = await getCurrentUser()
+    if (result.error) {
+      error.value = result.error
+      user.value = null
+    } else {
+      user.value = result.data
+    }
+  } finally {
+    loading.value = false
+    fetchInProgress = false
+  }
+}
+
+// Fetch user when authentication state changes
+watch(
+  isAuthenticated,
+  async (isAuth) => {
+    if (isAuth && !user.value && !fetchInProgress) {
+      await fetchUser()
+    }
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <div class="home">
+    <h2>Welcome to the EEN Layouts Example</h2>
+
+    <div v-if="!isAuthenticated" class="not-authenticated" data-testid="not-authenticated">
+      <p data-testid="not-authenticated-message">You are not logged in.</p>
+      <p v-if="loginError" class="error" data-testid="login-error">{{ loginError }}</p>
+      <button data-testid="login-button" @click="login">Login with Eagle Eye Networks</button>
+    </div>
+
+    <div v-else class="authenticated">
+      <div v-if="loading" class="loading">Loading user profile...</div>
+      <div v-else-if="error" class="error">Error: {{ error.message }}</div>
+      <div v-else-if="user" class="user-info">
+        <h3>Hello, {{ user.firstName }} {{ user.lastName }}!</h3>
+        <p>Email: {{ user.email }}</p>
+        <p>Account ID: {{ user.accountId }}</p>
+      </div>
+
+      <div class="actions">
+        <router-link to="/layouts">
+          <button>View Layouts</button>
+        </router-link>
+      </div>
+    </div>
+
+    <div class="description">
+      <h3>About This Example</h3>
+      <p>
+        This example demonstrates how to use the <code>getLayouts</code>,
+        <code>getLayout</code>, <code>createLayout</code>, <code>updateLayout</code>,
+        and <code>deleteLayout</code> functions from the EEN API Toolkit to manage
+        camera layouts from the Eagle Eye Networks platform.
+      </p>
+      <h4>Features</h4>
+      <ul>
+        <li>List layouts with pagination</li>
+        <li>Create new layouts with settings</li>
+        <li>Edit layout name and settings</li>
+        <li>Add/remove camera panes</li>
+        <li>Delete layouts</li>
+        <li>OAuth authentication flow</li>
+      </ul>
+      <p class="storage-note" data-testid="storage-strategy">
+        Storage strategy: <strong>{{ storageStrategy }}</strong> ({{ storageDescription }})
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.home {
+  text-align: center;
+}
+
+h2 {
+  margin-bottom: 30px;
+}
+
+.not-authenticated,
+.authenticated {
+  margin-top: 20px;
+}
+
+.user-info {
+  background: #f5f5f5;
+  padding: 20px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+}
+
+.user-info h3 {
+  margin-bottom: 10px;
+}
+
+.user-info p {
+  color: #666;
+}
+
+.actions {
+  margin-top: 20px;
+}
+
+.description {
+  margin-top: 40px;
+  padding: 20px;
+  background: #f8f9fa;
+  border-radius: 8px;
+  text-align: left;
+}
+
+.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: #e9ecef;
+  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-layouts/src/views/Layouts.vue

@@ -0,0 +1,355 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import {
+  getLayouts,
+  getCameras,
+  createLayout,
+  updateLayout,
+  deleteLayout,
+  type Layout,
+  type Camera,
+  type EenError,
+  type ListLayoutsParams,
+  type CreateLayoutParams,
+  type UpdateLayoutParams,
+  type LayoutSettings
+} from 'een-api-toolkit'
+import LayoutModal from '../components/LayoutModal.vue'
+
+// Reactive state
+const layouts = ref<Layout[]>([])
+const cameras = ref<Camera[]>([])
+const loading = ref(false)
+const error = ref<EenError | null>(null)
+const nextPageToken = ref<string | undefined>(undefined)
+
+const hasNextPage = computed(() => !!nextPageToken.value)
+
+const params = ref<ListLayoutsParams>({
+  pageSize: 20,
+  include: ['resourceCounts', 'effectivePermissions']
+})
+
+// Modal state
+const showModal = ref(false)
+const selectedLayout = ref<Layout | null>(null)
+const modalLoading = ref(false)
+const modalError = ref<string | null>(null)
+
+// Default settings for new layouts
+const defaultSettings: LayoutSettings = {
+  showCameraBorder: true,
+  showCameraName: true,
+  cameraAspectRatio: '16x9',
+  paneColumns: 3
+}
+
+async function fetchLayouts(fetchParams?: ListLayoutsParams, append = false) {
+  loading.value = true
+  error.value = null
+
+  const mergedParams = { ...params.value, ...fetchParams }
+  const result = await getLayouts(mergedParams)
+
+  if (result.error) {
+    error.value = result.error
+    if (!append) {
+      layouts.value = []
+    }
+    nextPageToken.value = undefined
+  } else {
+    if (append) {
+      layouts.value = [...layouts.value, ...result.data.results]
+    } else {
+      layouts.value = result.data.results
+    }
+    nextPageToken.value = result.data.nextPageToken
+  }
+
+  loading.value = false
+  return result
+}
+
+async function fetchCameras() {
+  const result = await getCameras({ pageSize: 100, include: ['status'] })
+  if (result.data) {
+    cameras.value = result.data.results
+  }
+}
+
+function refresh() {
+  return fetchLayouts()
+}
+
+async function fetchNextPage() {
+  if (!nextPageToken.value) return
+  // Destructure to explicitly exclude any existing pageToken from params
+  const { pageToken: _existingToken, ...restParams } = params.value
+  return fetchLayouts({ ...restParams, pageToken: nextPageToken.value }, true)
+}
+
+function openCreateModal() {
+  selectedLayout.value = null
+  modalError.value = null
+  showModal.value = true
+}
+
+function openEditModal(layout: Layout) {
+  selectedLayout.value = layout
+  modalError.value = null
+  showModal.value = true
+}
+
+function closeModal() {
+  showModal.value = false
+  selectedLayout.value = null
+  modalError.value = null
+}
+
+async function handleSave(data: { name: string; settings: LayoutSettings; panes: Layout['panes'] }) {
+  modalLoading.value = true
+  modalError.value = null
+
+  try {
+    if (selectedLayout.value) {
+      // Update existing layout
+      const updateParams: UpdateLayoutParams = {
+        name: data.name,
+        settings: data.settings,
+        panes: data.panes
+      }
+
+      const result = await updateLayout(selectedLayout.value.id, updateParams)
+      if (result.error) {
+        modalError.value = result.error.message
+        return
+      }
+    } else {
+      // Create new layout
+      const createParams: CreateLayoutParams = {
+        name: data.name,
+        settings: data.settings,
+        panes: data.panes
+      }
+
+      const result = await createLayout(createParams)
+      if (result.error) {
+        modalError.value = result.error.message
+        return
+      }
+    }
+
+    closeModal()
+    await fetchLayouts()
+  } catch (err) {
+    // Handle unexpected errors (network failures, state mutations, etc.)
+    modalError.value = err instanceof Error ? err.message : 'An unexpected error occurred'
+    console.error('handleSave error:', err)
+  } finally {
+    modalLoading.value = false
+  }
+}
+
+async function handleDelete(layoutId: string) {
+  if (!confirm('Are you sure you want to delete this layout?')) {
+    return
+  }
+
+  modalLoading.value = true
+  modalError.value = null
+
+  const result = await deleteLayout(layoutId)
+
+  if (result.error) {
+    modalError.value = result.error.message
+    modalLoading.value = false
+    return
+  }
+
+  closeModal()
+  await fetchLayouts()
+  modalLoading.value = false
+}
+
+onMounted(async () => {
+  await Promise.all([fetchLayouts(), fetchCameras()])
+})
+</script>
+
+<template>
+  <div class="layouts">
+    <div class="header">
+      <h2>Layouts</h2>
+      <div class="controls">
+        <button @click="openCreateModal">Create Layout</button>
+        <button class="secondary" @click="refresh" :disabled="loading">
+          {{ loading ? 'Loading...' : 'Refresh' }}
+        </button>
+      </div>
+    </div>
+
+    <div v-if="loading && layouts.length === 0" class="loading">
+      Loading layouts...
+    </div>
+
+    <div v-else-if="error" class="error">
+      Error: {{ error.message }}
+    </div>
+
+    <div v-else>
+      <div v-if="layouts.length > 0" class="layout-grid">
+        <div
+          v-for="layout in layouts"
+          :key="layout.id"
+          class="layout-card"
+          @click="openEditModal(layout)"
+        >
+          <div class="layout-header">
+            <h3>{{ layout.name }}</h3>
+            <span class="pane-count">{{ layout.panes?.length || 0 }} panes</span>
+          </div>
+          <div class="layout-details">
+            <p>
+              <strong>Columns:</strong> {{ layout.settings?.paneColumns || 'N/A' }}
+            </p>
+            <p>
+              <strong>Aspect Ratio:</strong> {{ layout.settings?.cameraAspectRatio || 'N/A' }}
+            </p>
+            <p v-if="layout.resourceCounts?.cameras !== undefined">
+              <strong>Cameras:</strong> {{ layout.resourceCounts.cameras }}
+            </p>
+            <div v-if="layout.effectivePermissions" class="permissions">
+              <span v-if="layout.effectivePermissions.edit" class="badge edit">Can Edit</span>
+              <span v-if="layout.effectivePermissions.delete" class="badge delete">Can Delete</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <p v-else class="no-layouts">
+        No layouts found. Click "Create Layout" to add one.
+      </p>
+
+      <div v-if="hasNextPage" class="pagination">
+        <button @click="fetchNextPage" :disabled="loading">
+          {{ loading ? 'Loading...' : 'Load More' }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Layout Modal -->
+    <LayoutModal
+      v-if="showModal"
+      :layout="selectedLayout"
+      :cameras="cameras"
+      :loading="modalLoading"
+      :error="modalError"
+      :default-settings="defaultSettings"
+      @save="handleSave"
+      @delete="handleDelete"
+      @close="closeModal"
+    />
+  </div>
+</template>
+
+<style scoped>
+.layouts {
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.controls {
+  display: flex;
+  gap: 10px;
+}
+
+.layout-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 20px;
+}
+
+.layout-card {
+  background: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 16px;
+  cursor: pointer;
+  transition: box-shadow 0.2s, transform 0.2s;
+}
+
+.layout-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transform: translateY(-2px);
+}
+
+.layout-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 12px;
+}
+
+.layout-header h3 {
+  margin: 0;
+  font-size: 1.1rem;
+  color: #333;
+}
+
+.pane-count {
+  background: #e9ecef;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 0.85rem;
+  color: #666;
+}
+
+.layout-details p {
+  margin: 4px 0;
+  font-size: 0.9rem;
+  color: #666;
+}
+
+.permissions {
+  margin-top: 8px;
+  display: flex;
+  gap: 6px;
+}
+
+.badge {
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.badge.edit {
+  background: #d4edda;
+  color: #155724;
+}
+
+.badge.delete {
+  background: #f8d7da;
+  color: #721c24;
+}
+
+.no-layouts {
+  text-align: center;
+  color: #666;
+  padding: 40px 20px;
+  background: #f8f9fa;
+  border-radius: 8px;
+}
+
+.pagination {
+  margin-top: 20px;
+  text-align: center;
+}
+</style>

package/examples/vue-layouts/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 data-testid="login-button" @click="login">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>