Merge pull request #224 from ansibleguy76/release/v5.0.6

v5.0.6 into main
ansibleguy76 · Sep 20, 2024 · c8625a1 · c8625a1
2 parents b7c1cb4 + 92ade9c
commit c8625a1
Show file tree

Hide file tree

Showing 23 changed files with 733 additions and 271 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,8 +7,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [5.0.6] - 2024-09-20
+
+### Fixed
+
+-   Removed ip lib parts CVE related
+-   Updated to vuelidate 2+ (CVE related)
+
 ## [5.0.5] - 2024-09-18
 
+### Fixed
+
+-   Fixed regex for ssh key
+-   New version highlight for CVE
+-   Bumped several versions
+
 ## [5.0.4] - 2024-08-18
 
 ### Added
@@ -726,7 +739,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 -   Allow change password for current local user
 -   Start tracking versions
 
-[Unreleased]: https://github.com/ansibleguy76/ansibleforms/compare/5.0.5...HEAD
+[Unreleased]: https://github.com/ansibleguy76/ansibleforms/compare/5.0.6...HEAD
+
+[5.0.6]: https://github.com/ansibleguy76/ansibleforms/compare/5.0.5...5.0.6
 
 [5.0.5]: https://github.com/ansibleguy76/ansibleforms/compare/5.0.4...5.0.5
 

diff --git a/app_versions.gradle b/app_versions.gradle
@@ -1,2 +1,2 @@
-ext.version_code = 50005
-ext.version_name = "5.0.5"
+ext.version_code = 50006
+ext.version_name = "5.0.6"
diff --git a/client/package.json b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ansible_forms_vue",
-  "version": "5.0.5",
+  "version": "5.0.6",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -43,7 +43,8 @@
     "vue-showdown": "2.4.1",
     "vue-toastification": "1.7.14",
     "vue2-datepicker": "~3.11.1",
