create-nexwire 4.3.0 → 4.4.0

package/fastify/src/resources/src/pages/auth/register.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="container position-absolute start-50 top-50 translate-middle">
+    <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;">
+        </div>
+        <h4 class="text-center">Create Account</h4>
+        <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 @submit.prevent="onSubmit">
+          <div class="mb-4">
+            <Input
+              id="name"
+              v-model="form.data.name"
+              type="text"
+              label="name"
+              placeholder="Enter your name..."
+              :err="form.errors.name"
+              focus
+              must
+            />
+          </div>
+          <div class="mb-4">
+            <Input
+              id="email"
+              v-model="form.data.email"
+              type="email"
+              label="email"
+              placeholder="Enter your email..."
+              :err="form.errors.email"
+              must
+            />
+          </div>
+          <div class="mb-4">
+            <InputPasswordToggle
+              id="password"
+              v-model="form.data.password"
+              label="password"
+              placeholder="Create a password..."
+              :err="form.errors.password"
+              must
+            />
+          </div>
+          <div class="mb-4">
+            <InputPasswordToggle
+              id="password_confirmation"
+              v-model="form.data.password_confirmation"
+              label="confirm password"
+              placeholder="Confirm your password..."
+              :err="form.errors.password_confirmation"
+              must
+            />
+          </div>
+          <Button type="submit" class="btn btn-primary w-100" label="Create Account" icon="bi bi-person-plus" :disabled="processing" />
+        </form>
+        <div class="text-center mt-3">
+          <span class="text-muted">Already have an account?</span>
+          <router-link to="/login" class="ms-1 text-decoration-none">Login</router-link>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useHead } from "@unhead/vue";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import Button from "@/components/Button.vue";
+import Input from "@/components/Input.vue";
+import InputPasswordToggle from "@/components/InputPasswordToggle.vue";
+import { useGum } from "@/plugins/gum";
+import { type RegisterPayload, useAuthStore } from "@/stores/auth";
+
+useHead({ title: "Register" });
+
+const router = useRouter();
+const auth = useAuthStore();
+
+const gum = useGum({
+  name: "",
+  email: "",
+  password: "",
+  password_confirmation: ""
+});
+
+const form = gum.form;
+const processing = form.processing;
+const message = ref("");
+const isError = ref(false);
+
+const onSubmit = async () => {
+  message.value = "";
+  isError.value = false;
+
+  if (form.data.password !== form.data.password_confirmation) {
+    isError.value = true;
+    message.value = "Password confirmation does not match";
+    return;
+  }
+
+  await form.postWith({
+    fetcher: (body) => auth.register(body as RegisterPayload),
+    transform: (data) => ({
+      name: String(data.name || "").trim(),
+      email: String(data.email || "").trim(),
+      password: data.password,
+      password_confirmation: data.password_confirmation
+    }),
+    onSuccess: async () => {
+      if (auth.isAuthenticated) {
+        await router.push("/");
+        return;
+      }
+
+      message.value = "Registration successful. Please verify your email.";
+      form.reset();
+    },
+    onError: (_errors, error) => {
+      isError.value = true;
+      message.value = error instanceof Error ? error.message : "Unable to register right now";
+    }
+  });
+};
+</script>
+
+<style lang="scss" scoped></style>

