create-nexwire 4.0.0

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

@@ -0,0 +1,105 @@
+<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>

package/hono/src/resources/src/layouts/Layout/Sidebar.vue

@@ -0,0 +1,137 @@
+<template>
+  <!-- sidebar start -->
+  <div class="sidebar">
+    <a
+      href="#"
+      role="button"
+      class="sidebar-toggle card card-body rounded-circle position-absolute top-0 end-0 d-xl-none"
+      title="sidebar-toggle"
+      @click.prevent="props.onToggleSidebar">
+      <i class="bi bi-chevron-left fw-bold"></i>
+    </a>
+
+    <div class="app-brand">
+      <a href="#" aria-label="logo">
+        <img src="@/assets/images/logo.png" alt="nexwire" />
+      </a>
+    </div>
+    <div id="accordion-sidebar" class="accordion accordion-flush">
+      <ul class="list-group px-3">
+        <li class="list-group-item" :class="{ active: isActive('/') }">
+          <router-link to="/">
+            <div class="menu-icon">
+              <i class="bi bi-house"></i>
+            </div>
+            <span>Dashboard</span>
+          </router-link>
+        </li>
+        <li class="split-label">
+          <span class="text-uppercase">setup</span>
+        </li>
+        <li class="list-group-item accordion-item">
+          <a
+            href="#"
+            class="accordion-button collapsed"
+            type="button"
+            data-bs-toggle="collapse"
+            data-bs-target="#flush-collapseOne"
+            aria-expanded="false"
+            aria-controls="flush-collapseOne">
+            <div class="menu-icon">
+              <i class="bi bi-shield-check"></i>
+            </div>
+            <span>Content</span>
+          </a>
+          <ul
+            id="flush-collapseOne"
+            class="list-group accordion-collapse collapse"
+            data-bs-parent="#accordion-sidebar">
+            <li class="list-group-item">
+              <a href="#">Posts</a>
+            </li>
+            <li class="list-group-item">
+              <a href="#">Pages</a>
+            </li>
+            <li class="list-group-item accordion-item">
+              <a
+                href="#"
+                class="accordion-button collapsed"
+                type="button"
+                data-bs-toggle="collapse"
+                data-bs-target="#flush-collapseTwo"
+                aria-expanded="false"
+                aria-controls="flush-collapseTwo">
+                <span>Media</span>
+              </a>
+              <ul id="flush-collapseTwo" class="list-group accordion-collapse collapse">
+                <li class="list-group-item">
+                  <a href="#">Image</a>
+                </li>
+                <li class="list-group-item active">
+                  <a href="#">Audio</a>
+                </li>
+                <li class="list-group-item accordion-item">
+                  <a
+                    href="#"
+                    class="accordion-button collapsed"
+                    type="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#flush-collapseThree"
+                    aria-expanded="false"
+                    aria-controls="flush-collapseThree">
+                    <span>Settings</span>
+                  </a>
+                  <ul id="flush-collapseThree" class="list-group accordion-collapse collapse">
+                    <li class="list-group-item">
+                      <a href="#">Users</a>
+                    </li>
+                    <li class="list-group-item">
+                      <a href="#">Roles</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+        <li class="list-group-item">
+          <a href="#">
+            <div class="menu-icon">
+              <i class="bi bi-chat"></i>
+            </div>
+            <span>Comments</span>
+          </a>
+        </li>
+        <li class="list-group-item">
+          <a href="#">
+            <div class="menu-icon">
+              <i class="bi bi-gear"></i>
+            </div>
+            <span>Tools</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <!-- sidebar end -->
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted } from "vue";
+import { useRoute } from "vue-router";
+import { useAdminUiStore } from "@/stores/admin-ui";
+
+const props = defineProps<{ onToggleSidebar: () => void; }>();
+
+const ui = useAdminUiStore();
+const route = useRoute();
+
+function isActive(path: string) {
+  return route.path === path;
+}
+
+onMounted(() => ui.initSidebarCollapsePersistence());
+onBeforeUnmount(() => ui.cleanupSidebarCollapsePersistence());
+</script>
+
+<style lang="scss" scoped></style>

package/hono/src/resources/src/layouts/Layout/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <Sidebar :class="{ tgl: sidebarOpen }" :on-toggle-sidebar="ui.toggleSidebar" />
+  <!-- main start -->
+  <div class="main" :class="{ tgl: sidebarOpen, 'no-transition': disableTransition }">
+    <div class="content-wrapper container-xxl px-0">
+      <Header
+        :is-scrolled="headerScrolled"
+        :theme-mode="themeMode"
+        :on-logout="logout"
+        :on-toggle-sidebar="ui.toggleSidebar"
+        :on-toggle-theme="ui.cycleTheme" />
+      <!-- content start -->
+      <div class="content">
+        <router-view />
+      </div>
+      <!-- content end -->
+      <Footer />
+    </div>
+  </div>
+  <!-- main end -->
+  <div class="backdrop" :class="{ 'off-canvas': sidebarOpen }" @click="ui.toggleSidebar"></div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from "pinia";
+import { onBeforeUnmount, onMounted, provide, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
+import Footer from "@/layouts/Layout/Footer.vue";
+import Header from "@/layouts/Layout/Header.vue";
+import Sidebar from "@/layouts/Layout/Sidebar.vue";
+import { useAdminUiStore } from "@/stores/admin-ui";
+import { useAuthStore } from "@/stores/auth";
+
+const ui = useAdminUiStore();
+const auth = useAuthStore();
+const router = useRouter();
+const { themeMode, sidebarOpen } = storeToRefs(ui);
+const headerScrolled = ref(false);
+const disableTransition = ref(true);
+const featureButtons = reactive<
+  Array<{
+    id: symbol;
+    icon?: string;
+    label: string;
+    title: string;
+    attrs?: Record<string, string>;
+    onClick: () => void;
+  }>
+>([]);
+provide("featureButtons", featureButtons);
+
+async function logout() {
+  await auth.logout();
+  await router.push("/login");
+}
+
+function onScroll() {
+  const y = window.scrollY;
+  if (y > 20) {
+    headerScrolled.value = true;
+  } else if (y < 5) {
+    headerScrolled.value = false;
+  }
+}
+
+onMounted(() => {
+  ui.initTheme();
+
+  window.addEventListener("scroll", onScroll, { passive: true });
+  onScroll();
+
+  // Force reflow then enable transitions on next frame
+  void document.body.offsetHeight;
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      disableTransition.value = false;
+    });
+  });
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("scroll", onScroll);
+  ui.cleanupTheme();
+});
+</script>
+
+<style scoped></style>