-    "vuelidate": "~0.7.7",
+    "@vuelidate/core": "^2.0.3",
+    "@vuelidate/validators": "^2.0.4",
     "yaml": "1.10.2"
   },
   "devDependencies": {

diff --git a/client/src/components/BulmaEditTable.vue b/client/src/components/BulmaEditTable.vue
@@ -6,23 +6,23 @@
               <!-- add field label -->
               <label class="label has-text-dark">{{ field.label }} <span v-if="field.required" class="has-text-danger">*</span></label>
               <!-- type = checkbox -->
-              <BulmaCheckRadio v-if="field.type=='checkbox'" checktype="checkbox" :disabled="action=='Edit' && readonlyColumns.includes(field.name)" v-model="editedItem[field.name]" :name="field.name" :label="field.placeholder"/>
+              <BulmaCheckRadio v-if="field.type=='checkbox'" checktype="checkbox" :disabled="action=='Edit' && readonlyColumns.includes(field.name)" :type="{'is-danger is-block':v$.editedItem[field.name].$invalid}" v-model="editedItem[field.name]" :name="field.name" :label="field.placeholder"/>
               <!-- <label v-if="field.type=='checkbox'" class="checkbox">
                 <input v-if="field.type=='checkbox'" :disabled="readonlyColumns.includes(field.name)" :autofocus="index==0" :checked="editedItem[field.name]" v-model="editedItem[field.name]" :name="field.name" type="checkbox">
                 {{ field.placeholder }}
               </label> -->
               <date-picker v-if="field.type=='datetime'"
                 :type="field.dateType"
                 value-type="format"
-                v-model="$v.editedItem[field.name].$model"
+                v-model="v$.editedItem[field.name].$model"
               >
                   <template #input>
                     <div :class="{'has-icons-left':!!field.icon}" class="control">
                       <input 
-                        :class="{'is-danger':$v.editedItem[field.name].$invalid}"
+                        :class="{'is-danger':v$.editedItem[field.name].$invalid}"
                         class="input"
                         :name="field.name"
-                        v-model="$v.editedItem[field.name].$model"
+                        v-model="v$.editedItem[field.name].$model"
                         @change="evaluateDynamicFields(field.name)"
                         :required="field.required"
                         type="text"
@@ -36,15 +36,15 @@
 
               <BulmaAdvancedSelect
                 v-if="field.type=='query' || field.type=='enum'"
-                :defaultValue="stringify($v.editedItem[field.name].$model,field)||field.default||''"
+                :defaultValue="stringify(v$.editedItem[field.name].$model,field)||field.default||''"
                 :required="field.required||false"
                 :multiple="false"
                 :name="field.name"
                 :placeholder="field.placeholder||'Select...'"
                 :values="field.values||form[field.from]||[]"
-                :hasError="$v.editedItem[field.name].$invalid"
+                :hasError="v$.editedItem[field.name].$invalid"
                 :isLoading="!field.values && !['fixed','variable'].includes(dynamicFieldStatus[field.from])"
-                v-model="$v.editedItem[field.name].$model"
+                v-model="v$.editedItem[field.name].$model"
                 :icon="field.icon"
                 :columns="field.columns||[]"
                 :pctColumns="field.pctColumns||[]"
@@ -58,7 +58,7 @@
               </BulmaAdvancedSelect>     
 
               <div v-if="!['datetime','checkbox','query','enum'].includes(field.type)" :class="{'has-icons-left':!!field.icon}" class="control">
-                <input v-if="field.type=='text' || field.type=='password'" :disabled="action=='Edit' && readonlyColumns.includes(field.name)" :autofocus="index==0" :class="{'is-danger':$v.editedItem[field.name].$invalid}" class="input" :type="field.type" v-model="$v.editedItem[field.name].$model" :placeholder="field.placeholder" :name="field.name">
+                <input v-if="field.type=='text' || field.type=='password'" :disabled="action=='Edit' && readonlyColumns.includes(field.name)" :autofocus="index==0" :class="{'is-danger':v$.editedItem[field.name].$invalid}" class="input" :type="field.type" v-model="v$.editedItem[field.name].$model" :placeholder="field.placeholder" :name="field.name">
                 <input v-if="field.type=='number'" :disabled="action=='Edit' && readonlyColumns.includes(field.name)" :autofocus="index==0" class="input" type="number" v-model="editedItem[field.name]" :placeholder="field.placeholder" :name="field.name">
 
                 <!-- add left icon, but not for query, because that's a component with icon builtin -->
@@ -67,14 +67,14 @@
                 </span>
               </div>
 
-              <p class="has-text-danger" v-if="!$v.editedItem[field.name].required">This field is required</p>
-              <p class="has-text-danger" v-if="'minLength' in $v.editedItem[field.name] && !$v.editedItem[field.name].minLength">Must be at least {{$v.editedItem[field.name].$params.minLength.min}} characters long</p>
-              <p class="has-text-danger" v-if="'maxLength' in $v.editedItem[field.name] && !$v.editedItem[field.name].maxLength">Can not be more than {{$v.editedItem[field.name].$params.maxLength.max}} characters long</p>
-              <p class="has-text-danger" v-if="'minValue' in $v.editedItem[field.name] && !$v.editedItem[field.name].minValue">Value cannot be lower than {{$v.editedItem[field.name].$params.minValue.min}}</p>
-              <p class="has-text-danger" v-if="'maxValue' in $v.editedItem[field.name] && !$v.editedItem[field.name].maxValue">Value cannot be higher than {{$v.editedItem[field.name].$params.maxValue.max}}</p>
-              <p class="has-text-danger" v-if="'regex' in $v.editedItem[field.name] && !$v.editedItem[field.name].regex">{{$v.editedItem[field.name].$params.regex.description}}</p>
-              <p class="has-text-danger" v-if="'notIn' in $v.editedItem[field.name] && !$v.editedItem[field.name].notIn">{{$v.editedItem[field.name].$params.notIn.description}}</p>
-              <p class="has-text-danger" v-if="'in' in $v.editedItem[field.name] && !$v.editedItem[field.name].in">{{$v.editedItem[field.name].$params.in.description}}</p>
+              <p class="has-text-danger" v-if="field.required && v$.editedItem[field.name].required.$invalid && v$.editedItem[field.name].$errors.length>0">This field is required</p>
+              <p class="has-text-danger" v-if="'minLength' in v$.editedItem[field.name] && v$.editedItem[field.name].minLength.$invalid">Must be at least {{v$.editedItem[field.name].minLength.$params.min}} characters long</p>
+              <p class="has-text-danger" v-if="'maxLength' in v$.editedItem[field.name] && v$.editedItem[field.name].maxLength.$invalid">Can not be more than {{v$.editedItem[field.name].maxLength.$params.max}} characters long</p>
+              <p class="has-text-danger" v-if="'minValue' in v$.editedItem[field.name] && v$.editedItem[field.name].minValue.$invalid">Value cannot be lower than {{v$.editedItem[field.name].minValue.$params.min}}</p>
+              <p class="has-text-danger" v-if="'maxValue' in v$.editedItem[field.name] && v$.editedItem[field.name].maxValue.$invalid">Value cannot be higher than {{v$.editedItem[field.name].maxValue.$params.max}}</p>
+              <p class="has-text-danger" v-if="'regex' in v$.editedItem[field.name] && v$.editedItem[field.name].regex.$invalid">{{v$.editedItem[field.name].regex.$params.description}}</p>
+              <p class="has-text-danger" v-if="'notIn' in v$.editedItem[field.name] && v$.editedItem[field.name].notIn.$invalid">{{v$.editedItem[field.name].notIn.$params.description}}</p>
+              <p class="has-text-danger" v-if="'in' in v$.editedItem[field.name] && v$.editedItem[field.name].in.$invalid">{{v$.editedItem[field.name].in.$params.description}}</p>
 
           </div>
         </BulmaModal>
@@ -168,15 +168,14 @@
 <script>
     import Vue from 'vue'
     import BulmaModal from './BulmaModal.vue'
-    import Vuelidate from 'vuelidate'
     import BulmaAdvancedSelect from './BulmaAdvancedSelect'
     import Helpers from './../lib/Helpers.js'
     import BulmaCheckRadio from './BulmaCheckRadio'
     import DatePicker from 'vue2-datepicker';
-   import 'vue2-datepicker/index.css';    
-    import { required,minValue,maxValue,minLength,maxLength, helpers,requiredIf } from 'vuelidate/lib/validators'
+    import 'vue2-datepicker/index.css';    
+    import { useVuelidate } from '@vuelidate/core'
+    import { minValue,maxValue,minLength,maxLength, helpers,requiredIf } from '@vuelidate/validators'
 
-    Vue.use(Vuelidate)
     export default{
         name:'BulmaEditTable',
         components:{BulmaModal,BulmaAdvancedSelect,BulmaCheckRadio,DatePicker},
@@ -213,6 +212,9 @@
             insertColumns:{type: Array},
             hasError:{type: Boolean}
         },
+        setup(){
+          return { v$: useVuelidate() }
+        },
         data: function(){
             return {
                 sort: {
@@ -238,9 +240,26 @@
             var attrs = {}
             var regexObj
             var description
-            attrs.required=requiredIf(function(){
-              return !!ff.required
-            })
+            // required validation for simple fields
+            if(ff.type!='checkbox' && ff.type!='enum'){
+              attrs.required=requiredIf(function(){
+                return !!ff.required
+              })
+            }
+            // required validation for expression field
+            if((ff.type=="enum") && ff.required){
+              attrs.required=helpers.withParams(
+                  {description: "This field is required"},
+                  (value) => (value!=undefined && value!=null && value!='__auto__' && value!='__none__' && value!='__all__')
+              )
+            }
+            // required validation for checkbox (MUST be true)
+            if(ff.type=='checkbox' && ff.required){
+              attrs.required=helpers.withParams(
+                  {description: "This field is required"},
+                  (value) => (value==true)
+              )
+            }        
             if("minValue" in ff){ attrs.minValue=minValue(ff.minValue)}
             if("maxValue" in ff){ attrs.maxValue=maxValue(ff.maxValue)}
             if("minLength" in ff){ attrs.minLength=minLength(ff.minLength)}
@@ -395,6 +414,7 @@
             },
             saveItem:function(){
               var ref=this
+              this.v$.editedItem.$touch()
               this.tableFields.forEach((item)=>{
                 if(item.type=="query" || item.type=="enum"){
                   if(!item.outputObject){
@@ -407,7 +427,7 @@
                   }
                 }
               })
-              if(!this.$v.editedItem.$invalid){
+              if(!this.v$.editedItem.$invalid){
                 if(this.action=="Add"){
                   if(this.insert_marker){
                     Vue.set(this.editedItem,this.insert_marker,true)