create-nexwire 4.3.0 → 4.4.0

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>
 

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

@@ -3,7 +3,7 @@
     <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>
         <p v-if="errorMessage" class="text-center alert alert-danger text-danger py-1 mt-2">
           {{ errorMessage }}
@@ -18,7 +18,8 @@
               placeholder="Enter your email..."
               :err="form.errors.email"
               focus
-              must />
+              must
+            />
           </div>
           <div class="mb-4">
             <input-password-toggle
@@ -27,15 +28,14 @@
               label="password"
               placeholder="Enter your password..."
               :err="form.errors.password"
-              must />
+              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>
+            <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" />
+          <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>
@@ -50,12 +50,12 @@
 import { useHead } from "@unhead/vue";
 import { ref } from "vue";
 import { useRouter } from "vue-router";
+import Button from "@/components/Button.vue";
 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";
+import { useGum } from "@/plugins/gum";
+import { type LoginPayload, useAuthStore } from "@/stores/auth";
 
 useHead({ title: "Login" });
 
@@ -63,36 +63,33 @@ const router = useRouter();
 const auth = useAuthStore();
 const errorMessage = ref("");
 
-const form = useGumForm({
+const gum = useGum({
   email: "",
   password: "",
   remember: false
 });
 
+const form = gum.form;
 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
+  await form.postWith({
+    fetcher: (body) => auth.login(body as LoginPayload),
+    transform: (data) => ({
+      email: String(data.email || "").trim(),
+      password: data.password,
+      remember: !!data.remember
+    }),
+    onSuccess: async () => {
+      form.reset("password");
+      await router.push("/");
     },
-    {
-      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");
-      }
+    onError: (_errors, error) => {
+      errorMessage.value = error instanceof Error ? error.message : "Unable to login right now";
+      form.reset("password");
     }
-  );
+  });
 };
 </script>
 

package/hono/src/resources/src/pages/auth/register.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">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'">
+        <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">
@@ -22,7 +19,8 @@
               placeholder="Enter your name..."
               :err="form.errors.name"
               focus
-              must />
+              must
+            />
           </div>
           <div class="mb-4">
             <Input
@@ -32,7 +30,8 @@
               label="email"
               placeholder="Enter your email..."
               :err="form.errors.email"
-              must />
+              must
+            />
           </div>
           <div class="mb-4">
             <InputPasswordToggle
@@ -41,7 +40,8 @@
               label="password"
               placeholder="Create a password..."
               :err="form.errors.password"
-              must />
+              must
+            />
           </div>
           <div class="mb-4">
             <InputPasswordToggle
@@ -50,10 +50,10 @@
               label="confirm password"
               placeholder="Confirm your password..."
               :err="form.errors.password_confirmation"
-              must />
+              must
+            />
           </div>
-          <Button type="submit" class="btn btn-primary w-100" label="Create Account"
-            icon="bi bi-person-plus" :disabled="processing" />
+          <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>
@@ -68,24 +68,25 @@
 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 Button from "@/components/Button.vue";
-import { useGumForm } from "@/plugins/gum";
-import { useAuthStore } from "@/stores/auth";
+import { useGum } from "@/plugins/gum";
+import { type RegisterPayload, useAuthStore } from "@/stores/auth";
 
 useHead({ title: "Register" });
 
 const router = useRouter();
 const auth = useAuthStore();
 
-const form = useGumForm({
+const gum = useGum({
   name: "",
   email: "",
   password: "",
   password_confirmation: ""
 });
 
+const form = gum.form;
 const processing = form.processing;
 const message = ref("");
 const isError = ref(false);
@@ -100,33 +101,28 @@ const onSubmit = async () => {
     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";
+  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>
 

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

@@ -3,19 +3,13 @@
     <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">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'">
+        <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">
+        <form id="formAuthentication" :class="{ 'pe-none opacity-50': !isLinkValid }" @submit.prevent="onSubmit">
           <div class="mb-4">
             <input-password-toggle
               id="password"
@@ -23,7 +17,8 @@
               label="new password"
               placeholder="Enter your password..."
               :err="form.errors.password"
-              must />
+              must
+            />
           </div>
           <div class="mb-4">
             <input-password-toggle
@@ -32,14 +27,10 @@
               label="confirm password"
               placeholder="Confirm new password..."
               :err="form.errors.password_confirmation"
-              must />
+              must
+            />
           </div>
-          <Button
-            type="submit"
-            label="Reset Password"
-            class="btn btn-primary w-100"
-            icon="bi bi-key ms-2"
-            :disabled="processing" />
+          <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">
@@ -58,23 +49,26 @@ 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";
+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 form = useGumForm({
+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.");
@@ -92,26 +86,24 @@ const onSubmit = async () => {
     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
+  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");
     },
-    {
-      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";
-      }
+    onError: (_errors, error) => {
+      isError.value = true;
+      message.value = error instanceof Error ? error.message : "Failed to reset password";
     }
-  );
+  });
 };
 </script>
 

package/hono/src/resources/src/pages/auth/verifyEmail.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">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'">
+        <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">
@@ -27,17 +24,19 @@ 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 { post } = useGum();
+const gum = useGum();
 
 const verify = async () => {
   if (!email || !token) {
@@ -46,20 +45,17 @@ const verify = async () => {
     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";
-      }
+  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();