TT#46169 Phone number input validation

Change-Id: If04aa117b9aea1eb024f065d047638e3f113a48f

src/components/CscCall.vue

@@ -294,6 +294,7 @@
     import { getChromeExtensionUrl } from '../helpers/cdk-lib'
     import CscCallDialpad from './CscCallDialpad'
     import CscPhoneNumberInput from './call/CscPhoneNumberInput'
+    import { showGlobalError } from '../helpers/ui'
     import {
         QLayout,
         QCard,
@@ -384,10 +385,13 @@
             call(localMedia) {
                 if(this.$refs.phoneNumberInput.hasPhoneNumber()) {
                     this.$store.dispatch('call/start', {
-                        number: this.$refs.phoneNumberInput.getRawPhoneNumber(),
+                        number: this.$refs.phoneNumberInput.getPhoneNumber(),
                         localMedia: localMedia
                     });
                 }
+                else {
+                    showGlobalError(this.$t('validationErrors.inputValidNumber'));
+                }
             },
             accept(localMedia) {
                 this.$store.dispatch('call/accept', localMedia);

src/components/call/CscPhoneNumberInput.vue

@@ -4,7 +4,6 @@
         dark
         :count="maxLength"
         :helper="helperMessage"
-        :error="$v.phoneNumber.$error"
         :error-label="errorMessage"
     >
         <q-input
@@ -13,22 +12,21 @@
             clearable
             type="text"
             :float-label="$t('call.number')"
-            :value="phoneNumber"
-            :error="$v.phoneNumber.$error"
-            :max-length="maxLength"
             :readonly="!enabled"
-            @input="inputPhoneNumber"
+            v-model="phoneNumber"
             @keypress.space.prevent
             @keydown.space.prevent
             @keyup.space.prevent
             :after="inputButtons"
             @keyup.enter="keyReturn()"
+            @input="$v.phoneNumber.$touch"
+            @blur="$v.phoneNumber.$touch"
+            :error="$v.phoneNumber.$error"
         />
     </q-field>
     <q-field
         v-else
         dark
-        :error="$v.phoneNumber.$error"
         :error-label="errorMessage"
     >
         <q-input
@@ -37,30 +35,27 @@
             clearable
             type="text"
             :placeholder="$t('call.number')"
-            :value="phoneNumber"
-            :error="$v.phoneNumber.$error"
-            :max-length="maxLength"
             :readonly="!enabled"
-            @input="inputPhoneNumber"
+            v-model="phoneNumber"
             @keypress.space.prevent
             @keydown.space.prevent
             @keyup.space.prevent
             :after="inputButtons"
+            @input="$v.phoneNumber.$touch"
+            @blur="$v.phoneNumber.$touch"
+            :error="$v.phoneNumber.$error"
         />
     </q-field>
 </template>
 
 <script>
-
     import Vue from 'vue'
     import _ from 'lodash'
+    import { userInfo } from '../../helpers/validation'
     import {
-        maxLength
+        maxLength,
+        required
     } from 'vuelidate/lib/validators'
-    import {
-        normalizeNumber,
-        rawNumber
-    } from '../../filters/number-format'
     import {
         QField,
         QInput
@@ -80,7 +75,9 @@
         },
         validations: {
             phoneNumber: {
-                maxLength: maxLength(64)
+                userInfo,
+                maxLength: maxLength(64),
+                required
             }
         },
         props: {
@@ -102,7 +99,20 @@
         ],
         computed: {
             errorMessage() {
+                if (!this.$v.phoneNumber.required) {
+                    return this.$t('validationErrors.fieldRequired', {
+                        field: this.$t('call.number')
+                    });
+                }
+                else if (!this.$v.phoneNumber.maxLength) {
+                    return this.$t('validationErrors.maxLength', {
+                        field: this.$t('call.number'),
+                        maxLength: this.$v.phoneNumber.$params.maxLength.max
+                    });
+                }
+                else if (!this.$v.phoneNumber.userInfo) {
                     return this.$t('validationErrors.inputValidNumber');
+                }
             },
             helperMessage() {
                 return this.$t('validationErrors.inputNumber');
@@ -130,21 +140,14 @@
             keyReturn() {
                 this.$emit('key-return');
             },
-            inputPhoneNumber(value) {
-                this.phoneNumber = normalizeNumber(value, this.isMobile);
-                this.$v.phoneNumber.$touch();
-            },
             getPhoneNumber() {
                 return this.phoneNumber;
             },
-            getRawPhoneNumber() {
-                return rawNumber(this.getPhoneNumber());
-            },
             hasPhoneNumber() {
-                return !_.isEmpty(this.phoneNumber);
+                return !this.$v.phoneNumber.$error && !_.isEmpty(this.phoneNumber);
             },
             concat(str) {
-                this.inputPhoneNumber(this.phoneNumber + "" + str);
+                this.phoneNumber = this.phoneNumber + "" + str;
             },
             focusInput() {
                 Vue.nextTick(() => {

src/helpers/validation.js

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

t/unit/validation.js

@@ -0,0 +1,30 @@
+
+'use strict';
+
+import { assert } from 'chai';
+import { userInfo } from '../../src/helpers/validation'
+
+describe('Userinfo validation helper', function() {
+
+    it('should validate userinfo consisting of phone number and country code', function() {
+        let input = "+439988776655";
+        assert.isTrue(userInfo(input));
+    });
+
+    it('should validate userinfo with parameter', function() {
+        let input = "+358-555-1234567;postd=pp22";
+        assert.isTrue(userInfo(input));
+    });
+
+    it('should validate userinfo consisting of subscriber username', function() {
+        let input = "alice";
+        assert.isTrue(userInfo(input));
+    });
+
+    it('should not validate invalid userinfo characters', function() {
+        let input = "al)<e";
+        assert.isFalse(userInfo(input));
+    });
+
+});
+