create-nexwire 4.3.0 → 4.4.0

package/fastify/src/resources/src/plugins/pulse.ts

@@ -0,0 +1,157 @@
+import { io, type Socket } from "socket.io-client";
+import type { App } from "vue";
+
+// 1. Read the value Vite inlines into this module. Do not use a bare `define`
+//    global here: in dev it is a window global and can survive a server
+//    restart or browser cache, leaving Pulse enabled after SOCKET=false.
+const isSocketEnabled = import.meta.env.VITE_SOCKET_ENABLED === true;
+
+type EventCallback<T = unknown> = (payload: T) => void;
+
+type ChannelBinding = {
+  event: string;
+  callback: EventCallback;
+  wrapped: EventCallback;
+};
+
+type PulseChannel = {
+  listen: <T = unknown>(event: string, callback: EventCallback<T>) => PulseChannel;
+  stopListening: (event: string, callback?: EventCallback) => PulseChannel;
+};
+
+export type PulseClient = {
+  connect: () => PulseClient;
+  disconnect: () => PulseClient;
+  channel: (name: string) => PulseChannel;
+  private: (room: string) => PulseChannel;
+  leave: (room: string) => PulseClient;
+};
+
+function createPulse(): PulseClient {
+  // 2. If disabled, return the no-op dummy client immediately
+  if (!isSocketEnabled) {
+    const dummyChannel = (): PulseChannel => ({
+      listen: () => dummyChannel(),
+      stopListening: () => dummyChannel()
+    });
+
+    const dummyClient: PulseClient = {
+      connect: () => dummyClient,
+      disconnect: () => dummyClient,
+      channel: dummyChannel,
+      private: dummyChannel,
+      leave: () => dummyClient
+    };
+
+    return dummyClient;
+  }
+
+  let socket: Socket | null = null;
+  const channels = new Map<string, ChannelBinding[]>();
+  const joinedRooms = new Set<string>();
+
+  const socketUrl = () => {
+    const explicit = import.meta.env.VITE_SOCKET_URL || import.meta.env.VITE_API_URL;
+    if (explicit) return explicit;
+    return window.location.origin;
+  };
+
+  const ensureConnected = () => {
+    if (socket) return socket;
+
+    socket = io(socketUrl(), {
+      withCredentials: true,
+      transports: ["websocket", "polling"]
+    });
+
+    socket.on("connect", () => {
+      for (const room of joinedRooms) {
+        socket?.emit("join", room);
+      }
+    });
+
+    return socket;
+  };
+
+  const channel = (name: string): PulseChannel => {
+    const room = String(name).trim();
+    if (!room) throw new Error("Channel name is required");
+
+    const currentSocket = ensureConnected();
+    joinedRooms.add(room);
+    currentSocket.emit("join", room);
+
+    const api: PulseChannel = {
+      listen: <T = unknown>(event: string, callback: EventCallback<T>) => {
+        const wrapped = (payload: unknown) => callback(payload as T);
+        const bindings = channels.get(room) || [];
+        bindings.push({ event, callback: callback as EventCallback, wrapped });
+        channels.set(room, bindings);
+        currentSocket.on(event, wrapped);
+        return api;
+      },
+      stopListening: (event: string, callback?: EventCallback) => {
+        const bindings = channels.get(room) || [];
+        const kept: ChannelBinding[] = [];
+
+        for (const binding of bindings) {
+          const matchesEvent = binding.event === event;
+          const matchesCallback = !callback || binding.callback === callback;
+          if (matchesEvent && matchesCallback) {
+            currentSocket.off(binding.event, binding.wrapped);
+          } else {
+            kept.push(binding);
+          }
+        }
+
+        if (kept.length > 0) channels.set(room, kept);
+        else channels.delete(room);
+        return api;
+      }
+    };
+
+    return api;
+  };
+
+  const pulse: PulseClient = {
+    connect: () => {
+      ensureConnected();
+      return pulse;
+    },
+    disconnect: () => {
+      socket?.disconnect();
+      socket = null;
+      return pulse;
+    },
+    channel,
+    private: (room: string) => channel(`private:${room}`),
+    leave: (room: string) => {
+      if (!socket) return pulse;
+
+      const bindings = channels.get(room) || [];
+      for (const binding of bindings) {
+        socket.off(binding.event, binding.wrapped);
+      }
+
+      channels.delete(room);
+      joinedRooms.delete(room);
+      return pulse;
+    }
+  };
+
+  return pulse;
+}
+
+export const pulse = createPulse();
+
+export const PulsePlugin = {
+  install(app: App) {
+    app.config.globalProperties.$pulse = pulse;
+  }
+};
+
+declare module "vue" {
+  interface ComponentCustomProperties {
+    $pulse: PulseClient;
+  }
+}

