TT#46168 Impl MAC Address validation in PBXDevices

Change-Id: I5bff71547fb9417541d5dae37aaa4230dd517a14

src/components/pages/PbxConfiguration/CscPbxDevice.vue

@@ -44,11 +44,15 @@
                 </q-field>
                 <q-field
                     :label="$t('pbxConfig.deviceIdentifier')"
+                    :error-label="identifierErrorMessage"
                 >
                     <q-input
                         v-model="device.identifier"
                         :after="identifierButtons"
                         @keyup.enter="saveIdentifier"
+                        @input="$v.device.identifier.$touch"
+                        @blur="$v.device.identifier.$touch"
+                        :error="$v.device.identifier.$error"
                     />
                 </q-field>
                 <q-field
@@ -116,7 +120,9 @@
 
 
 <script>
-
+    import { showGlobalError } from '../../../helpers/ui'
+    import { required } from 'vuelidate/lib/validators'
+    import { customMacAddress } from '../../../helpers/validation'
     import _ from 'lodash'
     import {
         QCard,
@@ -179,6 +185,14 @@
                 changes: this.getDevice()
             }
         },
+        validations: {
+            device: {
+                identifier: {
+                    required,
+                    customMacAddress
+                }
+            }
+        },
         computed: {
             itemClasses() {
                 let classes = ['csc-entity', 'csc-pbx-device'];
@@ -271,6 +285,16 @@
             },
             profileId() {
                 return _.get(this.device, 'profile.id', null);
+            },
+            identifierErrorMessage() {
+                if (!this.$v.device.identifier.required) {
+                    return this.$t('validationErrors.fieldRequired', {
+                        field: this.$t('pbxConfig.deviceIdentifier')
+                    });
+                }
+                else if (!this.$v.device.identifier.customMacAddress) {
+                    return this.$t('validationErrors.macAddress');
+                }
             }
         },
         mounted() {
@@ -309,7 +333,12 @@
                 this.changes.identifier = this.device.identifier;
             },
             saveIdentifier() {
+                if (!this.$v.device.identifier.$error) {
                     this.$emit('save-identifier', this.deviceModel);
+                }
+                else {
+                   showGlobalError(this.$t('validationErrors.macAddress'));
+                }
             },
             selectProfile(profile) {
                 this.$emit('update-profile', {

src/components/pages/PbxConfiguration/CscPbxDeviceAddForm.vue

@@ -74,6 +74,7 @@
         required,
         maxLength
     } from 'vuelidate/lib/validators'
+    import { customMacAddress } from '../../../helpers/validation'
     import {
         QCard,
         QCardTitle,
@@ -123,7 +124,7 @@
                 },
                 identifier: {
                     required,
-                    maxLength: maxLength(64)
+                    customMacAddress
                 }
             }
         },
@@ -153,11 +154,8 @@
                         field: this.$t('pbxConfig.deviceIdentifier')
                     });
                 }
-                else if (!this.$v.data.identifier.maxLength) {
+                else if (!this.$v.data.identifier.customMacAddress) {
-                    return this.$t('validationErrors.maxLength', {
+                    return this.$t('validationErrors.macAddress');
-                        field: this.$t('pbxConfig.deviceIdentifier'),
-                        maxLength: this.$v.data.identifier.$params.maxLength.max
-                    });
                 }
             }
         },

src/helpers/validation.js

@@ -3,3 +3,8 @@ export function userInfo (value) {
     var regex = new RegExp(/^[-_.!~*'&=+$,;?/%a-zA-Z0-9]+$/);
     return regex.test(value);
 }
+
+export function customMacAddress (value) {
+    var regex = new RegExp(/^(?:(?:[0-9A-Fa-f]{2}(?=([-:]|))(?:\1[0-9A-Fa-f]{2}){5}))$/);
+    return regex.test(value);
+}

src/locales/en.json

@@ -39,7 +39,8 @@
         "inputNumber": "Input a phone number",
         "inputValidNumber": "Input a valid phone number",
         "fieldRequiredXor": "{fieldOne} or {fieldTwo} is required",
-        "email": "Input a valid email address"
+        "email": "Input a valid email address",
+        "macAddress": "Input a valid mac address"
     },
     "navigation": {
         "home": {

t/unit/validation.js

@@ -2,7 +2,10 @@
 'use strict';
 
 import { assert } from 'chai';
-import { userInfo } from '../../src/helpers/validation'
+import {
+    userInfo,
+    customMacAddress
+} from '../../src/helpers/validation'
 
 describe('Userinfo validation helper', function() {
 
@@ -28,3 +31,31 @@ describe('Userinfo validation helper', function() {
 
 });
 
+describe('Custom mac address validation helper', function() {
+
+    it('should validate mac address separated by colon', function() {
+        let input = "13:14:5f:cD:42:5f";
+        assert.isTrue(customMacAddress(input));
+    });
+
+    it('should validate mac address separated by hyphen', function() {
+        let input = "13-14-5f-cD-42-5f";
+        assert.isTrue(customMacAddress(input));
+    });
+
+    it('should validate mac address without separator', function() {
+        let input = "13145fcD425f";
+        assert.isTrue(customMacAddress(input));
+    });
+
+    it('should not validate mac address with mixed separator', function() {
+        let input = "13:14:5f:cD:42-5f";
+        assert.isFalse(customMacAddress(input));
+    });
+
+    it('should not validate mac address when invalid', function() {
+        let input = "k183p1r23411";
+        assert.isFalse(customMacAddress(input));
+    });
+
+});