sipwise
/
ngcp-csc-ui
mirror of https://github.com/sipwise/ngcp-csc-ui.git
1
0
Fork 0
Code Issues Releases Wiki Activity

TT#46172 Impl PIN validation in Voicebox settings

Browse Source 
Change-Id: Ia469efec8e5c63950e3f800c52c0cc489c92b801
changes/25/24425/7
raxelsen 7 years ago committed by Hans-Peter Herzog
parent 5a152e3967
commit 02137b1b48
10 changed files with 126 additions and 48 deletions
Show Stats Download Patch File Download Diff File

24
src/components/pages/CallForward/CscAddDestinationForm.vue
Unescape View File

@ -53,7 +53,6 @@
dark dark
:before="beforeIconTimeout" :before="beforeIconTimeout"
:float-label="$t('pages.callForward.timeout')" :float-label="$t('pages.callForward.timeout')"
type="number"
v-model="destinationForm.timeout" v-model="destinationForm.timeout"
suffix="seconds" suffix="seconds"
clearable clearable
@ -96,7 +95,8 @@
import { import {
required, required,
maxLength, maxLength,
minValue minValue,
numeric
} from 'vuelidate/lib/validators' } from 'vuelidate/lib/validators'
import { import {
QItem, QItem,
@ -148,7 +148,8 @@
}, },
timeout: { timeout: {
required, required,
minValue: minValue(1) minValue: minValue(1),
numeric
} }
} }
}, },
@ -176,15 +177,20 @@
} }
}, },
timeoutInputError() { timeoutInputError() {
if (!this.$v.destinationForm.timeout.minValue) { if (!this.$v.destinationForm.timeout.required) {
return this.$t('validationErrors.minValueSecond', { return this.$t('validationErrors.fieldRequired', {
field: this.$t('pages.callForward.timeout')
});
}
else if (!this.$v.destinationForm.timeout.numeric) {
return this.$t('validationErrors.numeric', {
field: this.$t('pages.callForward.timeout'), field: this.$t('pages.callForward.timeout'),
minValue: this.$v.destinationForm.timeout.$params.minValue.min
}); });
} }
else if (!this.$v.destinationForm.timeout.required) { else if (!this.$v.destinationForm.timeout.minValue) {
return this.$t('validationErrors.fieldRequired', { return this.$t('validationErrors.minValueSecond', {
field: this.$t('pages.callForward.timeout') field: this.$t('pages.callForward.timeout'),
minValue: this.$v.destinationForm.timeout.$params.minValue.min
}); });
} }
}, },

26
src/components/pages/CallForward/CscDestinations.vue
Unescape View File