package/fastify/src/resources/src/pages/auth/resetPassword.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="container position-absolute start-50 top-50 translate-middle">
+    <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;">
+        </div>
+        <h4 class="text-center">Reset Password</h4>
+        <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" :class="{ 'pe-none opacity-50': !isLinkValid }" @submit.prevent="onSubmit">
+          <div class="mb-4">
+            <input-password-toggle
+              id="password"
+              v-model="form.data.password"
+              label="new password"
+              placeholder="Enter your password..."
+              :err="form.errors.password"
+              must
+            />
+          </div>
+          <div class="mb-4">
+            <input-password-toggle
+              id="password_confirmation"
+              v-model="form.data.password_confirmation"
+              label="confirm password"
+              placeholder="Confirm new password..."
+              :err="form.errors.password_confirmation"
+              must
+            />
+          </div>
+          <Button type="submit" label="Reset Password" class="btn btn-primary w-100" icon="bi bi-key ms-2" :disabled="processing" />
+        </form>
+        <div class="text-center mt-2">
+          <router-link to="/login">
+            <i class="bx bx-chevron-left scaleX-n1-rtl me-1"></i>
+            <span>Back to login</span>
+          </router-link>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useHead } from "@unhead/vue";
+import { ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import Button from "@/components/Button.vue";
+import InputPasswordToggle from "@/components/InputPasswordToggle.vue";
+import { useGum } from "@/plugins/gum";
+import { type ResetPayload, useAuthStore } from "@/stores/auth";
+
+useHead({ title: "Reset Password" });
+
+const route = useRoute();
+const router = useRouter();
+const auth = useAuthStore();
+
+const email = String(route.query.email || "");
+const token = String(route.query.token || "");
+
+const gum = useGum({
+  email,
+  token,
+  password: "",
+  password_confirmation: ""
+});
+
+const form = gum.form;
+const processing = form.processing;
+const isLinkValid = !!(token && email);
+const message = ref(isLinkValid ? "Set your new password" : "Invalid reset link. Please request a new one.");
+const isError = ref(!isLinkValid);
+
+const onSubmit = async () => {
+  if (!isLinkValid) return;
+
+  message.value = "";
+  isError.value = false;
+
+  if (form.data.password !== form.data.password_confirmation) {
+    isError.value = true;
+    message.value = "Password confirmation does not match";
+    return;
+  }
+
+  await form.postWith({
+    fetcher: (body) => auth.resetPassword(body as ResetPayload),
+    transform: (data) => ({
+      email: String(data.email || "").trim(),
+      token: String(data.token || "").trim(),
+      password: data.password,
+      password_confirmation: data.password_confirmation
+    }),
+    onSuccess: (res) => {
+      isError.value = false;
+      message.value = String(res.data || "Password reset successfully");
+      void router.push("/login");
+    },
+    onError: (_errors, error) => {
+      isError.value = true;
+      message.value = error instanceof Error ? error.message : "Failed to reset password";
+    }
+  });
+};
+</script>
+
+<style lang="scss" scoped></style>

package/fastify/src/resources/src/pages/auth/verifyEmail.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="container position-absolute start-50 top-50 translate-middle">
+    <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;">
+        </div>
+        <h4 class="text-center">Email Verification</h4>
+        <p v-if="message" class="text-center alert py-2 mt-2" :class="isError ? 'alert-danger text-danger' : 'alert-success text-success'">
+          {{ message }}
+        </p>
+        <div class="text-center mt-2">
+          <router-link to="/login">
+            <span>Back to login</span>
+          </router-link>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useHead } from "@unhead/vue";
+import { ref } from "vue";
+import { useRoute } from "vue-router";
+import { useGum } from "@/plugins/gum";
+import { useAuthStore } from "@/stores/auth";
+
+useHead({ title: "Verify Email" });
+
+const route = useRoute();
+const auth = useAuthStore();
+
+const email = String(route.query.email || "").trim();
+const token = String(route.query.token || "").trim();
+const message = ref("Verifying your email...");
+const isError = ref(false);
+
+const gum = useGum();
+
+const verify = async () => {
+  if (!email || !token) {
+    isError.value = true;
+    message.value = "Invalid verification link. Please request a new one.";
+    return;
+  }
+
+  await gum.postWith({
+    fetcher: () => auth.verifyEmail({ email, token }),
+    onSuccess: (res) => {
+      isError.value = false;
+      message.value = String(res.data || "Email verified successfully. You can now login.");
+    },
+    onError: (_errors, error) => {
+      isError.value = true;
+      message.value = error instanceof Error ? error.message : "Failed to verify email";
+    }
+  });
+};
+
+void verify();
+</script>
+
+<style lang="scss" scoped></style>

