create-nexwire 4.2.5 → 4.4.0

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

@@ -1,48 +1,56 @@
-import nodemailer from "nodemailer";
-import { mailConfig } from "@/config/index.js";
-import { CircuitBreaker } from "@/framework/circuit-breaker/cb.js";
-import { logger } from "@/framework/support/logger.js";
-
-type MailPayload = {
-  to: string;
-  subject: string;
-  html?: string;
-  text?: string;
-};
-
-const transport = nodemailer.createTransport({
-  host: mailConfig.host,
-  port: mailConfig.port,
-  secure: mailConfig.encryption === "ssl",
-  auth: mailConfig.username ? { user: mailConfig.username, pass: mailConfig.password } : undefined
-});
-
-const mailBreaker = new CircuitBreaker();
-
-export const mail = {
-  /**
-   * Why: Sends transactional email through configured SMTP transport.
-   * When: Features need notifications/password reset/signup email.
-   * Where: Jobs and event handlers.
-   * How: Uses nodemailer transport and respects the fail-silent setting.
-   */
-  async sendMail(payload: MailPayload) {
-    try {
-      return await mailBreaker.exec(() =>
-        transport.sendMail({
-          from: mailConfig.fromAddress,
-          ...payload
-        })
-      );
-    } catch (error) {
-      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;
-    }
-  }
-};
+import nodemailer from "nodemailer";
+import { mailConfig } from "@/config/index.js";
+import { createCircuitBreaker, isCircuitBreakerError } from "@/framework/circuit-breaker/cb.js";
+import { logger } from "@/framework/support/logger.js";
+
+type MailPayload = {
+  to: string;
+  subject: string;
+  html?: string;
+  text?: string;
+};
+
+const transport = nodemailer.createTransport({
+  host: mailConfig.host,
+  port: mailConfig.port,
+  secure: mailConfig.encryption === "ssl",
+  auth: mailConfig.username ? { user: mailConfig.username, pass: mailConfig.password } : undefined
+});
+
+const mailBreaker = createCircuitBreaker({ name: "SMTP Mail" });
+
+export const mail = {
+  /**
+   * Why: Sends transactional email through configured SMTP transport.
+   * When: Features need notifications/password reset/signup email.
+   * Where: Jobs and event handlers.
+   * How: Uses nodemailer transport and respects the fail-silent setting.
+   */
+  async sendMail(payload: MailPayload) {
+    try {
+      return await mailBreaker.exec(() =>
+        transport.sendMail({
+          from: mailConfig.fromAddress,
+          ...payload
+        })
+      );
+    } catch (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/hono/src/middlewares/auth-middleware.ts

@@ -1,6 +1,5 @@
 import type { Context, Next } from "hono";
-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(c: Context, next: Next) {
   const provider = await resolveAuthProvider();

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

@@ -1,22 +1,12 @@
 import type { Context, Next } from "hono";
 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 (c: Context, next: Next) => {
-    const auth = c.get("auth") as AuthPayload | undefined;
-
-    if (!auth) {
-      return c.json({ message: "Unauthorized" }, HttpStatusCodes.UNAUTHORIZED);
-    }
+    const auth = c.get("auth");
+    if (!auth) return c.json({ message: "Unauthorized" }, HttpStatusCodes.UNAUTHORIZED);
 
-    const userRole = String(auth.role ?? "").toLowerCase();
-    if (!roles.includes(userRole)) {
+    if (!allowedRoles.includes(auth.role?.name)) {
       return c.json({ message: "Forbidden: Insufficient permissions" }, HttpStatusCodes.FORBIDDEN);
     }
 

package/hono/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/hono/src/providers/notification.ts

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

package/hono/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/hono/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/hono/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,23 +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) => {
-        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>