package/fastify/src/resources/src/plugins/routeProgress.ts

@@ -0,0 +1,87 @@
+import type { Router } from "vue-router";
+
+const BAR_ID = "app-route-progress";
+
+function ensureBar(): HTMLElement {
+  const existing = document.getElementById(BAR_ID);
+  if (existing) return existing;
+
+  const bar = document.createElement("div");
+  bar.id = BAR_ID;
+  bar.style.position = "fixed";
+  bar.style.top = "0";
+  bar.style.left = "0";
+  bar.style.right = "0";
+  bar.style.height = "2px";
+  bar.style.width = "100vw";
+  bar.style.opacity = "0";
+  bar.style.zIndex = "99999";
+  bar.style.pointerEvents = "none";
+  bar.style.background = "linear-gradient(90deg, #2563eb, #06b6d4)";
+  bar.style.boxShadow = "0 0 8px rgba(37, 99, 235, 0.5)";
+  bar.style.transformOrigin = "left center";
+  bar.style.transform = "scaleX(0)";
+  bar.style.transition = "transform 0.25s ease, opacity 0.2s ease";
+  document.body.appendChild(bar);
+  return bar;
+}
+
+export function setupRouteProgress(router: Router) {
+  if (typeof window === "undefined") return;
+
+  const bar = ensureBar();
+  let trickleTimer: number | null = null;
+  let finishTimer: number | null = null;
+
+  const clearTimers = () => {
+    if (trickleTimer !== null) {
+      window.clearInterval(trickleTimer);
+      trickleTimer = null;
+    }
+    if (finishTimer !== null) {
+      window.clearTimeout(finishTimer);
+      finishTimer = null;
+    }
+  };
+
+  const start = () => {
+    clearTimers();
+    bar.style.opacity = "1";
+    bar.dataset.progress = "0.18";
+    bar.style.transform = "scaleX(0.18)";
+
+    trickleTimer = window.setInterval(() => {
+      const current = Number.parseFloat(bar.dataset.progress || "0.18");
+      if (current >= 0.85) return;
+      const next = Math.min(current + Math.random() * 0.09, 0.85);
+      bar.dataset.progress = String(next);
+      bar.style.transform = `scaleX(${next})`;
+    }, 180);
+  };
+
+  const done = () => {
+    clearTimers();
+    bar.dataset.progress = "1";
+    bar.style.transform = "scaleX(1)";
+    finishTimer = window.setTimeout(() => {
+      bar.style.opacity = "0";
+      bar.style.transform = "scaleX(0)";
+      bar.dataset.progress = "0";
+    }, 220);
+  };
+
+  router.beforeEach((to, from) => {
+    if (to.path !== from.path) {
+      start();
+    }
+    return true;
+  });
+
+  router.afterEach(() => {
+    done();
+  });
+
+  router.onError(() => {
+    done();
+  });
+}

package/fastify/src/resources/src/router/index.ts

