create-nexwire 4.0.0

package/express/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/express/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/express/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/express/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/express/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 Button from "@/components/Button.vue";
+import Input from "@/components/Input.vue";
+import InputPasswordToggle from "@/components/InputPasswordToggle.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>

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

@@ -0,0 +1,118 @@
+<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 "@vueuse/head";
+import { ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import Button from "@/components/Button.vue";
+import InputPasswordToggle from "@/components/InputPasswordToggle.vue";
+import { useGumForm } from "@/plugins/gum";
+
+useHead({ title: "Reset Password" });
+
+const route = useRoute();
+const router = useRouter();
+
+const email = String(route.query.email || "");
+const token = String(route.query.token || "");
+
+const form = useGumForm({
+  email,
+  token,
+  password: "",
+  password_confirmation: ""
+});
+
+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.post(
+    "/api/auth/reset-password",
+    {
+      email: String(form.data.email || "").trim(),
+      token: String(form.data.token || "").trim(),
+      password: form.data.password,
+      password_confirmation: form.data.password_confirmation
+    },
+    {
+      onSuccess: (res) => {
+        isError.value = false;
+        message.value = res.data.message;
+        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/express/src/resources/src/pages/auth/verifyEmail.vue

@@ -0,0 +1,68 @@
+<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 "@vueuse/head";
+import { ref } from "vue";
+import { useRoute } from "vue-router";
+import { useGum } from "@/plugins/gum";
+
+useHead({ title: "Verify Email" });
+
+const route = useRoute();
+
+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 { post } = useGum();
+
+const verify = async () => {
+  if (!email || !token) {
+    isError.value = true;
+    message.value = "Invalid verification link. Please request a new one.";
+    return;
+  }
+
+  await post(
+    "/api/auth/verify-email",
+    { email, token },
+    {
+      onSuccess: () => {
+        isError.value = false;
+        message.value = "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/express/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 "@vueuse/head";
+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>