create-nexgen 1.0.4

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

@@ -0,0 +1,130 @@
+<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">
+          <h3 class="m-0 text-uppercase text-center fw-semibold">nexgen</h3>
+        </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.name"
+              type="text"
+              label="name"
+              placeholder="Enter your name..."
+              :err="false"
+              focus
+              must />
+          </div>
+          <div class="mb-4">
+            <Input
+              id="email"
+              v-model="form.email"
+              type="email"
+              label="email"
+              placeholder="Enter your email..."
+              :err="false"
+              must />
+          </div>
+          <div class="mb-4">
+            <InputPasswordToggle
+              id="password"
+              v-model="form.password"
+              label="password"
+              placeholder="Create a password..."
+              :err="false"
+              must />
+          </div>
+          <div class="mb-4">
+            <InputPasswordToggle
+              id="password_confirmation"
+              v-model="form.password_confirmation"
+              label="confirm password"
+              placeholder="Confirm your password..."
+              :err="false"
+              must />
+          </div>
+          <button type="submit" class="btn btn-primary w-100" :disabled="auth.processing">
+            <span>Create Account</span>
+            <i class="bi bi-person-plus ms-2"></i>
+          </button>
+        </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 { reactive, ref } from "vue";
+import { useRouter } from "vue-router";
+import { useHead } from "@vueuse/head";
+import { useAuthStore } from "@/stores/auth";
+import Input from "@/components/Input.vue";
+import InputPasswordToggle from "@/components/InputPasswordToggle.vue";
+
+useHead({ title: "Register" });
+
+const router = useRouter();
+const auth = useAuthStore();
+
+interface RegisterForm {
+  name: string;
+  email: string;
+  password: string;
+  password_confirmation: string;
+}
+
+const form = reactive<RegisterForm>({
+  name: "",
+  email: "",
+  password: "",
+  password_confirmation: ""
+});
+
+const message = ref("");
+const isError = ref(false);
+
+const onSubmit = async () => {
+  message.value = "";
+  isError.value = false;
+
+  if (form.password !== form.password_confirmation) {
+    isError.value = true;
+    message.value = "Password confirmation does not match";
+    return;
+  }
+
+  try {
+    const result = await auth.register({
+      name: form.name.trim(),
+      email: form.email.trim(),
+      password: form.password,
+      password_confirmation: form.password_confirmation
+    });
+
+    if (auth.isAuthenticated) {
+      await router.push("/");
+      return;
+    }
+
+    message.value = result || "Registration successful. Please verify your email.";
+  } catch (error: unknown) {
+    isError.value = true;
+    message.value = error instanceof Error ? error.message : "Unable to register right now";
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,119 @@
+<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">
+          <h3 class="m-0 text-uppercase text-center fw-semibold">nexgen</h3>
+        </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
+              id="password"
+              v-model="form.password"
+              type="password"
+              label="new password"
+              placeholder="Enter new password..."
+              :err="false"
+              focus
+              must />
+          </div>
+          <div class="mb-4">
+            <Input
+              id="password_confirmation"
+              v-model="form.password_confirmation"
+              type="password"
+              label="confirm password"
+              placeholder="Confirm new password..."
+              :err="false"
+              must />
+          </div>
+          <Button
+            type="submit"
+            label="Reset Password"
+            class="btn btn-primary d-grid w-100"
+            icon="bi bi-key ms-2"
+            :disabled="auth.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 { reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useHead } from "@vueuse/head";
+import Input from "../../components/Input.vue";
+import Button from "../../components/Button.vue";
+import { useAuthStore } from "@/stores/auth";
+
+useHead({ title: "Reset Password" });
+
+const route = useRoute();
+const router = useRouter();
+const auth = useAuthStore();
+
+interface ResetPasswordForm {
+  email: string;
+  token: string;
+  password: string;
+  password_confirmation: string;
+}
+
+const form = reactive<ResetPasswordForm>({
+  email: String(route.query.email || ""),
+  token: String(route.query.token || ""),
+  password: "",
+  password_confirmation: ""
+});
+
+const isLinkValid = !!(form.token && form.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.password !== form.password_confirmation) {
+    isError.value = true;
+    message.value = "Password confirmation does not match";
+    return;
+  }
+
+  try {
+    message.value = await auth.resetPassword({
+      email: form.email.trim(),
+      token: form.token.trim(),
+      password: form.password,
+      password_confirmation: form.password_confirmation
+    });
+    await router.push("/login");
+  } catch (error: unknown) {
+    isError.value = true;
+    message.value = error instanceof Error ? error.message : "Failed to reset password";
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,60 @@
+<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">
+          <h3 class="m-0 text-uppercase text-center fw-semibold">nexgen</h3>
+        </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 { ref } from "vue";
+import { useHead } from "@vueuse/head";
+import { useRoute } from "vue-router";
+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 verify = async () => {
+  if (!email || !token) {
+    isError.value = true;
+    message.value = "Invalid verification link. Please request a new one.";
+    return;
+  }
+
+  try {
+    message.value = await auth.verifyEmail({ email, token });
+    isError.value = false;
+  } catch (error: unknown) {
+    isError.value = true;
+    message.value = error instanceof Error ? error.message : "Failed to verify email";
+  }
+};
+
+void verify();
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,76 @@
+<template>
+  <Pagebar title="Dashboard" />
+  <!-- <Refresh @click="hardRefresh" /> -->
+
+  <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 { onMounted, onUnmounted } from "vue";
+import { useHead } from "@vueuse/head";
+import { pulse } from "@/plugins/pulse";
+import { useAuth } from "@/composables/useAuth";
+import Pagebar from "@/components/Pagebar.vue";
+import Refresh from "@/components/Refresh.vue";
+
+useHead({ title: "Dashboard" });
+
+const { user } = useAuth();
+
+let unsubscribe: (() => void) | null = null;
+
+onMounted(() => {
+  if (!user.value) return;
+
+  const channel = pulse.channel(`user:${user.value.id}`);
+  channel.listen("user.registered", () => alert("me"));
+  unsubscribe = () => channel.stopListening("user.registered");
+});
+
+onUnmounted(() => {
+  unsubscribe?.();
+});
+
+// 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/template/src/resources/src/plugins/axios.ts

@@ -0,0 +1,33 @@
+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/template/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/template/src/resources/src/plugins/dialog.ts

@@ -0,0 +1,167 @@
+import type { App } from "vue";
+
+type PromptOptions = {
+  limit?: number;
+  placeholder?: string;
+  defaultValue?: string;
+};
+
+type DialogClient = {
+  alert: (text?: string) => Promise<void>;
+  confirm: (text?: string) => Promise<boolean>;
+  prompt: (text?: string, options?: PromptOptions) => Promise<{ ok: boolean; value: string }>;
+};
+
+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 = "rgba(0, 0, 0, .5)";
+  root.style.zIndex = "100000";
+  root.innerHTML = content;
+  return root;
+}
+
+function closeShell(shell: HTMLElement) {
+  if (shell.parentElement) shell.parentElement.removeChild(shell);
+}
+
+export const dialog: DialogClient = {
+  alert(text = "") {
+    return new Promise<void>((resolve) => {
+      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 bg-white 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 bg-white border-0'>
+            <button type='button' class='btn btn-primary btn-sm' data-dialog='ok'>OK</button>
+          </div>
+        </div>
+      `);
+
+      shell.addEventListener("click", (event) => {
+        const target = event.target as HTMLElement;
+        const action = target.closest("[data-dialog]")?.getAttribute("data-dialog");
+        if (action === "ok" || action === "close") {
+          closeShell(shell);
+          resolve();
+        }
+      });
+
+      hostNode().appendChild(shell);
+    });
+  },
+
+  confirm(text = "") {
+    return new Promise<boolean>((resolve) => {
+      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 bg-white 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 bg-white 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) => {
+        const target = event.target as HTMLElement;
+        const action = target.closest("[data-dialog]")?.getAttribute("data-dialog");
+        if (action === "ok") {
+          closeShell(shell);
+          resolve(true);
+        }
+        if (action === "cancel") {
+          closeShell(shell);
+          resolve(false);
+        }
+      });
+
+      hostNode().appendChild(shell);
+    });
+  },
+
+  prompt(text = "", options: PromptOptions = {}) {
+    const { limit = 0, placeholder = "Remarks...", defaultValue = "" } = options;
+
+    return new Promise<{ ok: boolean; value: string }>((resolve) => {
+      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 bg-white 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 border-dark' 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 bg-white 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) => {
+        const target = event.target as HTMLElement;
+        const action = target.closest("[data-dialog]")?.getAttribute("data-dialog");
+        const input = shell.querySelector(
+          "textarea[data-dialog='input']"
+        ) as HTMLTextAreaElement | null;
+
+        if (action === "ok") {
+          closeShell(shell);
+          resolve({ ok: true, value: input?.value || "" });
+        }
+        if (action === "cancel") {
+          closeShell(shell);
+          resolve({ ok: false, value: "" });
+        }
+      });
+
+      hostNode().appendChild(shell);
+    });
+  }
+};
+
+export const DialogPlugin = {
+  install(app: App) {
+    app.config.globalProperties.$dialog = dialog;
+  }
+};
+
+declare module "vue" {
+  interface ComponentCustomProperties {
+    $dialog: DialogClient;
+  }
+}