From 81e58453a3e09d5c9bee940091dbc47c9b844744 Mon Sep 17 00:00:00 2001
From: Mirko Van Colen <mirko@vancolen.com>
Date: Thu, 19 Sep 2024 12:30:11 +0200
Subject: [PATCH 1/5] ip calculations... removed CVE related code

---
 server/src/lib/ip.js | 397 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 397 insertions(+)
 create mode 100644 server/src/lib/ip.js

diff --git a/server/src/lib/ip.js b/server/src/lib/ip.js
new file mode 100644
index 00000000..efe48d35
--- /dev/null
+++ b/server/src/lib/ip.js
@@ -0,0 +1,397 @@
+const ip = exports;
+const { Buffer } = require('buffer');
+
+ip.toBuffer = function (ip, buff, offset) {
+  offset = ~~offset;
+
+  let result;
+
+  if (this.isV4Format(ip)) {
+    result = buff || Buffer.alloc(offset + 4);
+    ip.split(/\./g).map((byte) => {
+      result[offset++] = parseInt(byte, 10) & 0xff;
+    });
+  } else if (this.isV6Format(ip)) {
+    const sections = ip.split(':', 8);
+
+    let i;
+    for (i = 0; i < sections.length; i++) {
+      const isv4 = this.isV4Format(sections[i]);
+      let v4Buffer;
+
+      if (isv4) {
+        v4Buffer = this.toBuffer(sections[i]);
+        sections[i] = v4Buffer.slice(0, 2).toString('hex');
+      }
+
+      if (v4Buffer && ++i < 8) {
+        sections.splice(i, 0, v4Buffer.slice(2, 4).toString('hex'));
+      }
+    }
+
+    if (sections[0] === '') {
+      while (sections.length < 8) sections.unshift('0');
+    } else if (sections[sections.length - 1] === '') {
+      while (sections.length < 8) sections.push('0');
+    } else if (sections.length < 8) {
+      for (i = 0; i < sections.length && sections[i] !== ''; i++);
+      const argv = [i, 1];
+      for (i = 9 - sections.length; i > 0; i--) {
+        argv.push('0');
+      }
+      sections.splice(...argv);
+    }
+
+    result = buff || Buffer.alloc(offset + 16);
+    for (i = 0; i < sections.length; i++) {
+      const word = parseInt(sections[i], 16);
+      result[offset++] = (word >> 8) & 0xff;
+      result[offset++] = word & 0xff;
+    }
+  }
+
+  if (!result) {
+    throw Error(`Invalid ip address: ${ip}`);
+  }
+
+  return result;
+};
+
+ip.toString = function (buff, offset, length) {
+  offset = ~~offset;
+  length = length || (buff.length - offset);
+
+  let result = [];
+  if (length === 4) {
+    // IPv4
+    for (let i = 0; i < length; i++) {
+      result.push(buff[offset + i]);
+    }
+    result = result.join('.');
+  } else if (length === 16) {
+    // IPv6
+    for (let i = 0; i < length; i += 2) {
+      result.push(buff.readUInt16BE(offset + i).toString(16));
+    }
+    result = result.join(':');
+    result = result.replace(/(^|:)0(:0)*:0(:|$)/, '$1::$3');
+    result = result.replace(/:{3,4}/, '::');
+  }
+
+  return result;
+};
+
+const ipv4Regex = /^(\d{1,3}\.){3,3}\d{1,3}$/;
+const ipv6Regex = /^(::)?(((\d{1,3}\.){3}(\d{1,3}){1})?([0-9a-f]){0,4}:{0,2}){1,8}(::)?$/i;
+
+ip.isV4Format = function (ip) {
+  return ipv4Regex.test(ip);
+};
+
+ip.isV6Format = function (ip) {
+  return ipv6Regex.test(ip);
+};
+
+function _normalizeFamily(family) {
+  if (family === 4) {
+    return 'ipv4';
+  }
+  if (family === 6) {
+    return 'ipv6';
+  }
+  return family ? family.toLowerCase() : 'ipv4';
+}
+
+ip.fromPrefixLen = function (prefixlen, family) {
+  if (prefixlen > 32) {
+    family = 'ipv6';
+  } else {
+    family = _normalizeFamily(family);
+  }
+
+  let len = 4;
+  if (family === 'ipv6') {
+    len = 16;
+  }
+  const buff = Buffer.alloc(len);
+
+  for (let i = 0, n = buff.length; i < n; ++i) {
+    let bits = 8;
+    if (prefixlen < 8) {
+      bits = prefixlen;
+    }
+    prefixlen -= bits;
+
+    buff[i] = ~(0xff >> bits) & 0xff;
+  }
+
+  return ip.toString(buff);
+};
+
+ip.mask = function (addr, mask) {
+  addr = ip.toBuffer(addr);
+  mask = ip.toBuffer(mask);
+
+  const result = Buffer.alloc(Math.max(addr.length, mask.length));
+
+  // Same protocol - do bitwise and
+  let i;
+  if (addr.length === mask.length) {
+    for (i = 0; i < addr.length; i++) {
+      result[i] = addr[i] & mask[i];
+    }
+  } else if (mask.length === 4) {
+    // IPv6 address and IPv4 mask
+    // (Mask low bits)
+    for (i = 0; i < mask.length; i++) {
+      result[i] = addr[addr.length - 4 + i] & mask[i];
+    }
+  } else {
+    // IPv6 mask and IPv4 addr
+    for (i = 0; i < result.length - 6; i++) {
+      result[i] = 0;
+    }
+
+    // ::ffff:ipv4
+    result[10] = 0xff;
+    result[11] = 0xff;
+    for (i = 0; i < addr.length; i++) {
+      result[i + 12] = addr[i] & mask[i + 12];
+    }
+    i += 12;
+  }
+  for (; i < result.length; i++) {
+    result[i] = 0;
+  }
+
+  return ip.toString(result);
+};
+
+ip.cidr = function (cidrString) {
+  const cidrParts = cidrString.split('/');
+
+  const addr = cidrParts[0];
+  if (cidrParts.length !== 2) {
+    throw new Error(`invalid CIDR subnet: ${addr}`);
+  }
+
+  const mask = ip.fromPrefixLen(parseInt(cidrParts[1], 10));
+
+  return ip.mask(addr, mask);
+};
+
+ip.subnet = function (addr, mask) {
+  const networkAddress = ip.toLong(ip.mask(addr, mask));
+
+  // Calculate the mask's length.
+  const maskBuffer = ip.toBuffer(mask);
+  let maskLength = 0;
+
+  for (let i = 0; i < maskBuffer.length; i++) {
+    if (maskBuffer[i] === 0xff) {
+      maskLength += 8;
+    } else {
+      let octet = maskBuffer[i] & 0xff;
+      while (octet) {
+        octet = (octet << 1) & 0xff;
+        maskLength++;
+      }
+    }
+  }
+
+  const numberOfAddresses = 2 ** (32 - maskLength);
+
+  return {
+    networkAddress: ip.fromLong(networkAddress),
+    firstAddress: numberOfAddresses <= 2
+      ? ip.fromLong(networkAddress)
+      : ip.fromLong(networkAddress + 1),
+    lastAddress: numberOfAddresses <= 2
+      ? ip.fromLong(networkAddress + numberOfAddresses - 1)
+      : ip.fromLong(networkAddress + numberOfAddresses - 2),
+    broadcastAddress: ip.fromLong(networkAddress + numberOfAddresses - 1),
+    subnetMask: mask,
+    subnetMaskLength: maskLength,
+    numHosts: numberOfAddresses <= 2
+      ? numberOfAddresses : numberOfAddresses - 2,
+    length: numberOfAddresses,
+    contains(other) {
+      return networkAddress === ip.toLong(ip.mask(other, mask));
+    },
+  };
+};
+
+ip.cidrSubnet = function (cidrString) {
+  const cidrParts = cidrString.split('/');
+
+  const addr = cidrParts[0];
+  if (cidrParts.length !== 2) {
+    throw new Error(`invalid CIDR subnet: ${addr}`);
+  }
+
+  const mask = ip.fromPrefixLen(parseInt(cidrParts[1], 10));
+
+  return ip.subnet(addr, mask);
+};
+
+ip.not = function (addr) {
+  const buff = ip.toBuffer(addr);
+  for (let i = 0; i < buff.length; i++) {
+    buff[i] = 0xff ^ buff[i];
+  }
+  return ip.toString(buff);
+};
+
+ip.or = function (a, b) {
+  a = ip.toBuffer(a);
+  b = ip.toBuffer(b);
+
+  // same protocol
+  if (a.length === b.length) {
+    for (let i = 0; i < a.length; ++i) {
+      a[i] |= b[i];
+    }
+    return ip.toString(a);
+
+  // mixed protocols
+  }
+  let buff = a;
+  let other = b;
+  if (b.length > a.length) {
+    buff = b;
+    other = a;
+  }
+
+  const offset = buff.length - other.length;
+  for (let i = offset; i < buff.length; ++i) {
+    buff[i] |= other[i - offset];
+  }
+
+  return ip.toString(buff);
+};
+
+ip.isEqual = function (a, b) {
+  a = ip.toBuffer(a);
+  b = ip.toBuffer(b);
+
+  // Same protocol
+  if (a.length === b.length) {
+    for (let i = 0; i < a.length; i++) {
+      if (a[i] !== b[i]) return false;
+    }
+    return true;
+  }
+
+  // Swap
+  if (b.length === 4) {
+    const t = b;
+    b = a;
+    a = t;
+  }
+
+  // a - IPv4, b - IPv6
+  for (let i = 0; i < 10; i++) {
+    if (b[i] !== 0) return false;
+  }
+
+  const word = b.readUInt16BE(10);
+  if (word !== 0 && word !== 0xffff) return false;
+
+  for (let i = 0; i < 4; i++) {
+    if (a[i] !== b[i + 12]) return false;
+  }
+
+  return true;
+};
+
+ip.isLoopback = function (addr) {
+  // If addr is an IPv4 address in long integer form (no dots and no colons), convert it
+  if (!/\./.test(addr) && !/:/.test(addr)) {
+    addr = ip.fromLong(Number(addr));
+  }
+
+  return /^(::f{4}:)?127\.([0-9]{1,3})\.([0-9]{1,3})\.([0-9]{1,3})/
+    .test(addr)
+    || /^0177\./.test(addr)
+    || /^0x7f\./i.test(addr)
+    || /^fe80::1$/i.test(addr)
+    || /^::1$/.test(addr)
+    || /^::$/.test(addr);
+};
+
+ip.loopback = function (family) {
+  //
+  // Default to `ipv4`
+  //
+  family = _normalizeFamily(family);
+
+  if (family !== 'ipv4' && family !== 'ipv6') {
+    throw new Error('family must be ipv4 or ipv6');
+  }
+
+  return family === 'ipv4' ? '127.0.0.1' : 'fe80::1';
+};
+
+ip.toLong = function (ip) {
+  let ipl = 0;
+  ip.split('.').forEach((octet) => {
+    ipl <<= 8;
+    ipl += parseInt(octet);
+  });
+  return (ipl >>> 0);
+};
+
+ip.fromLong = function (ipl) {
+  return (`${ipl >>> 24}.${
+    ipl >> 16 & 255}.${
+    ipl >> 8 & 255}.${
+    ipl & 255}`);
+};
+
+ip.normalizeToLong = function (addr) {
+  const parts = addr.split('.').map(part => {
+    // Handle hexadecimal format
+    if (part.startsWith('0x') || part.startsWith('0X')) {
+      return parseInt(part, 16);
+    }
+    // Handle octal format (strictly digits 0-7 after a leading zero)
+    else if (part.startsWith('0') && part !== '0' && /^[0-7]+$/.test(part)) {
+      return parseInt(part, 8);
+    }
+    // Handle decimal format, reject invalid leading zeros
+    else if (/^[1-9]\d*$/.test(part) || part === '0') {
+      return parseInt(part, 10);
+    }
+    // Return NaN for invalid formats to indicate parsing failure
+    else {
+      return NaN;
+    }
+  });
+
+  if (parts.some(isNaN)) return -1; // Indicate error with -1
+
+  let val = 0;
+  const n = parts.length;
+
+  switch (n) {
+  case 1:
+    val = parts[0];
+    break;
+  case 2:
+    if (parts[0] > 0xff || parts[1] > 0xffffff) return -1;
+    val = (parts[0] << 24) | (parts[1] & 0xffffff);
+    break;
+  case 3:
+    if (parts[0] > 0xff || parts[1] > 0xff || parts[2] > 0xffff) return -1;
+    val = (parts[0] << 24) | (parts[1] << 16) | (parts[2] & 0xffff);
+    break;
+  case 4:
+    if (parts.some(part => part > 0xff)) return -1;
+    val = (parts[0] << 24) | (parts[1] << 16) | (parts[2] << 8) | parts[3];
+    break;
+  default:
+    return -1; // Error case
+  }
+
+  return val >>> 0;
+};
\ No newline at end of file