package/hono/src/resources/src/main.ts

@@ -0,0 +1,26 @@
+import "@/plugins/axios";
+import { createHead } from "@vueuse/head";
+import { createPinia } from "pinia";
+import { createApp } from "vue";
+import { DialogPlugin } from "@/plugins/dialog";
+import { GumPlugin } from "@/plugins/gum";
+import { PulsePlugin } from "@/plugins/pulse";
+import App from "./App.vue";
+import router from "./router";
+
+import "bootstrap/dist/css/bootstrap.min.css";
+import "bootstrap-icons/font/bootstrap-icons.css";
+import "@/assets/scss/custom.scss";
+import "bootstrap/dist/js/bootstrap.bundle.min.js";
+
+const app = createApp(App);
+const pinia = createPinia();
+const head = createHead({ titleTemplate: (title) => (title ? `${title} | nexwire` : "nexwire") });
+
+app.use(pinia);
+app.use(router);
+app.use(head);
+app.use(DialogPlugin);
+app.use(GumPlugin);
+app.use(PulsePlugin);
+app.mount("#app");

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

@@ -0,0 +1,82 @@
+<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">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'">
+          {{ message }}
+        </p>
+        <form id="formAuthentication" @submit.prevent="onSubmit">
+          <div class="mb-4">
+            <Input
+              id="email"
+              v-model="form.data.email"
+              type="email"
+              label="email"
+              placeholder="Enter your email..."
+              :err="form.errors.email"
+              focus
+              must />
+          </div>
+          <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">
+            <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 "@vueuse/head";
+import { ref } from "vue";
+import Button from "@/components/Button.vue";
+import Input from "@/components/Input.vue";
+import { useGumForm } from "@/plugins/gum";
+
+useHead({ title: "Forget Password" });
+
+const form = useGumForm({ email: "" });
+const processing = form.processing;
+const message = ref("");
+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()
+    },
+    {
+      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";
+      }
+    }
+  );
+};
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,99 @@
+<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>
+        <p v-if="errorMessage" class="text-center alert alert-danger text-danger py-1 mt-2">
+          {{ errorMessage }}
+        </p>
+        <form @submit.prevent="onSubmit">
+          <div class="mb-4">
+            <Input
+              id="email"
+              v-model="form.data.email"
+              type="email"
+              label="email"
+              placeholder="Enter your email..."
+              :err="form.errors.email"
+              focus
+              must />
+          </div>
+          <div class="mb-4">
+            <input-password-toggle
+              id="password"
+              v-model="form.data.password"
+              label="password"
+              placeholder="Enter your password..."
+              :err="form.errors.password"
+              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>
+          </div>
+          <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>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useHead } from "@vueuse/head";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import Checkbox from "@/components/Checkbox.vue";
+import Input from "@/components/Input.vue";
+import InputPasswordToggle from "@/components/InputPasswordToggle.vue";
+import Button from "@/components/Button.vue";
+import { useGumForm } from "@/plugins/gum";
+import { useAuthStore } from "@/stores/auth";
+
+useHead({ title: "Login" });
+
+const router = useRouter();
+const auth = useAuthStore();
+const errorMessage = ref("");
+
+const form = useGumForm({
+  email: "",
+  password: "",
+  remember: false
+});
+
+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
+    },
+    {
+      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");
+      }
+    }
+  );
+};
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,133 @@
+<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 "@vueuse/head";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import Input from "@/components/Input.vue";
+import InputPasswordToggle from "@/components/InputPasswordToggle.vue";
+import Button from "@/components/Button.vue";
+import { useGumForm } from "@/plugins/gum";
+import { useAuthStore } from "@/stores/auth";
+
+useHead({ title: "Register" });
+
+const router = useRouter();
+const auth = useAuthStore();
+
+const form = useGumForm({
+  name: "",
+  email: "",
+  password: "",
+  password_confirmation: ""
+});
+
+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.post(
+    "/api/auth/register",
+    {
+      name: String(form.data.name || "").trim(),
+      email: String(form.data.email || "").trim(),
+      password: form.data.password,
+      password_confirmation: form.data.password_confirmation
+    },
+    {
+      onSuccess: async () => {
+        auth.initialized = false;
+        await auth.bootstrap();
+
+        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>