@escalated-dev/escalated 0.11.10 → 0.12.1

package/src/composables/useRealtime.js

@@ -1,179 +1,140 @@
-import { ref, onUnmounted, readonly } from 'vue';
+import { ref, onUnmounted, readonly, toValue, watch } from 'vue';
+
+// Multiple components can listen to the same channel. A component leaving must
+// not disconnect the ticket updates or presence owned by another component.
+const leases = new WeakMap();
+function retainChannel(echo, name, presence) {
+    const key = `${presence ? 'presence' : 'private'}-${name}`;
+    let counts = leases.get(echo);
+    if (!counts) leases.set(echo, (counts = new Map()));
+    counts.set(key, (counts.get(key) || 0) + 1);
+    return () => {
+        const count = counts.get(key) - 1;
+        if (count > 0) counts.set(key, count);
+        else {
+            counts.delete(key);
+            if (echo.leaveChannel) echo.leaveChannel(key);
+            else echo.leave(presence ? `presence-${name}` : name);
+        }
+    };
+}
 
-/**
- * Composable for real-time WebSocket event listening via Laravel Echo.
- *
- * If `window.Echo` is available (provided by the host app), this composable
- * subscribes to private channels and listens for broadcast events. When Echo
- * is not present, it silently falls back - the caller can check `echoAvailable`
- * and implement polling as needed.
- *
- * Usage:
- *   const { echoAvailable, subscribeToTicket, subscribeToTickets, subscribeToAgent } = useRealtime();
- *
- * All subscriptions are automatically cleaned up on component unmount.
- */
-export function useRealtime() {
+/** Optional channelPrefix accepts a value, ref or getter. Older backends use escalated. */
+export function useRealtime(options = {}) {
     const echoAvailable = ref(typeof window !== 'undefined' && !!window.Echo);
-    const subscriptions = [];
+    const subscriptions = new Set();
+
+    function track(cleanup) {
+        let active = true;
+        const stop = () => {
+            if (!active) return;
+            active = false;
+            subscriptions.delete(stop);
+            cleanup();
+        };
+        subscriptions.add(stop);
+        return stop;
+    }
 
-    /**
-     * Subscribe to a private channel and listen for an event.
-     * Returns an unsubscribe function.
-     */
+    // Raw channel names remain literal for existing integrations.
     function listen(channelName, eventName, callback) {
         if (!echoAvailable.value) return () => {};
-
-        const channel = window.Echo.private(channelName);
-        channel.listen(eventName, callback);
-
-        const unsub = () => {
-            channel.stopListening(eventName, callback);
-            window.Echo.leave(channelName);
+        const echo = window.Echo;
+        const channel = echo.private(channelName);
+        const release = retainChannel(echo, channelName, false);
+        let active = true;
+        const guarded = (...args) => {
+            if (active) callback(...args);
         };
-        subscriptions.push(unsub);
-        return unsub;
+        channel.listen(eventName, guarded);
+        return track(() => {
+            active = false;
+            channel.stopListening(eventName, guarded);
+            release();
+        });
     }
 
-    /**
-     * Subscribe to a specific ticket's channel for real-time updates.
-     *
-     * @param {number|string} ticketId - The ticket ID
-     * @param {Object} handlers - Event handler callbacks
-     * @param {Function} [handlers.onReplyCreated] - Called when a new reply is added
-     * @param {Function} [handlers.onTicketUpdated] - Called when ticket fields are updated
-     * @param {Function} [handlers.onStatusChanged] - Called when ticket status changes
-     * @param {Function} [handlers.onTicketAssigned] - Called when ticket is assigned
-     * @param {Function} [handlers.onTicketEscalated] - Called when ticket is escalated
-     * @returns {Function} Unsubscribe function
-     */
-    function subscribeToTicket(ticketId, handlers = {}) {
-        if (!echoAvailable.value) return () => {};
-
-        const channelName = `escalated.tickets.${ticketId}`;
-        const channel = window.Echo.private(channelName);
-        const listeners = [];
-
-        if (handlers.onReplyCreated) {
-            channel.listen('.reply.created', handlers.onReplyCreated);
-            listeners.push(['.reply.created', handlers.onReplyCreated]);
-        }
-        if (handlers.onTicketUpdated) {
-            channel.listen('.ticket.updated', handlers.onTicketUpdated);
-            listeners.push(['.ticket.updated', handlers.onTicketUpdated]);
-        }
-        if (handlers.onStatusChanged) {
-            channel.listen('.ticket.status_changed', handlers.onStatusChanged);
-            listeners.push(['.ticket.status_changed', handlers.onStatusChanged]);
-        }
-        if (handlers.onTicketAssigned) {
-            channel.listen('.ticket.assigned', handlers.onTicketAssigned);
-            listeners.push(['.ticket.assigned', handlers.onTicketAssigned]);
-        }
-        if (handlers.onTicketEscalated) {
-            channel.listen('.ticket.escalated', handlers.onTicketEscalated);
-            listeners.push(['.ticket.escalated', handlers.onTicketEscalated]);
-        }
-
-        const unsub = () => {
-            listeners.forEach(([event, cb]) => channel.stopListening(event, cb));
-            window.Echo.leave(channelName);
+    function scopedSubscription(suffix, handlers, presence = false) {
+        let currentChannel = null;
+        const stopWatch = watch(
+            () => {
+                const tail = toValue(suffix);
+                return tail == null ? null : `${toValue(options.channelPrefix) ?? 'escalated'}.${tail}`;
+            },
+            (name, previous, onCleanup) => {
+                if (!name || !echoAvailable.value) return;
+                const echo = window.Echo;
+                const channel = presence ? echo.join(name) : echo.private(name);
+                currentChannel = channel;
+                const release = retainChannel(echo, name, presence);
+                let active = true;
+                const listeners = Object.entries(handlers)
+                    .filter(([, callback]) => typeof callback === 'function')
+                    .map(([event, callback]) => {
+                        // Ignore an old socket callback already queued during account navigation.
+                        const guarded = (...args) => {
+                            if (active) callback(...args);
+                        };
+                        if (presence) channel[event](guarded);
+                        else channel.listen(event, guarded);
+                        return [event, guarded];
+                    });
+                onCleanup(() => {
+                    active = false;
+                    currentChannel = null;
+                    if (!presence) listeners.forEach(([event, callback]) => channel.stopListening(event, callback));
+                    release();
+                });
+            },
+            { immediate: true, flush: 'sync' },
+        );
+        return {
+            get channel() {
+                return currentChannel;
+            },
+            unsubscribe: track(stopWatch),
         };
-        subscriptions.push(unsub);
-        return unsub;
     }
 
-    /**
-     * Subscribe to the global tickets channel for new ticket notifications.
-     *
-     * @param {Object} handlers - Event handler callbacks
-     * @param {Function} [handlers.onTicketCreated] - Called when a new ticket is created
-     * @returns {Function} Unsubscribe function
-     */
-    function subscribeToTickets(handlers = {}) {
-        if (!echoAvailable.value) return () => {};
+    function listenScoped(suffix, handlers) {
+        return scopedSubscription(suffix, handlers).unsubscribe;
+    }
 
-        const channelName = 'escalated.tickets';
-        const channel = window.Echo.private(channelName);
-        const listeners = [];
+    function identitySuffix(kind, id) {
+        return () => (toValue(id) == null ? null : `${kind}.${toValue(id)}`);
+    }
 
-        if (handlers.onTicketCreated) {
-            channel.listen('.ticket.created', handlers.onTicketCreated);
-            listeners.push(['.ticket.created', handlers.onTicketCreated]);
-        }
+    function subscribeToTicket(ticketId, handlers = {}) {
+        return listenScoped(identitySuffix('tickets', ticketId), {
+            '.reply.created': handlers.onReplyCreated,
+            '.ticket.updated': handlers.onTicketUpdated,
+            '.ticket.status_changed': handlers.onStatusChanged,
+            '.ticket.assigned': handlers.onTicketAssigned,
+            '.ticket.escalated': handlers.onTicketEscalated,
+        });
+    }
 
-        const unsub = () => {
-            listeners.forEach(([event, cb]) => channel.stopListening(event, cb));
-            window.Echo.leave(channelName);
-        };
-        subscriptions.push(unsub);
-        return unsub;
+    function subscribeToTickets(handlers = {}) {
+        return listenScoped('tickets', { '.ticket.created': handlers.onTicketCreated });
     }
 
-    /**
-     * Subscribe to an agent's personal channel for assignment notifications.
-     *
-     * @param {number|string} agentId - The agent's user ID
-     * @param {Object} handlers - Event handler callbacks
-     * @param {Function} [handlers.onTicketAssigned] - Called when a ticket is assigned to this agent
-     * @returns {Function} Unsubscribe function
-     */
     function subscribeToAgent(agentId, handlers = {}) {
-        if (!echoAvailable.value) return () => {};
-
-        const channelName = `escalated.agents.${agentId}`;
-        const channel = window.Echo.private(channelName);
-        const listeners = [];
-
-        if (handlers.onTicketAssigned) {
-            channel.listen('.ticket.assigned', handlers.onTicketAssigned);
-            listeners.push(['.ticket.assigned', handlers.onTicketAssigned]);
-        }
-
-        const unsub = () => {
-            listeners.forEach(([event, cb]) => channel.stopListening(event, cb));
-            window.Echo.leave(channelName);
-        };
-        subscriptions.push(unsub);
-        return unsub;
+        return listenScoped(identitySuffix('agents', agentId), { '.ticket.assigned': handlers.onTicketAssigned });
     }
 
-    /**
-     * Get a presence channel for a ticket (if Echo supports it).
-     * Returns the channel instance or null.
-     */
     function joinTicketPresence(ticketId, callbacks = {}) {
         if (!echoAvailable.value) return null;
-
-        const channelName = `escalated.tickets.${ticketId}`;
-        const channel = window.Echo.join(channelName);
-
-        if (callbacks.here) channel.here(callbacks.here);
-        if (callbacks.joining) channel.joining(callbacks.joining);
-        if (callbacks.leaving) channel.leaving(callbacks.leaving);
-
-        const unsub = () => {
-            window.Echo.leave(`presence-${channelName}`);
-        };
-        subscriptions.push(unsub);
-        return { channel, unsubscribe: unsub };
+        return scopedSubscription(identitySuffix('tickets', ticketId), callbacks, true);
     }
 
-    // Cleanup all subscriptions on component unmount
     onUnmounted(() => {
-        subscriptions.forEach((unsub) => {
-            try {
-                unsub();
-            } catch {
-                /* ignore */
-            }
-        });
-        subscriptions.length = 0;
+        [...subscriptions].forEach((unsubscribe) => unsubscribe());
     });
 
     return {
         echoAvailable: readonly(echoAvailable),
         listen,
+        listenScoped,
         subscribeToTicket,
         subscribeToTickets,
         subscribeToAgent,

package/src/pages/Admin/ApiTokens/Index.vue

@@ -2,6 +2,7 @@
 import { ref, computed, inject } from 'vue';
 import { useForm, usePage } from '@inertiajs/vue3';
 import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { readFlash } from '../../../utils/flash';
 
 defineProps({
     tokens: Array,
@@ -33,10 +34,8 @@ function createToken() {
     form.post(`${prefix.value}/admin/api-tokens`, {
         preserveScroll: true,
         onSuccess: (page) => {
-            const flash = page.props.flash || {};
-            if (flash.plain_text_token) {
-                copiedToken.value = flash.plain_text_token;
-            }
+            const token = readFlash(page).plain_text_token;
+            copiedToken.value = typeof token === 'string' ? token : null;
             form.reset();
             showCreate.value = false;
         },

package/src/pages/Admin/Settings/TwoFactor.vue

@@ -2,7 +2,8 @@
 import EscalatedLayout from '../../../components/EscalatedLayout.vue';
 import TwoFactorSetup from '../../../components/TwoFactorSetup.vue';
 import { router, usePage } from '@inertiajs/vue3';
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
+import { readFlash } from '../../../utils/flash';
 
 defineProps({
     enabled: { type: Boolean, default: false },
@@ -11,17 +12,28 @@ defineProps({
 
 const page = usePage();
 const showSetup = ref(false);
-const setupData = computed(() => page.props.flash?.two_factor_setup);
-const confirmedData = computed(() => page.props.flash?.two_factor_confirmed);
+const startingSetup = ref(false);
+const flash = computed(() => readFlash(page));
+const setupData = computed(() => flash.value.two_factor_setup);
+const confirmedData = computed(() => flash.value.two_factor_confirmed);
+const copyError = ref('');
+
+watch(setupData, (data) => (showSetup.value = Boolean(data)), { immediate: true });
+watch(confirmedData, () => (copyError.value = ''));
 
 function startSetup() {
+    if (startingSetup.value) return;
+    startingSetup.value = true;
     router.post(
         route('escalated.admin.two-factor.setup'),
         {},
         {
             preserveScroll: true,
             onSuccess: () => {
-                showSetup.value = true;
+                showSetup.value = Boolean(setupData.value);
+            },
+            onFinish: () => {
+                startingSetup.value = false;
             },
         },
     );
@@ -48,6 +60,18 @@ function disable() {
         );
     }
 }
+
+async function copyRecoveryCodes() {
+    const codes = confirmedData.value?.recovery_codes;
+    if (!codes?.length) return;
+    copyError.value = '';
+    try {
+        if (!navigator.clipboard?.writeText) throw new Error('Clipboard unavailable');
+        await navigator.clipboard.writeText(codes.join('\n'));
+    } catch {
+        copyError.value = 'Could not copy recovery codes. Select and copy the codes below.';
+    }
+}
 </script>
 
 <template>
@@ -75,7 +99,7 @@ function disable() {
                             Disable 2FA
                         </button>
                     </div>
-                    <div v-else-if="!showSetup && !setupData">
+                    <div v-else-if="!showSetup">
                         <span
                             class="mb-3 inline-flex items-center rounded-full bg-neutral-700/50 px-3 py-1 text-xs font-medium text-[var(--esc-panel-text-tertiary)]"
                         >
@@ -84,6 +108,8 @@ function disable() {
                         <div class="mt-3">
                             <button
                                 type="button"
+                                :disabled="startingSetup"
+                                :aria-busy="startingSetup"
                                 class="rounded-lg bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] px-5 py-2 text-sm font-medium text-white shadow-lg shadow-[var(--esc-panel-bg)]/20 transition-all hover:from-[var(--esc-panel-accent-hover)] hover:to-[var(--esc-panel-accent-secondary-hover)]"
                                 @click="startSetup"
                             >
@@ -96,7 +122,7 @@ function disable() {
 
             <!-- Setup Wizard -->
             <div
-                v-if="setupData && !enabled"
+                v-if="showSetup && setupData && !enabled"
                 class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6"
             >
                 <TwoFactorSetup :qr-uri="setupData.qr_uri" @confirm="confirmCode" @cancel="showSetup = false" />
@@ -116,11 +142,12 @@ function disable() {
                     <button
                         type="button"
                         class="rounded-lg border border-[var(--esc-panel-border)] px-4 py-2 text-sm text-[var(--esc-panel-text-secondary)] hover:bg-[var(--esc-panel-surface-alt)]"
-                        @click="navigator.clipboard?.writeText(confirmedData.recovery_codes.join('\n'))"
+                        @click="copyRecoveryCodes"
                     >
                         Copy Codes
                     </button>
                 </div>
+                <p v-if="copyError" role="alert" class="mt-3 text-sm text-rose-400">{{ copyError }}</p>
                 <div class="mt-4 grid gap-2 md:grid-cols-2">
                     <code
                         v-for="code in confirmedData.recovery_codes"