From e4388a5004e40305fc85152e2283ff54273d5d26 Mon Sep 17 00:00:00 2001
From: Mirko Van Colen <mirko@vancolen.com>
Date: Thu, 19 Sep 2024 12:31:19 +0200
Subject: [PATCH 2/5] internal ip.js

---
 server/src/functions/default.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/src/functions/default.js b/server/src/functions/default.js
index 33329005..a727365b 100644
--- a/server/src/functions/default.js
+++ b/server/src/functions/default.js
@@ -12,7 +12,7 @@ const {inspect} = require('node:util')
 const JSONbig = require('json-bigint');
 const _ = require("lodash")
 const {firstBy,thenBy}=require("thenby")
-const ip=require("ip")
+const ip=require("../lib/ip")
 const dayjs=require("dayjs")
 const credentialModel = require("../models/credential.model")
 // import definitions as strings

From 4af1aadb64c15281c9885b25eb724553b27ce119 Mon Sep 17 00:00:00 2001
From: Mirko Van Colen <mirko@vancolen.com>
Date: Thu, 19 Sep 2024 12:31:43 +0200
Subject: [PATCH 3/5] bumping versions

---
 CHANGELOG.md            | 10 ++++++++++
 client/package.json     |  2 +-
 server/package.json     |  3 +--
 server/src/swagger.json |  2 +-
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index afd6e93b..63532d5c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,8 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+-   Removed ip lib parts 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
diff --git a/client/package.json b/client/package.json
index 2628c715..7ff9245e 100644
--- 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",
diff --git a/server/package.json b/server/package.json
index 1890a647..044fbd9f 100644
--- a/server/package.json
+++ b/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ansible_forms",
-  "version": "5.0.5",
+  "version": "5.0.6",
   "repository": {
     "type": "git",
     "url": "git://github.com/ansibleguy76/ansibleforms.git"
@@ -33,7 +33,6 @@
     "express": "~4.21.0",
     "cookie-session": "~2.1.0",
     "fs-extra": "~11.2.0",
-    "ip": "2.0.1",
     "json-bigint": "~1.0.0",
     "ldap-authentication": "~3.2.4",
     "ldapjs": "~3.0.7",
diff --git a/server/src/swagger.json b/server/src/swagger.json
index 74d0cc27..07883726 100644
--- a/server/src/swagger.json
+++ b/server/src/swagger.json
@@ -2,7 +2,7 @@
   "swagger": "2.0",
   "info": {
     "description": "This is the swagger interface for AnsibleForms.\r\nUse the `/auth/login` api with basic authentication to obtain a JWT token.\r\nThen use the access token, prefixed with the word '**Bearer**' to use all other api's.\r\nNote that the access token is limited in time.  You can then either login again and get a new set of tokens or use the `/token` api and the refresh token to obtain a new set (preferred).",
-    "version": "5.0.5",
+    "version": "5.0.6",
     "title": "AnsibleForms",
     "contact": {
       "email": "info@ansibleforms.com"

From f34775b3b30f855178dc402ad335df0ac5911765 Mon Sep 17 00:00:00 2001
From: Mirko Van Colen <mirko@vancolen.com>
Date: Fri, 20 Sep 2024 16:35:07 +0200
Subject: [PATCH 4/5] update to vuelidate 2 ; imported ip and trimmed

---
 CHANGELOG.md                             |   1 +
 client/package.json                      |   3 +-
 client/src/components/BulmaEditTable.vue |  68 +++++++++-----
 client/src/components/Form.vue           | 109 ++++++++++++-----------
 client/src/views/Awx.vue                 |  23 ++---
 client/src/views/AzureAd.vue             |  17 ++--
 client/src/views/Credentials.vue         |  64 +++++++------
 client/src/views/Groups.vue              |  12 +--
 client/src/views/KnownHosts.vue          |  14 +--
 client/src/views/Ldap.vue                |  32 +++----
 client/src/views/Login.vue               |  17 ++--
 client/src/views/MailSettings.vue        |  22 ++---
 client/src/views/OIDC.vue                |  18 ++--
 client/src/views/Profile.vue             |  42 ++++-----
 client/src/views/Repos.vue               |  22 ++---
 client/src/views/Settings.vue            |  14 +--
 client/src/views/Sshkey.vue              |  28 +++---
 client/src/views/Users.vue               |  72 +++++++--------
 18 files changed, 315 insertions(+), 263 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 63532d5c..3175b953 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 -   Removed ip lib parts CVE related
+-   Updated to vuelidate 2+ (CVE related)
 
 ## [5.0.5] - 2024-09-18
 
diff --git a/client/package.json b/client/package.json
index 7ff9245e..371a7cc7 100644
--- a/client/package.json
+++ b/client/package.json
@@ -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
index cb3d79b3..59849930 100644
--- a/client/src/components/BulmaEditTable.vue
+++ b/client/src/components/BulmaEditTable.vue
@@ -6,7 +6,7 @@
               <!-- 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 }}
@@ -14,15 +14,15 @@
               <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)
diff --git a/client/src/components/Form.vue b/client/src/components/Form.vue
index 4261cbe6..bdb5f123 100644
--- a/client/src/components/Form.vue
+++ b/client/src/components/Form.vue
@@ -128,7 +128,7 @@
                             <!-- copy -->
                             <span
                               class="icon is-clickable has-text-info"
-                              @click="clip((field.type=='expression')?$v.form[field.name].$model:queryresults[field.name])"
+                              @click="clip((field.type=='expression')?v$.form[field.name].$model:queryresults[field.name])"
                               v-if="field.expression && fieldOptions[field.name].viewable && !fieldOptions[field.name].editable"
                             >
                               <font-awesome-icon icon="copy" />
@@ -164,10 +164,10 @@
                         <!-- START FIELD BUILD -->
                         <!-- type = checkbox -->
                         <div v-if="field.type=='checkbox'">
-                          <BulmaCheckRadio checktype="checkbox" v-model="$v.form[field.name].$model" :name="field.name" :type="{'is-danger is-block':$v.form[field.name].$invalid}" :label="field.placeholder" @change="evaluateDynamicFields(field.name)" />
+                          <BulmaCheckRadio checktype="checkbox" v-model="v$.form[field.name].$model" :name="field.name" :type="{'is-danger is-block':v$.form[field.name].$invalid}" :label="field.placeholder" @change="evaluateDynamicFields(field.name)" />
                         </div>
                         <!-- type = html -->
-                        <div class="mt-3" v-if="field.type=='html'" v-html="$v.form[field.name].$model || ''"></div>
+                        <div class="mt-3" v-if="field.type=='html'" v-html="v$.form[field.name].$model || ''"></div>
                         <!-- type = enum/query -->
                         <div v-if="field.type=='query' || field.type=='enum'">
                           <BulmaAdvancedSelect
@@ -179,9 +179,9 @@
                             :name="field.name"
                             :placeholder="field.placeholder||'Select...'"
                             :values="field.values||queryresults[field.name]||[]"
-                            :hasError="$v.form[field.name].$invalid"
+                            :hasError="v$.form[field.name].$invalid"
                             :isLoading="!field.values && !['fixed','variable'].includes(dynamicFieldStatus[field.name])"
-                            v-model="$v.form[field.name].$model"
+                            v-model="v$.form[field.name].$model"
                             :icon="field.icon"
                             :columns="field.columns||[]"
                             :pctColumns="field.pctColumns||[]"
@@ -204,7 +204,7 @@
                         </div>
                         <!-- type = radio -->
                         <div v-if="field.type=='radio'" >
-                          <BulmaCheckRadio :val="(typeof radiovalue=='string')?radiovalue:radiovalue.value" checktype="radio" v-for="radiovalue in field.values" :key="field.name+'_'+((typeof radiovalue=='string')?radiovalue:radiovalue.value)" v-model="$v.form[field.name].$model" :name="field.name" :type="{'is-danger is-block':$v.form[field.name].$invalid}" :label="(typeof radiovalue=='string')?radiovalue:radiovalue.label"  @change="evaluateDynamicFields(field.name)" />
+                          <BulmaCheckRadio :val="(typeof radiovalue=='string')?radiovalue:radiovalue.value" checktype="radio" v-for="radiovalue in field.values" :key="field.name+'_'+((typeof radiovalue=='string')?radiovalue:radiovalue.value)" v-model="v$.form[field.name].$model" :name="field.name" :type="{'is-danger is-block':v$.form[field.name].$invalid}" :label="(typeof radiovalue=='string')?radiovalue:radiovalue.label"  @change="evaluateDynamicFields(field.name)" />
                         </div>
                         <!-- type = table -->
                         <div v-if="field.type=='table'">
@@ -213,7 +213,7 @@
                             :dynamicFieldStatus="dynamicFieldStatus"
                             :form="form"
                             :tableFields="field.tableFields"
-                            :hasError="$v.form[field.name].$invalid"
+                            :hasError="v$.form[field.name].$invalid"
                             :click="false"
                             tableClass="table is-striped is-bordered is-narrow"
                             :allowInsert="field.allowInsert && true"
@@ -226,29 +226,29 @@
                             :values="form[field.name]||[]"
                             @input="evaluateDynamicFields(field.name)"
                             @warning="addTableWarnings(field.name,...arguments)"
-                            v-model="$v.form[field.name].$model" />
+                            v-model="v$.form[field.name].$model" />
                           <!-- raw table data -->
                           <div
                             @dblclick="setExpressionFieldViewable(field.name,false)"
                             v-if="fieldOptions[field.name].viewable"
                             class="box limit-height is-limited mb-3">
-                            <vue-json-pretty :data="$v.form[field.name].$model"></vue-json-pretty>
+                            <vue-json-pretty :data="v$.form[field.name].$model"></vue-json-pretty>
                           </div>
                         </div>
                         <date-picker v-if="field.type=='datetime'"
                             :type="field.dateType"
                             value-type="format"
-                            v-model="$v.form[field.name].$model"
+                            v-model="v$.form[field.name].$model"
                             @change="evaluateDynamicFields(field.name)"
                         >
                               <template #input>
                                 <div :class="{'has-icons-left':!!field.icon}" class="control">
                                   <input 
                                     @focus="inputFocus"
-                                    :class="{'is-danger':$v.form[field.name].$invalid}"
+                                    :class="{'is-danger':v$.form[field.name].$invalid}"
                                     class="input"
                                     :name="field.name"
-                                    v-model="$v.form[field.name].$model"
+                                    v-model="v$.form[field.name].$model"
                                     @change="evaluateDynamicFields(field.name)"
                                     :required="field.required"
                                     type="text"
@@ -268,7 +268,7 @@
                                 type="file" 
                                 :name="field.name" 
                                 @change="handleFiles($event.target.name, $event.target.files)"
-                                :class="{'is-danger':$v.form[field.name].$invalid}"
+                                :class="{'is-danger':v$.form[field.name].$invalid}"
                               >
                               <span class="file-cta">
                                 <span class="file-icon">
@@ -278,8 +278,8 @@
                                   {{ field.placeholder || 'Choose a file...' }}
                                 </span>
                               </span>
-                              <span v-if="$v.form[field.name].$model" class="file-name">
-                                {{ $v.form[field.name].$model.name }}
+                              <span v-if="v$.form[field.name].$model" class="file-name">
+                                {{ v$.form[field.name].$model.name }}
                               </span>
                               <span v-else class="file-name">
                                 No file chosen
@@ -298,29 +298,29 @@
                             <div v-if="!fieldOptions[field.name].viewable">
                               <input v-if="fieldOptions[field.name].editable" type="text"
                                 @focus="inputFocus"
-                                :class="{'is-danger':$v.form[field.name].$invalid,'has-text-info':!fieldOptions[field.name].editable}"
-                                v-model="$v.form[field.name].$model"
+                                :class="{'is-danger':v$.form[field.name].$invalid,'has-text-info':!fieldOptions[field.name].editable}"
+                                v-model="v$.form[field.name].$model"
                                 class="input"
                                 :name="field.name"
                                 :required="field.required"
                                 @change="evaluateDynamicFields(field.name)"
                                 >
