@stacksjs/defaults 0.70.207 → 0.70.208

package/views/dashboard/realtime/index.stx

@@ -0,0 +1,429 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Realtime')
+<div class="py-4 lg:py-8 min-h-screen dark:bg-neutral-800">
+  <div class="px-4 sm:px-6 lg:px-8">
+    <div class="mb-8">
+      <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-neutral-100">Last 30 days</h3>
+
+      <dl class="grid gap-5 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-5">
+        <div class="overflow-hidden relative pt-5 px-4 sm:pt-6 sm:px-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
+          <dt>
+            <div class="absolute p-3 bg-blue-500 rounded-md">
+              <div class="h-6 w-6 text-white i-hugeicons-link-03"></div>
+            </div>
+            <p class="ml-16 font-medium text-gray-500 text-sm truncate dark:text-neutral-400">Connections Triggered</p>
+          </dt>
+          <dd class="flex items-baseline ml-16 pb-6 sm:pb-7">
+            <p class="font-semibold text-2xl text-gray-900 dark:text-neutral-100">{{ connectionsTriggered() }}</p>
+            <p class="flex items-baseline ml-2 font-semibold text-green-600 text-sm">
+              <svg class="flex-shrink-0 self-center h-5 w-5 text-green-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Increased by</span>
+              {{ connectionsChange() }}
+            </p>
+          </dd>
+        </div>
+
+        <div class="overflow-hidden relative pt-5 px-4 sm:pt-6 sm:px-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
+          <dt>
+            <div class="absolute p-3 bg-blue-500 rounded-md">
+              <div class="h-6 w-6 text-white i-hugeicons-alarm-clock"></div>
+            </div>
+            <p class="ml-16 font-medium text-gray-500 text-sm truncate dark:text-neutral-400">Average Latency</p>
+          </dt>
+          <dd class="flex items-baseline ml-16 pb-6 sm:pb-7">
+            <p class="font-semibold text-2xl text-gray-900 dark:text-neutral-100">{{ avgLatency() }}</p>
+            <p class="flex items-baseline ml-2 font-semibold text-green-600 text-sm">
+              <svg class="flex-shrink-0 self-center h-5 w-5 text-green-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Decreased by</span>
+              {{ latencyChange() }}
+            </p>
+          </dd>
+        </div>
+
+        <div class="overflow-hidden relative pt-5 px-4 sm:pt-6 sm:px-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
+          <dt>
+            <div class="absolute p-3 bg-blue-500 rounded-md">
+              <div class="h-6 w-6 text-white i-hugeicons-checkmark-circle-01"></div>
+            </div>
+            <p class="ml-16 font-medium text-gray-500 text-sm truncate dark:text-neutral-400">Success Rate</p>
+          </dt>
+          <dd class="flex items-baseline ml-16 pb-6 sm:pb-7">
+            <p class="font-semibold text-2xl text-gray-900 dark:text-neutral-100">{{ successRate() }}</p>
+            <p class="flex items-baseline ml-2 font-semibold text-red-600 text-sm">
+              <svg class="flex-shrink-0 self-center h-5 w-5 text-red-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Decreased by</span>
+              {{ successChange() }}
+            </p>
+          </dd>
+        </div>
+      </dl>
+    </div>
+
+    <div class="mb-8 p-4 bg-white dark:bg-neutral-700 rounded-lg shadow">
+      <div class="flex gap-4 items-center">
+        <div class="flex gap-2 items-center">
+          <label class="text-gray-700 text-sm dark:text-neutral-300">App:</label>
+          <input x-model="app" type="text" class="pl-3 pr-3 py-1.5 h-9 text-gray-900 text-sm dark:text-neutral-100 bg-gray-50 dark:bg-neutral-600 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600" />
+        </div>
+        <div class="flex gap-2 items-center">
+          <label class="text-gray-700 text-sm dark:text-neutral-300">Port:</label>
+          <input x-model="port" type="text" class="pl-3 pr-3 py-1.5 h-9 text-gray-900 text-sm dark:text-neutral-100 bg-gray-50 dark:bg-neutral-600 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600" />
+        </div>
+        <button type="button" @click="toggleConnection()" class="block px-3 py-2 font-semibold text-center text-sm text-white rounded-md focus-visible:outline-2 focus-visible:outline-offset-2 shadow-sm {{ isConnected() ? 'bg-red-600 hover:bg-red-500 focus-visible:outline-red-600' : 'bg-blue-600 hover:bg-blue-500 focus-visible:outline-blue-600' }}">{{ isConnected() ? 'Disconnect' : 'Connect' }}</button>
+      </div>
+      <div class="mt-4 text-gray-500 text-sm dark:text-neutral-400">{{ channelState }}</div>
+    </div>
+
+    <div class="mb-8 bg-white dark:bg-neutral-700 rounded-lg shadow">
+      <div class="p-6">
+        <div class="flex items-center justify-between mb-6">
+          <div>
+            <h3 class="font-medium text-base text-gray-900 dark:text-neutral-100">Realtime Statistics</h3>
+            <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Live monitoring of connections and messages</p>
+          </div>
+        </div>
+        <div class="relative h-[300px]">
+          <div :show="isLoading" class="flex absolute inset-0 z-10 items-center justify-center bg-opacity-75 bg-white dark:bg-neutral-700 dark:bg-opacity-75">
+            <div class="h-8 w-8 border-b-2 border-blue-500 rounded-full animate-spin"></div>
+          </div>
+          <canvas id="realtime_chart"></canvas>
+        </div>
+      </div>
+    </div>
+
+    <div class="mb-8 bg-white dark:bg-neutral-700 rounded-lg shadow">
+      <div class="p-6">
+        <h3 class="mb-4 font-medium text-base text-gray-900 dark:text-neutral-100">Event Creator</h3>
+        <div class="space-y-4">
+          <div>
+            <label class="block mb-1 font-medium text-gray-700 text-sm dark:text-neutral-300">Channel</label>
+            <input x-model="eventChannel" type="text" placeholder="chat.1" class="block px-3 py-1.5 h-9 w-full text-gray-900 text-sm dark:text-neutral-100 bg-gray-50 dark:bg-neutral-600 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600" />
+          </div>
+          <div>
+            <label class="block mb-1 font-medium text-gray-700 text-sm dark:text-neutral-300">Event</label>
+            <input x-model="eventName" type="text" placeholder="message.sent" class="block px-3 py-1.5 h-9 w-full text-gray-900 text-sm dark:text-neutral-100 bg-gray-50 dark:bg-neutral-600 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600" />
+          </div>
+          <div>
+            <label class="block mb-1 font-medium text-gray-700 text-sm dark:text-neutral-300">Data</label>
+            <textarea x-model="eventData" rows="3" placeholder='{"message": "Hello World!", "user_id": 1}' class="block px-3 py-1.5 w-full text-gray-900 text-sm dark:text-neutral-100 bg-gray-50 dark:bg-neutral-600 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600"></textarea>
+          </div>
+          <div class="flex justify-end">
+            <button @click="sendEvent()" type="button" class="px-3 py-2 font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm">Send event</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="bg-white dark:bg-neutral-700 rounded-lg shadow">
+      <div class="p-6">
+        <div class="flex items-center justify-between mb-4">
+          <h3 class="font-medium text-base text-gray-900 dark:text-neutral-100">Events</h3>
+          <div class="flex gap-4 items-center">
+            <div class="flex gap-2 items-center">
+              <label class="text-gray-700 text-sm dark:text-neutral-300">Filter:</label>
+              <select x-model="selectedEventType" class="pl-3 pr-8 py-1.5 h-9 text-gray-900 text-sm dark:text-neutral-100 bg-gray-50 dark:bg-neutral-600 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600">
+                <option value="">All Events</option>
+                <template :for="type in eventTypes">
+                  <option value="{{ type }}">{{ type }}</option>
+                </template>
+              </select>
+            </div>
+            <div class="flex gap-2 items-center">
+              <label class="text-gray-700 text-sm dark:text-neutral-300">Search:</label>
+              <input x-model="searchQuery" type="text" placeholder="Search events..." class="pl-3 pr-3 py-1.5 h-9 text-gray-900 text-sm dark:text-neutral-100 bg-gray-50 dark:bg-neutral-600 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600" />
+            </div>
+            <button @click="clearEvents()" type="button" class="px-3 py-2 font-semibold text-sm text-white bg-gray-600 hover:bg-gray-500 rounded-md focus-visible:outline-2 focus-visible:outline-gray-600 focus-visible:outline-offset-2 shadow-sm">Clear</button>
+          </div>
+        </div>
+        <div class="overflow-x-auto">
+          <table class="min-w-full divide-gray-300 divide-y dark:divide-neutral-600">
+            <thead>
+              <tr>
+                <th scope="col" class="py-3.5 w-32 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Type</th>
+                <th scope="col" class="px-3 py-3.5 w-48 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Socket</th>
+                <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Details</th>
+                <th scope="col" class="px-3 py-3.5 w-32 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Time</th>
+              </tr>
+            </thead>
+            <tbody class="divide-gray-200 divide-y dark:divide-neutral-600">
+              <template :for="(event, index) in filteredEvents">
+                <tr class="hover:bg-gray-50 dark:hover:bg-neutral-600">
+                  <td class="py-4 font-medium text-sm">
+                    <span class="{{ eventTypeClass(event.type) }} inline-flex items-center px-2 py-1 font-medium text-xs rounded">{{ event.type }}</span>
+                  </td>
+                  <td class="px-3 py-4 font-mono text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ event.socket || '-' }}</td>
+                  <td class="px-3 py-4 text-gray-500 text-sm dark:text-neutral-400">
+                    <div class="font-mono">{{ event.details }}</div>
+                    <div :show="{{ event.data ? 'true' : 'false' }}" class="mt-1 text-xs">
+                      <button @click="toggleEventData({{ index }})" class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">{{ isEventDataOpen(index) ? 'Hide Data' : 'Show Data' }}</button>
+                      <pre :show="isEventDataOpen({{ index }})" class="overflow-x-auto mt-2 p-2 bg-gray-50 dark:bg-neutral-800 rounded">{{ JSON.stringify(event.data, null, 2) }}</pre>
+                    </div>
+                  </td>
+                  <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ event.time }}</td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script client>
+
+interface WebSocketMessage {
+  socket_id?: string
+  channel?: string
+  event?: string
+  data?: unknown
+}
+
+interface RealtimeEvent {
+  type: string
+  socket: string | null
+  details: string | null
+  time: string
+  data?: unknown
+}
+
+interface ChartLike { destroy: () => void }
+type ChartCtor = new (canvas: HTMLElement, config: { type: string, data: unknown, options?: unknown }) => ChartLike
+
+const stats = state({
+  connectionsTriggered: '71,897',
+  connectionsChange: '+122',
+  avgLatency: '45ms',
+  latencyChange: '-12ms',
+  successRate: '94.57%',
+  successChange: '-3.2%',
+})
+
+const app = state('Stacks')
+const port = state('6001')
+const channelState = state('Channels current state is unavailable')
+
+const eventChannel = state('')
+const eventName = state('')
+const eventData = state('')
+
+const isConnected = state(false)
+const isLoading = state(false)
+
+const events = state<RealtimeEvent[]>([])
+const expandedEventIndices = state<number[]>([])
+const selectedEventType = state('')
+const searchQuery = state('')
+
+const MAX_EVENTS = 1000
+
+let ws: WebSocket | null = null
+let chartHandle: { destroy: () => void } | null = null
+
+function connectionsTriggered(): string { return stats().connectionsTriggered }
+function connectionsChange(): string { return stats().connectionsChange }
+function avgLatency(): string { return stats().avgLatency }
+function latencyChange(): string { return stats().latencyChange }
+function successRate(): string { return stats().successRate }
+function successChange(): string { return stats().successChange }
+
+function wsUrl(): string {
+  return `ws://localhost:${port()}`
+}
+
+function eventTypes(): string[] {
+  const types = new Set(events().map(e => e.type))
+  return Array.from(types)
+}
+
+function filteredEvents(): RealtimeEvent[] {
+  let filtered = events()
+  const type = selectedEventType()
+  if (type)
+    filtered = filtered.filter(e => e.type === type)
+
+  const q = searchQuery().toLowerCase()
+  if (q) {
+    filtered = filtered.filter(e =>
+      e.type.toLowerCase().includes(q)
+      || (e.socket?.toLowerCase().includes(q) ?? false)
+      || (e.details?.toLowerCase().includes(q) ?? false),
+    )
+  }
+  return filtered
+}
+
+function isEventDataOpen(index: number): boolean {
+  return expandedEventIndices().includes(index)
+}
+
+function toggleEventData(index: number): void {
+  const list = expandedEventIndices()
+  expandedEventIndices.set(list.includes(index) ? list.filter(i => i !== index) : [...list, index])
+}
+
+function eventTypeClass(type: string): string {
+  switch (type) {
+    case 'connection': return 'bg-blue-50 text-blue-700 dark:bg-blue-900 dark:text-blue-100'
+    case 'disconnection': return 'bg-yellow-50 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-100'
+    case 'error': return 'bg-red-50 text-red-700 dark:bg-red-900 dark:text-red-100'
+    case 'message': return 'bg-green-50 text-green-700 dark:bg-green-900 dark:text-green-100'
+    case 'sent': return 'bg-purple-50 text-purple-700 dark:bg-purple-900 dark:text-purple-100'
+    default: return 'bg-gray-50 text-gray-700 dark:bg-neutral-800 dark:text-neutral-200'
+  }
+}
+
+function addEvent(event: RealtimeEvent): void {
+  const next = [event, ...events()]
+  events.set(next.length > MAX_EVENTS ? next.slice(0, MAX_EVENTS) : next)
+  expandedEventIndices.set([])
+}
+
+function clearEvents(): void {
+  events.set([])
+  expandedEventIndices.set([])
+}
+
+function timeNow(): string {
+  return new Date().toLocaleTimeString('en-US', { hour12: false })
+}
+
+function connect(): void {
+  if (ws)
+    ws.close()
+
+  try {
+    const url = wsUrl()
+    ws = new WebSocket(url)
+
+    ws.onopen = () => {
+      isConnected.set(true)
+      channelState.set('Connected to WebSocket server')
+      addEvent({ type: 'connection', socket: null, details: `Connected to ${url}`, time: timeNow() })
+    }
+
+    ws.onclose = () => {
+      isConnected.set(false)
+      channelState.set('Disconnected from WebSocket server')
+      addEvent({ type: 'disconnection', socket: null, details: 'WebSocket connection closed', time: timeNow() })
+    }
+
+    ws.onerror = () => {
+      channelState.set('Error connecting to WebSocket server')
+      addEvent({ type: 'error', socket: null, details: 'WebSocket connection error', time: timeNow() })
+    }
+
+    ws.onmessage = (message: MessageEvent) => {
+      try {
+        const data = JSON.parse(message.data) as WebSocketMessage
+        addEvent({
+          type: 'message',
+          socket: data.socket_id || null,
+          details: `Channel: ${data.channel}, Event: ${data.event}`,
+          time: timeNow(),
+          data,
+        })
+      }
+      catch {
+        addEvent({ type: 'message', socket: null, details: String(message.data), time: timeNow() })
+      }
+    }
+  }
+  catch {
+    channelState.set('Failed to connect to WebSocket server')
+  }
+}
+
+function disconnect(): void {
+  if (ws) {
+    ws.close()
+    ws = null
+  }
+}
+
+function toggleConnection(): void {
+  if (isConnected())
+    disconnect()
+  else
+    connect()
+}
+
+function sendEvent(): void {
+  if (!ws || !eventChannel() || !eventName())
+    return
+  try {
+    const message = {
+      channel: eventChannel(),
+      event: eventName(),
+      data: eventData() ? JSON.parse(eventData()) : {},
+    }
+    ws.send(JSON.stringify(message))
+    addEvent({
+      type: 'sent',
+      socket: null,
+      details: `Sent event to channel: ${eventChannel()}, Event: ${eventName()}`,
+      time: timeNow(),
+      data: message,
+    })
+    eventChannel.set('')
+    eventName.set('')
+    eventData.set('')
+  }
+  catch (error) {
+    addEvent({ type: 'error', socket: null, details: `Failed to send event: ${(error as Error).message}`, time: timeNow() })
+  }
+}
+
+function getRealtimeData() {
+  const now = new Date()
+  const labels = Array.from({ length: 60 }, (_, i) => {
+    const d = new Date(now.getTime() - (59 - i) * 1000)
+    return `${d.getMinutes()}:${d.getSeconds().toString().padStart(2, '0')}`
+  })
+  return {
+    labels,
+    datasets: [
+      { label: 'Peak Connections', data: Array.from({ length: 60 }, () => Math.floor(Math.random() * 15)), borderColor: 'rgb(59, 130, 246)', backgroundColor: 'rgba(59, 130, 246, 0.1)', fill: false, tension: 0.4 },
+      { label: 'WebSocket Messages', data: Array.from({ length: 60 }, () => Math.floor(Math.random() * 5)), borderColor: 'rgb(245, 158, 11)', backgroundColor: 'rgba(245, 158, 11, 0.1)', fill: false, tension: 0.4 },
+      { label: 'API Messages', data: Array.from({ length: 60 }, () => Math.floor(Math.random() * 2)), borderColor: 'rgb(16, 185, 129)', backgroundColor: 'rgba(16, 185, 129, 0.1)', fill: false, tension: 0.4 },
+    ],
+  }
+}
+
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  scales: {
+    y: { beginAtZero: true, grid: { color: 'rgba(200, 200, 200, 0.1)' }, ticks: { color: 'rgb(156, 163, 175)', font: { family: "'JetBrains Mono', monospace" } } },
+    x: { grid: { display: false }, ticks: { color: 'rgb(156, 163, 175)', font: { family: "'JetBrains Mono', monospace" } } },
+  },
+  plugins: {
+    legend: { display: true, position: 'top', align: 'end', labels: { color: 'rgb(156, 163, 175)', font: { family: "'JetBrains Mono', monospace" }, boxWidth: 12, padding: 15 } },
+    tooltip: { mode: 'index', intersect: false },
+  },
+}
+
+onMount(async () => {
+  const { Chart, registerables } = await import('@stacksjs/charts')
+  Chart.register(...registerables)
+  const Ctor = Chart as unknown as ChartCtor
+  chartHandle = useChart({ Chart: Ctor, id: 'realtime_chart', type: 'line', data: getRealtimeData(), options: chartOptions })
+  connect()
+})
+
+onDestroy(() => {
+  disconnect()
+  chartHandle?.destroy()
+  chartHandle = null
+})
+</script>
+
+@endsection

package/views/dashboard/register.stx

@@ -0,0 +1,46 @@
+@extends('layouts/guest')
+
+@section('content')
+<script client>
+// Register form (stacksjs/stacks#1838) — see comment on login.stx; same
+// shape, same broken-`const`-reassignment fix.
+import { useAuth } from '../../functions/auth'
+
+const { register } = useAuth()
+
+const isLoading = state(false)
+const error = state('')
+
+async function handleRegister(credentials) {
+  isLoading.set(true)
+  error.set('')
+
+  try {
+    const result = await register(credentials)
+
+    if (result && 'errors' in result) {
+      error.set(result.message || 'Registration failed')
+      return
+    }
+
+    navigate('/')
+  }
+  catch (err) {
+    error.set(err.message || 'An error occurred during registration')
+    // eslint-disable-next-line no-console
+    console.error(err)
+  }
+  finally {
+    isLoading.set(false)
+  }
+}
+</script>
+
+@title('Register - Stacks Dashboard')
+<Register
+  @submit="handleRegister"
+  :isLoading="isLoading()"
+  :error="error()"
+/>
+
+@endsection