qarpeo 0.0.0-alpha.10

package/dist/runtime/app/pages/devtools/auth.vue

@@ -0,0 +1,351 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue"
+
+definePageMeta({ layout: false })
+
+interface UserRecord {
+  id: string
+  email: string
+  name?: string
+  avatarUrl?: string
+  role?: string
+  emailVerified?: number
+  createdAt: number
+  updatedAt?: number
+}
+
+interface SessionRecord {
+  id: string
+  userId: string
+  userName?: string
+  userEmail?: string
+  clientType?: string
+  userAgent?: string
+  ipAddress?: string
+  lastActive: number
+  expiresAt: number
+}
+
+const activeTab = ref<"users" | "sessions">("users")
+const searchQuery = ref("")
+const revokingId = ref<string | null>(null)
+
+const {
+  data: usersData,
+  pending: usersPending,
+  refresh: refreshUsers,
+} = useFetch<any>("/_qarpeo/api/auth/users", {
+  default: () => ({ users: [], total: 0, isDevMock: false }),
+})
+
+const {
+  data: sessionsData,
+  pending: sessionsPending,
+  refresh: refreshSessions,
+} = useFetch<any>("/_qarpeo/api/auth/sessions", {
+  default: () => ({ sessions: [], isDevMock: false }),
+})
+
+const users = computed<UserRecord[]>(() => usersData.value?.users || [])
+const sessions = computed<SessionRecord[]>(() => sessionsData.value?.sessions || [])
+const isDevMock = computed(
+  () => Boolean(usersData.value?.isDevMock || sessionsData.value?.isDevMock),
+)
+
+const filteredUsers = computed(() => {
+  if (!searchQuery.value.trim()) return users.value
+  const q = searchQuery.value.toLowerCase()
+  return users.value.filter(
+    (u) =>
+      u.email.toLowerCase().includes(q) ||
+      (u.name && u.name.toLowerCase().includes(q)) ||
+      (u.role && u.role.toLowerCase().includes(q)),
+  )
+})
+
+const filteredSessions = computed(() => {
+  if (!searchQuery.value.trim()) return sessions.value
+  const q = searchQuery.value.toLowerCase()
+  return sessions.value.filter(
+    (s) =>
+      (s.userEmail && s.userEmail.toLowerCase().includes(q)) ||
+      (s.userName && s.userName.toLowerCase().includes(q)) ||
+      (s.ipAddress && s.ipAddress.includes(q)) ||
+      (s.clientType && s.clientType.toLowerCase().includes(q)),
+  )
+})
+
+const stats = computed(() => {
+  const verifiedCount = users.value.filter((u) => Boolean(u.emailVerified)).length
+  const adminCount = users.value.filter((u) => u.role === "admin").length
+  return {
+    totalUsers: users.value.length,
+    activeSessions: sessions.value.length,
+    verifiedCount,
+    adminCount,
+  }
+})
+
+function fmtDate(ts?: number) {
+  if (!ts) return "—"
+  return new Date(ts).toLocaleDateString([], {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  })
+}
+
+function fmtRelative(ts?: number) {
+  if (!ts) return "—"
+  const diff = Date.now() - ts
+  const mins = Math.floor(diff / 60000)
+  if (mins < 1) return "Just now"
+  if (mins < 60) return `${mins}m ago`
+  const hours = Math.floor(mins / 60)
+  if (hours < 24) return `${hours}h ago`
+  return `${Math.floor(hours / 24)}d ago`
+}
+
+async function revokeSession(sessionId: string) {
+  revokingId.value = sessionId
+  try {
+    await $fetch("/_qarpeo/api/auth/revoke-session", {
+      method: "POST",
+      body: { sessionId },
+    })
+    await refreshSessions()
+  } finally {
+    revokingId.value = null
+  }
+}
+
+async function refreshAll() {
+  await Promise.all([refreshUsers(), refreshSessions()])
+}
+
+onMounted(() => {
+  refreshAll()
+})
+</script>
+
+<template>
+  <UDashboardPanel id="devtools-auth">
+    <template #header>
+      <UDashboardNavbar>
+        <template #title>
+          <div class="flex items-center gap-2">
+            <UIcon name="i-lucide-users" class="w-4 h-4 text-primary" />
+            <span class="font-bold text-sm text-highlighted">Auth & Users</span>
+            <UBadge size="xs" color="primary" variant="subtle">Tier 1 Auth</UBadge>
+            <UBadge v-if="isDevMock" size="xs" color="warning" variant="subtle" icon="i-lucide-flask-conical">
+              Preview Mode
+            </UBadge>
+          </div>
+        </template>
+
+        <template #right>
+          <div class="flex items-center gap-2">
+            <UButton
+              icon="i-lucide-refresh-cw"
+              size="xs"
+              color="neutral"
+              variant="ghost"
+              title="Refresh auth data"
+              :loading="usersPending || sessionsPending"
+              @click="refreshAll"
+            />
+          </div>
+        </template>
+      </UDashboardNavbar>
+
+      <!-- Toolbar with KPI cards and Search -->
+      <UDashboardToolbar>
+        <div class="flex flex-col gap-3 w-full py-2">
+          <!-- KPI Summary Grid -->
+          <div class="grid grid-cols-2 sm:grid-cols-4 gap-2 w-full">
+            <div class="p-2.5 rounded-lg border border-default bg-card">
+              <span class="text-xs text-muted">Total Users</span>
+              <p class="text-lg font-bold text-highlighted mt-0.5">{{ stats.totalUsers }}</p>
+            </div>
+            <div class="p-2.5 rounded-lg border border-default bg-card">
+              <span class="text-xs text-muted">Active Sessions</span>
+              <p class="text-lg font-bold text-highlighted mt-0.5">{{ stats.activeSessions }}</p>
+            </div>
+            <div class="p-2.5 rounded-lg border border-default bg-card">
+              <span class="text-xs text-muted">Verified Emails</span>
+              <p class="text-lg font-bold text-highlighted mt-0.5">{{ stats.verifiedCount }}</p>
+            </div>
+            <div class="p-2.5 rounded-lg border border-default bg-card">
+              <span class="text-xs text-muted">Administrators</span>
+              <p class="text-lg font-bold text-highlighted mt-0.5">{{ stats.adminCount }}</p>
+            </div>
+          </div>
+
+          <!-- Controls: Tabs + Search -->
+          <div class="flex items-center justify-between flex-wrap gap-2 pt-1 border-t border-default">
+            <div class="flex items-center gap-1 bg-muted p-0.5 rounded border border-default">
+              <UButton
+                label="Users"
+                icon="i-lucide-user"
+                size="xs"
+                :color="activeTab === 'users' ? 'primary' : 'neutral'"
+                :variant="activeTab === 'users' ? 'subtle' : 'ghost'"
+                @click="activeTab = 'users'"
+              >
+                <template #trailing>
+                  <UBadge size="xs" :color="activeTab === 'users' ? 'primary' : 'neutral'" variant="subtle">
+                    {{ users.length }}
+                  </UBadge>
+                </template>
+              </UButton>
+
+              <UButton
+                label="Active Sessions"
+                icon="i-lucide-shield-check"
+                size="xs"
+                :color="activeTab === 'sessions' ? 'primary' : 'neutral'"
+                :variant="activeTab === 'sessions' ? 'subtle' : 'ghost'"
+                @click="activeTab = 'sessions'"
+              >
+                <template #trailing>
+                  <UBadge size="xs" :color="activeTab === 'sessions' ? 'primary' : 'neutral'" variant="subtle">
+                    {{ sessions.length }}
+                  </UBadge>
+                </template>
+              </UButton>
+            </div>
+
+            <div class="w-full sm:w-64">
+              <UInput
+                v-model="searchQuery"
+                icon="i-lucide-search"
+                size="xs"
+                placeholder="Filter by name, email, IP..."
+                class="w-full"
+              />
+            </div>
+          </div>
+        </div>
+      </UDashboardToolbar>
+    </template>
+
+    <!-- Main Content Area -->
+    <div class="p-4 overflow-x-auto">
+      <!-- ─── USERS TAB ─────────────────────────────────────────────────────────── -->
+      <div v-if="activeTab === 'users'">
+        <div v-if="filteredUsers.length === 0" class="text-center py-12 text-muted">
+          <UIcon name="i-lucide-user-x" class="w-8 h-8 mx-auto mb-2 opacity-50" />
+          <p class="text-sm font-medium">No users found</p>
+          <p class="text-xs text-muted mt-1">Users register via OAuth, WebAuthn Passkeys, OTP, or Magic Links.</p>
+        </div>
+
+        <div v-else class="border border-default rounded-lg overflow-hidden bg-card">
+          <table class="w-full text-left text-xs">
+            <thead class="bg-muted border-b border-default text-muted font-medium">
+              <tr>
+                <th class="p-3">User</th>
+                <th class="p-3">Role</th>
+                <th class="p-3">Status</th>
+                <th class="p-3">Registered</th>
+                <th class="p-3">ID</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-default">
+              <tr v-for="u in filteredUsers" :key="u.id" class="hover:bg-muted/50 transition">
+                <td class="p-3">
+                  <div class="flex items-center gap-2.5">
+                    <div class="w-7 h-7 rounded-full bg-primary/10 border border-primary/20 flex items-center justify-center font-bold text-primary text-xs shrink-0">
+                      {{ (u.name || u.email).charAt(0).toUpperCase() }}
+                    </div>
+                    <div>
+                      <p class="font-medium text-highlighted">{{ u.name || "—" }}</p>
+                      <p class="text-[11px] text-muted font-mono">{{ u.email }}</p>
+                    </div>
+                  </div>
+                </td>
+                <td class="p-3">
+                  <UBadge size="xs" :color="u.role === 'admin' ? 'primary' : 'neutral'" variant="subtle">
+                    {{ u.role || 'user' }}
+                  </UBadge>
+                </td>
+                <td class="p-3">
+                  <UBadge size="xs" :color="u.emailVerified ? 'success' : 'neutral'" variant="subtle">
+                    {{ u.emailVerified ? 'Verified' : 'Unverified' }}
+                  </UBadge>
+                </td>
+                <td class="p-3 text-muted">
+                  {{ fmtDate(u.createdAt) }}
+                </td>
+                <td class="p-3 font-mono text-[11px] text-muted">
+                  {{ u.id }}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- ─── SESSIONS TAB ──────────────────────────────────────────────────────── -->
+      <div v-else-if="activeTab === 'sessions'">
+        <div v-if="filteredSessions.length === 0" class="text-center py-12 text-muted">
+          <UIcon name="i-lucide-shield-alert" class="w-8 h-8 mx-auto mb-2 opacity-50" />
+          <p class="text-sm font-medium">No active sessions</p>
+          <p class="text-xs text-muted mt-1">Sessions are tracked across D1 and KV.</p>
+        </div>
+
+        <div v-else class="border border-default rounded-lg overflow-hidden bg-card">
+          <table class="w-full text-left text-xs">
+            <thead class="bg-muted border-b border-default text-muted font-medium">
+              <tr>
+                <th class="p-3">User</th>
+                <th class="p-3">Client</th>
+                <th class="p-3">IP Address</th>
+                <th class="p-3">Last Active</th>
+                <th class="p-3">Expires</th>
+                <th class="p-3 text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-default">
+              <tr v-for="s in filteredSessions" :key="s.id" class="hover:bg-muted/50 transition">
+                <td class="p-3">
+                  <p class="font-medium text-highlighted">{{ s.userName || "Active User" }}</p>
+                  <p class="text-[11px] text-muted font-mono">{{ s.userEmail || s.userId }}</p>
+                </td>
+                <td class="p-3">
+                  <UBadge size="xs" color="neutral" variant="subtle">
+                    {{ s.clientType || 'web' }}
+                  </UBadge>
+                  <p class="text-[10px] text-muted truncate max-w-[200px] mt-0.5" :title="s.userAgent">
+                    {{ s.userAgent || '—' }}
+                  </p>
+                </td>
+                <td class="p-3 font-mono text-[11px]">
+                  {{ s.ipAddress || '—' }}
+                </td>
+                <td class="p-3 text-muted">
+                  {{ fmtRelative(s.lastActive) }}
+                </td>
+                <td class="p-3 text-muted">
+                  {{ fmtDate(s.expiresAt) }}
+                </td>
+                <td class="p-3 text-right">
+                  <UButton
+                    size="xs"
+                    color="error"
+                    variant="ghost"
+                    icon="i-lucide-log-out"
+                    label="Revoke"
+                    :loading="revokingId === s.id"
+                    @click="revokeSession(s.id)"
+                  />
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </UDashboardPanel>
+</template>