From 90300e9f1dd671eb554a5d3d1e90b7c39580ea9a Mon Sep 17 00:00:00 2001
From: Surya Venkatesan <suryav@ami.com>
Date: Thu, 1 Aug 2024 12:40:20 +0530
Subject: 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>
---
 .../SecurityAndAccess/UserManagement/ModalUser.vue | 24 +++++++++++++---------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/views/SecurityAndAccess/UserManagement/ModalUser.vue b/src/views/SecurityAndAccess/UserManagement/ModalUser.vue
index 44ab516d..3b334871 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 @@ import {
   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';
 
-- 
cgit v1.2.3