fix(vuelidate): correct validation

maevsi · Aug 23, 2022 · c23c14c · c23c14c
1 parent 233f7f8
commit c23c14c
Show file tree

Hide file tree

Showing 11 changed files with 232 additions and 215 deletions.
diff --git a/nuxt/components/form/FormDelete.vue b/nuxt/components/form/FormDelete.vue
@@ -24,11 +24,12 @@ import { minLength, required } from '@vuelidate/validators'
 import { CombinedError, UseMutationResponse } from '@urql/vue'
 import consola from 'consola'
 import Swal from 'sweetalert2'
+import { toRef } from 'vue'
 import { useI18n } from 'vue-i18n-composable'
 
 import { defineComponent, PropType, reactive } from '#app'
 
-import { capitalizeFirstLetter } from '~/plugins/util/util'
+import { capitalizeFirstLetter, getApiDataDefault } from '~/plugins/util/util'
 import {
   formPreSubmit,
   VALIDATION_PASSWORD_LENGTH_MINIMUM,
@@ -56,16 +57,26 @@ export default defineComponent({
   setup(props, { emit }) {
     const { t } = useI18n()
 
+    const apiData = getApiDataDefault()
     const data = reactive({
       form: {
         password: undefined as string | undefined,
       },
       isFormSent: false,
     })
+    const rules = {
+      form: {
+        password: {
+          minLength: minLength(VALIDATION_PASSWORD_LENGTH_MINIMUM),
+          required,
+        },
+      },
+    }
+    const v$ = useVuelidate(rules, data)
     const methods = {
       async submit() {
         try {
-          await formPreSubmit(this)
+          await formPreSubmit(apiData, v$, toRef(data, 'isFormSent'))
         } catch (error) {
           consola.debug(error)
           return
@@ -96,15 +107,6 @@ export default defineComponent({
           })
       },
     }
-    const rules = {
-      form: {
-        password: {
-          minLength: minLength(VALIDATION_PASSWORD_LENGTH_MINIMUM),
-          required,
-        },
-      },
-    }
-    const v$ = useVuelidate(rules, data)
 
     return {
       ...data,

diff --git a/nuxt/components/form/account/FormAccountRegistration.vue b/nuxt/components/form/account/FormAccountRegistration.vue
@@ -56,6 +56,7 @@ import {
 } from '@vuelidate/validators'
 import consola from 'consola'
 import Swal from 'sweetalert2'
+import { toRef } from 'vue'
 import { useI18n } from 'vue-i18n-composable'
 
 import { computed, defineComponent, reactive, useNuxtApp } from '#app'
@@ -95,11 +96,33 @@ const FormAccountRegistration = defineComponent({
       },
       isFormSent: false,
     })
+    const rules = {
+      form: {
+        username: {
+          existenceNone: helpers.withAsync(validateUsername(true)),
+          formatSlug: VALIDATION_FORMAT_SLUG,
+          maxLength: maxLength(VALIDATION_USERNAME_LENGTH_MAXIMUM),
+          required,
+        },
+        password: {
+          minLength: minLength(VALIDATION_PASSWORD_LENGTH_MINIMUM),
+          required,
+        },
+        emailAddress: {
+          email,
+          formatUppercaseNone: VALIDATION_FORMAT_UPPERCASE_NONE,
+          maxLength: maxLength(VALIDATION_EMAIL_ADDRESS_LENGTH_MAXIMUM),
+          required,
+        },
+      },
+    }
+    const v$ = useVuelidate(rules, data)
     const methods = {
       async submit() {
         try {
-          await formPreSubmit(this)
+          await formPreSubmit(apiData, v$, toRef(data, 'isFormSent'))
         } catch (error) {
+          consola.debug(error)
           return
         }
 
@@ -127,27 +150,6 @@ const FormAccountRegistration = defineComponent({
         })
       },
     }
-    const rules = {
-      form: {
-        username: {
-          existenceNone: helpers.withAsync(validateUsername(true)),
-          formatSlug: VALIDATION_FORMAT_SLUG,
-          maxLength: maxLength(VALIDATION_USERNAME_LENGTH_MAXIMUM),
-          required,
-        },
-        password: {
-          minLength: minLength(VALIDATION_PASSWORD_LENGTH_MINIMUM),
-          required,
-        },
-        emailAddress: {
-          email,
-          formatUppercaseNone: VALIDATION_FORMAT_UPPERCASE_NONE,
-          maxLength: maxLength(VALIDATION_EMAIL_ADDRESS_LENGTH_MAXIMUM),
-          required,
-        },
-      },
-    }
-    const v$ = useVuelidate(rules, data)
 
     return {
       ...apiData,

diff --git a/nuxt/components/form/account/FormAccountSignIn.vue b/nuxt/components/form/account/FormAccountSignIn.vue
@@ -55,7 +55,7 @@ import { useVuelidate } from '@vuelidate/core'
 import { maxLength, minLength, required } from '@vuelidate/validators'
 import consola from 'consola'
 import Swal from 'sweetalert2'
-import { reactive } from 'vue'
+import { reactive, toRef } from 'vue'
 import { useI18n } from 'vue-i18n-composable'
 
 import { useNuxtApp, defineComponent } from '#app'
@@ -91,6 +91,20 @@ const FormAccountSignIn = defineComponent({
       },
       isFormSent: false,
     })
+    const rules = {
+      form: {
+        username: {
+          formatSlug: VALIDATION_FORMAT_SLUG,
+          maxLength: maxLength(VALIDATION_USERNAME_LENGTH_MAXIMUM),
+          required,
+        },
+        password: {
+          minLength: minLength(VALIDATION_PASSWORD_LENGTH_MINIMUM),
+          required,
+        },
+      },
+    }
+    const v$ = useVuelidate(rules, data)
     const methods = {
       accountRegistrationRefresh() {
         executeMutationAccountRegistrationRefresh({
@@ -111,8 +125,9 @@ const FormAccountSignIn = defineComponent({
       },
       async submit() {
         try {
-          await formPreSubmit(this)
+          await formPreSubmit(apiData, v$, toRef(data, 'isFormSent'))
         } catch (error) {
+          consola.debug(error)
           return
         }
 
@@ -128,32 +143,18 @@ const FormAccountSignIn = defineComponent({
               .then(() => {
                 $router.push(localePath(`/dashboard`))
               })
-              .catch(
-                async () =>
-                  await Swal.fire({
-                    icon: 'error',
-                    text: t('jwtStoreFail') as string,
-                    title: t('globalStatusError'),
-                  })
-              )
+              .catch(async (error) => {
+                consola.debug(error)
+                await Swal.fire({
+                  icon: 'error',
+                  text: t('jwtStoreFail') as string,
+                  title: t('globalStatusError'),
+                })
+              })
           }
         })
       },
     }
-    const rules = {
-      form: {
-        username: {
-          formatSlug: VALIDATION_FORMAT_SLUG,
-          maxLength: maxLength(VALIDATION_USERNAME_LENGTH_MAXIMUM),
-          required,
-        },
-        password: {
-          minLength: minLength(VALIDATION_PASSWORD_LENGTH_MINIMUM),
-          required,
-        },
-      },
-    }
-    const v$ = useVuelidate(rules, data)
 
     return {
       ...apiData,

diff --git a/nuxt/components/form/account/password/FormAccountPasswordChange.vue b/nuxt/components/form/account/password/FormAccountPasswordChange.vue
@@ -27,7 +27,7 @@ import { useVuelidate } from '@vuelidate/core'
 import { minLength, required } from '@vuelidate/validators'
 import consola from 'consola'
 import Swal from 'sweetalert2'
-import { reactive, ref } from 'vue'
+import { reactive, ref, toRef } from 'vue'
 import { useI18n } from 'vue-i18n-composable'
 
 import { computed, defineComponent } from '#app'
@@ -66,14 +66,28 @@ const FormAccountPasswordChange = defineComponent({
       },
       isFormSent: false,
     })
+    const rules = {
+      form: {
+        passwordCurrent: {
+          minLength: minLength(VALIDATION_PASSWORD_LENGTH_MINIMUM),
+          required,
+        },
+        passwordNew: {
+          minLength: minLength(VALIDATION_PASSWORD_LENGTH_MINIMUM),
+          required,
+        },
+      },
+    }
+    const v$ = useVuelidate(rules, data)
     const methods = {
       resetForm() {
         refs.formRef.value?.reset()
       },
       async submit() {
         try {
-          await formPreSubmit(this)
+          await formPreSubmit(apiData, v$, toRef(data, 'isFormSent'))
         } catch (error) {
+          consola.debug(error)
           return
         }
 
@@ -101,19 +115,6 @@ const FormAccountPasswordChange = defineComponent({
         methods.resetForm()
       },
     }
-    const rules = {
-      form: {
-        passwordCurrent: {
-          minLength: minLength(VALIDATION_PASSWORD_LENGTH_MINIMUM),
-          required,
-        },
-        passwordNew: {
-          minLength: minLength(VALIDATION_PASSWORD_LENGTH_MINIMUM),
-          required,
-        },
-      },
-    }
-    const v$ = useVuelidate(rules, data)
 
     return {
       ...refs,

diff --git a/nuxt/components/form/account/password/FormAccountPasswordReset.vue b/nuxt/components/form/account/password/FormAccountPasswordReset.vue
@@ -21,7 +21,7 @@ import { useVuelidate } from '@vuelidate/core'
 import { minLength, required } from '@vuelidate/validators'
 import consola from 'consola'
 import Swal from 'sweetalert2'
-import { reactive } from 'vue'
+import { reactive, toRef } from 'vue'
 import { useI18n } from 'vue-i18n-composable'
 
 import { computed, defineComponent, useNuxtApp, useRoute } from '#app'
@@ -62,11 +62,21 @@ const FormAccountPasswordReset = defineComponent({
       },
       isFormSent: false,
     })
+    const rules = {
+      form: {
+        password: {
+          minLength: minLength(VALIDATION_PASSWORD_LENGTH_MINIMUM),
+          required,
+        },
+      },
+    }
+    const v$ = useVuelidate(rules, data)
     const methods = {
       async submit() {
         try {
-          await formPreSubmit(this)
+          await formPreSubmit(apiData, v$, toRef(data, 'isFormSent'))
         } catch (error) {
+          consola.debug(error)
           return
         }
 
@@ -97,15 +107,6 @@ const FormAccountPasswordReset = defineComponent({
         })
       },
     }
-    const rules = {
-      form: {
-        password: {
-          minLength: minLength(VALIDATION_PASSWORD_LENGTH_MINIMUM),
-          required,
-        },
-      },
-    }
-    const v$ = useVuelidate(rules, data)
 
     return {
       ...apiData,

diff --git a/nuxt/components/form/account/password/FormAccountPasswordResetRequest.vue b/nuxt/components/form/account/password/FormAccountPasswordResetRequest.vue
@@ -22,7 +22,7 @@ import { useVuelidate } from '@vuelidate/core'
 import { email, maxLength, required } from '@vuelidate/validators'
 import consola from 'consola'
 import Swal from 'sweetalert2'
-import { reactive } from 'vue'
+import { reactive, toRef } from 'vue'
 import { useI18n } from 'vue-i18n-composable'
 
 import { computed, defineComponent, PropType, useNuxtApp } from '#app'
@@ -64,10 +64,21 @@ const FormAccountPasswordResetRequest = defineComponent({
       },
       isFormSent: false,
     })
+    const rules = {
+      form: {
+        emailAddress: {
+          email,
+          formatUppercaseNone: VALIDATION_FORMAT_UPPERCASE_NONE,
+          maxLength: maxLength(VALIDATION_EMAIL_ADDRESS_LENGTH_MAXIMUM),
+          required,
+        },
+      },
+    }
+    const v$ = useVuelidate(rules, data)
     const methods = {
       async submit() {
         try {
-          await formPreSubmit(this)
+          await formPreSubmit(apiData, v$, toRef(data, 'isFormSent'))
         } catch (error) {
           consola.debug(error)
           return
@@ -95,17 +106,6 @@ const FormAccountPasswordResetRequest = defineComponent({
         })
       },
     }
-    const rules = {
-      form: {
-        emailAddress: {
-          email,
-          formatUppercaseNone: VALIDATION_FORMAT_UPPERCASE_NONE,
-          maxLength: maxLength(VALIDATION_EMAIL_ADDRESS_LENGTH_MAXIMUM),
-          required,
-        },
-      },
-    }
-    const v$ = useVuelidate(rules, data)
 
     return {
       ...apiData,