package/fastify/src/resources/src/pages/dashboard/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <Pagebar title="Dashboard" />
+
+  <div class="dashboard-placeholder">
+    <div class="row g-2 mb-2">
+      <div class="col-12 col-md-4">
+        <div class="placeholder-card"></div>
+      </div>
+      <div class="col-12 col-md-4">
+        <div class="placeholder-card"></div>
+      </div>
+      <div class="col-12 col-md-4">
+        <div class="placeholder-card"></div>
+      </div>
+    </div>
+
+    <div class="placeholder-panel"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useHead } from "@unhead/vue";
+import { onMounted, onUnmounted } from "vue";
+import Pagebar from "@/components/Pagebar.vue";
+import { useAuth } from "@/composables/useAuth";
+import { pulse } from "@/plugins/pulse";
+
+useHead({ title: "Dashboard" });
+
+const { user } = useAuth();
+
+onMounted(() => {
+  const ch = pulse.channel("user");
+  ch.listen("user.changed", () => alert("me"));
+  onUnmounted(() => ch.stopListening("user.changed"));
+});
+
+// const hardRefresh = () => window.location.reload();
+</script>
+
+<style scoped>
+.placeholder-card,
+.placeholder-panel {
+  border: 1px solid var(--app-border);
+  border-radius: 0.3rem;
+  background: var(--app-surface);
+}
+
+.placeholder-card {
+  min-height: 220px;
+}
+
+.placeholder-panel {
+  min-height: 520px;
+}
+
+@media (max-width: 768px) {
+  .placeholder-card {
+    min-height: 160px;
+  }
+
+  .placeholder-panel {
+    min-height: 360px;
+  }
+}
+</style>

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

@@ -0,0 +1,31 @@
+import axios from "axios";
+
+if (import.meta.env.VITE_API_URL) {
+  axios.defaults.baseURL = import.meta.env.VITE_API_URL;
+}
+
+axios.defaults.withCredentials = true;
+axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
+axios.defaults.headers.common.Accept = "application/json";
+
+axios.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    const status = error?.response?.status;
+    const isAuthPage =
+      window.location.pathname === "/register" ||
+      window.location.pathname === "/login" ||
+      window.location.pathname === "/forget-password" ||
+      window.location.pathname === "/reset-password" ||
+      window.location.pathname === "/verify-email";
+
+    if (status === 401 && !isAuthPage) {
+      const redirect = encodeURIComponent(window.location.pathname + window.location.search + window.location.hash);
+      window.location.href = `/login?redirect=${redirect}`;
+    }
+
+    return Promise.reject(error);
+  }
+);
+
+export default axios;

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

@@ -0,0 +1,55 @@
+import type { App, ComputedRef } from "vue";
+import { computed } from "vue";
+
+export type BrowserDetectResult = {
+  userAgent: string;
+  isFirefox: ComputedRef<boolean>;
+  isChrome: ComputedRef<boolean>;
+  isSafari: ComputedRef<boolean>;
+  isEdge: ComputedRef<boolean>;
+  isOpera: ComputedRef<boolean>;
+  isBrave: ComputedRef<boolean>;
+  isAndroid: ComputedRef<boolean>;
+  isIOS: ComputedRef<boolean>;
+  isWindows: ComputedRef<boolean>;
+  isMac: ComputedRef<boolean>;
+};
+
+const userAgent = typeof navigator !== "undefined" ? navigator.userAgent.toLowerCase() : "";
+
+const isFirefoxRaw = userAgent.includes("firefox");
+const isEdgeRaw = userAgent.includes("edg");
+const isOperaRaw = userAgent.includes("opr") || userAgent.includes("opera");
+const isBraveRaw = userAgent.includes("brave");
+const isChromeRaw = userAgent.includes("chrome") && !isEdgeRaw && !isOperaRaw && !isBraveRaw;
+const isAndroidRaw = userAgent.includes("android");
+const isSafariRaw = userAgent.includes("safari") && !isChromeRaw && !isAndroidRaw;
+const isIOSRaw = /iphone|ipad|ipod/.test(userAgent);
+const isWindowsRaw = userAgent.includes("windows");
+const isMacRaw = userAgent.includes("macintosh");
+
+export const browserDetect: BrowserDetectResult = {
+  userAgent,
+  isFirefox: computed(() => isFirefoxRaw),
+  isChrome: computed(() => isChromeRaw),
+  isSafari: computed(() => isSafariRaw),
+  isEdge: computed(() => isEdgeRaw),
+  isOpera: computed(() => isOperaRaw),
+  isBrave: computed(() => isBraveRaw),
+  isAndroid: computed(() => isAndroidRaw),
+  isIOS: computed(() => isIOSRaw),
+  isWindows: computed(() => isWindowsRaw),
+  isMac: computed(() => isMacRaw)
+};
+
+export const BrowserDetectPlugin = {
+  install(app: App) {
+    app.config.globalProperties.$browserDetect = browserDetect;
+  }
+};
+
+declare module "vue" {
+  interface ComponentCustomProperties {
+    $browserDetect: BrowserDetectResult;
+  }
+}

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

