create-nexwire 4.3.0 → 4.4.0

package/express/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>
@@ -71,21 +71,22 @@ 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";
+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/express/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/express/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();