een-api-toolkit 0.1.2 → 0.1.7

package/examples/vue-media/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "een-api-toolkit-media-example",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "stop": "npx kill-port 3333",
+    "dev": "npm run stop && vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui"
+  },
+  "dependencies": {
+    "een-api-toolkit": "file:../..",
+    "pinia": "^2.1.7",
+    "vue": "^3.4.0",
+    "vue-router": "^4.2.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.57.0",
+    "@vitejs/plugin-vue": "^6.0.0",
+    "dotenv": "^17.2.3",
+    "typescript": "~5.8.0",
+    "vite": "^7.3.0",
+    "vue-tsc": "^3.2.1"
+  }
+}

package/examples/vue-media/playwright.config.ts

@@ -0,0 +1,28 @@
+import { defineConfig, devices } from '@playwright/test'
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: false,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: 1,
+  reporter: 'html',
+  timeout: 60000,
+  use: {
+    baseURL: 'http://127.0.0.1:3333',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure'
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] }
+    }
+  ],
+  webServer: {
+    command: 'npm run dev',
+    url: 'http://127.0.0.1:3333',
+    reuseExistingServer: !process.env.CI,
+    timeout: 120000
+  }
+})

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

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { useAuthStore } from 'een-api-toolkit'
+
+const authStore = useAuthStore()
+</script>
+
+<template>
+  <div id="app">
+    <header>
+      <h1>EEN Media Example</h1>
+      <nav>
+        <router-link to="/" data-testid="nav-home">Home</router-link>
+        <router-link v-if="!authStore.isAuthenticated" to="/login" data-testid="nav-login">Login</router-link>
+        <router-link v-if="authStore.isAuthenticated" to="/live" data-testid="nav-live">Live Camera</router-link>
+        <router-link v-if="authStore.isAuthenticated" to="/logout" data-testid="nav-logout">Logout</router-link>
+      </nav>
+    </header>
+    <main>
+      <router-view />
+    </main>
+  </div>
+</template>
+
+<style>
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+  line-height: 1.6;
+  color: #333;
+  background: #f5f5f5;
+}
+
+#app {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+header {
+  background: #2c3e50;
+  color: white;
+  padding: 20px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+}
+
+header h1 {
+  margin-bottom: 15px;
+}
+
+nav {
+  display: flex;
+  gap: 15px;
+}
+
+nav a {
+  color: white;
+  text-decoration: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+nav a:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+nav a.router-link-active {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+main {
+  background: white;
+  padding: 30px;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+h2 {
+  color: #2c3e50;
+  margin-bottom: 20px;
+}
+
+button {
+  background: #3498db;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: background-color 0.2s;
+}
+
+button:hover {
+  background: #2980b9;
+}
+
+button:disabled {
+  background: #bdc3c7;
+  cursor: not-allowed;
+}
+
+.loading {
+  text-align: center;
+  padding: 40px;
+  color: #666;
+}
+
+.error {
+  color: #e74c3c;
+  padding: 15px;
+  background: #fdf0ef;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+</style>

package/examples/vue-media/src/main.ts

@@ -0,0 +1,22 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import { initEenToolkit } from 'een-api-toolkit'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+const pinia = createPinia()
+
+// Install Pinia FIRST (required before initEenToolkit)
+app.use(pinia)
+app.use(router)
+
+// Initialize the EEN API Toolkit
+initEenToolkit({
+  proxyUrl: import.meta.env.VITE_PROXY_URL,
+  clientId: import.meta.env.VITE_EEN_CLIENT_ID,
+  redirectUri: import.meta.env.VITE_REDIRECT_URI || 'http://127.0.0.1:3333',
+  debug: import.meta.env.VITE_DEBUG === 'true'
+})
+
+app.mount('#app')

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

@@ -0,0 +1,61 @@
+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 LiveCamera from '../views/LiveCamera.vue'
+import Logout from '../views/Logout.vue'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: Home,
+      // Handle OAuth callback on root path (EEN IDP redirects to http://127.0.0.1:3333)
+      beforeEnter: (to, _from, next) => {
+        // If URL has code and state params, it's an OAuth callback
+        if (to.query.code && to.query.state) {
+          next({ name: 'callback', query: to.query })
+        } else {
+          next()
+        }
+      }
+    },
+    {
+      path: '/login',
+      name: 'login',
+      component: Login
+    },
+    {
+      path: '/callback',
+      name: 'callback',
+      component: Callback
+    },
+    {
+      path: '/live',
+      name: 'live',
+      component: LiveCamera,
+      meta: { requiresAuth: true }
+    },
+    {
+      path: '/logout',
+      name: 'logout',
+      component: Logout
+    }
+  ]
+})
+
+// Navigation guard for protected routes
+router.beforeEach((to, _from, next) => {
+  const authStore = useAuthStore()
+
+  if (to.meta.requiresAuth && !authStore.isAuthenticated) {
+    next({ name: 'login' })
+  } else {
+    next()
+  }
+})
+
+export default router

package/examples/vue-media/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 live camera view
+  router.push('/live')
+})
+</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-media/src/views/Home.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { useAuthStore } from 'een-api-toolkit'
+
+const authStore = useAuthStore()
+</script>
+
+<template>
+  <div class="home">
+    <h2>Welcome to the EEN Media Example</h2>
+
+    <div v-if="!authStore.isAuthenticated" class="login-prompt" data-testid="not-authenticated">
+      <p>Please log in to view live camera images.</p>
+      <router-link to="/login">
+        <button data-testid="login-button">Login with Eagle Eye Networks</button>
+      </router-link>
+    </div>
+
+    <div v-else class="authenticated" data-testid="authenticated">
+      <p>You are logged in!</p>
+      <router-link to="/live">
+        <button data-testid="view-live-button">View Live Camera</button>
+      </router-link>
+    </div>
+
+    <div class="description">
+      <h3>About This Example</h3>
+      <p>
+        This example demonstrates using the EEN Media API to fetch live images from cameras.
+        It showcases the following toolkit functions:
+      </p>
+      <ul>
+        <li><code>getCameras()</code> - List available cameras</li>
+        <li><code>getLiveImage()</code> - Fetch live preview images</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.home {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.login-prompt,
+.authenticated {
+  text-align: center;
+  padding: 30px;
+  margin-bottom: 30px;
+  background: #f8f9fa;
+  border-radius: 8px;
+}
+
+.login-prompt p,
+.authenticated p {
+  margin-bottom: 20px;
+  color: #666;
+}
+
+.description {
+  padding: 20px;
+  background: #f8f9fa;
+  border-radius: 8px;
+}
+
+.description h3 {
+  margin-bottom: 15px;
+  color: #2c3e50;
+}
+
+.description ul {
+  margin-top: 15px;
+  padding-left: 25px;
+}
+
+.description li {
+  margin-bottom: 8px;
+}
+
+.description code {
+  background: #e9ecef;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-family: monospace;
+}
+</style>