@@ -0,0 +1,216 @@
+import type { App } from "vue";
+
+type PromptOptions = {
+  limit?: number;
+  placeholder?: string;
+  defaultValue?: string;
+};
+
+type DialogClient = {
+  alert: (text?: string) => void;
+  confirm: (text?: string, callback?: (ok: boolean) => void) => void;
+  prompt: (text?: string, options?: PromptOptions, callback?: (result: { ok: boolean; value: string }) => void) => void;
+};
+
+function hostNode() {
+  return document.querySelector("#modal-show") || document.body;
+}
+
+function siteLabel() {
+  return `${location.protocol}//${location.hostname}`;
+}
+
+function buildShell(content: string) {
+  const root = document.createElement("div");
+  root.className = "position-fixed w-100 h-100 top-0 start-0";
+  root.style.background = "var(--app-backdrop)";
+  root.style.color = "var(--app-text)";
+  root.style.zIndex = "100000";
+  root.innerHTML = content;
+  return root;
+}
+
+function closeShell(shell: HTMLElement) {
+  shell.remove();
+}
+
+function bindKeys(shell: HTMLElement, onOk: () => void, onCancel: () => void) {
+  shell.addEventListener(
+    "keydown",
+    (e) => {
+      if (!shell.isConnected) return;
+      const tag = (e.target as HTMLElement)?.tagName;
+      const isInput = tag === "TEXTAREA" || tag === "INPUT";
+
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        onCancel();
+        return;
+      }
+
+      if (e.key === "Enter" && !isInput) {
+        e.preventDefault();
+        e.stopPropagation();
+        onOk();
+      }
+    },
+    true
+  );
+}
+
+export const dialog: DialogClient = {
+  alert(text = "") {
+    const shell = buildShell(`
+      <div class='card position-absolute top-50 start-50 translate-middle border' style='width:300px'>
+        <div class='card-header d-flex justify-content-between align-items-center px-2 py-1 border-0'>
+          <span class='d-flex align-items-center'>
+            <i class="bi bi-exclamation-circle"></i> <span class='ms-2'>${siteLabel()}</span>
+          </span>
+          <button class='btn btn-sm p-0' type='button' data-dialog='close'>
+            <i class='bi bi-x fs-3'></i>
+          </button>
+        </div>
+        <div class='card-body overflow-x-hidden overflow-y-scroll p-2 text-center' style='max-height:200px'>
+          ${text}
+        </div>
+        <div class='card-footer d-flex justify-content-end align-items-center px-2 py-1 border-0'>
+          <button type='button' class='btn btn-primary btn-sm' data-dialog='ok'>OK</button>
+        </div>
+      </div>
+    `);
+
+    shell.addEventListener("click", (event) => {
+      event.stopPropagation();
+      const target = event.target as HTMLElement;
+      const action = target.closest("[data-dialog]")?.getAttribute("data-dialog");
+      if (action === "ok" || action === "close") closeShell(shell);
+    });
+
+    bindKeys(
+      shell,
+      () => closeShell(shell),
+      () => closeShell(shell)
+    );
+    hostNode().appendChild(shell);
+    (shell.querySelector("[data-dialog='ok']") as HTMLElement)?.focus();
+  },
+
+  confirm(text = "", callback?: (ok: boolean) => void) {
+    const shell = buildShell(`
+      <div class='card position-absolute top-50 start-50 translate-middle border' style='width:300px'>
+        <div class='card-header d-flex justify-content-between align-items-center px-2 py-1 border-0'>
+          <span class='d-flex align-items-center'>
+            <i class="bi bi-globe"></i> <span class='ms-2'>${siteLabel()}</span>
+          </span>
+          <button class='btn btn-sm p-0' type='button' data-dialog='cancel'>
+            <i class='bi bi-x fs-3'></i>
+          </button>
+        </div>
+        <div class='card-body overflow-x-hidden overflow-y-scroll p-2 text-center' style='max-height:200px'>
+          ${text}
+        </div>
+        <div class='card-footer d-flex justify-content-end align-items-center px-2 py-1 border-0'>
+          <button type='button' class='btn btn-primary btn-sm' data-dialog='ok'>OK</button>
+          <button type='button' class='btn btn-secondary btn-sm ms-1' data-dialog='cancel'>Cancel</button>
+        </div>
+      </div>
+    `);
+
+    shell.addEventListener("click", (event) => {
+      event.stopPropagation();
+      const target = event.target as HTMLElement;
+      const action = target.closest("[data-dialog]")?.getAttribute("data-dialog");
+      if (action === "ok") {
+        closeShell(shell);
+        callback?.(true);
+      }
+      if (action === "cancel") {
+        closeShell(shell);
+        callback?.(false);
+      }
+    });
+
+    bindKeys(
+      shell,
+      () => {
+        closeShell(shell);
+        callback?.(true);
+      },
+      () => {
+        closeShell(shell);
+        callback?.(false);
+      }
+    );
+    hostNode().appendChild(shell);
+    (shell.querySelector("[data-dialog='ok']") as HTMLElement)?.focus();
+  },
+
+  prompt(text = "", options: PromptOptions = {}, callback?: (result: { ok: boolean; value: string }) => void) {
+    const { limit = 0, placeholder = "Remarks...", defaultValue = "" } = options;
+
+    const shell = buildShell(`
+      <div class='card position-absolute top-50 start-50 translate-middle border' style='width:300px'>
+        <div class='card-header d-flex justify-content-between align-items-center px-2 py-1 border-0'>
+          <span class='d-flex align-items-center'>
+            <i class="bi bi-globe"></i> <span class='ms-2'>${siteLabel()}</span>
+          </span>
+          <button class='btn btn-sm p-0' type='button' data-dialog='cancel'>
+            <i class='bi bi-x fs-3'></i>
+          </button>
+        </div>
+        <div class='card-body overflow-x-hidden overflow-y-scroll p-2 position-relative'>
+          ${text} <sup style='font-size: 10px'>${limit} char</sup>
+          <textarea class='form-control' rows='4' placeholder='${placeholder}' data-dialog='input' ${limit > 0 ? `maxlength='${limit}'` : ""}>${defaultValue}</textarea>
+        </div>
+        <div class='card-footer d-flex justify-content-end align-items-center px-2 py-1 border-0'>
+          <button type='button' class='btn btn-primary btn-sm' data-dialog='ok'>OK</button>
+          <button type='button' class='btn btn-secondary btn-sm ms-1' data-dialog='cancel'>Cancel</button>
+        </div>
+      </div>
+    `);
+
+    const input = shell.querySelector("textarea[data-dialog='input']") as HTMLTextAreaElement | null;
+
+    shell.addEventListener("click", (event) => {
+      event.stopPropagation();
+      const target = event.target as HTMLElement;
+      const action = target.closest("[data-dialog]")?.getAttribute("data-dialog");
+
+      if (action === "ok") {
+        closeShell(shell);
+        callback?.({ ok: true, value: input?.value || "" });
+      }
+      if (action === "cancel") {
+        closeShell(shell);
+        callback?.({ ok: false, value: "" });
+      }
+    });
+
+    bindKeys(
+      shell,
+      () => {
+        closeShell(shell);
+        callback?.({ ok: true, value: input?.value || "" });
+      },
+      () => {
+        closeShell(shell);
+        callback?.({ ok: false, value: "" });
+      }
+    );
+    hostNode().appendChild(shell);
+    (shell.querySelector("textarea[data-dialog='input']") as HTMLElement)?.focus();
+  }
+};
+
+export const DialogPlugin = {
+  install(app: App) {
+    app.config.globalProperties.$dialog = dialog;
+  }
+};
+
+declare module "vue" {
+  interface ComponentCustomProperties {
+    $dialog: DialogClient;
+  }
+}