@ -168,7 +168,6 @@
dark dark
v-if="ownPhone" v-if="ownPhone"
v-model="editTimeout" v-model="editTimeout"
type="number"
suffix="seconds" suffix="seconds"
:before="[{ icon: 'schedule' }]" :before="[{ icon: 'schedule' }]"
:float-label="$t('pages.callForward.timeout')" :float-label="$t('pages.callForward.timeout')"
@ -216,7 +215,8 @@
import CscAddDestinationForm from './CscAddDestinationForm' import CscAddDestinationForm from './CscAddDestinationForm'
import { import {
required, required,
minValue minValue,
numeric
} from 'vuelidate/lib/validators' } from 'vuelidate/lib/validators'
import { import {
QList, QList,
@ -273,7 +273,8 @@
validations: { validations: {
editTimeout: { editTimeout: {
required, required,
minValue: minValue(1) minValue: minValue(1),
numeric
} }
}, },
computed: { computed: {
@ -281,17 +282,22 @@
return this.ownPhone ? 'fa-toggle-off' : 'fa-toggle-on'; return this.ownPhone ? 'fa-toggle-off' : 'fa-toggle-on';
}, },
errorMessage() { errorMessage() {
if (!this.$v.editTimeout.minValue) { if (!this.$v.editTimeout.required) {
return this.$t('validationErrors.minValueSecond', {
field: this.$t('pages.callForward.timeout'),
minValue: this.$v.editTimeout.$params.minValue.min
});
}
else if (!this.$v.editTimeout.required) {
return this.$t('validationErrors.fieldRequired', { return this.$t('validationErrors.fieldRequired', {
field: this.$t('pages.callForward.timeout') field: this.$t('pages.callForward.timeout')
}); });
} }
else if (!this.$v.editTimeout.numeric) {
return this.$t('validationErrors.numeric', {
field: this.$t('pages.callForward.timeout'),
});
}
else if (!this.$v.editTimeout.minValue) {
return this.$t('validationErrors.minValueSecond', {
field: this.$t('pages.callForward.timeout'),
minValue: this.$v.editTimeout.$params.minValue.min
});
}
}, },
editTimeout: { editTimeout: {
get() { get() {

32
src/components/pages/PbxConfiguration/CscPbxDevice.vue
Unescape View File

@ -48,12 +48,12 @@
> >
<q-input <q-input
dark dark
v-model="device.identifier" v-model="changes.identifier"
:after="identifierButtons" :after="identifierButtons"
@keyup.enter="saveIdentifier" @keyup.enter="saveIdentifier"
@input="$v.device.identifier.$touch" @input="$v.changes.identifier.$touch"
@blur="$v.device.identifier.$touch" @blur="$v.changes.identifier.$touch"
:error="$v.device.identifier.$error" :error="$v.changes.identifier.$error"
/> />
</q-field> </q-field>
<q-field <q-field
@ -186,7 +186,7 @@
} }
}, },
validations: { validations: {
device: { changes: {
identifier: { identifier: {
required, required,
customMacAddress customMacAddress
@ -247,6 +247,9 @@
stationName() { stationName() {
return this.device.station_name; return this.device.station_name;
}, },
identifier() {
return this.device.station_name;
},
deviceModel() { deviceModel() {
return { return {
id: this.changes.id, id: this.changes.id,
@ -263,7 +266,18 @@
identifierButtons() { identifierButtons() {
let buttons = []; let buttons = [];
let self = this; let self = this;
if(this.identifierHasChanges) { if (this.identifierHasChanges && this.$v.changes.identifier.$error) {
buttons.push({
icon: 'clear',
error: true,
handler (event) {
event.stopPropagation();
self.resetIdentifier();
}
}
);
}
else if (this.identifierHasChanges) {
buttons.push({ buttons.push({
icon: 'check', icon: 'check',
error: false, error: false,
@ -287,12 +301,12 @@
return _.get(this.device, 'profile.id', null); return _.get(this.device, 'profile.id', null);
}, },
identifierErrorMessage() { identifierErrorMessage() {
if (!this.$v.device.identifier.required) { if (!this.$v.changes.identifier.required) {
return this.$t('validationErrors.fieldRequired', { return this.$t('validationErrors.fieldRequired', {
field: this.$t('pbxConfig.deviceIdentifier') field: this.$t('pbxConfig.deviceIdentifier')
}); });
} }
else if (!this.$v.device.identifier.customMacAddress) { else if (!this.$v.changes.identifier.customMacAddress) {
return this.$t('validationErrors.macAddress'); return this.$t('validationErrors.macAddress');
} }
} }
@ -333,7 +347,7 @@
this.changes.identifier = this.device.identifier; this.changes.identifier = this.device.identifier;
}, },
saveIdentifier() { saveIdentifier() {
if (!this.$v.device.identifier.$error) { if (!this.$v.changes.identifier.$error) {
this.$emit('save-identifier', this.deviceModel); this.$emit('save-identifier', this.deviceModel);
} }
else { else {

9
src/components/pages/PbxConfiguration/CscPbxGroupAddForm.vue
Unescape View File

@ -45,7 +45,6 @@
:error="$v.data.huntTimeout.$error" :error="$v.data.huntTimeout.$error"
:disabled="loading" :disabled="loading"
:readonly="loading" :readonly="loading"
type="number"
v-model="data.huntTimeout" v-model="data.huntTimeout"
clearable clearable
:float-label="$t('pbxConfig.huntTimeout')" :float-label="$t('pbxConfig.huntTimeout')"
@ -165,6 +164,7 @@
}, },
huntTimeout: { huntTimeout: {
required, required,
numeric,
minValue: minValue(1), minValue: minValue(1),
maxValue: maxValue(3600) maxValue: maxValue(3600)
} }
@ -202,7 +202,7 @@
}); });
} }
else if (!this.$v.data.extension.numeric) { else if (!this.$v.data.extension.numeric) {
return this.$t('validationErrors.alphaNum', { return this.$t('validationErrors.numeric', {
field: this.$t('pbxConfig.extension'), field: this.$t('pbxConfig.extension'),
}); });
} }
@ -213,6 +213,11 @@
field: this.$t('pbxConfig.huntTimeoutSentence') field: this.$t('pbxConfig.huntTimeoutSentence')
}); });
} }
else if (!this.$v.data.huntTimeout.numeric) {
return this.$t('validationErrors.numeric', {
field: this.$t('pbxConfig.huntTimeoutSentence'),
});
}
else if (!this.$v.data.huntTimeout.minValue) { else if (!this.$v.data.huntTimeout.minValue) {
return this.$t('validationErrors.minValueSecond', { return this.$t('validationErrors.minValueSecond', {
field: this.$t('pbxConfig.huntTimeoutSentence'), field: this.$t('pbxConfig.huntTimeoutSentence'),

11
src/components/pages/PbxConfiguration/CscPbxModelSelect.vue
Unescape View File

@ -18,17 +18,20 @@
no-border no-border
class="csc-pbx-model-list" class="csc-pbx-model-list"
highlight highlight
inset-separator
> >
<q-item <q-item
v-for="(profile, index) in profiles" v-for="profile in profiles"
:key="profile.id" :key="profile.id"
@click="selectProfile(profile)" @click="selectProfile(profile)"
class="cursor-pointer" class="cursor-pointer"
> >
<q-item-side> <q-item-side>
<q-item-tile avatar> <q-item-tile
<img :src="frontImageUrl(profile.device_id)" /> avatar
>
<img
:src="frontImageUrl(profile.device_id)"
/>
</q-item-tile> </q-item-tile>
</q-item-side> </q-item-side>
<q-item-main> <q-item-main>

2
src/components/pages/PbxConfiguration/CscPbxSeatAddForm.vue
Unescape View File

@ -167,7 +167,7 @@
}); });
} }
else if (!this.$v.data.extension.numeric) { else if (!this.$v.data.extension.numeric) {
return this.$t('validationErrors.alphaNum', { return this.$t('validationErrors.numeric', {
field: this.$t('pbxConfig.extension'), field: this.$t('pbxConfig.extension'),
}); });
} }

56
src/components/pages/Voicebox/CscVoiceboxSettings.vue
Unescape View File

@ -85,8 +85,10 @@
</template> </template>
<script> <script>
import { showGlobalError } from '../../../helpers/ui'
import { import {
maxLength, maxLength,
numeric,
email email
} from 'vuelidate/lib/validators' } from 'vuelidate/lib/validators'
import { import {
@ -125,7 +127,8 @@
validations: { validations: {
changes: { changes: {
pin: { pin: {
maxLength: maxLength(64) maxLength: maxLength(64),
numeric
}, },
email: { email: {
email email
@ -134,10 +137,17 @@
}, },
computed: { computed: {
pinErrorMessage() { pinErrorMessage() {
return this.$t('validationErrors.maxLength', { if (!this.$v.changes.pin.maxLength) {
field: this.$t('voicebox.pin'), return this.$t('validationErrors.maxLength', {
maxLength: this.$v.changes.pin.$params.maxLength.max field: this.$t('voicebox.pin'),
}); maxLength: this.$v.changes.pin.$params.maxLength.max
});
}
else if (!this.$v.changes.pin.numeric) {
return this.$t('validationErrors.numeric', {
field: this.$t('voicebox.pin')
});
}
}, },
emailErrorMessage() { emailErrorMessage() {
return this.$t('validationErrors.email'); return this.$t('validationErrors.email');
@ -154,7 +164,18 @@
pinButtons() { pinButtons() {
let buttons = []; let buttons = [];
let self = this; let self = this;
if (this.pinHasChanged) { if (this.pinHasChanged && this.$v.changes.pin.$error) {
buttons.push({
icon: 'clear',
error: true,
handler (event) {
event.stopPropagation();
self.resetFields();
}
}
);
}
else if (this.pinHasChanged) {
buttons.push({ buttons.push({
icon: 'check', icon: 'check',
error: false, error: false,
@ -177,7 +198,18 @@
emailButtons() { emailButtons() {
let buttons = []; let buttons = [];
let self = this; let self = this;
if (this.emailHasChanged) { if (this.emailHasChanged && this.$v.changes.email.$error) {
buttons.push({
icon: 'clear',
error: true,
handler (event) {
event.stopPropagation();
self.resetFields();
}
}
);
}
else if (this.emailHasChanged) {
buttons.push({ buttons.push({
icon: 'check', icon: 'check',
error: false, error: false,
@ -237,14 +269,20 @@
this.$store.dispatch('voicebox/toggleAttach'); this.$store.dispatch('voicebox/toggleAttach');
}, },
updatePin() { updatePin() {
if(this.pinHasChanged) { if (this.pinHasChanged && !this.$v.changes.pin.$error) {
this.$store.dispatch('voicebox/updatePin', this.changes.pin); this.$store.dispatch('voicebox/updatePin', this.changes.pin);
} }
else {
showGlobalError(this.$t('validationErrors.pin'));
}
}, },
updateEmail() { updateEmail() {
if(this.emailHasChanged) { if (this.emailHasChanged && !this.$v.changes.email.$error) {
this.$store.dispatch('voicebox/updateEmail', this.changes.email); this.$store.dispatch('voicebox/updateEmail', this.changes.email);
} }
else {
showGlobalError(this.$t('validationErrors.email'));
}
} }
}, },
watch: { watch: {

4
src/locales/en.json
Unescape View File

@ -35,12 +35,13 @@
"fieldRequired": "{field} is required", "fieldRequired": "{field} is required",
"minValueSecond": "{field} must be at least {minValue} second", "minValueSecond": "{field} must be at least {minValue} second",
"maxValueSecond": "{field} must be maximum of {maxValue} seconds", "maxValueSecond": "{field} must be maximum of {maxValue} seconds",
"alphaNum": "{field} must consist of numeric characters only", "numeric": "{field} must consist of numeric characters only",
"inputNumber": "Input a phone number", "inputNumber": "Input a phone number",
"inputValidNumber": "Input a valid phone number", "inputValidNumber": "Input a valid phone number",
"fieldRequiredXor": "{fieldOne} or {fieldTwo} is required", "fieldRequiredXor": "{fieldOne} or {fieldTwo} is required",
"email": "Input a valid email address", "email": "Input a valid email address",
"macAddress": "Input a valid mac address", "macAddress": "Input a valid mac address",
"pin": "Input a valid PIN",
"userInfoAndEmpty": "Input contains invalid characters" "userInfoAndEmpty": "Input contains invalid characters"
}, },
"navigation": { "navigation": {
@ -325,7 +326,6 @@
"removeGroup": "Remove group", "removeGroup": "Remove group",
"removeGroupTitle": "Remove group", "removeGroupTitle": "Remove group",
"removeGroupText": "You are about to remove group {group}", "removeGroupText": "You are about to remove group {group}",
"groupName": "Group name",
"name": "Name", "name": "Name",
"seatName": "Seat name", "seatName": "Seat name",
"addSeat": "Add Seat", "addSeat": "Add Seat",

5
src/themes/app.common.styl
Unescape View File

@ -69,7 +69,7 @@
.csc-no-entities .csc-no-entities
margin 15px margin 15px
color $secondary color $body-color
.csc-important .csc-important
font-weight bold font-weight bold
@ -161,3 +161,6 @@
bottom 0 bottom 0
.csc-list-message .csc-list-message
text-align center text-align center
.q-inner-loading
background $main-menu-background

5
src/themes/app.variables.styl
Unescape View File

@ -75,10 +75,11 @@ $csc-subtitle-line-height = 2rem
$item-stripe-color = alpha(white, 0.06) $item-stripe-color = alpha(white, 0.06)
$item-highlight-color = alpha(white, 0.1) $item-highlight-color = alpha(white, 0.1)
$item-content-secondary-text-color = alpha($white, 70%)
$typography-font-family = 'Muli', '-apple-system', 'Helvetica Neue', Helvetica, Arial, sans-serif $typography-font-family = 'Muli', '-apple-system', 'Helvetica Neue', Helvetica, Arial, sans-serif
$popover-background = $main-menu-background $popover-background = alpha($dark, 90%)
$modal-background = $body-background $modal-background = $body-background
$modal-body-color = $body-color $modal-body-color = $body-color
@ -89,3 +90,5 @@ $call-footer-action-margin = 27px
$call-footer-height-mobile = $call-footer-height * 1.4 $call-footer-height-mobile = $call-footer-height * 1.4
$popover-box-shadow = $shadow-1 $popover-box-shadow = $shadow-1
$loading-background = $main-menu-background

Write Preview
Loading…
Cancel
Save