diff options
author | Vitalii Lysak <v.lysak@dunice.net> | 2022-09-15 10:27:31 +0300 |
---|---|---|
committer | Vitalii Lysak <v.lysak@dunice.net> | 2022-09-15 10:27:31 +0300 |
commit | 27d144ca64374386c151722e06b08cd616e334c4 (patch) | |
tree | ec7d36e58105032f1269eb4fc01f2ae922e7194a | |
parent | 158e0373b621079a714086791113a7e021e326dc (diff) | |
download | webui-vue-27d144ca64374386c151722e06b08cd616e334c4.tar.xz |
add validation for snmp modal
-rw-r--r-- | src/utilities/_sila/regexConstants.js | 1 | ||||
-rw-r--r-- | src/views/_sila/Settings/TransferInfo/ModalSnmp.vue | 62 |
2 files changed, 60 insertions, 3 deletions
diff --git a/src/utilities/_sila/regexConstants.js b/src/utilities/_sila/regexConstants.js index a377c695..e21ea109 100644 --- a/src/utilities/_sila/regexConstants.js +++ b/src/utilities/_sila/regexConstants.js @@ -1,3 +1,4 @@ export const isoDateRegex = /([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/; export const isoTimeRegex = /^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/; export const isoNtpRegex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$|^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9])\.)+([A-Za-z]|[A-Za-z][A-Za-z0-9-]*[A-Za-z0-9])$/; +export const isoPortRegex = /^((6553[0-5])|(655[0-2][0-9])|(65[0-4][0-9]{2})|(6[0-4][0-9]{3})|([1-5][0-9]{4})|([0-5]{0,5})|([0-9]{1,4}))$/; diff --git a/src/views/_sila/Settings/TransferInfo/ModalSnmp.vue b/src/views/_sila/Settings/TransferInfo/ModalSnmp.vue index 54679720..76453f98 100644 --- a/src/views/_sila/Settings/TransferInfo/ModalSnmp.vue +++ b/src/views/_sila/Settings/TransferInfo/ModalSnmp.vue @@ -12,7 +12,24 @@ :label="$t('pageTransfer.snmp.host')" label-for="snmpHost" > - <b-form-input id="snmpHost" v-model="host" type="text" /> + <b-input-group prepend="snmp://"> + <b-form-input + id="snmpHost" + v-model="host" + type="text" + :state="getValidationState($v.host)" + data-test-id="snmp-input-host" + @input="$v.host.$touch()" + /> + <b-form-invalid-feedback role="alert"> + <template v-if="!$v.host.required"> + {{ $t('global.form.fieldRequired') }} + </template> + <template v-if="!$v.host.ipAddress"> + {{ $t('global.form.invalidFormat') }} + </template> + </b-form-invalid-feedback> + </b-input-group> </b-form-group> </b-col> <b-col sm="6"> @@ -20,7 +37,22 @@ :label="$t('pageTransfer.snmp.port')" label-for="snmpPort" > - <b-form-input id="snmpPort" v-model="port" type="text" /> + <b-form-input + id="snmpPort" + v-model="port" + type="number" + :state="getValidationState($v.port)" + data-test-id="snmp-input-port" + @input="$v.port.$touch()" + /> + <b-form-invalid-feedback role="alert"> + <template v-if="!$v.port.required"> + {{ $t('global.form.fieldRequired') }} + </template> + <template v-if="!$v.port.ipAddress"> + {{ $t('global.form.invalidFormat') }} + </template> + </b-form-invalid-feedback> </b-form-group> </b-col> </b-row> @@ -38,6 +70,8 @@ <script> import VuelidateMixin from '@/components/_sila/Mixins/VuelidateMixin.js'; +import { helpers, ipAddress, required } from 'vuelidate/lib/validators'; +import { isoPortRegex } from '@/utilities/_sila/regexConstants'; export default { mixins: [VuelidateMixin], @@ -53,11 +87,26 @@ export default { port: null, }; }, + validations() { + return { + host: { + required, + ipAddress, + }, + port: { + required, + pattern: helpers.regex('pattern', isoPortRegex), + }, + }; + }, methods: { handleSubmit() { + this.$v.$touch(); + if (this.$v.$invalid) return; + this.$emit('ok', { ...this.form, - Destination: this.host + this.port, + Destination: `snmp://${this.host}:${this.port}`, }); this.closeModal(); }, @@ -70,6 +119,7 @@ export default { this.host = null; this.port = null; this.form.Destination = null; + this.$v.$reset(); this.$emit('hidden'); }, onOk(bvModalEvt) { @@ -80,3 +130,9 @@ export default { }, }; </script> + +<style lang="scss" scoped> +.input-group-prepend + input { + padding-left: 70px !important; +} +</style> |