@@ -0,0 +1,85 @@
+import { createRouter, createWebHistory } from "vue-router";
+import { setupRouteProgress } from "@/plugins/routeProgress";
+import { useAuthStore } from "@/stores/auth";
+
+export const routes = [
+  {
+    path: "/",
+    name: "dashlayout",
+    component: () => import("@/layouts/Layout/index.vue"),
+    redirect: { path: "/" },
+    children: [
+      {
+        path: "/",
+        name: "dashboard",
+        component: () => import("@/pages/dashboard/index.vue"),
+        meta: { requiresAuth: true }
+      }
+    ]
+  },
+  {
+    path: "/login",
+    name: "authlayout",
+    component: () => import("@/layouts/AuthLayout.vue"),
+    children: [
+      {
+        path: "/register",
+        name: "register",
+        component: () => import("@/pages/auth/register.vue"),
+        meta: { guestOnly: true }
+      },
+      {
+        path: "/login",
+        name: "login",
+        component: () => import("@/pages/auth/login.vue"),
+        meta: { guestOnly: true }
+      },
+      {
+        path: "/forget-password",
+        name: "forget-password",
+        component: () => import("@/pages/auth/forgetPassword.vue"),
+        meta: { guestOnly: true }
+      },
+      {
+        path: "/reset-password",
+        name: "reset-password",
+        component: () => import("@/pages/auth/resetPassword.vue"),
+        meta: { guestOnly: true }
+      },
+      {
+        path: "/verify-email",
+        name: "verify-email",
+        component: () => import("@/pages/auth/verifyEmail.vue"),
+        meta: { guestOnly: true }
+      }
+    ]
+  }
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+  scrollBehavior: (_to, _from, savedPosition) => {
+    if (savedPosition) return savedPosition;
+    return { top: 0 };
+  }
+});
+
+setupRouteProgress(router);
+
+router.beforeEach(async (to) => {
+  const auth = useAuthStore();
+  await auth.bootstrap();
+
+  if (to.meta.requiresAuth && !auth.isAuthenticated) {
+    return { path: "/login", query: { redirect: to.fullPath } };
+  }
+
+  if (to.meta.guestOnly && auth.isAuthenticated) {
+    return { path: "/" };
+  }
+
+  return true;
+});
+
+export default router;

package/fastify/src/resources/src/stores/admin-ui.ts

