create-nexwire 4.2.5 → 4.4.0

package/express/src/framework/support/mail.ts

@@ -1,6 +1,6 @@
 import nodemailer from "nodemailer";
 import { mailConfig } from "@/config/index.js";
-import { CircuitBreaker } from "@/framework/circuit-breaker/cb.js";
+import { createCircuitBreaker, isCircuitBreakerError } from "@/framework/circuit-breaker/cb.js";
 import { logger } from "@/framework/support/logger.js";
 
 type MailPayload = {
@@ -17,7 +17,7 @@ const transport = nodemailer.createTransport({
   auth: mailConfig.username ? { user: mailConfig.username, pass: mailConfig.password } : undefined
 });
 
-const mailBreaker = new CircuitBreaker();
+const mailBreaker = createCircuitBreaker({ name: "SMTP Mail" });
 
 export const mail = {
   /**
@@ -35,11 +35,19 @@ export const mail = {
         })
       );
     } catch (error) {
-      logger.error("Mail send failed", {
-        to: payload.to,
-        subject: payload.subject,
-        error: error instanceof Error ? error.message : error
-      });
+      // Distinguish between a Circuit Breaker rejection and an actual SMTP failure
+      if (isCircuitBreakerError(error)) {
+        logger.warn("Mail send skipped: Circuit breaker is open", {
+          to: payload.to,
+          subject: payload.subject
+        });
+      } else {
+        logger.error("Mail send failed", {
+          to: payload.to,
+          subject: payload.subject,
+          error: error instanceof Error ? error.message : error
+        });
+      }
 
       if (!mailConfig.failSilent) throw error;
       return null;

package/express/src/middlewares/auth-middleware.ts

@@ -1,6 +1,5 @@
 import { type NextFunction, type Request, type Response } from "express";
-import { cookie, HttpStatusCodes, jwt } from "@/framework/facade.js";
-import { resolveAuthProvider } from "@/framework/providers/adapter.js";
+import { cookie, HttpStatusCodes, jwt, resolveAuthProvider } from "@/framework/facade.js";
 
 export async function authMiddleware(req: Request, res: Response, next: NextFunction) {
   const provider = await resolveAuthProvider();

package/express/src/middlewares/role-middleware.ts

@@ -1,22 +1,12 @@
 import type { NextFunction, Request, Response } from "express";
 import { HttpStatusCodes } from "@/framework/facade.js";
 
-type AuthPayload = {
-  role?: string | null;
-};
-
 export function requireRole(...allowedRoles: string[]) {
-  const roles = allowedRoles.map((role) => role.toLowerCase());
-
   return async (_req: Request, res: Response, next: NextFunction) => {
-    const auth = res.locals.auth as AuthPayload | undefined;
-
-    if (!auth) {
-      return res.status(HttpStatusCodes.UNAUTHORIZED).json({ message: "Unauthorized" });
-    }
+    const auth = res.locals.auth;
+    if (!auth) return res.status(HttpStatusCodes.UNAUTHORIZED).json({ message: "Unauthorized" });
 
-    const userRole = String(auth.role ?? "").toLowerCase();
-    if (!roles.includes(userRole)) {
+    if (!allowedRoles.includes(auth.role?.name)) {
       return res.status(HttpStatusCodes.FORBIDDEN).json({ message: "Forbidden: Insufficient permissions" });
     }
 

package/express/src/modules/auth/routes/index.ts

@@ -1,5 +1,4 @@
-import { createRoute, createRouter, HttpStatusCodes, jsonContent, z } from "@/framework/facade.js";
-import { loginLimiter } from "@/framework/http/ratelimiter.js";
+import { createRoute, createRouter, HttpStatusCodes, jsonContent, loginLimiter, z } from "@/framework/facade.js";
 import { authMiddleware } from "@/middlewares/auth-middleware.js";
 import {
   forgotPassword,

package/express/src/providers/notification.ts

@@ -0,0 +1,4 @@
+import { broadcastChannel, mailChannel, registerChannel } from "@/framework/facade.js";
+
+registerChannel(mailChannel);
+registerChannel(broadcastChannel);

package/express/src/resources/src/components/Switch.vue

@@ -1,65 +1,60 @@
-<template>
-  <div :class="wrapperClass">
-    <label :class="props.vertical ? 'form-check-label d-block' : 'd-none'">
-      <span v-html="statusHtml"></span>
-    </label>
-    <div class="form-check form-switch d-inline-block">
-      <input
-        class="form-check-input shadow-none border-primary"
-        type="checkbox"
-        role="switch"
-        :checked="isChecked"
-        v-bind="$attrs" />
-      <label :class="props.vertical ? 'd-none' : 'form-check-label'">
-        <span v-html="statusHtml"></span>
-      </label>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-
-defineOptions({ name: "Switch", inheritAttrs: false });
-
-interface SwitchProps {
-  modelValue?: string | number | boolean;
-  value?: unknown[] | Record<string, unknown> | string | number | boolean;
-  vertical?: boolean;
-  checked?: boolean | number;
-}
-
-const $attrs = useAttrs();
-const props = defineProps<SwitchProps>();
-
-const textLabel = computed(() => ($attrs.text as string | undefined) || "");
-const blankLabel = computed(() => ($attrs.blank as string | undefined) || "");
-const topclass = computed(() => ($attrs.topclass as string | undefined) || "");
-
-const isChecked = computed(() => Boolean(props.checked));
-
-const wrapperClass = computed(() => (props.vertical ? `text-center ${topclass.value}`.trim() : ""));
-
-const statusHtml = computed(() => {
-  if (isChecked.value) {
-    return `<div class='d-flex justify-content-center'><span>${textLabel.value}</span><div class='rounded-circle bg-success indicator'></div></div>`;
-  }
-
-  return `<div class='d-flex justify-content-center'><span>${blankLabel.value}</span><div class='rounded-circle bg-danger indicator'></div></div>`;
-});
-</script>
-
-<style lang="scss">
-.indicator {
-  width: 4px;
-  height: 4px;
-  margin-left: 2px;
-  margin-top: 5px;
-}
-</style>
-<style lang="scss" scoped>
-label,
-input {
-  cursor: pointer;
-}
-</style>
+<template>
+  <div :class="wrapperClass">
+    <label :class="props.vertical ? 'form-check-label d-block' : 'd-none'">
+      <span v-html="statusHtml"></span>
+    </label>
+    <div class="form-check form-switch d-inline-block">
+      <input class="form-check-input shadow-none border-primary" type="checkbox" :checked="isChecked" v-bind="$attrs">
+      <label :class="props.vertical ? 'd-none' : 'form-check-label'">
+        <span v-html="statusHtml"></span>
+      </label>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+
+defineOptions({ name: "Switch", inheritAttrs: false });
+
+interface SwitchProps {
+  modelValue?: string | number | boolean;
+  value?: unknown[] | Record<string, unknown> | string | number | boolean;
+  vertical?: boolean;
+  checked?: boolean | number;
+}
+
+const $attrs = useAttrs();
+const props = defineProps<SwitchProps>();
+
+const textLabel = computed(() => ($attrs.text as string | undefined) || "");
+const blankLabel = computed(() => ($attrs.blank as string | undefined) || "");
+const topclass = computed(() => ($attrs.topclass as string | undefined) || "");
+
+const isChecked = computed(() => Boolean(props.checked));
+
+const wrapperClass = computed(() => (props.vertical ? `text-center ${topclass.value}`.trim() : ""));
+
+const statusHtml = computed(() => {
+  if (isChecked.value) {
+    return `<div class='d-flex justify-content-center'><span>${textLabel.value}</span><div class='rounded-circle bg-success indicator'></div></div>`;
+  }
+
+  return `<div class='d-flex justify-content-center'><span>${blankLabel.value}</span><div class='rounded-circle bg-danger indicator'></div></div>`;
+});
+</script>
+
+<style lang="scss" scoped>
+.indicator {
+  width: 4px;
+  height: 4px;
+  margin-left: 2px;
+  margin-top: 5px;
+}
+</style>
+<style lang="scss" scoped>
+label,
+input {
+  cursor: pointer;
+}
+</style>

package/express/src/resources/src/layouts/Layout/Header.vue

@@ -1,105 +1,124 @@
-<template>
-  <header :class="{ scrolled: isScrolled }">
-    <nav class="navbar bg-transparent p-0">
-      <div class="container-fluid p-0 row-gap-2 column-gap-1">
-        <button
-          id="off-canvas"
-          type="button"
-          class="nav-btn order-0"
-          title="Toggle Button"
-          @click="props.onToggleSidebar">
-          <i class="bi bi-layout-text-sidebar-reverse"></i>
-        </button>
-        <div id="pagebar" class="card card-body nav-card order-5 order-sm-2"></div>
-        <template v-for="btn in featureButtons" :key="btn.id">
-          <button v-if="!btn.render" type="button" class="nav-btn order-3 order-sm-3" :class="btn.class" :title="btn.title || undefined" :aria-label="btn.label || 'button'" v-bind="btn.attrs" @click="btn.onClick">
-            <i v-if="btn.icon" :class="btn.icon"></i>
-            <span v-if="btn.label" class="ms-1">{{ btn.label }}</span>
-          </button>
-          <template v-else>
-            <component :is="featureComponent(btn)" />
-          </template>
-        </template>
-        <div class="btn-group order-4 order-sm-4">
-          <button type="button" class="nav-btn w-100" title="user" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false" aria-label="button">
-            <i class="bi bi-person-circle"></i>
-          </button>
-          <ul class="dropdown-menu dropdown-menu-end">
-            <li>
-              <a class="dropdown-item" href="#">
-                <div class="d-flex align-items-center">
-                  <div class="flex-shrink-0 me-3">
-                    <i class="bi bi-person-circle fs-1"></i>
-                  </div>
-                  <div class="flex-grow-1 text-capitalize">
-                    <h6 class="mb-0">{{ authUser?.name }}</h6>
-                    <small class="text-muted">{{ authUser.role?.name }}</small>
-                  </div>
-                </div>
-              </a>
-            </li>
-            <li>
-              <div class="dropdown-divider my-1"></div>
-            </li>
-            <li>
-              <router-link class="dropdown-item" to="/profile">
-                <i class="bi bi-person-check me-3"></i><span>My Profile</span>
-              </router-link>
-            </li>
-            <li>
-              <button type="button" class="dropdown-item" @click="props.onLogout">
-                <i class="bi bi-power me-3"></i><span>Log Out</span>
-              </button>
-            </li>
-          </ul>
-        </div>
-        <button id="theme-switch" type="button" title="theme" class="nav-btn order-1 order-sm-5" aria-label="button" @click="props.onToggleTheme">
-          <i :class="themeIconClass"></i>
-        </button>
-      </div>
-    </nav>
-  </header>
-</template>
-
-<script setup lang="ts">
-import { computed, h, inject } from "vue";
-import { authUser } from "@/composables/useAuth";
-
-interface ButtonEntry {
-  id: symbol;
-  icon?: string;
-  label: string;
-  title: string;
-  attrs?: Record<string, string>;
-  class?: any;
-  onClick: () => void;
-  render?: () => any[];
-}
-
-const featureButtons = inject<ButtonEntry[]>("featureButtons")!;
-
-function featureComponent(btn: ButtonEntry) {
-  return {
-    name: "FeatureSlot",
-    render: () => h("div", { class: ["order-3 order-sm-4", btn.class] }, btn.render!())
-  };
-}
-
-interface HeaderProps {
-  isScrolled: boolean;
-  themeMode: "light" | "dark" | "auto";
-  onLogout: () => void | Promise<void>;
-  onToggleSidebar: () => void;
-  onToggleTheme: () => void;
-}
-
-const props = defineProps<HeaderProps>();
-
-const themeIconClass = computed(() => {
-  if (props.themeMode === "light") return "bi bi-brightness-high-fill";
-  if (props.themeMode === "dark") return "bi bi-moon-stars";
-  return "bi bi-circle-half";
-});
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+  <header :class="{ scrolled: isScrolled }">
+    <nav class="navbar bg-transparent p-0">
+      <div class="container-fluid p-0 row-gap-2 column-gap-1">
+        <button id="off-canvas" type="button" class="nav-btn order-0" title="Toggle Button" @click="props.onToggleSidebar">
+          <i class="bi bi-layout-text-sidebar-reverse"></i>
+        </button>
+        <div id="pagebar" class="card card-body nav-card order-5 order-sm-2"></div>
+        <template v-for="btn in featureButtons" :key="btn.id">
+          <button
+            v-if="!btn.render"
+            type="button"
+            class="nav-btn order-3 order-sm-3"
+            :class="btn.class"
+            :title="btn.title || undefined"
+            :aria-label="btn.label || 'button'"
+            v-bind="btn.attrs"
+            @click="btn.onClick"
+          >
+            <i v-if="btn.icon" :class="btn.icon"></i>
+            <span v-if="btn.label" class="ms-1">{{ btn.label }}</span>
+          </button>
+          <template v-else>
+            <component :is="featureComponent(btn)" />
+          </template>
+        </template>
+        <div class="btn-group order-4 order-sm-4">
+          <button
+            type="button"
+            class="nav-btn w-100"
+            title="user"
+            data-bs-toggle="dropdown"
+            data-bs-display="static"
+            aria-expanded="false"
+            aria-label="button"
+          >
+            <i class="bi bi-person-circle"></i>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-end">
+            <li>
+              <a class="dropdown-item" href="#">
+                <div class="d-flex align-items-center">
+                  <div class="flex-shrink-0 me-3">
+                    <i class="bi bi-person-circle fs-1"></i>
+                  </div>
+                  <div class="flex-grow-1 text-capitalize">
+                    <h6 class="mb-0">{{ authUser?.name }}</h6>
+                    <small class="text-muted">{{ authUser.role?.name }}</small>
+                  </div>
+                </div>
+              </a>
+            </li>
+            <li>
+              <div class="dropdown-divider my-1"></div>
+            </li>
+            <li>
+              <router-link class="dropdown-item" to="#">
+                <i class="bi bi-person-check me-3"></i><span>My Profile</span>
+              </router-link>
+            </li>
+            <li>
+              <button type="button" class="dropdown-item" @click="props.onLogout">
+                <i class="bi bi-power me-3"></i><span>Log Out</span>
+              </button>
+            </li>
+          </ul>
+        </div>
+        <button
+          id="theme-switch"
+          type="button"
+          title="theme"
+          class="nav-btn order-1 order-sm-5"
+          aria-label="button"
+          @click="props.onToggleTheme"
+        >
+          <i :class="themeIconClass"></i>
+        </button>
+      </div>
+    </nav>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { computed, h, inject } from "vue";
+import { authUser } from "@/composables/useAuth";
+
+interface ButtonEntry {
+  id: symbol;
+  icon?: string;
+  label: string;
+  title: string;
+  attrs?: Record<string, string>;
+  class?: any;
+  onClick: () => void;
+  render?: () => any[];
+}
+
+const featureButtons = inject<ButtonEntry[]>("featureButtons")!;
+
+function featureComponent(btn: ButtonEntry) {
+  return {
+    name: "FeatureSlot",
+    render: () => h("div", { class: ["order-3 order-sm-4", btn.class] }, btn.render!())
+  };
+}
+
+interface HeaderProps {
+  isScrolled: boolean;
+  themeMode: "light" | "dark" | "auto";
+  onLogout: () => void | Promise<void>;
+  onToggleSidebar: () => void;
+  onToggleTheme: () => void;
+}
+
+const props = defineProps<HeaderProps>();
+
+const themeIconClass = computed(() => {
+  if (props.themeMode === "light") return "bi bi-brightness-high-fill";
+  if (props.themeMode === "dark") return "bi bi-moon-stars";
+  return "bi bi-circle-half";
+});
+</script>
+
+<style lang="scss" scoped></style>

package/express/src/resources/src/pages/auth/forgetPassword.vue

@@ -3,13 +3,10 @@
     <div class="auth col-12 col-sm-9 col-md-7 col-lg-5 col-xl-4 mx-auto py-5">
       <div class="card card-body border-0">
         <div class="d-block mb-2 text-center">
-          <img src="@/assets/images/logo.png" alt="nexwire" style="max-height: 60px;" />
+          <img src="@/assets/images/logo.png" alt="nexwire" style="max-height: 60px;">
         </div>
         <h4 class="text-center">Forget Password</h4>
-        <p
-          v-if="message"
-          class="text-center alert py-1 mt-2"
-          :class="isError ? 'alert-danger text-danger' : 'alert-success text-success'">
+        <p v-if="message" class="text-center alert py-1 mt-2" :class="isError ? 'alert-danger text-danger' : 'alert-success text-success'">
           {{ message }}
         </p>
         <form id="formAuthentication" @submit.prevent="onSubmit">
@@ -22,14 +19,10 @@
               placeholder="Enter your email..."
               :err="form.errors.email"
               focus
-              must />
+              must
+            />
           </div>
-          <Button
-            type="submit"
-            label="Send Reset Link"
-            class="btn btn-primary w-100"
-            icon="bi bi-send ms-2"
-            :disabled="processing" />
+          <Button type="submit" label="Send Reset Link" class="btn btn-primary w-100" icon="bi bi-send ms-2" :disabled="processing" />
         </form>
         <div class="text-center mt-2">
           <router-link to="/login">
@@ -47,11 +40,14 @@ import { useHead } from "@unhead/vue";
 import { ref } from "vue";
 import Button from "@/components/Button.vue";
 import Input from "@/components/Input.vue";
-import { useGumForm } from "@/plugins/gum";
+import { useGum } from "@/plugins/gum";
+import { type ForgotPayload, useAuthStore } from "@/stores/auth";
 
 useHead({ title: "Forget Password" });
 
-const form = useGumForm({ email: "" });
+const auth = useAuthStore();
+const gum = useGum({ email: "" });
+const form = gum.form;
 const processing = form.processing;
 const message = ref("");
 const isError = ref(false);
@@ -59,24 +55,21 @@ const isError = ref(false);
 const onSubmit = async () => {
   message.value = "";
   isError.value = false;
-  await form.post(
-    "/api/auth/forgot-password",
-    {
-      email: String(form.data.email || "").trim()
+  await form.postWith({
+    fetcher: (body) => auth.forgotPassword(body as ForgotPayload),
+    transform: (data) => ({
+      email: String(data.email || "").trim()
+    }),
+    onSuccess: (res) => {
+      isError.value = false;
+      message.value = String(res.data || "If this email exists, a reset link has been sent");
+      form.reset();
     },
-    {
-      onSuccess: (res) => {
-        console.log(res);
-        isError.value = false;
-        message.value = res.data.message;
-        form.reset();
-      },
-      onError: (_errors, error) => {
-        isError.value = true;
-        message.value = error instanceof Error ? error.message : "Failed to process request";
-      }
+    onError: (_errors, error) => {
+      isError.value = true;
+      message.value = error instanceof Error ? error.message : "Failed to process request";
     }
-  );
+  });
 };
 </script>
 

package/express/src/resources/src/pages/auth/login.vue

@@ -3,7 +3,7 @@
     <div class="auth col-12 col-sm-9 col-md-7 col-lg-5 col-xl-4 mx-auto py-5">
       <div class="card card-body border-0">
         <div class="d-block mb-2 text-center">
-          <img src="@/assets/images/logo.png" alt="nexwire" style="max-height: 60px;" />
+          <img src="@/assets/images/logo.png" alt="nexwire" style="max-height: 60px;">
         </div>
         <p v-if="errorMessage" class="text-center alert alert-danger text-danger py-1 mt-2">
           {{ errorMessage }}
@@ -18,7 +18,8 @@
               placeholder="Enter your email..."
               :err="form.errors.email"
               focus
-              must />
+              must
+            />
           </div>
           <div class="mb-4">
             <input-password-toggle
@@ -27,15 +28,14 @@
               label="password"
               placeholder="Enter your password..."
               :err="form.errors.password"
-              must />
+              must
+            />
           </div>
           <div class="mb-4 d-flex align-items-center justify-content-between">
             <Checkbox id="remember-me" v-model="form.data.remember" label="Remember me" />
-            <router-link to="/forget-password" class="text-decoration-none mb-1">Forget
-              Password?</router-link>
+            <router-link to="/forget-password" class="text-decoration-none mb-1">Forget Password?</router-link>
           </div>
-          <Button type="submit" class="btn btn-primary w-100" label="Login"
-            icon="bi bi-box-arrow-in-right" :disabled="processing" />
+          <Button type="submit" class="btn btn-primary w-100" label="Login" icon="bi bi-box-arrow-in-right" :disabled="processing" />
           <div class="text-center mt-3">
             <span class="text-muted">Don't have an account?</span>
             <router-link to="/register" class="ms-1 text-decoration-none">Register</router-link>
@@ -54,8 +54,8 @@ import Button from "@/components/Button.vue";
 import Checkbox from "@/components/Checkbox.vue";
 import Input from "@/components/Input.vue";
 import InputPasswordToggle from "@/components/InputPasswordToggle.vue";
-import { useGumForm } from "@/plugins/gum";
-import { useAuthStore } from "@/stores/auth";
+import { useGum } from "@/plugins/gum";
+import { type LoginPayload, useAuthStore } from "@/stores/auth";
 
 useHead({ title: "Login" });
 
@@ -63,36 +63,33 @@ const router = useRouter();
 const auth = useAuthStore();
 const errorMessage = ref("");
 
-const form = useGumForm({
+const gum = useGum({
   email: "",
   password: "",
   remember: false
 });
 
+const form = gum.form;
 const processing = form.processing;
 
 const onSubmit = async () => {
   errorMessage.value = "";
-  await form.post(
-    "/api/auth/login",
-    {
-      email: String(form.data.email || "").trim(),
-      password: form.data.password,
-      remember: !!form.data.remember
+  await form.postWith({
+    fetcher: (body) => auth.login(body as LoginPayload),
+    transform: (data) => ({
+      email: String(data.email || "").trim(),
+      password: data.password,
+      remember: !!data.remember
+    }),
+    onSuccess: async () => {
+      form.reset("password");
+      await router.push("/");
     },
-    {
-      onSuccess: async () => {
-        auth.initialized = false;
-        await auth.bootstrap();
-        form.reset("password");
-        await router.push("/");
-      },
-      onError: (_errors, error) => {
-        errorMessage.value = error instanceof Error ? error.message : "Unable to login right now";
-        form.reset("password");
-      }
+    onError: (_errors, error) => {
+      errorMessage.value = error instanceof Error ? error.message : "Unable to login right now";
+      form.reset("password");
     }
-  );
+  });
 };
 </script>