-                              <p @dblclick="setExpressionFieldViewable(field.name,true)" v-if="!fieldOptions[field.name].editable && !field.isHtml" class="input has-text-info" :class="{'is-danger':$v.form[field.name].$invalid}" v-text="stringify($v.form[field.name].$model)"></p>
-                              <p @dblclick="setExpressionFieldViewable(field.name,true)" v-if="!fieldOptions[field.name].editable && field.isHtml" class="input has-text-info" :class="{'is-danger':$v.form[field.name].$invalid}" v-html="stringify($v.form[field.name].$model)"></p>
+                              <p @dblclick="setExpressionFieldViewable(field.name,true)" v-if="!fieldOptions[field.name].editable && !field.isHtml" class="input has-text-info" :class="{'is-danger':v$.form[field.name].$invalid}" v-text="stringify(v$.form[field.name].$model)"></p>
+                              <p @dblclick="setExpressionFieldViewable(field.name,true)" v-if="!fieldOptions[field.name].editable && field.isHtml" class="input has-text-info" :class="{'is-danger':v$.form[field.name].$invalid}" v-html="stringify(v$.form[field.name].$model)"></p>
                             </div>
                             <!-- expression raw data -->
                             <div
                               @dblclick="setExpressionFieldViewable(field.name,false)"
                               v-else
                               class="box limit-height is-limited mb-3">
-                              <vue-json-pretty :data="$v.form[field.name].$model"></vue-json-pretty>
+                              <vue-json-pretty :data="v$.form[field.name].$model"></vue-json-pretty>
                             </div>
                           </div>
                           <!-- type = text or password-->
                           <input v-if="field.type=='text' || field.type=='password'"
                             @focus="inputFocus"
-                            :class="{'is-danger':$v.form[field.name].$invalid}"
-                            v-model="$v.form[field.name].$model"
+                            :class="{'is-danger':v$.form[field.name].$invalid}"
+                            v-model="v$.form[field.name].$model"
                             class="input" :name="field.name"
                             v-bind="field.attrs"
                             :required="field.required"
@@ -332,8 +332,8 @@
                           <!-- type = textarea-->
                           <textarea v-if="field.type=='textarea'"
                             @focus="inputFocus"
-                            :class="{'is-danger':$v.form[field.name].$invalid}"
-                            v-model="$v.form[field.name].$model"
+                            :class="{'is-danger':v$.form[field.name].$invalid}"
+                            v-model="v$.form[field.name].$model"
                             class="textarea" :name="field.name"
                             v-bind="field.attrs"
                             :required="field.required"
@@ -343,8 +343,8 @@
                           <!-- type = number -->
                           <input v-if="field.type=='number'"
                             @focus="inputFocus"
-                            :class="{'is-danger':$v.form[field.name].$invalid}"
-                            v-model.number="$v.form[field.name].$model"
+                            :class="{'is-danger':v$.form[field.name].$invalid}"
+                            v-model.number="v$.form[field.name].$model"
                             class="input"
                             :name="field.name"
                             v-bind="field.attrs"
@@ -360,19 +360,19 @@
                         </div>
                         <!-- add help and validation alerts -->
                         <p class="help" v-if="!!field.help">{{ field.help}}</p>
-                        <p class="has-text-danger" v-if="$v.form[field.name].required==false">This field is required</p>
-                        <p class="has-text-danger" v-if="'minLength' in $v.form[field.name] && !$v.form[field.name].minLength">Must be at least {{$v.form[field.name].$params.minLength.min}} characters long</p>
-                        <p class="has-text-danger" v-if="'maxLength' in $v.form[field.name] && !$v.form[field.name].maxLength">Can not be more than {{$v.form[field.name].$params.maxLength.max}} characters long</p>
-                        <p class="has-text-danger" v-if="'minValue' in $v.form[field.name] && !$v.form[field.name].minValue">Value cannot be lower than {{$v.form[field.name].$params.minValue.min}}</p>
-                        <p class="has-text-danger" v-if="'maxValue' in $v.form[field.name] && !$v.form[field.name].maxValue">Value cannot be higher than {{$v.form[field.name].$params.maxValue.max}}</p>
-                        <p class="has-text-danger" v-if="'minSize' in $v.form[field.name] && !$v.form[field.name].minSize">{{ replacePlaceholderInString($v.form[field.name].$params.minSize.description,true).value }}</p>
-                        <p class="has-text-danger" v-if="'maxSize' in $v.form[field.name] && !$v.form[field.name].maxSize">{{ replacePlaceholderInString($v.form[field.name].$params.maxSize.description,true).value }}</p>
-                        <p class="has-text-danger" v-if="'regex' in $v.form[field.name] && !$v.form[field.name].regex">{{ replacePlaceholderInString($v.form[field.name].$params.regex.description,true).value }}</p>
-                        <p class="has-text-danger" v-if="'validIf' in $v.form[field.name] && !$v.form[field.name].validIf">{{ replacePlaceholderInString($v.form[field.name].$params.validIf.description,true).value }}</p>
-                        <p class="has-text-danger" v-if="'validIfNot' in $v.form[field.name] && !$v.form[field.name].validIfNot">{{ replacePlaceholderInString($v.form[field.name].$params.validIfNot.description,true).value }}</p>
-                        <p class="has-text-danger" v-if="'notIn' in $v.form[field.name] && !$v.form[field.name].notIn">{{ replacePlaceholderInString($v.form[field.name].$params.notIn.description,true).value }}</p>
-                        <p class="has-text-danger" v-if="'in' in $v.form[field.name] && !$v.form[field.name].in">{{ replacePlaceholderInString($v.form[field.name].$params.in.description,true).value }}</p>
-                        <p class="has-text-danger" v-if="'sameAs' in $v.form[field.name] && !$v.form[field.name].sameAs">Field must be identical to '{{$v.form[field.name].$params.sameAs.eq}}'</p>
+                        <p class="has-text-danger" v-if="field.required && v$.form[field.name].required.$invalid && v$.form[field.name].$errors.length>0">This field is required</p>
+                        <p class="has-text-danger" v-if="'minLength' in v$.form[field.name] && v$.form[field.name].minLength.$invalid">Must be at least {{ v$.form[field.name].minLength.$params.min }} characters long</p>
+                        <p class="has-text-danger" v-if="'maxLength' in v$.form[field.name] && v$.form[field.name].maxLength.$invalid">Can not be more than {{ v$.form[field.name].maxLength.$params.max }} characters long</p>
+                        <p class="has-text-danger" v-if="'minValue' in v$.form[field.name] && v$.form[field.name].minValue.$invalid">Value cannot be lower than {{ v$.form[field.name].minValue.$params.min }}</p>
+                        <p class="has-text-danger" v-if="'maxValue' in v$.form[field.name] && v$.form[field.name].maxValue.$invalid">Value cannot be higher than {{ v$.form[field.name].maxValue.$params.max }}</p>
+                        <p class="has-text-danger" v-if="'minSize' in v$.form[field.name] && v$.form[field.name].minSize.$invalid">{{ replacePlaceholderInString(v$.form[field.name].minSize.$params.description,true).value }}</p>
+                        <p class="has-text-danger" v-if="'maxSize' in v$.form[field.name] && v$.form[field.name].maxSize.$invalid">{{ replacePlaceholderInString(v$.form[field.name].maxSize.$params.description,true).value }}</p>
+                        <p class="has-text-danger" v-if="'regex' in v$.form[field.name] && v$.form[field.name].regex.$invalid">{{ replacePlaceholderInString(v$.form[field.name].regex.$params.description,true).value }}</p>
+                        <p class="has-text-danger" v-if="'validIf' in v$.form[field.name] && v$.form[field.name].validIf.$invalid">{{ replacePlaceholderInString(v$.form[field.name].validIf.$params.description,true).value }}</p>
+                        <p class="has-text-danger" v-if="'validIfNot' in v$.form[field.name] && v$.form[field.name].validIfNot.$invalid">{{ replacePlaceholderInString(v$.form[field.name].validIfNot.$params.description,true).value }}</p>
+                        <p class="has-text-danger" v-if="'notIn' in v$.form[field.name] && !v$.form[field.name].notIn.$invalid">{{ replacePlaceholderInString(v$.form[field.name].notIn.$params.description,true).value }}</p>
+                        <p class="has-text-danger" v-if="'in' in v$.form[field.name] && v$.form[field.name].in.$invalid">{{ replacePlaceholderInString(v$.form[field.name].in.$params.description,true).value }}</p>
+                        <p class="has-text-danger" v-if="'sameAs' in v$.form[field.name] && v$.form[field.name].sameAs.$invalid">{{ v$.form[field.name].sameAs.$params.description }}</p>
                       </div>
                     </div>
                   </transition>
@@ -462,7 +462,6 @@
 <script>
   import Vue from 'vue'
   import axios from 'axios'
-  import Vuelidate from 'vuelidate'
   import TokenStorage from './../lib/TokenStorage'
   import VueJsonPretty from 'vue-json-pretty';
   import BulmaAdvancedSelect from './BulmaAdvancedSelect.vue'
@@ -480,15 +479,15 @@
 
   hljs.registerLanguage('javascript', javascript);
 
-  Vue.use(vuePlugin);  
   import Helpers from './../lib/Helpers'
   import Copy from 'copy-to-clipboard'
   import 'vue-json-pretty/lib/styles.css';
   import Lodash from 'lodash'
   import VueShowdown from 'vue-showdown';
-  import { required, minValue,maxValue,minLength,maxLength,helpers,requiredIf,sameAs } from 'vuelidate/lib/validators'
+  import { useVuelidate } from '@vuelidate/core'
+  import { minValue,maxValue,minLength,maxLength,helpers,requiredIf,sameAs } from '@vuelidate/validators'
 
-  Vue.use(Vuelidate)
+  Vue.use(vuePlugin);  
   Vue.use(VueShowdown)
 
   export default{
@@ -499,6 +498,9 @@
       constants:{type:Object},
       isAdmin:{type:Boolean}
     },
+    setup(){
+      return { v$: useVuelidate() }
+    },
     data(){
       return  {
           filterOutput:true,
@@ -653,7 +655,14 @@
           )
         }
         // field must be identical as other field
-        if("sameAs" in ff){ attrs.sameAs=sameAs(ff.sameAs)}
+        if("sameAs" in ff){ 
+          // attrs.sameAs=sameAs(self.form[ff.sameAs])
+          description = `Must match the field '${self.currentForm.fields.find((x)=>ff.sameAs==x.name).label || ff.sameAs}'`
+          attrs.sameAs = helpers.withParams(
+              {description: description,type:"sameAs"},
+              (value) => !helpers.req(value) || (self.form[ff.sameAs]!=undefined && value==self.form[ff.sameAs])
+          )
+        }
         obj.form[ff.name]=attrs
       });
       // flag validations are ready
