een-api-toolkit 0.0.8 → 0.0.13

package/examples/vue-basic/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "een-api-toolkit-example",
+  "version": "0.0.8",
+  "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-basic/playwright.config.ts

@@ -0,0 +1,47 @@
+import { defineConfig, devices } from '@playwright/test'
+import dotenv from 'dotenv'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+// Load .env files: parent first, then local with override to replace any conflicts
+// In CI, env vars are passed directly via workflow
+dotenv.config({ path: path.resolve(__dirname, '../../.env') })
+dotenv.config({ path: path.resolve(__dirname, '.env'), override: true })
+
+const redirectUri = process.env.VITE_REDIRECT_URI || 'http://127.0.0.1:3333'
+if (!redirectUri.startsWith('http://127.0.0.1:') && !redirectUri.startsWith('http://localhost:')) {
+  throw new Error('VITE_REDIRECT_URI must use localhost or 127.0.0.1 for security')
+}
+const baseURL = redirectUri
+
+export default defineConfig({
+  testDir: './e2e',
+  testMatch: '**/*.spec.ts',
+  fullyParallel: false, // Run tests sequentially for predictable order
+  forbidOnly: !!process.env.CI,
+  retries: 0, // No retries - fail fast
+  maxFailures: 1, // Stop on first failure
+  workers: 1,
+  reporter: [['html', { open: 'never' }]],
+  timeout: 30000,
+  use: {
+    baseURL,
+    trace: 'on-first-retry',
+    video: 'retain-on-failure'
+  },
+  outputDir: './e2e-results/',
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] }
+    }
+  ],
+  webServer: {
+    command: 'npm run dev',
+    url: baseURL,
+    reuseExistingServer: !process.env.CI,
+    timeout: 30000
+  }
+})

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

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { useAuthStore } from 'een-api-toolkit'
+import { computed } from 'vue'
+
+const authStore = useAuthStore()
+const isAuthenticated = computed(() => authStore.isAuthenticated)
+</script>
+
+<template>
+  <div class="app">
+    <header>
+      <h1 data-testid="app-title">EEN API Toolkit Example</h1>
+      <nav>
+        <router-link data-testid="nav-home" to="/">Home</router-link>
+        <router-link data-testid="nav-users" v-if="isAuthenticated" to="/users">Users</router-link>
+        <router-link data-testid="nav-login" v-if="!isAuthenticated" to="/login">Login</router-link>
+        <router-link data-testid="nav-logout" v-if="isAuthenticated" to="/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, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  line-height: 1.6;
+  color: #333;
+}
+
+.app {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 30px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #eee;
+}
+
+header h1 {
+  font-size: 1.5rem;
+}
+
+nav {
+  display: flex;
+  gap: 20px;
+}
+
+nav a {
+  color: #42b883;
+  text-decoration: none;
+}
+
+nav a:hover {
+  text-decoration: underline;
+}
+
+nav a.router-link-active {
+  font-weight: bold;
+}
+
+button {
+  background: #42b883;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+button:hover {
+  background: #3aa876;
+}
+
+button:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+}
+
+.error {
+  color: #e74c3c;
+  padding: 10px;
+  background: #fdf2f2;
+  border-radius: 4px;
+  margin: 10px 0;
+}
+
+.loading {
+  color: #666;
+  font-style: italic;
+}
+</style>

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

@@ -0,0 +1,23 @@
+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)
+
+// Install Pinia (required before initEenToolkit)
+app.use(createPinia())
+
+// Initialize 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,
+  debug: import.meta.env.VITE_DEBUG === 'true'
+})
+
+// Install router
+app.use(router)
+
+app.mount('#app')