@@ -0,0 +1,148 @@
+import { defineStore } from "pinia";
+import { computed, ref } from "vue";
+
+const THEME_KEY = "app-theme";
+const SIDEBAR_COLLAPSE_KEY = "sidebar-open-collapses";
+const SIDEBAR_SCROLL_KEY = "sidebar-scroll-top";
+type ThemeMode = "light" | "dark" | "auto";
+
+export const useAdminUiStore = defineStore("admin-ui", () => {
+  const sidebarOpen = ref(false);
+  const themeMode = ref<ThemeMode>("auto");
+  const sidebarOpenCollapseIds = ref<string[]>([]);
+  const sidebarScrollTop = ref(0);
+  let sidebarAccordionEl: HTMLElement | null = null;
+  let sidebarScrollListener: (() => void) | null = null;
+
+  const themeIcon = computed(() => {
+    if (themeMode.value === "light") return "bi-brightness-high-fill";
+    return "bi-moon-stars";
+  });
+
+  const toggleSidebar = () => {
+    sidebarOpen.value = !sidebarOpen.value;
+  };
+
+  const closeSidebar = () => {
+    sidebarOpen.value = false;
+  };
+
+  const applyTheme = (mode: ThemeMode) => {
+    themeMode.value = mode;
+    document.body.classList.remove("theme-light", "theme-dark", "theme-auto");
+    document.body.classList.add(`theme-${mode}`);
+    localStorage.setItem(THEME_KEY, mode);
+  };
+
+  const cycleTheme = () => {
+    const order: ThemeMode[] = ["light", "dark"];
+    const index = order.indexOf(themeMode.value);
+    applyTheme(order[(index + 1) % order.length]);
+  };
+
+  const initTheme = () => {
+    const saved = localStorage.getItem(THEME_KEY);
+    if (saved === "light" || saved === "dark") {
+      applyTheme(saved);
+      return;
+    }
+
+    applyTheme("light");
+  };
+
+  const cleanupTheme = () => {};
+
+  const loadSidebarCollapseIds = () => {
+    try {
+      const raw = localStorage.getItem(SIDEBAR_COLLAPSE_KEY);
+      sidebarOpenCollapseIds.value = raw ? (JSON.parse(raw) as string[]) : [];
+    } catch {
+      sidebarOpenCollapseIds.value = [];
+    }
+  };
+
+  const persistSidebarCollapseIds = () => {
+    localStorage.setItem(SIDEBAR_COLLAPSE_KEY, JSON.stringify(sidebarOpenCollapseIds.value));
+  };
+
+  const setSidebarCollapseOpen = (id: string, open: boolean) => {
+    const ids = new Set(sidebarOpenCollapseIds.value);
+    if (open) ids.add(id);
+    else ids.delete(id);
+    sidebarOpenCollapseIds.value = Array.from(ids);
+    persistSidebarCollapseIds();
+  };
+
+  const restoreSidebarCollapseState = () => {
+    sidebarOpenCollapseIds.value.forEach((id) => {
+      const collapse = document.getElementById(id);
+      if (!collapse) return;
+      collapse.classList.add("show");
+      const trigger = document.querySelector(`[data-bs-target="#${id}"]`);
+      if (trigger instanceof HTMLElement) {
+        trigger.classList.remove("collapsed");
+        trigger.setAttribute("aria-expanded", "true");
+      }
+    });
+  };
+
+  const onSidebarCollapseShown = (event: Event) => {
+    const target = event.target as HTMLElement | null;
+    if (!target?.id) return;
+    setSidebarCollapseOpen(target.id, true);
+  };
+
+  const onSidebarCollapseHidden = (event: Event) => {
+    const target = event.target as HTMLElement | null;
+    if (!target?.id) return;
+    setSidebarCollapseOpen(target.id, false);
+  };
+
+  const initSidebarCollapsePersistence = () => {
+    loadSidebarCollapseIds();
+    restoreSidebarCollapseState();
+
+    const sidebarAccordion = document.querySelector(".sidebar .accordion");
+    if (sidebarAccordion instanceof HTMLElement) {
+      const storedTop = Number(localStorage.getItem(SIDEBAR_SCROLL_KEY) || "0");
+      sidebarScrollTop.value = Number.isFinite(storedTop) ? storedTop : 0;
+      sidebarAccordion.scrollTop = sidebarScrollTop.value;
+
+      sidebarAccordionEl = sidebarAccordion;
+      sidebarScrollListener = () => {
+        sidebarScrollTop.value = sidebarAccordion.scrollTop;
+        localStorage.setItem(SIDEBAR_SCROLL_KEY, String(sidebarScrollTop.value));
+      };
+
+      sidebarAccordion.addEventListener("scroll", sidebarScrollListener, { passive: true });
+    }
+
+    document.addEventListener("shown.bs.collapse", onSidebarCollapseShown);
+    document.addEventListener("hidden.bs.collapse", onSidebarCollapseHidden);
+  };
+
+  const cleanupSidebarCollapsePersistence = () => {
+    if (sidebarAccordionEl && sidebarScrollListener) {
+      sidebarAccordionEl.removeEventListener("scroll", sidebarScrollListener);
+    }
+    sidebarAccordionEl = null;
+    sidebarScrollListener = null;
+    document.removeEventListener("shown.bs.collapse", onSidebarCollapseShown);
+    document.removeEventListener("hidden.bs.collapse", onSidebarCollapseHidden);
+  };
+
+  return {
+    sidebarOpen,
+    themeMode,
+    themeIcon,
+    toggleSidebar,
+    closeSidebar,
+    applyTheme,
+    cycleTheme,
+    initTheme,
+    cleanupTheme,
+    sidebarOpenCollapseIds,
+    initSidebarCollapsePersistence,
+    cleanupSidebarCollapsePersistence
+  };
+});

package/fastify/src/resources/src/stores/auth.ts