@@ -726,7 +735,7 @@
     methods:{
       // when file selected
       handleFiles(name,files){
-        Vue.set(this.$v.form[name],'$model',files[0])
+        Vue.set(this.v$.form[name],'$model',files[0])
       },
       // used for enum field, to know the width of the container
       calcContainerSize(){
@@ -790,7 +799,7 @@
       },
       // flags expression field as editable
       setExpressionFieldEditable(fieldname,value){
-        if(typeof this.$v.form[fieldname].$model=='string' || typeof this.$v.form[fieldname].$model=='number' || this.$v.form[fieldname].$model==undefined){
+        if(typeof this.v$.form[fieldname].$model=='string' || typeof this.v$.form[fieldname].$model=='number' || this.v$.form[fieldname].$model==undefined){
           Vue.set(this.fieldOptions[fieldname],'editable',value)   // flag editable
         }else{
           this.$toast.warning("You can only edit string or number expression fields.")
@@ -893,7 +902,7 @@
             }
             // new in 4.0.13 - dependency on validated
             if(item.isValid != undefined){
-              tmp = item.isValid!=this.$v.form[fieldname].$invalid
+              tmp = item.isValid!=this.v$.form[fieldname].$invalid
               if(isAnd && ((!inversed && !tmp) || ((inversed && tmp))) ){
                 result=false
                 // console.log("and not valid")
@@ -2000,10 +2009,10 @@
         var ref=this
         var isValid=true
         // final touch to force validation
-        this.$v.form.$touch();
+        this.v$.form.$touch();
         // loop all fields and check if it valid, skip hidden fields
         this.currentForm.fields.forEach((item, i) => {
-          if(this.visibility[item.name] && this.$v.form[item.name].$invalid){
+          if(this.visibility[item.name] && this.v$.form[item.name].$invalid){
             isValid=false
           }
         })
@@ -2267,7 +2276,7 @@
           this.showHelp=true
         }
         // reset the form
-        this.$v.form.$reset();
+        this.v$.form.$reset();
         // set all defaults
         this.initiateDefaults()
         // find all variable dependencies (in both ways)
diff --git a/client/src/views/Awx.vue b/client/src/views/Awx.vue
index 67bc3c9c..4fdcedf1 100644
--- a/client/src/views/Awx.vue
+++ b/client/src/views/Awx.vue
@@ -17,14 +17,14 @@
           <div class="columns">
             <div class="column">
               <BulmaCheckbox checktype="checkbox" v-model="awx.use_credentials" label="Use Credentials" />
-              <BulmaInput icon="globe" v-model="awx.uri" label="Uri" placeholder="https://awx.domain.local" :required="true" :hasError="$v.awx.uri.$invalid" :errors="[]" />
-              <BulmaInput icon="user" v-if="awx.use_credentials" v-model="awx.username" label="Username" placeholder="Username" :required="true" :hasError="$v.awx.username.$invalid" :errors="[]" />
-              <BulmaInput icon="lock" v-if="!awx.use_credentials" type="password" v-model="awx.token" label="Token" :required="true" :hasError="$v.awx.token.$invalid" :errors="[]" />
-              <BulmaInput icon="lock" v-if="awx.use_credentials" type="password" v-model="awx.password" label="Password" :required="true" :hasError="$v.awx.password.$invalid" :errors="[]" />
+              <BulmaInput icon="globe" v-model="awx.uri" label="Uri" placeholder="https://awx.domain.local" :required="true" :hasError="v$.awx.uri.$invalid" :errors="[]" />
+              <BulmaInput icon="user" v-if="awx.use_credentials" v-model="awx.username" label="Username" placeholder="Username" :required="true" :hasError="v$.awx.username.$invalid" :errors="[]" />
+              <BulmaInput icon="lock" v-if="!awx.use_credentials" type="password" v-model="awx.token" label="Token" :required="true" :hasError="v$.awx.token.$invalid" :errors="[]" />
+              <BulmaInput icon="lock" v-if="awx.use_credentials" type="password" v-model="awx.password" label="Password" :required="true" :hasError="v$.awx.password.$invalid" :errors="[]" />
             </div>
             <div class="column">
               <BulmaCheckbox checktype="checkbox" v-model="awx.ignore_certs" label="Ignore Certificate Errors" />
-              <BulmaTextArea v-if="!awx.ignore_certs" v-model="awx.ca_bundle" label="Ca Bundle" placeholder="-----BEGIN CERTIFICATE-----" :hasError="$v.awx.ca_bundle.$invalid" :errors="[]" />
+              <BulmaTextArea v-if="!awx.ignore_certs" v-model="awx.ca_bundle" label="Ca Bundle" placeholder="-----BEGIN CERTIFICATE-----" :hasError="v$.awx.ca_bundle.$invalid" :errors="[]" />
             </div>
           </div>
         </div>
@@ -33,18 +33,16 @@
   </section>
 </template>
 <script>
-  import Vue from 'vue'
+
   import axios from 'axios'
-  import Vuelidate from 'vuelidate'
+  import { useVuelidate } from '@vuelidate/core'
   import BulmaButton from './../components/BulmaButton.vue'
   import BulmaInput from './../components/BulmaInput.vue'
   import BulmaCheckbox from './../components/BulmaCheckRadio.vue'
   import BulmaTextArea from './../components/BulmaTextArea.vue'
   import BulmaSettingsMenu from '../components/BulmaSettingsMenu.vue'
   import TokenStorage from './../lib/TokenStorage'
-  import { required, email, minValue,maxValue,minLength,maxLength,helpers,requiredIf,sameAs } from 'vuelidate/lib/validators'
-
-  Vue.use(Vuelidate)
+  import { required, requiredIf } from '@vuelidate/validators'
 
   export default{
     name: "AfAwx",
@@ -53,6 +51,9 @@
       isAdmin:{type:Boolean}
     },
     components:{BulmaButton,BulmaInput,BulmaCheckbox,BulmaTextArea,BulmaSettingsMenu},
+    setup(){
+      return { v$: useVuelidate() }
+    },
     data(){
       return  {
           awx:{
@@ -77,7 +78,7 @@
           };
       },updateAwx(){
         var ref= this;
-        if (!this.$v.awx.$invalid) {
+        if (!this.v$.awx.$invalid) {
           axios.put(`${process.env.BASE_URL}api/v1/awx/`,this.awx,TokenStorage.getAuthentication())
             .then((result)=>{
               if(result.data.status=="error"){
diff --git a/client/src/views/AzureAd.vue b/client/src/views/AzureAd.vue
index 2e49ce5f..6d6089b9 100644
--- a/client/src/views/AzureAd.vue
+++ b/client/src/views/AzureAd.vue
@@ -17,8 +17,8 @@
             <div class="column">
               <BulmaCheckbox checktype="checkbox" v-model="azuread.enable" label="Enable MS Entra ID" />
               <div class="mt-2">
-                <BulmaInput :disabled="!azuread.enable" icon="user-tag" v-model="azuread.client_id" label="Client Id" placeholder="" :required="true" :hasError="$v.azuread.client_id.$invalid" :errors="[]" />
-                <BulmaInput :disabled="!azuread.enable" icon="user-secret" v-model="azuread.secret_id" type="password" label="Secret Id" placeholder="" :required="true" :hasError="$v.azuread.secret_id.$invalid" :errors="[]" />
+                <BulmaInput :disabled="!azuread.enable" icon="user-tag" v-model="azuread.client_id" label="Client Id" placeholder="" :required="true" :hasError="v$.azuread.client_id.$invalid" :errors="[]" />
+                <BulmaInput :disabled="!azuread.enable" icon="user-secret" v-model="azuread.secret_id" type="password" label="Secret Id" placeholder="" :required="true" :hasError="v$.azuread.secret_id.$invalid" :errors="[]" />
                 <BulmaInput :disabled="!azuread.enable" icon="filter" v-model="azuread.groupfilter" label="Groupname Regex" placeholder="A regular expression to match groups" :required="false" :errors="[]" />
                 <div class="notification is-info-light content">
                   <strong>Required API Permissions</strong><br>
@@ -44,17 +44,15 @@
   </section>
 </template>
 <script>
-  import Vue from 'vue'
+
   import axios from 'axios'
-  import Vuelidate from 'vuelidate'
   import BulmaButton from '../components/BulmaButton.vue'
   import BulmaInput from '../components/BulmaInput.vue'
   import BulmaCheckbox from '../components/BulmaCheckRadio.vue'
   import TokenStorage from '../lib/TokenStorage'
   import BulmaSettingsMenu from '../components/BulmaSettingsMenu.vue'
-  import { requiredIf } from 'vuelidate/lib/validators'
-
-  Vue.use(Vuelidate)
+  import { useVuelidate } from '@vuelidate/core'
+  import { requiredIf } from '@vuelidate/validators'
 
   export default{
     name: "AfAzureAd",
@@ -63,6 +61,9 @@
       isAdmin:{type:Boolean}
     },
     components:{BulmaButton,BulmaInput,BulmaCheckbox,BulmaSettingsMenu},
+    setup(){
+      return { v$: useVuelidate() }
+    },
     data(){
       return  {
           azuread:{
@@ -101,7 +102,7 @@
           };
       },updateAzureAd(){
         var ref= this;
-        if (!this.$v.azuread.$invalid) {
+        if (!this.v$.azuread.$invalid) {
           axios.put(`${process.env.BASE_URL}api/v1/azuread/`,this.azuread,TokenStorage.getAuthentication())
             .then((result)=>{
               if(result.data.status=="error"){
diff --git a/client/src/views/Credentials.vue b/client/src/views/Credentials.vue
index feb11640..3e443821 100644
--- a/client/src/views/Credentials.vue
+++ b/client/src/views/Credentials.vue
@@ -33,13 +33,13 @@
             <transition name="add-column" appear>
               <div class="column" v-if="credentialItem!==undefined && !showDelete">
                 <BulmaCheckbox checktype="checkbox" v-model="credential.is_database" label="For database ?" /><br><br>
-                <BulmaInput icon="heading" v-model="credential.name" label="Name" placeholder="Name" :readonly="credentialItem!==-1" :required="true" :hasError="$v.credential.name.$invalid" :errors="[]" />
-                <BulmaInput icon="user" v-model="credential.user" label="Username" placeholder="Username" :required="true" :hasError="$v.credential.user.$invalid" :errors="[]" />
-                <BulmaInput icon="lock" v-model="credential.password" type="password" label="Password" placeholder="Password" :required="true" :hasError="$v.credential.password.$invalid" :errors="[]" />
-                <BulmaInput icon="server" v-model="credential.host" label="Host" placeholder="Host" :required="!!credential.is_database" :hasError="$v.credential.host.$invalid" :errors="[]" />
-                <BulmaInput icon="door-closed" v-model="credential.port" label="Port" placeholder="3306" :required="!!credential.is_database" :hasError="$v.credential.port.$invalid" :errors="[]" />
+                <BulmaInput icon="heading" v-model="credential.name" label="Name" placeholder="Name" :readonly="credentialItem!==-1" :required="true" :hasError="v$.credential.name.$invalid" :errors="[]" />
+                <BulmaInput icon="user" v-model="credential.user" label="Username" placeholder="Username" :required="true" :hasError="v$.credential.user.$invalid" :errors="[]" />
+                <BulmaInput icon="lock" v-model="credential.password" type="password" label="Password" placeholder="Password" :required="true" :hasError="v$.credential.password.$invalid" :errors="[]" />
+                <BulmaInput icon="server" v-model="credential.host" label="Host" placeholder="Host" :required="!!credential.is_database" :hasError="v$.credential.host.$invalid" :errors="[]" />
+                <BulmaInput icon="door-closed" v-model="credential.port" label="Port" placeholder="3306" :required="!!credential.is_database" :hasError="v$.credential.port.$invalid" :errors="[]" />
                 <BulmaInput icon="info-circle" v-model="credential.description" label="Description" placeholder="Description" />
-                <BulmaSelect v-if="!!credential.is_database" icon="database" v-model="credential.db_type" label="Database type" :list="['mysql','mssql','postgres','mongodb','oracle']"  />
+                <BulmaSelect v-if="!!credential.is_database" icon="database" v-model="credential.db_type" :required="true" label="Database type" :list="['mysql','mssql','postgres','mongodb','oracle']" :hasError="v$.credential.db_type.$invalid"  />
                 <BulmaInput v-if="!!credential.is_database" icon="database" v-model="credential.db_name" :label="(credential.db_type=='oracle')?'Service':'Database'" :placeholder="(credential.db_type=='oracle')?'Service Name':'Database Name'" />
                 <BulmaCheckbox v-if="!!credential.is_database" checktype="checkbox" v-model="credential.secure" label="Secure connection" /><br><br>
                 <BulmaButton v-if="credentialItem==-1" icon="save" label="Create Credential" @click="newCredential()"></BulmaButton>
@@ -55,7 +55,6 @@
 <script>
   import Vue from 'vue'
   import axios from 'axios'
-  import Vuelidate from 'vuelidate'
   import BulmaButton from './../components/BulmaButton.vue'
   import BulmaAdminTable from './../components/BulmaAdminTable.vue'
   import BulmaInput from './../components/BulmaInput.vue'
@@ -64,9 +63,9 @@
   import BulmaSettingsMenu from '../components/BulmaSettingsMenu.vue'
   import BulmaSelect from './../components/BulmaSelect.vue'
   import TokenStorage from './../lib/TokenStorage'
-  import { required, email, minValue,maxValue,minLength,maxLength,helpers,requiredIf,sameAs,numeric } from 'vuelidate/lib/validators'
+  import { useVuelidate } from "@vuelidate/core"
+  import { required,helpers,numeric } from "@vuelidate/validators"
 
-  Vue.use(Vuelidate)
   export default{
     name:"AfCredentials",
     props:{
@@ -74,6 +73,9 @@
       isAdmin:{type:Boolean}
     },
     components:{BulmaButton,BulmaInput,BulmaModal,BulmaAdminTable,BulmaCheckbox,BulmaSelect,BulmaSettingsMenu},
+    setup(){
+      return { v$: useVuelidate() }
+    },
     data(){
       return  {
           credential:{
@@ -180,7 +182,7 @@
           };
       },updateCredential(){
         var ref= this;
-        if (!this.$v.credential.$invalid) {
+        if (!this.v$.credential.$invalid) {
           axios.put(`${process.env.BASE_URL}api/v1/credential/${this.credentialItem}`,this.credential,TokenStorage.getAuthentication())
             .then((result)=>{
               if(result.data.status=="error"){
@@ -197,7 +199,7 @@
         }
       },newCredential(){
         var ref= this;
-        if (!this.$v.credential.$invalid) {
+        if (!this.v$.credential.$invalid) {
           axios.post(`${process.env.BASE_URL}api/v1/credential/`,this.credential,TokenStorage.getAuthentication())
             .then((result)=>{
               if(result.data.status=="error"){
@@ -223,26 +225,30 @@
           this.alert.timeout = setTimeout(function(){ref.alert.message=""}, 5000);
       }
     },
-    validations: {
-      credential:{
-        name: {
-          required
-        },
-        user: {
-          required
-        },
-        password: {
-          required
-        },
-        host: {
-          database_required: function(value){return (helpers.req(value) && !!this.credential?.is_database) || !(this.credential?.is_database)}
-        },
-        port: {
-          database_required: function(value){return (helpers.req(value) && !!this.credential?.is_database) || !(this.credential?.is_database)},
-          numeric
+    validations() {
+      return{
+        credential:{
+          name: {
+            required
+          },
+          user: {
+            required
+          },
+          password: {
+            required
+          },
+          host: {
+            database_required: function(value){return (helpers.req(value) && !!this.credential?.is_database) || !(this.credential?.is_database)}
+          },
+          port: {
+            database_required: function(value){return (helpers.req(value) && !!this.credential?.is_database) || !(this.credential?.is_database)},
+            numeric
+          },
+          db_type: {
+            database_required: function(value){return (helpers.req(value) && !!this.credential?.is_database) || !(this.credential?.is_database)}
+          }
         }
       }
-
     },
     mounted() { // when the Vue app is booted up, this is run automatically.
         this.loadAll();
diff --git a/client/src/views/Groups.vue b/client/src/views/Groups.vue
index b6fdcfc0..925b8230 100644
--- a/client/src/views/Groups.vue
+++ b/client/src/views/Groups.vue
@@ -34,7 +34,7 @@
             </div>
             <transition name="add-column" appear>
               <div class="column" v-if="groupItem==-1 && !showDelete">
-                  <BulmaInput icon="users" v-model="group.name" label="Name" placeholder="Name" :required="true" :hasError="$v.group.name.$invalid" :errors="[]" />
+                  <BulmaInput icon="users" v-model="group.name" label="Name" placeholder="Name" :required="true" :hasError="v$.group.name.$invalid" :errors="[]" />
                   <BulmaButton icon="save" label="Create Group" @click="newGroup()"></BulmaButton>
               </div>
               <div class="column" v-if="groupItem>0 && !showDelete">
@@ -62,16 +62,15 @@
 <script>
   import Vue from 'vue'
   import axios from 'axios'
-  import Vuelidate from 'vuelidate'
   import BulmaButton from './../components/BulmaButton.vue'
   import BulmaInput from './../components/BulmaInput.vue'
   import BulmaAdminTable from './../components/BulmaAdminTable.vue'
   import BulmaModal from './../components/BulmaModal.vue'
   import BulmaSettingsMenu from '../components/BulmaSettingsMenu.vue'
   import TokenStorage from './../lib/TokenStorage'
-  import { required, email, minValue,maxValue,minLength,maxLength,helpers,requiredIf,sameAs } from 'vuelidate/lib/validators'
+  import { useVuelidate } from '@vuelidate/core'
+  import { required } from "@vuelidate/validators"
 
-  Vue.use(Vuelidate)
   export default{
     name:"Groups",
     props:{
@@ -79,6 +78,9 @@
       isAdmin:{type:Boolean}
     },
     components:{BulmaButton,BulmaInput,BulmaModal,BulmaAdminTable,BulmaSettingsMenu},
+    setup(){
+      return { v$: useVuelidate() }
+    },
     data(){
       return  {
           group:{
@@ -175,7 +177,7 @@
       },
       newGroup(){
         var ref= this;
-        if (!this.$v.group.$invalid) {
+        if (!this.v$.group.$invalid) {
           axios.post(`${process.env.BASE_URL}api/v1/group/`,this.group,TokenStorage.getAuthentication())
             .then((result)=>{
               if(result.data.status=="error"){
diff --git a/client/src/views/KnownHosts.vue b/client/src/views/KnownHosts.vue
index 63b9fa84..05a2fec9 100644
--- a/client/src/views/KnownHosts.vue
+++ b/client/src/views/KnownHosts.vue
@@ -23,7 +23,7 @@
             </div>
             <transition name="add-column" appear>
               <div class="column" v-if="!showDelete">
-                <BulmaInput icon="server" v-model="host" label="Known hosts" placeholder="github.com,bitbucket.com,172.16.0.1,..." :required="true" :hasError="$v.host.$invalid" :errors="[]" />
+                <BulmaInput icon="server" v-model="host" label="Known hosts" placeholder="github.com,bitbucket.com,172.16.0.1,..." :required="true" :hasError="v$.host.$invalid" :errors="[]" />
                 <BulmaButton v-if="!loading" icon="server" label="Add to known hosts" @click="addHost()"></BulmaButton>
               </div>
             </transition>
@@ -40,9 +40,8 @@
   </section>
 </template>
 <script>
-  import Vue from 'vue'
+
   import axios from 'axios'
-  import Vuelidate from 'vuelidate'
   import BulmaButton from '../components/BulmaButton.vue'
   import BulmaInput from '../components/BulmaInput.vue'
   import BulmaAdminTable from '../components/BulmaAdminTable.vue'
@@ -50,9 +49,9 @@
   import _ from 'lodash'
   import BulmaSettingsMenu from '../components/BulmaSettingsMenu.vue'
   import TokenStorage from '../lib/TokenStorage'
-  import { required, email, minValue,maxValue,minLength,maxLength,helpers,requiredIf,sameAs } from 'vuelidate/lib/validators'
+  import { useVuelidate } from '@vuelidate/core'
+  import { required, helpers } from '@vuelidate/validators'
   const gitclone = helpers.regex("gitclone",/^git clone --quiet .+$/g)
-  Vue.use(Vuelidate)
 
   export default{
     name: "AfKnownHosts",
@@ -61,6 +60,9 @@
       isAdmin:{type:Boolean}
     },
     components:{BulmaButton,BulmaInput,BulmaModal,BulmaAdminTable,BulmaSettingsMenu},
+    setup(){
+      return { v$: useVuelidate() }
+    },
     data(){
       return  {
           loading:false,
@@ -129,7 +131,7 @@
       },
       addHost(){
         var ref= this;
-        if (!this.$v.host.$invalid) {
+        if (!this.v$.host.$invalid) {
           this.loading=true
           var host=this.host
           axios.post(`${process.env.BASE_URL}api/v1/knownhosts/`,{host},TokenStorage.getAuthentication())
diff --git a/client/src/views/Ldap.vue b/client/src/views/Ldap.vue
index 4474c245..5f97ac14 100644
--- a/client/src/views/Ldap.vue
+++ b/client/src/views/Ldap.vue
@@ -18,14 +18,14 @@
             <div class="column">
               <BulmaCheckbox checktype="checkbox" v-model="ldap.enable" label="Enable Ldap" /> <BulmaCheckbox v-if="ldap.enable" checktype="checkbox" v-model="ldap.enable_tls" label="Enable Tls" /> <BulmaCheckbox v-if="ldap.enable" checktype="checkbox" v-model="ldap.is_advanced" label="Advanced settings" />
               <div>
-                <BulmaInput :disabled="!ldap.enable" icon="server" v-model="ldap.server" label="Server" placeholder="ldap.domain.local" :required="true" :hasError="$v.ldap.server.$invalid" :errors="[]" />
-                <BulmaInput :disabled="!ldap.enable" icon="arrows-alt-v" type="number" v-model="ldap.port" label="Port" placeholder="389" :required="true" :hasError="$v.ldap.port.$invalid" :errors="[]" />
-                <BulmaInput :disabled="!ldap.enable" icon="search" v-model="ldap.search_base" label="Search Base" placeholder="dc=domain,dc=local" :required="true" :hasError="$v.ldap.search_base.$invalid" :errors="[]" />
-                <BulmaInput :disabled="!ldap.enable" icon="user" v-model="ldap.bind_user_dn" label="Bind User distinguished name" placeholder="Bind User distinguished name" :required="true" :hasError="$v.ldap.bind_user_dn.$invalid" :errors="[]" />
-                <BulmaInput :disabled="!ldap.enable" icon="lock" v-model="ldap.bind_user_pw" type="password" label="Bind User Password" placeholder="" :required="true" :hasError="$v.ldap.bind_user_pw.$invalid" :errors="[]" />
-                <BulmaInput :disabled="!ldap.enable" icon="portrait" v-model="ldap.username_attribute" label="Username Attribute" placeholder="sAMAccountName" :required="true" :hasError="$v.ldap.username_attribute.$invalid" :errors="[]" />
-                <BulmaInput :disabled="!ldap.enable" icon="users" v-model="ldap.groups_attribute" label="Groups Attribute" placeholder="memberOf" :required="true" :hasError="$v.ldap.groups_attribute.$invalid" :errors="[]" />
-                <BulmaInput :disabled="!ldap.enable" icon="envelope" v-model="ldap.mail_attribute" label="Mail Attribute" placeholder="mail" :required="true" :hasError="$v.ldap.mail_attribute.$invalid" :errors="[]" />
+                <BulmaInput :disabled="!ldap.enable" icon="server" v-model="ldap.server" label="Server" placeholder="ldap.domain.local" :required="true" :hasError="v$.ldap.server.$invalid" :errors="[]" />
+                <BulmaInput :disabled="!ldap.enable" icon="arrows-alt-v" type="number" v-model="ldap.port" label="Port" placeholder="389" :required="true" :hasError="v$.ldap.port.$invalid" :errors="[]" />
+                <BulmaInput :disabled="!ldap.enable" icon="search" v-model="ldap.search_base" label="Search Base" placeholder="dc=domain,dc=local" :required="true" :hasError="v$.ldap.search_base.$invalid" :errors="[]" />
+                <BulmaInput :disabled="!ldap.enable" icon="user" v-model="ldap.bind_user_dn" label="Bind User distinguished name" placeholder="Bind User distinguished name" :required="true" :hasError="v$.ldap.bind_user_dn.$invalid" :errors="[]" />
+                <BulmaInput :disabled="!ldap.enable" icon="lock" v-model="ldap.bind_user_pw" type="password" label="Bind User Password" placeholder="" :required="true" :hasError="v$.ldap.bind_user_pw.$invalid" :errors="[]" />
+                <BulmaInput :disabled="!ldap.enable" icon="portrait" v-model="ldap.username_attribute" label="Username Attribute" placeholder="sAMAccountName" :required="true" :hasError="v$.ldap.username_attribute.$invalid" :errors="[]" />
+                <BulmaInput :disabled="!ldap.enable" icon="users" v-model="ldap.groups_attribute" label="Groups Attribute" placeholder="memberOf" :required="true" :hasError="v$.ldap.groups_attribute.$invalid" :errors="[]" />
+                <BulmaInput :disabled="!ldap.enable" icon="envelope" v-model="ldap.mail_attribute" label="Mail Attribute" placeholder="mail" :required="true" :hasError="v$.ldap.mail_attribute.$invalid" :errors="[]" />
                 <BulmaInput v-show="ldap.is_advanced && ldap.enable" :disabled="!ldap.enable" icon="users-viewfinder" v-model="ldap.groups_search_base" label="Groups Search Base" placeholder="dc=domain,dc=local" />
                 <BulmaInput v-show="ldap.is_advanced && ldap.enable" :disabled="!ldap.enable" icon="users-rectangle" v-model="ldap.group_class" label="Group Class" placeholder="groupOfNames" />
                 <BulmaInput v-show="ldap.is_advanced && ldap.enable" :disabled="!ldap.enable" icon="users-line" v-model="ldap.group_member_attribute" label="Group Member Attribute" placeholder="memberUid" />
@@ -34,8 +34,8 @@
             </div>
             <div v-if="ldap.enable_tls && ldap.enable" class="column">
               <BulmaCheckbox checktype="checkbox" v-model="ldap.ignore_certs" label="Ignore Certificate Errors" />
-              <BulmaTextArea v-if="!ldap.ignore_certs" v-model="ldap.cert" label="Ldap Certificate" placeholder="-----BEGIN CERTIFICATE-----" :hasError="$v.ldap.cert.$invalid" :errors="[]" />
-              <BulmaTextArea v-if="!ldap.ignore_certs" v-model="ldap.ca_bundle" label="Ca Bundle" placeholder="-----BEGIN CERTIFICATE-----" :hasError="$v.ldap.ca_bundle.$invalid" :errors="[]" />
+              <BulmaTextArea v-if="!ldap.ignore_certs" v-model="ldap.cert" label="Ldap Certificate" placeholder="-----BEGIN CERTIFICATE-----" :hasError="v$.ldap.cert.$invalid" :errors="[]" />
+              <BulmaTextArea v-if="!ldap.ignore_certs" v-model="ldap.ca_bundle" label="Ca Bundle" placeholder="-----BEGIN CERTIFICATE-----" :hasError="v$.ldap.ca_bundle.$invalid" :errors="[]" />
             </div>
           </div>
         </div>
@@ -44,18 +44,15 @@
   </section>
 </template>
 <script>
-  import Vue from 'vue'
   import axios from 'axios'
-  import Vuelidate from 'vuelidate'
   import BulmaButton from './../components/BulmaButton.vue'
   import BulmaInput from './../components/BulmaInput.vue'
   import BulmaCheckbox from './../components/BulmaCheckRadio.vue'
   import BulmaTextArea from './../components/BulmaTextArea.vue'
   import BulmaSettingsMenu from '../components/BulmaSettingsMenu.vue'
   import TokenStorage from './../lib/TokenStorage'
-  import { required, email, minValue,maxValue,minLength,maxLength,helpers,requiredIf,sameAs } from 'vuelidate/lib/validators'
-
-  Vue.use(Vuelidate)
+  import { useVuelidate } from '@vuelidate/core'
+  import { required, requiredIf } from '@vuelidate/validators'
 
   export default{
     name: "AfLdap",
@@ -64,6 +61,9 @@
       isAdmin:{type:Boolean}
     },
     components:{BulmaButton,BulmaInput,BulmaCheckbox,BulmaTextArea,BulmaSettingsMenu},
+    setup(){
+      return { v$: useVuelidate() }
+    },
     data(){
       return  {
           ldap:{
@@ -99,7 +99,7 @@
           };
       },updateLdap(){
         var ref= this;
-        if (!this.$v.ldap.$invalid) {
+        if (!this.v$.ldap.$invalid) {
           axios.put(`${process.env.BASE_URL}api/v1/ldap/`,this.ldap,TokenStorage.getAuthentication())
             .then((result)=>{
               if(result.data.status=="error"){
diff --git a/client/src/views/Login.vue b/client/src/views/Login.vue
index 1935c6d4..6db9896e 100644
--- a/client/src/views/Login.vue
+++ b/client/src/views/Login.vue
@@ -5,8 +5,8 @@
         <div class="columns is-centered is-vcentered vh-90">
           <div class="column is-6-tablet is-6-desktop is-4-widescreen">
             <div class="box">
-              <BulmaInput icon="user" focus="true" v-model="user.username" label="Username" placeholder="Username" :required="true" :hasError="$v.user.username.$invalid" :errors="[]" />
-              <BulmaInput icon="lock" v-model="user.password" @enterClicked="login()" label="Password" type="password" placeholder="***********" :required="true" :hasError="$v.user.password.$invalid" :errors="[]" />
+              <BulmaInput icon="user" focus="true" v-model="user.username" label="Username" placeholder="Username" :required="true" :hasError="v$.user.username.$invalid" :errors="[]" />
+              <BulmaInput icon="lock" v-model="user.password" @enterClicked="login()" label="Password" type="password" placeholder="***********" :required="true" :hasError="v$.user.password.$invalid" :errors="[]" />
               <div class="field">
                 <button class="button is-light mr-1" @click="login()">
                   <span class="icon has-text-info"><font-awesome-icon icon="right-to-bracket" /></span><span>Login</span>
@@ -30,18 +30,19 @@
 </template>
 
 <script>
-  import Vue from 'vue'
-  import Vuelidate from 'vuelidate'
   import BulmaInput from './../components/BulmaInput.vue'
   import TokenStorage from './../lib/TokenStorage'
-  import { required, email, minValue,maxValue,minLength,maxLength,helpers,requiredIf,sameAs } from 'vuelidate/lib/validators'
+  import { useVuelidate } from '@vuelidate/core'
+  import { required } from '@vuelidate/validators'
   import axios from 'axios'
   import jwt from 'jsonwebtoken'
-  Vue.use(Vuelidate)
-
+  
   export default {
       components:{BulmaInput},
       name: 'AfLogin',
+      setup(){
+        return { v$: useVuelidate() }
+      },
       data() {
           return {
               loading:false,
@@ -159,7 +160,7 @@
         login() {
           var ref=this
           localStorage.removeItem("authIssuer") // remove cookie, regular login
-          if (!this.$v.user.$invalid) {
+          if (!this.v$.user.$invalid) {
             console.log("Logging in")
             var basicAuth = 'Basic ' + new Buffer(this.user.username + ':' + this.user.password).toString('base64')
             var postconfig={
diff --git a/client/src/views/MailSettings.vue b/client/src/views/MailSettings.vue
index bd9b7228..05874d30 100644
--- a/client/src/views/MailSettings.vue
+++ b/client/src/views/MailSettings.vue
@@ -18,8 +18,8 @@
             <h3 class="subtitle"><font-awesome-icon icon="envelope" /> <span class="mr-3">Mail Settings</span><BulmaCheckbox checktype="checkbox" v-model="settings.mail_secure" label="Enable Tls" /><BulmaCheckbox checktype="checkbox" v-model="test.enabled" label="Test Mail" /></h3>
             <div class="columns">
               <div class="column">
-                <BulmaInput icon="server" v-model="settings.mail_server" label="Server" placeholder="mail_domain.local" :required="true" :hasError="$v.settings.mail_server.$invalid" :errors="[]" />
-                <BulmaInput icon="arrows-alt-v" type="number" v-model="settings.mail_port" label="Port" placeholder="25" :required="true" :hasError="$v.settings.mail_port.$invalid" :errors="[]" />
+                <BulmaInput icon="server" v-model="settings.mail_server" label="Server" placeholder="mail_domain.local" :required="true" :hasError="v$.settings.mail_server.$invalid" :errors="[]" />
+                <BulmaInput icon="arrows-alt-v" type="number" v-model="settings.mail_port" label="Port" placeholder="25" :required="true" :hasError="v$.settings.mail_port.$invalid" :errors="[]" />
               </div>
               <div class="column">
                 <BulmaInput icon="user" v-model="settings.mail_username" label="Username" placeholder="username" :required="false" :hasError="false" :errors="[]" />
@@ -27,8 +27,8 @@
 
               </div>
               <div class="column">
-                <BulmaInput icon="envelope" v-model="settings.mail_from" type="email" label="Mail from" placeholder="" :required="true" :hasError="$v.settings.mail_from.$invalid" :errors="[]" />
-                <BulmaInput v-if="test.enabled" icon="envelope" v-model="test.to" type="email" label="Mail to" placeholder="" :required="true" :hasError="$v.test.to.$invalid" :errors="[]" />
+                <BulmaInput icon="envelope" v-model="settings.mail_from" type="email" label="Mail from" placeholder="" :required="true" :hasError="v$.settings.mail_from.$invalid" :errors="[{if:v$.settings.mail_from.email.$invalid,label:v$.settings.mail_from.email.$message}]" />
+                <BulmaInput v-if="test.enabled" icon="envelope" v-model="test.to" type="email" label="Mail to" placeholder="" :required="true" :hasError="v$.test.to.$invalid" :errors="[{if:v$.test.to.email.$invalid,label:v$.test.to.email.$message}]" />
                 <BulmaButton v-if="test.enabled" icon="check" label="Test Mail Settings" @click="testMail()"></BulmaButton>
               </div>
             </div>
@@ -41,17 +41,14 @@
   </section>
 </template>
 <script>
-  import Vue from 'vue'
   import axios from 'axios'
-  import Vuelidate from 'vuelidate'
   import BulmaButton from '../components/BulmaButton.vue'
   import BulmaInput from '../components/BulmaInput.vue'
   import BulmaCheckbox from '../components/BulmaCheckRadio.vue'
   import BulmaSettingsMenu from '../components/BulmaSettingsMenu.vue'
   import TokenStorage from '../lib/TokenStorage'
-  import { required, email, minValue,maxValue,minLength,maxLength,helpers,requiredIf,sameAs } from 'vuelidate/lib/validators'
-
-  Vue.use(Vuelidate)
+  import { useVuelidate } from '@vuelidate/core'
+  import { required, email } from '@vuelidate/validators'
 
   export default{
     name: "AfMailSettings",
@@ -60,6 +57,9 @@
       isAdmin:{type:Boolean}
     },
     components:{BulmaButton,BulmaInput,BulmaCheckbox,BulmaSettingsMenu},
+    setup(){
+      return { v$: useVuelidate() }
+    },
     data(){
       return  {
           settings:{
@@ -87,7 +87,7 @@
           };
       },updateSettings(){
         var ref= this;
-        if (!this.$v.settings.$invalid) {
+        if (!this.v$.settings.$invalid) {
           axios.put(`${process.env.BASE_URL}api/v1/settings/`,this.settings,TokenStorage.getAuthentication())
             .then((result)=>{
               if(result.data.status=="error"){
@@ -105,7 +105,7 @@
       },
       testMail(){
         var ref= this;
-        if (!this.$v.settings.$invalid && !this.$v.test.$invalid) {
+        if (!this.v$.settings.$invalid && !this.v$.test.$invalid) {
           axios.post(`${process.env.BASE_URL}api/v1/settings/mailcheck/`,{...this.settings,...this.test},TokenStorage.getAuthentication())
             .then((result)=>{
               if(result.data.status=="error"){
diff --git a/client/src/views/OIDC.vue b/client/src/views/OIDC.vue
index a077a108..47b76f5c 100644
--- a/client/src/views/OIDC.vue
+++ b/client/src/views/OIDC.vue
@@ -17,9 +17,9 @@
             <div class="column">
               <BulmaCheckbox checktype="checkbox" v-model="oidc.enabled" label="Enable OIDC" />
               <div class="mt-2">
-                <BulmaInput :disabled="!oidc.enabled" icon="id-card" v-model="oidc.issuer" label="Issuer URL" placeholder="" :required="true" :hasError="$v.oidc.issuer.$invalid" :errors="[]" />
-                <BulmaInput :disabled="!oidc.enabled" icon="user-tag" v-model="oidc.client_id" label="Client Id" placeholder="" :required="true" :hasError="$v.oidc.client_id.$invalid" :errors="[]" />
-                <BulmaInput :disabled="!oidc.enabled" icon="user-secret" v-model="oidc.secret_id" type="password" label="Secret Id" placeholder="" :required="true" :hasError="$v.oidc.secret_id.$invalid" :errors="[]" />
+                <BulmaInput :disabled="!oidc.enabled" icon="id-card" v-model="oidc.issuer" label="Issuer URL" placeholder="" :required="true" :hasError="v$.oidc.issuer.$invalid" :errors="[]" />
+                <BulmaInput :disabled="!oidc.enabled" icon="user-tag" v-model="oidc.client_id" label="Client Id" placeholder="" :required="true" :hasError="v$.oidc.client_id.$invalid" :errors="[]" />
+                <BulmaInput :disabled="!oidc.enabled" icon="user-secret" v-model="oidc.secret_id" type="password" label="Secret Id" placeholder="" :required="true" :hasError="v$.oidc.secret_id.$invalid" :errors="[]" />
                 <BulmaInput :disabled="!oidc.enabled" icon="filter" v-model="oidc.groupfilter" label="Groupname Regex" placeholder="A regular expression to match groups" :required="false" :errors="[]" />
                 <div class="notification is-info-light content">
                   <p><strong>Callback Url </strong>: {{ callbackUrl }} <span v-if="!settings.url" class="tag is-danger"><font-awesome-icon icon="circle-exclamation" class="mr-1" /> You have not set the Ansible Form Url (see: 'General > Ansible Forms' settings page)</span></p>
@@ -35,17 +35,14 @@
   </section>
 </template>
 <script>
-  import Vue from 'vue'
   import axios from 'axios'
-  import Vuelidate from 'vuelidate'
   import BulmaButton from '../components/BulmaButton.vue'
   import BulmaInput from '../components/BulmaInput.vue'
   import BulmaCheckbox from '../components/BulmaCheckRadio.vue'
   import TokenStorage from '../lib/TokenStorage'
   import BulmaSettingsMenu from '../components/BulmaSettingsMenu.vue'
-  import { requiredIf } from 'vuelidate/lib/validators'
-
-  Vue.use(Vuelidate)
+  import { useVuelidate } from '@vuelidate/core'
+  import { requiredIf } from '@vuelidate/validators'
 
   export default{
     name: "AfOidc",
@@ -54,6 +51,9 @@
       isAdmin:{type:Boolean}
     },
     components:{BulmaButton,BulmaInput,BulmaCheckbox,BulmaSettingsMenu},
+    setup(){
+      return { v$: useVuelidate() }
+    },
     data(){
       return  {
           oidc:{
@@ -93,7 +93,7 @@
           };
       },updateOidc(){
         var ref= this;
-        if (!this.$v.oidc.$invalid) {
+        if (!this.v$.oidc.$invalid) {
           axios.put(`${process.env.BASE_URL}api/v1/oidc/`,this.oidc,TokenStorage.getAuthentication())
             .then((result)=>{
               if(result.data.status=="error"){
diff --git a/client/src/views/Profile.vue b/client/src/views/Profile.vue
index 4bc3d345..3f21631a 100644
--- a/client/src/views/Profile.vue
+++ b/client/src/views/Profile.vue
@@ -5,8 +5,8 @@
         <div class="columns is-centered">
           <div class="column is-5-tablet is-4-desktop is-3-widescreen">
             <div class="box">
-              <BulmaInput icon="lock" focus="true" v-model="user.password" @enterClicked="update()" label="Password" type="password" placeholder="***********" :required="true" :hasError="$v.user.password.$invalid" :errors="[]" />
-              <BulmaInput icon="lock" type="password" v-model="user.password2" @enterClicked="update()" label="Password Again" placeholder="Password" :required="true" :hasError="$v.user.password2.$invalid" :errors="[{if:!$v.user.password2.sameAsPassword,label:'Passwords are not the same'}]" />
+              <BulmaInput icon="lock" focus="true" v-model="user.password" @enterClicked="update()" label="Password" type="password" placeholder="***********" :required="true" :hasError="v$.user.password.$invalid" :errors="[{if:v$.user.password.passwordComplexity.$invalid,label:v$.user.password.passwordComplexity.$params.description}]" />
+              <BulmaInput icon="lock" type="password" v-model="user.password2" @enterClicked="update()" label="Password Again" placeholder="Password" :required="true" :hasError="v$.user.password2.$invalid" :errors="[{if:v$.user.password2.sameAsPassword.$invalid,label:'Passwords are not the same'}]" />
               <div class="field">
                 <button class="button is-light" @click="update()">
                   <span class="icon has-text-info"><font-awesome-icon icon="key" /></span><span>Change Password</span>
@@ -20,14 +20,11 @@
   </section>
 </template>
 <script>
-  import Vue from 'vue'
   import axios from 'axios'
-  import Vuelidate from 'vuelidate'
   import BulmaInput from './../components/BulmaInput.vue'
   import TokenStorage from './../lib/TokenStorage'
-  import { required, email, minValue,maxValue,minLength,maxLength,helpers,requiredIf,sameAs } from 'vuelidate/lib/validators'
-
-  Vue.use(Vuelidate)
+  import { useVuelidate } from '@vuelidate/core'
+  import { required, helpers,sameAs } from '@vuelidate/validators'
 
   export default{
     name: "AfUsers",
@@ -36,6 +33,9 @@
       isAdmin:{type:Boolean}
     },
     components:{BulmaInput},
+    setup(){
+      return { v$: useVuelidate() }
+    },
     data(){
       return  {
           user:{
@@ -47,7 +47,7 @@
     methods:{
       update(){
         var ref= this;
-        if (!this.$v.user.password.$invalid && !this.$v.user.password2.$invalid) {
+        if (!this.v$.user.password.$invalid && !this.v$.user.password2.$invalid) {
           axios.put(`${process.env.BASE_URL}api/v1/profile`,this.user,TokenStorage.getAuthentication())
             .then((result)=>{
               if(result.data.status=="error"){
@@ -64,18 +64,20 @@
         }
       }
     },
-    validations: {
-      user:{
-        password: {
-          required,
-          minLength:8,
-          regex : helpers.withParams(
-              {description: "Must contain at least 1 numeric, 1 special, 1 upper and 1 lower character",type:"regex"},
-              (value) => !helpers.req(value) || (new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\\$%\\^&\\*])").test(value))
-          )
-        },
-        password2:{
-          sameAsPassword: sameAs('password')
+    validations(){ 
+      return {
+        user:{
+          password: {
+            required,
+            minLength:8,
+            passwordComplexity : helpers.withParams(
+                {description: "Must contain at least 1 numeric, 1 special, 1 upper and 1 lower character",type:"regex"},
+                (value) => !helpers.req(value) || (new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\\$%\\^&\\*])").test(value))
+            )
+          },
+          password2:{
+            sameAsPassword: sameAs(this.user.password)
+          }
         }
       }
 
diff --git a/client/src/views/Repos.vue b/client/src/views/Repos.vue
index 14a88288..ddaaa5a6 100644
--- a/client/src/views/Repos.vue
+++ b/client/src/views/Repos.vue
@@ -44,12 +44,12 @@
             </div>
             <transition name="add-column" appear>
               <div class="column" v-if="repositoryItem!==undefined && !showDelete">
-                <BulmaInput icon="heading" v-model="repository.name" label="Name" placeholder="my_repo_name" :readonly="repositoryItem!==-1" :required="true" :hasError="$v.repository.name.$invalid" :errors="[]" help="Alphanumeric with dash and hyphen" />
-                <BulmaInput icon="user" v-model="repository.user" label="Username" placeholder="my-user" :hasError="$v.repository.user.$invalid" :errors="[]" help="Alphnumeric with hyphen" />
+                <BulmaInput icon="heading" v-model="repository.name" label="Name" placeholder="my_repo_name" :readonly="repositoryItem!==-1" :required="true" :hasError="v$.repository.name.$invalid" :errors="[]" help="Alphanumeric with dash and hyphen" />
+                <BulmaInput icon="user" v-model="repository.user" label="Username" placeholder="my-user" :hasError="v$.repository.user.$invalid" :errors="[]" help="Alphnumeric with hyphen" />
                 <BulmaInput icon="lock" v-model="repository.password" type="password" label="Password" placeholder="Password or Token" />
-                <BulmaInput :icon="['fab','git']" v-model="repository.uri" label="Uri" placeholder="https://github.com/account/repo.git" :required="true" :hasError="$v.repository.uri.$invalid" :errors="[]" help="Only ssh or https uri's are allowed" />
-                <BulmaInput icon="stopwatch" v-model="repository.cron" label="Cron Schedule" placeholder="*/5 * L * 1,3L" :hasError="$v.repository.cron.$invalid" :errors="[]" help="Minute Hour DayOfMonth Month DayOfWeek" />
-                <BulmaInput icon="info-circle" v-model="repository.description" label="Description" placeholder="Description" :required="true" :hasError="$v.repository.description.$invalid" :errors="[]" />
+                <BulmaInput :icon="['fab','git']" v-model="repository.uri" label="Uri" placeholder="https://github.com/account/repo.git" :required="true" :hasError="v$.repository.uri.$invalid" :errors="[]" help="Only ssh or https uri's are allowed" />
+                <BulmaInput icon="stopwatch" v-model="repository.cron" label="Cron Schedule" placeholder="*/5 * L * 1,3L" :hasError="v$.repository.cron.$invalid" :errors="[]" help="Minute Hour DayOfMonth Month DayOfWeek" />
+                <BulmaInput icon="info-circle" v-model="repository.description" label="Description" placeholder="Description" :required="true" :hasError="v$.repository.description.$invalid" :errors="[]" />
                 <BulmaCheckbox checktype="checkbox" v-model="repository.use_for_forms" label="Use for forms ?" /><br>
                 <BulmaCheckbox checktype="checkbox" v-model="repository.use_for_playbooks" label="Use for playbooks ?" /><br>
                 <BulmaCheckbox checktype="checkbox" v-model="repository.rebase_on_start" label="Clone on app start ?" /><br><br>
@@ -66,7 +66,6 @@
 <script>
   import Vue from 'vue'
   import axios from 'axios'
-  import Vuelidate from 'vuelidate'
   import BulmaButton from './../components/BulmaButton.vue'
   import BulmaAdminTable from './../components/BulmaAdminTable.vue'
   import BulmaInput from './../components/BulmaInput.vue'
@@ -76,9 +75,9 @@
   import BulmaQuickView from './../components/BulmaQuickView.vue'
   // import BulmaSelect from './../components/BulmaSelect.vue'
   import TokenStorage from './../lib/TokenStorage'
-  import { required, email, minValue,maxValue,minLength,maxLength,helpers,requiredIf,sameAs,numeric } from 'vuelidate/lib/validators'
+  import { useVuelidate } from '@vuelidate/core'
+  import { required, helpers } from '@vuelidate/validators'
 
-  Vue.use(Vuelidate)
   export default{
     name:"AfRepositories",
     props:{
@@ -86,6 +85,9 @@
       isAdmin:{type:Boolean}
     },
     components:{BulmaButton,BulmaInput,BulmaModal,BulmaQuickView,BulmaAdminTable,BulmaCheckbox,BulmaSettingsMenu},
+    setup(){
+      return { v$: useVuelidate() }
+    },
     data(){
       return  {
           repository:{
@@ -210,7 +212,7 @@
           };
       },updateRepository(){
         var ref= this;
-        if (!this.$v.repository.$invalid) {
+        if (!this.v$.repository.$invalid) {
           // clone the selected item
           var postdata = JSON.parse(JSON.stringify(this.repository))
           // and remove status data
@@ -233,7 +235,7 @@
         }
       },newRepository(){
         var ref= this;
-        if (!this.$v.repository.$invalid) {
+        if (!this.v$.repository.$invalid) {
           axios.post(`${process.env.BASE_URL}api/v1/repository/`,this.repository,TokenStorage.getAuthentication())
             .then((result)=>{
               if(result.data.status=="error"){
diff --git a/client/src/views/Settings.vue b/client/src/views/Settings.vue
index beb46988..3eb55c85 100644
--- a/client/src/views/Settings.vue
+++ b/client/src/views/Settings.vue
@@ -14,7 +14,7 @@
             </div>
           </nav>
           <div class="box">
-            <BulmaInput icon="globe" v-model="settings.url" help="" label="Public Root Url" placeholder="https://ansibleforms:8443" :required="true" :hasError="$v.settings.url.$invalid" :errors="[]" />
+            <BulmaInput icon="globe" v-model="settings.url" help="" label="Public Root Url" placeholder="https://ansibleforms:8443" :required="true" :hasError="v$.settings.url.$invalid" :errors="[]" />
           </div>
           <div class="box" v-if="settings.enableFormsYamlInDatabase">
             <p class="mb-2">
@@ -79,17 +79,14 @@
   </section>
 </template>
 <script>
-  import Vue from 'vue'
   import axios from 'axios'
-  import Vuelidate from 'vuelidate'
   import BulmaButton from './../components/BulmaButton.vue'
   import BulmaInput from './../components/BulmaInput.vue'
   import VueCodeEditor from './../components/VueCodeEditor';
   import BulmaSettingsMenu from '../components/BulmaSettingsMenu.vue'
   import TokenStorage from './../lib/TokenStorage'
-  import { required, email, minValue,maxValue,minLength,maxLength,helpers,requiredIf,sameAs } from 'vuelidate/lib/validators'
-
-  Vue.use(Vuelidate)
+  import { useVuelidate } from '@vuelidate/core'
+  import { required, helpers } from '@vuelidate/validators'
 
   export default{
     name: "AfSettings",
@@ -98,6 +95,9 @@
       isAdmin:{type:Boolean}
     },
     components:{BulmaButton,BulmaInput,VueCodeEditor,BulmaSettingsMenu},
+    setup(){
+      return { v$: useVuelidate() }
+    },
     data(){
       return  {
           settings:{
@@ -141,7 +141,7 @@
           }
       },updateSettings(){
         var ref= this;
-        if (!this.$v.settings.$invalid) {
+        if (!this.v$.settings.$invalid) {
           axios.put(`${process.env.BASE_URL}api/v1/settings/`,this.settings,TokenStorage.getAuthentication())
             .then((result)=>{
               if(result.data.status=="error"){
diff --git a/client/src/views/Sshkey.vue b/client/src/views/Sshkey.vue
index d6607def..fb666cfd 100644
--- a/client/src/views/Sshkey.vue
+++ b/client/src/views/Sshkey.vue
@@ -7,7 +7,7 @@
           <BulmaSettingsMenu />
         </div>
         <div class="column">        
-          <BulmaTextArea v-if="update" v-model="ssh.key" label="Private Key" placeholder="-----BEGIN RSA PRIVATE KEY-----" :hasError="$v.ssh.key.$invalid" :errors="[{if:$v.ssh.key.$invalid,label:'Enter a valid private key followed by a new line'}]" />
+          <BulmaTextArea v-if="update" v-model="ssh.key" label="Private Key" placeholder="-----BEGIN RSA PRIVATE KEY-----" :hasError="v$.ssh.key.$invalid" :errors="[{if:v$.ssh.key.$invalid,label:'Enter a valid private key followed by a new line'}]" />
           <div class="field"  v-if="!update">
             <label class="label">Private Key</label>
             <p @click="update=true"  class="box is-clickable is-family-monospace enable-line-break is-size-7">{{ ssh.art }}</p>
@@ -25,18 +25,15 @@
   </section>
 </template>
 <script>
-  import Vue from 'vue'
   import axios from 'axios'
-  import Vuelidate from 'vuelidate'
   import Copy from 'copy-to-clipboard'
   import BulmaButton from './../components/BulmaButton.vue'
   import BulmaTextArea from './../components/BulmaTextArea.vue'
   import BulmaSettingsMenu from '../components/BulmaSettingsMenu.vue'
   import TokenStorage from './../lib/TokenStorage'
-  import { required, email, minValue,maxValue,minLength,maxLength,helpers,requiredIf,sameAs } from 'vuelidate/lib/validators'
-  const privatekey = helpers.regex("privatekey",/^-----BEGIN ([A-Z ]+ PRIVATE KEY)-----\r?\n([^-]+)\r?\n-----END \1-----\r?\n$/gm)
-  Vue.use(Vuelidate)
-
+  import { useVuelidate } from '@vuelidate/core'
+  import { required, helpers } from '@vuelidate/validators'
+  
   export default{
     name: "AfSshkey",
     props:{
@@ -44,6 +41,9 @@
       isAdmin:{type:Boolean}
     },
     components:{BulmaButton,BulmaTextArea,BulmaSettingsMenu},
+    setup(){
+      return { v$: useVuelidate() }
+    },
     data(){
       return  {
           update:false,
@@ -77,7 +77,7 @@
           };
       },updateSsh(){
         var ref= this;
-        if (!this.$v.ssh.$invalid) {
+        if (!this.v$.ssh.$invalid) {
           axios.put(`${process.env.BASE_URL}api/v1/sshkey/`,this.ssh,TokenStorage.getAuthentication())
             .then((result)=>{
               if(result.data.status=="error"){
@@ -96,11 +96,13 @@
         }
       }
     },
-    validations: {
-      ssh:{
-        key: {
-          required,
-          privatekey
+    validations() {
+      return {
+        ssh: {
+          key: {
+            required,
+            privatekey: helpers.regex(/^-----BEGIN ([A-Z ]+ PRIVATE KEY)-----\r?\n([^-]+)\r?\n-----END \1-----\r?\n$/gm)
+          }
         }
       }
     },
diff --git a/client/src/views/Users.vue b/client/src/views/Users.vue
index 8b6b9a49..6a577b3b 100644
--- a/client/src/views/Users.vue
+++ b/client/src/views/Users.vue
@@ -37,19 +37,19 @@
             <transition name="add-column" appear>
               <div class="column" v-if="userItem!==undefined && !showDelete">
                 <template v-if="!changePassword">
-                  <BulmaInput icon="user" v-model="user.username" label="Username" :readonly="userItem!==-1" placeholder="Username" :required="true" :hasError="$v.user.username.$invalid" :errors="[]" />
-                  <BulmaInput icon="envelope" v-model="user.email" label="Email" :readonly="userItem!==-1" placeholder="Email" :hasError="$v.user.email.$invalid" :errors="[]" />
-                  <BulmaInput v-if="userItem==-1" icon="lock" type="password" v-model="user.password" label="Password" placeholder="Password" :required="true" :hasError="$v.user.password.$invalid" :errors="[{if:!$v.user.password.regex,label:$v.user.password.$params.regex.description}]" />
-                  <BulmaInput v-if="userItem==-1" icon="lock" type="password" v-model="user.password2" label="Password Again" placeholder="Password" :required="true" :hasError="$v.user.password2.$invalid" :errors="[{if:!$v.user.password2.sameAsPassword,label:'Passwords are not the same'}]" />
-                  <BulmaSelect icon="users" label="Select a group" :list="groupList" valuecol="id" :required="true" :hasError="$v.user.group_id.$invalid" labelcol="name" v-model="user.group_id" :errors="[]" />
+                  <BulmaInput icon="user" v-model="user.username" label="Username" :readonly="userItem!==-1" placeholder="Username" :required="true" :hasError="v$.user.username.$invalid" :errors="[]" />
+                  <BulmaInput icon="envelope" v-model="user.email" label="Email" :readonly="userItem!==-1" placeholder="Email" :hasError="v$.user.email.$invalid" :errors="[]" />
+                  <BulmaInput v-if="userItem==-1" icon="lock" type="password" v-model="user.password" label="Password" placeholder="Password" :required="true" :hasError="v$.user.password.$invalid" :errors="[{if:v$.user.password.passwordComplexity.$invalid,label:v$.user.password.passwordComplexity.$params.description}]" />
+                  <BulmaInput v-if="userItem==-1" icon="lock" type="password" v-model="user.password2" label="Password Again" placeholder="Password" :required="true" :hasError="v$.user.password2.$invalid" :errors="[{if:v$.user.password2.sameAsPassword.$invalid,label:'Passwords are not the same'}]" />
+                  <BulmaSelect icon="users" label="Select a group" :list="groupList" valuecol="id" :required="true" :hasError="v$.user.group_id.$invalid" labelcol="name" v-model="user.group_id" :errors="[]" />
                   <BulmaButton v-if="userItem==-1" icon="save" label="Create User" @click="newUser()"></BulmaButton>
                   <BulmaButton v-if="userItem!=-1" icon="save" label="Update User" @click="updateUser(false)"></BulmaButton>
                 </template>
                 <template v-if="changePassword">
                   <h2 class="subtitle"><font-awesome-icon icon="user" /> {{ user.username }}</h2>
                   <div v-if="!passwordChanged">
-                    <BulmaInput icon="lock" type="password" v-model="user.password" label="Password" placeholder="Password" :required="true" :hasError="$v.user.password.$invalid" :errors="[{if:!$v.user.password.regex,label:$v.user.password.$params.regex.description}]" />
-                    <BulmaInput icon="lock" type="password" v-model="user.password2" label="Password Again" placeholder="Password" :required="true" :hasError="$v.user.password2.$invalid" :errors="[{if:!$v.user.password2.sameAsPassword,label:'Passwords are not the same'}]" />
+                    <BulmaInput icon="lock" type="password" v-model="user.password" label="Password" placeholder="Password" :required="true" :hasError="v$.user.password.$invalid" :errors="[{if:v$.user.password.passwordComplexity.$invalid,label:v$.user.password.passwordComplexity.$params.description}]" />
+                    <BulmaInput icon="lock" type="password" v-model="user.password2" label="Password Again" placeholder="Password" :required="true" :hasError="v$.user.password2.$invalid" :errors="[{if:v$.user.password2.sameAsPassword.$invalid,label:'Passwords are not the same'}]" />
                     <BulmaButton icon="save" label="Change password" @click="updateUser(true)"></BulmaButton>
                   </div>
                   <div v-else class="notification is-primary is-light">
@@ -67,7 +67,6 @@
 <script>
   import Vue from 'vue'
   import axios from 'axios'
-  import Vuelidate from 'vuelidate'
   import BulmaButton from './../components/BulmaButton.vue'
   import BulmaSelect from './../components/BulmaSelect.vue'
   import BulmaInput from './../components/BulmaInput.vue'
@@ -75,9 +74,8 @@
   import BulmaModal from './../components/BulmaModal.vue'
   import BulmaSettingsMenu from '../components/BulmaSettingsMenu.vue'
   import TokenStorage from './../lib/TokenStorage'
-  import { required, email, minValue,maxValue,minLength,maxLength,helpers,requiredIf,sameAs } from 'vuelidate/lib/validators'
-
-  Vue.use(Vuelidate)
+  import { useVuelidate } from '@vuelidate/core'
+  import { required, email, helpers,sameAs } from '@vuelidate/validators'
 
   export default{
     name: "AfUsers",
@@ -86,6 +84,9 @@
       isAdmin:{type:Boolean}
     },
     components:{BulmaButton,BulmaSelect,BulmaInput,BulmaModal,BulmaAdminTable,BulmaSettingsMenu},
+    setup(){
+      return { v$: useVuelidate() }
+    },
     data(){
       return  {
           user:{
@@ -191,7 +192,7 @@
           };
       },updateUser(changePassword=false){
         var ref= this;
-        if ((!this.$v.user.group_id.$invalid && !changePassword)||(!this.$v.user.password.$invalid && !this.$v.user.password2.$invalid && changePassword)) {
+        if ((!this.v$.user.group_id.$invalid && !changePassword)||(!this.v$.user.password.$invalid && !this.v$.user.password2.$invalid && changePassword)) {
           axios.put(`${process.env.BASE_URL}api/v1/user/${this.userItem}`,this.user,TokenStorage.getAuthentication())
             .then((result)=>{
               if(result.data.status=="error"){
@@ -215,7 +216,7 @@
         }
       },newUser(){
         var ref= this;
-        if (!this.$v.user.$invalid) {
+        if (!this.v$.user.$invalid) {
           axios.post(`${process.env.BASE_URL}api/v1/user/`,this.user,TokenStorage.getAuthentication())
             .then((result)=>{
               if(result.data.status=="error"){
@@ -231,30 +232,31 @@
         }
       }
     },
-    validations: {
-      user:{
-        username: {
-          required
-        },
-        password: {
-          required,
-          minLength:8,
-          regex : helpers.withParams(
-              {description: "Must contain at least 1 numeric, 1 special, 1 upper and 1 lower character",type:"regex"},
-              (value) => !helpers.req(value) || (new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\\$%\\^&\\*])").test(value))
-          )
-        },
-        email:{
-          email
-        },
-        group_id: {
-          required
-        },
-        password2:{
-          sameAsPassword: sameAs('password')
+    validations() {
+      return {
+        user:{
+          username: {
+            required
+          },
+          password: {
+            required,
+            minLength:8,
+            passwordComplexity : helpers.withParams(
+                {description: "Must contain at least 1 numeric, 1 special, 1 upper and 1 lower character",type:"regex"},
+                (value) => !helpers.req(value) || (new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\\$%\\^&\\*])").test(value))
+            )
+          },
+          email:{
+            email
+          },
+          group_id: {
+            required
+          },
+          password2:{
+            sameAsPassword: sameAs(this.user.password)
+          }
         }
       }
-
     },
     mounted() { // when the Vue app is booted up, this is run automatically.
         this.loadAll();

From 92ade9c2c8d6e51cbe8c440290feae77e4646da9 Mon Sep 17 00:00:00 2001
From: GitHub Actions <noreply@github.com>
Date: Fri, 20 Sep 2024 14:42:50 +0000
Subject: [PATCH 5/5] Prepare release 5.0.6

---
 CHANGELOG.md        | 6 +++++-
 app_versions.gradle | 4 ++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3175b953..a6d4706f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,8 @@ 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
@@ -737,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
index f9cfc181..62d73250 100644
--- 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"