feat : improve password validation

app/composables/user_password_rules.js

@@ -0,0 +1,45 @@
+import { computed } from "vue";
+
+export function useUserPasswordRules(passwordRef, firstnameRef, lastnameRef) {
+  const rules = {
+    minLength: 8,
+    alphanumeric: /^(?=.*[a-zA-Z])(?=.*\d)/,
+    specialChar: /[^a-zA-Z0-9]/,
+  };
+
+  const passwordErrors = computed(() => {
+    const errors = [];
+
+    if (!passwordRef.value) {
+      return errors;
+    }
+
+    if (passwordRef.value.length < rules.minLength) {
+      errors.push("Password must be at least 8 characters long");
+    }
+
+    if (!rules.alphanumeric.test(passwordRef.value)) {
+      errors.push("Password must contain letters and numbers");
+    }
+
+    if (!rules.specialChar.test(passwordRef.value)) {
+      errors.push("Password must contain at least one special character");
+    }
+
+    const first = firstnameRef?.value?.toLowerCase();
+    const last = lastnameRef?.value?.toLowerCase();
+
+    if (
+      (first && passwordRef.value.toLowerCase().includes(first)) ||
+      (last && passwordRef.value.toLowerCase().includes(last))
+    ) {
+      errors.push("Password must not contain your name");
+    }
+
+    return errors;
+  });
+
+  return {
+    passwordErrors,
+  };
+}

app/pages/account/register.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { useToast } from "vue-toastification";
 import { useUsersStore } from "~~/store/users";
+import { useUserPasswordRules } from "@/composables/user_password_rules";
 const userData = useUsersStore();
 const { getUserData } = userData;
 const route = useRoute();
@@ -12,6 +13,7 @@ const email = ref();
 const password = ref();
 const csrfToken = ref();
 const component = ref("waiting");
+const submitted = ref(false);
 const { kratosUrl } = useRuntimeConfig().public;
 const errors = ref({
   email: "",
@@ -20,8 +22,20 @@ const errors = ref({
   lastname: "",
 });
 const registerURLWithFlowQuery = ref("");
-console.log(); // this console.log is required because without this, nuxt will give 5xx error as async function is called afterwards
+const { passwordErrors } = useUserPasswordRules(
+  password,
+  firstname,
+  lastname
+);
 
+console.log(); // this console.log is required because without this, nuxt will give 5xx error as async function is called afterwards
+function onSubmit() {
+  submitted.value = true;
+  if (passwordErrors.value.length > 0) {
+    return;
+  }
+  event.target.submit();
+}
 (async () => {
   if (process.client) {
     const user = getUserData();
@@ -137,8 +151,17 @@ async function setFlowIDAndCSRFToken() {
 
 <template>
   <QuizLoadingSpace v-if="component === 'waiting'"></QuizLoadingSpace>
-  <Frame v-else page-title="Register" page-message="We Would Be Happy To Have You">
-    <form method="POST" :action="registerURLWithFlowQuery" enctype="application/json">
+  <Frame
+    v-else
+    page-title="Register"
+    page-message="We Would Be Happy To Have You"
+  >
+    <form
+      method="POST"
+      :action="registerURLWithFlowQuery"
+      enctype="application/json"
+      @submit.prevent="onSubmit"
+    >
       <div class="mb-3">
         <label for="firstname" class="form-label">First Name</label>
         <input id="firstname" v-model="firstname" type="text" name="traits.name.first" class="form-control" required />
@@ -160,8 +183,19 @@ async function setFlowIDAndCSRFToken() {
       </div>
       <div class="mb-3">
         <label for="password" class="form-label">Password</label>
-        <input id="password" v-model="password" type="password" name="password" class="form-control" required />
-        <div v-if="errors.password" class="text-danger">
+        <input
+          id="password"
+          v-model="password"
+          type="password"
+          name="password"
+          class="form-control"
+          placeholder=""
+          required
+        />
+        <div v-if="submitted && passwordErrors.length" class="mt-2">
+          <div v-for="(err, i) in passwordErrors" :key="i">• {{ err }}</div>
+        </div>
+        <div v-else-if="errors.password" class="text-danger">
           {{ errors.password }}
         </div>
       </div>
@@ -177,4 +211,4 @@ async function setFlowIDAndCSRFToken() {
       </button>
     </form>
   </Frame>
-</template>
+</template>