@@ -0,0 +1,187 @@
+import axios from "axios";
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { type AuthUser, clearUser, setUser } from "@/composables/useAuth";
+
+export type LoginPayload = { email?: string; phone?: string; password: string; remember?: boolean };
+export type VerifyEmailPayload = { email: string; token: string };
+export type ForgotPayload = { email: string };
+
+export type RegisterPayload = {
+  name: string;
+  email?: string;
+  phone?: string;
+  password: string;
+  password_confirmation: string;
+};
+
+export type ResetPayload = {
+  email: string;
+  token: string;
+  password: string;
+  password_confirmation: string;
+};
+
+type ApiResponse<T> = { message: string; data?: T };
+type AuthData = { user: AuthUser };
+
+async function request<T>(method: "GET" | "POST", path: string, payload?: unknown): Promise<ApiResponse<T>> {
+  try {
+    const response = await axios.request<ApiResponse<T>>({
+      method,
+      url: `/api/auth${path}`,
+      data: payload
+    });
+
+    return response.data;
+  } catch (error: unknown) {
+    if (axios.isAxiosError(error)) {
+      // Keep the AxiosError so Gum can read `response.data` and populate
+      // form.errors, but show the API's message instead of axios's generic one.
+      error.message = String(error.response?.data?.message || error.message || "Request failed");
+      throw error;
+    }
+    throw new Error("Request failed");
+  }
+}
+
+const MAX_BOOTSTRAP_ATTEMPTS = 5;
+const BOOTSTRAP_BACKOFF_MS = 500;
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+export const useAuthStore = defineStore("auth", () => {
+  const user = ref<AuthUser | null>(null);
+  const isAuthenticated = ref(false);
+  const processing = ref(false);
+  const initialized = ref(false);
+
+  const syncUser = (value: AuthUser | null) => {
+    user.value = value;
+    isAuthenticated.value = !!value;
+    if (value) setUser(value);
+    else clearUser();
+  };
+
+  let bootstrapPromise: Promise<void> | null = null;
+  const bootstrap = async () => {
+    if (initialized.value) return;
+
+    // Reuse the same request if multiple navigations call bootstrap.
+    if (bootstrapPromise) {
+      return bootstrapPromise;
+    }
+
+    bootstrapPromise = (async () => {
+      for (let attempt = 1; attempt <= MAX_BOOTSTRAP_ATTEMPTS; attempt++) {
+        try {
+          const response = await axios.get<ApiResponse<AuthUser>>("/api/auth/me");
+
+          syncUser((response.data?.data || null) as AuthUser | null);
+          initialized.value = true;
+          return;
+        } catch (error) {
+          const backendUnreachable = axios.isAxiosError(error) && !error.response;
+
+          if (!backendUnreachable || attempt === MAX_BOOTSTRAP_ATTEMPTS) {
+            syncUser(null);
+            initialized.value = true;
+            return;
+          }
+
+          await sleep(BOOTSTRAP_BACKOFF_MS * 2 ** (attempt - 1));
+        }
+      }
+    })();
+
+    try {
+      await bootstrapPromise;
+    } finally {
+      bootstrapPromise = null;
+    }
+  };
+
+  const login = async (payload: LoginPayload) => {
+    processing.value = true;
+    try {
+      const data = await request<AuthData>("POST", "/login", payload);
+      syncUser((data?.data?.user || null) as AuthUser | null);
+      initialized.value = true;
+      return data.message || "Login successful";
+    } finally {
+      processing.value = false;
+    }
+  };
+
+  const register = async (payload: RegisterPayload) => {
+    processing.value = true;
+    try {
+      const data = await request<AuthData>("POST", "/register", payload);
+      const createdUser = (data?.data?.user || null) as AuthUser | null;
+      if (createdUser) {
+        syncUser(createdUser);
+        initialized.value = true;
+      } else {
+        syncUser(null);
+      }
+      return data.message || "Registration successful";
+    } finally {
+      processing.value = false;
+    }
+  };
+
+  const verifyEmail = async (payload: VerifyEmailPayload) => {
+    processing.value = true;
+    try {
+      const data = await request<unknown>("POST", "/verify-email", payload);
+      return data.message || "Email verified successfully";
+    } finally {
+      processing.value = false;
+    }
+  };
+
+  const forgotPassword = async (payload: ForgotPayload) => {
+    processing.value = true;
+    try {
+      const data = await request<unknown>("POST", "/forgot-password", payload);
+      return data.message || "If this email exists, a reset link has been sent";
+    } finally {
+      processing.value = false;
+    }
+  };
+
+  const resetPassword = async (payload: ResetPayload) => {
+    processing.value = true;
+    try {
+      const data = await request<unknown>("POST", "/reset-password", payload);
+      return data.message || "Password reset successfully";
+    } finally {
+      processing.value = false;
+    }
+  };
+
+  const logout = async () => {
+    processing.value = true;
+    try {
+      await request<unknown>("POST", "/logout");
+    } finally {
+      syncUser(null);
+      processing.value = false;
+      initialized.value = true;
+    }
+  };
+
+  return {
+    user,
+    isAuthenticated,
+    processing,
+    initialized,
+    bootstrap,
+    register,
+    login,
+    forgotPassword,
+    resetPassword,
+    verifyEmail,
+    logout
+  };
+});

package/fastify/src/resources/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "strict": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "types": ["vite/client", "vue"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue", "../types/global.d.ts"]
+}