create-nexwire 4.0.0

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

@@ -0,0 +1,147 @@
+import { io, type Socket } from "socket.io-client";
+import type { App } from "vue";
+
+declare const __SOCKET_ENABLED__: boolean;
+
+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 {
+  if (!__SOCKET_ENABLED__) {
+    const n = (): PulseChannel => ({ listen: () => n(), stopListening: () => n() });
+    const c: PulseClient = {
+      connect: () => c,
+      disconnect: () => c,
+      channel: n,
+      private: n,
+      leave: () => c
+    };
+    return c;
+  }
+  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/express/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/express/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/express/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/express/src/resources/src/stores/auth.ts

@@ -0,0 +1,164 @@
+import axios from "axios";
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { type AuthUser, clearUser, setUser } from "@/composables/useAuth";
+
+type LoginPayload = { email: string; password: string; remember?: boolean };
+type RegisterPayload = {
+  name: string;
+  email: string;
+  password: string;
+  password_confirmation: string;
+};
+type VerifyEmailPayload = { email: string; token: string };
+type ForgotPayload = { email: string };
+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)) {
+      throw new Error(String(error.response?.data?.message || error.message || "Request failed"));
+    }
+    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();
+  };
+
+  const bootstrap = async () => {
+    if (initialized.value) return;
+
+    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);
+        break;
+      } catch (error) {
+        const backendUnreachable = axios.isAxiosError(error) && !error.response;
+        if (!backendUnreachable || attempt === MAX_BOOTSTRAP_ATTEMPTS) {
+          syncUser(null);
+          break;
+        }
+        await sleep(BOOTSTRAP_BACKOFF_MS * 2 ** (attempt - 1));
+      }
+    }
+
+    initialized.value = true;
+  };
+
+  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/express/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"]
+}

package/express/src/resources/vite.config.ts

@@ -0,0 +1,46 @@
+import path from "node:path";
+import { fileURLToPath, URL } from "node:url";
+import vue from "@vitejs/plugin-vue";
+import { defineConfig } from "vite";
+
+const cacheBase = process.env.LOCALAPPDATA || process.env.TEMP || ".";
+const apiUrl = process.env.APP_URL || "http://localhost:3000";
+const socketEnabled = process.env.SOCKET !== "false";
+
+const proxy: Record<string, any> = {
+  "/api": { target: apiUrl, changeOrigin: true },
+  "/health": { target: apiUrl, changeOrigin: true },
+  "/storage": { target: apiUrl, changeOrigin: true }
+};
+
+proxy["/socket.io"] = { target: apiUrl, changeOrigin: true, ws: true };
+
+export default defineConfig({
+  define: {
+    __SOCKET_ENABLED__: socketEnabled,
+    __API_URL__: JSON.stringify(apiUrl)
+  },
+  root: "src/resources",
+  cacheDir: path.join(cacheBase, "nexwire", "vite-cache", "resources"),
+  plugins: [vue()],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        quietDeps: true
+      }
+    }
+  },
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url))
+    }
+  },
+  build: {
+    outDir: "../../public",
+    emptyOutDir: true
+  },
+  server: {
+    port: 5173,
+    proxy
+  }
+});