commit 421273fc9c7136c7f9794bcd7152b6419358ea3d
author Surya Venkatesan <suryav@ami.com> Thu Aug 01 12:40:20 2024 +0530
committer Surya Venkatesan <suryav@ami.com> Thu Aug 29 13:55:35 2024 +0000
tree 3dfc7dcee48f8f43dd738414324a7ab1182ef795
parent 7bf1b408b1601b1d8d98f701182a65c98b67411b

Add user validation in user management page

helpers and sameAs validations are not working in vue3 so the helpers
and sameAS are imported from vuelidate/lib/validators. Invalid
validation field like required are not show so the if condition for
invalid feedback alert field changed. Add user and delete user are
working in the user management page.

Change-Id: I0133e02357048ffbc6206382b2a0a5c162e2384d
Signed-off-by: Surya Venkatesan <suryav@ami.com>

src/views/SecurityAndAccess/UserManagement/ModalUser.vue

diff --git a/src/views/SecurityAndAccess/UserManagement/ModalUser.vue b/src/views/SecurityAndAccess/UserManagement/ModalUser.vue
index 44ab516..3b33487 100644
--- a/src/views/SecurityAndAccess/UserManagement/ModalUser.vue
+++ b/src/views/SecurityAndAccess/UserManagement/ModalUser.vue
@@ -85,15 +85,15 @@
                 @input="v$.form.username.$touch()"
               />
               <b-form-invalid-feedback role="alert">
-                <template v-if="!v$.form.username.required">
+                <template v-if="v$.form.username.required.$invalid">
                   {{ $t('global.form.fieldRequired') }}
                 </template>
-                <template v-else-if="!v$.form.username.maxLength">
+                <template v-else-if="v$.form.username.maxLength.$invalid">
                   {{
                     $t('global.form.lengthMustBeBetween', { min: 1, max: 16 })
                   }}
                 </template>
-                <template v-else-if="!v$.form.username.pattern">
+                <template v-else-if="v$.form.username.pattern.$invalid">
                   {{ $t('global.form.invalidFormat') }}
                 </template>
               </b-form-invalid-feedback>
@@ -118,7 +118,7 @@
                 </template>
               </b-form-select>
               <b-form-invalid-feedback role="alert">
-                <template v-if="!v$.form.privilege.required">
+                <template v-if="v$.form.privilege.required.$invalid">
                   {{ $t('global.form.fieldRequired') }}
                 </template>
               </b-form-invalid-feedback>
@@ -149,12 +149,13 @@
                   @input="v$.form.password.$touch()"
                 />
                 <b-form-invalid-feedback role="alert">
-                  <template v-if="!v$.form.password.required">
+                  <template v-if="v$.form.password.required.$invalid">
                     {{ $t('global.form.fieldRequired') }}
                   </template>
                   <template
                     v-if="
-                      !v$.form.password.minLength || !v$.form.password.maxLength
+                      v$.form.password.minLength.$invalid ||
+                      v$.form.password.maxLength.$invalid
                     "
                   >
                     {{
@@ -182,11 +183,15 @@
                   @input="v$.form.passwordConfirmation.$touch()"
                 />
                 <b-form-invalid-feedback role="alert">
-                  <template v-if="!v$.form.passwordConfirmation.required">
+                  <template
+                    v-if="v$.form.passwordConfirmation.required.$invalid"
+                  >
                     {{ $t('global.form.fieldRequired') }}
                   </template>
                   <template
-                    v-else-if="!v$.form.passwordConfirmation.sameAsPassword"
+                    v-else-if="
+                      v$.form.passwordConfirmation.sameAsPassword.$invalid
+                    "
                   >
                     {{ $t('pageUserManagement.modal.passwordsDoNotMatch') }}
                   </template>
@@ -228,10 +233,9 @@
   required,
   maxLength,
   minLength,
-  sameAs,
-  helpers,
   requiredIf,
 } from '@vuelidate/validators';
+import { helpers, sameAs } from 'vuelidate/lib/validators';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
 import { useVuelidate } from '@vuelidate/core';