From 383ef687a05461920ee1a9a4cc535cfdf501a278 Mon Sep 17 00:00:00 2001
From: "viral.shingadia" <viral.shingadia@improwised.com>
Date: Tue, 9 Dec 2025 15:16:25 +0530
Subject: [PATCH 1/2] feat: added validation for register page with proper
 error messages

---
 app/composables/useRegisterValidation.js | 65 ++++++++++++++++++++++++
 app/pages/account/register.vue           | 39 ++++++++++----
 2 files changed, 93 insertions(+), 11 deletions(-)
 create mode 100644 app/composables/useRegisterValidation.js

diff --git a/app/composables/useRegisterValidation.js b/app/composables/useRegisterValidation.js
new file mode 100644
index 00000000..349c4bec
--- /dev/null
+++ b/app/composables/useRegisterValidation.js
@@ -0,0 +1,65 @@
+import { reactive } from "vue";
+
+export function useRegisterValidation() {
+  const errors = reactive({
+    firstname: "",
+    lastname: "",
+    email: "",
+    password: "",
+  });
+
+  function resetErrors() {
+    errors.firstname = "";
+    errors.lastname = "";
+    errors.email = "";
+    errors.password = "";
+  }
+
+  function validate(form) {
+    resetErrors();
+
+    let valid = true;
+
+    // First Name
+    if (!form.firstname?.trim()) {
+      errors.firstname = "First name is required.";
+      valid = false;
+    }
+
+    // Last Name
+    if (!form.lastname?.trim()) {
+      errors.lastname = "Last name is required.";
+      valid = false;
+    }
+
+    // Email
+    if (!form.email?.trim()) {
+      errors.email = "Email is required.";
+      valid = false;
+    } else if (!/^\S+@\S+\.\S+$/.test(form.email)) {
+      errors.email = "Enter a valid email.";
+      valid = false;
+    }
+
+    // Password (single combined rule)
+    const passwordRegex =
+      /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[^A-Za-z0-9]).{8,}$/;
+
+    if (!form.password?.trim()) {
+      errors.password = "Password is required.";
+      valid = false;
+    } else if (!passwordRegex.test(form.password)) {
+      errors.password =
+        "Password must contain 8 characters, 1 uppercase, 1 lowercase, 1 number, and 1 special character.";
+      valid = false;
+    }
+
+    return valid;
+  }
+
+  return {
+    errors,
+    validate,
+    resetErrors,
+  };
+}
diff --git a/app/pages/account/register.vue b/app/pages/account/register.vue
index 4852bebd..8eb8216c 100644
--- a/app/pages/account/register.vue
+++ b/app/pages/account/register.vue
@@ -13,15 +13,35 @@ const password = ref();
 const csrfToken = ref();
 const component = ref("waiting");
 const { kratosUrl } = useRuntimeConfig().public;
-const errors = ref({
-  email: "",
-  password: "",
-  firstname: "",
-  lastname: "",
-});
+// const errors = ref({
+//   email: "",
+//   password: "",
+//   firstname: "",
+//   lastname: "",
+// });
+const { errors, validate } = useRegisterValidation();
+
 const registerURLWithFlowQuery = ref("");
 console.log(); // this console.log is required because without this, nuxt will give 5xx error as async function is called afterwards
 
+function onSubmit(event) {
+  const isValid = validate({
+    firstname: firstname.value,
+    lastname: lastname.value,
+    email: email.value,
+    password: password.value,
+  });
+
+  console.log(isValid);
+  if (!isValid) {
+    // Stop form submission
+    return;
+  }
+
+  // If valid → submit the form manually
+  event.target.submit();
+}
+
 (async () => {
   if (process.client) {
     const user = getUserData();
@@ -140,6 +160,7 @@ async function setFlowIDAndCSRFToken() {
   >
     <form
       method="POST"
+      @submit.prevent="onSubmit"
       :action="registerURLWithFlowQuery"
       enctype="application/json"
     >
@@ -151,7 +172,6 @@ async function setFlowIDAndCSRFToken() {
           type="text"
           name="traits.name.first"
           class="form-control"
-          required
         />
         <div v-if="errors.firstname" class="text-danger">
           {{ errors.firstname }}
@@ -165,7 +185,6 @@ async function setFlowIDAndCSRFToken() {
           type="text"
           name="traits.name.last"
           class="form-control"
-          required
         />
         <div v-if="errors.lastname" class="text-danger">
           {{ errors.lastname }}
@@ -176,10 +195,9 @@ async function setFlowIDAndCSRFToken() {
         <input
           id="email"
           v-model="email"
-          type="email"
+          type="text"
           name="traits.email"
           class="form-control"
-          required
         />
         <div v-if="errors.email" class="text-danger">{{ errors.email }}</div>
       </div>
@@ -191,7 +209,6 @@ async function setFlowIDAndCSRFToken() {
           type="password"
           name="password"
           class="form-control"
-          required
         />
         <div v-if="errors.password" class="text-danger">
           {{ errors.password }}

From 8399ad63306da303b4202f9f72b437699855b34f Mon Sep 17 00:00:00 2001
From: "viral.shingadia" <viral.shingadia@improwised.com>
Date: Tue, 9 Dec 2025 15:24:13 +0530
Subject: [PATCH 2/2] fix: remove comments in register.vue file

---
 app/pages/account/register.vue | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/app/pages/account/register.vue b/app/pages/account/register.vue
index 8eb8216c..da1e8c15 100644
--- a/app/pages/account/register.vue
+++ b/app/pages/account/register.vue
@@ -13,12 +13,6 @@ const password = ref();
 const csrfToken = ref();
 const component = ref("waiting");
 const { kratosUrl } = useRuntimeConfig().public;
-// const errors = ref({
-//   email: "",
-//   password: "",
-//   firstname: "",
-//   lastname: "",
-// });
 const { errors, validate } = useRegisterValidation();
 
 const registerURLWithFlowQuery = ref("");
@@ -160,9 +154,9 @@ async function setFlowIDAndCSRFToken() {
   >
     <form
       method="POST"
-      @submit.prevent="onSubmit"
       :action="registerURLWithFlowQuery"
       enctype="application/json"
+      @submit.prevent="onSubmit"
     >
       <div class="mb-3">
         <label for="firstname" class="form-label">First Name</label>