package/examples/vue-basic/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 Users from '../views/Users.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: '/users',
+      name: 'users',
+      component: Users,
+      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-basic/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-basic/src/views/Home.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { useAuthStore, useCurrentUser, getAuthUrl } from 'een-api-toolkit'
+import { computed, ref, watch } from 'vue'
+
+const authStore = useAuthStore()
+const isAuthenticated = computed(() => authStore.isAuthenticated)
+const loginError = ref<string | null>(null)
+
+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)
+  }
+}
+
+// Don't fetch on mount - we'll handle it reactively
+const { user, loading, error, fetch } = useCurrentUser({
+  immediate: false
+})
+
+// Guard to prevent concurrent fetch calls
+let fetchInProgress = false
+
+// Fetch user when authentication state changes
+watch(
+  isAuthenticated,
+  async (isAuth) => {
+    if (isAuth && !user.value && !fetchInProgress) {
+      fetchInProgress = true
+      try {
+        await fetch()
+      } finally {
+        fetchInProgress = false
+      }
+    }
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <div class="home">
+    <h2>Welcome to the EEN API Toolkit 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="/users">
+          <button>View Users</button>
+        </router-link>
+      </div>
+    </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;
+}
+</style>

package/examples/vue-basic/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>

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

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { revokeToken } from 'een-api-toolkit'
+
+const router = useRouter()
+const processing = ref(true)
+const error = ref<string | null>(null)
+
+onMounted(async () => {
+  const result = await revokeToken()
+
+  if (result.error) {
+    // Even if revoke fails, the local state is cleared
+    console.warn('Token revocation failed:', result.error.message)
+  }
+
+  processing.value = false
+
+  // Redirect to home after a short delay
+  setTimeout(() => {
+    router.push('/')
+  }, 2000)
+})
+</script>
+
+<template>
+  <div class="logout">
+    <div v-if="processing">
+      <h2>Logging out...</h2>
+      <p class="loading">Please wait.</p>
+    </div>
+
+    <div v-else>
+      <h2>Logged Out</h2>
+      <p>You have been successfully logged out.</p>
+      <p v-if="error" class="error">Note: {{ error }}</p>
+      <p class="redirect">Redirecting to home page...</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.logout {
+  text-align: center;
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+h2 {
+  margin-bottom: 20px;
+}
+
+.redirect {
+  color: #666;
+  font-style: italic;
+  margin-top: 20px;
+}
+</style>

package/examples/vue-basic/src/views/Users.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { useUsers } from 'een-api-toolkit'
+
+const {
+  users,
+  loading,
+  error,
+  hasNextPage,
+  fetchNextPage,
+  refresh
+} = useUsers({ pageSize: 10 })
+</script>
+
+<template>
+  <div class="users">
+    <div class="header">
+      <h2>Users</h2>
+      <button @click="refresh" :disabled="loading">
+        {{ loading ? 'Loading...' : 'Refresh' }}
+      </button>
+    </div>
+
+    <div v-if="loading && users.length === 0" class="loading">
+      Loading users...
+    </div>
+
+    <div v-else-if="error" class="error">
+      Error: {{ error.message }}
+    </div>
+
+    <div v-else>
+      <table v-if="users.length > 0">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Email</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="user in users" :key="user.id">
+            <td>{{ user.firstName }} {{ user.lastName }}</td>
+            <td>{{ user.email }}</td>
+            <td>
+              <span :class="user.isActive ? 'active' : 'inactive'">
+                {{ user.isActive ? 'Active' : 'Inactive' }}
+              </span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <p v-else>No users found.</p>
+
+      <div v-if="hasNextPage" class="pagination">
+        <button @click="fetchNextPage" :disabled="loading">
+          {{ loading ? 'Loading...' : 'Load More' }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.users {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th,
+td {
+  padding: 12px;
+  text-align: left;
+  border-bottom: 1px solid #eee;
+}
+
+th {
+  background: #f5f5f5;
+  font-weight: 600;
+}
+
+.active {
+  color: #27ae60;
+}
+
+.inactive {
+  color: #e74c3c;
+}
+
+.pagination {
+  margin-top: 20px;
+  text-align: center;
+}
+</style>

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

@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_EEN_CLIENT_ID: string
+  readonly VITE_PROXY_URL: string
+  readonly VITE_REDIRECT_URI?: string
+  readonly VITE_DEBUG?: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

package/examples/vue-basic/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-basic/tsconfig.node.json

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