diff options
author | Vitalii Lysak <v.lysak@dunice.net> | 2022-09-20 13:30:30 +0300 |
---|---|---|
committer | Vitalii Lysak <v.lysak@dunice.net> | 2022-09-20 13:30:30 +0300 |
commit | 37f6f72ff1ed6d4795c3f67ca2ba92367582e562 (patch) | |
tree | bebff9b1409b7ccb9a9fc77db63c90940920836a | |
parent | a5a521c796fe3539f9026e9f2d729f7c7bb2fa89 (diff) | |
download | webui-vue-sila-smnp.tar.xz |
add validation for snmp, smtp, syslogsila-smnp
-rw-r--r-- | src/views/_sila/Settings/TransferInfo/ModalSnmp.vue | 2 | ||||
-rw-r--r-- | src/views/_sila/Settings/TransferInfo/Smtp.vue | 110 | ||||
-rw-r--r-- | src/views/_sila/Settings/TransferInfo/Syslog.vue | 73 |
3 files changed, 175 insertions, 10 deletions
diff --git a/src/views/_sila/Settings/TransferInfo/ModalSnmp.vue b/src/views/_sila/Settings/TransferInfo/ModalSnmp.vue index af6c5d80..c54616a5 100644 --- a/src/views/_sila/Settings/TransferInfo/ModalSnmp.vue +++ b/src/views/_sila/Settings/TransferInfo/ModalSnmp.vue @@ -47,7 +47,7 @@ <template v-if="!$v.port.required"> {{ $t('global.form.fieldRequired') }} </template> - <template v-if="!$v.port.ipAddress"> + <template v-if="!$v.port.pattern"> {{ $t('global.form.invalidFormat') }} </template> </b-form-invalid-feedback> diff --git a/src/views/_sila/Settings/TransferInfo/Smtp.vue b/src/views/_sila/Settings/TransferInfo/Smtp.vue index 34d171de..40a182d8 100644 --- a/src/views/_sila/Settings/TransferInfo/Smtp.vue +++ b/src/views/_sila/Settings/TransferInfo/Smtp.vue @@ -12,6 +12,7 @@ data-test-id="checkbox-authorization" switch :disabled="loading || isNotAdmin" + @change="onChangeAuthCheckbox($event)" > <span v-if="form.is_need_auth"> {{ $t('global.status.enabled') }} @@ -29,9 +30,23 @@ id="smtp-name" v-model="form.username" type="text" + :state="getValidationState($v.form.username)" :disabled="loading || isNotAdmin || !form.is_need_auth" - /> </b-form-group - ></b-col> + @input="$v.form.username.$touch()" + /> + <b-form-invalid-feedback role="alert"> + <template v-if="!$v.form.username.required"> + {{ $t('global.form.fieldRequired') }} + </template> + <template v-else-if="!$v.form.username.maxLength"> + {{ $t('global.form.lengthMustBeBetween', { min: 1, max: 16 }) }} + </template> + <template v-else-if="!$v.form.username.pattern"> + {{ $t('global.form.invalidFormat') }} + </template> + </b-form-invalid-feedback> + </b-form-group></b-col + > <b-col xs="12" sm="6"> <b-form-group :label="$t('pageTransfer.smtp.password')" @@ -42,8 +57,27 @@ id="smtp-password" v-model="form.password" type="password" + :state="getValidationState($v.form.password)" :disabled="loading || isNotAdmin || !form.is_need_auth" + @input="$v.form.password.$touch()" /> + <b-form-invalid-feedback role="alert"> + <template v-if="!$v.form.password.required"> + {{ $t('global.form.fieldRequired') }} + </template> + <template + v-if=" + !$v.form.password.minLength || !$v.form.password.maxLength + " + > + {{ + $t('pageUserManagement.modal.passwordMustBeBetween', { + min: 8, + max: 20, + }) + }} + </template> + </b-form-invalid-feedback> </input-password-toggle> </b-form-group> </b-col> @@ -55,8 +89,18 @@ <b-form-input id="smtp-host" v-model="form.host" + :state="getValidationState($v.form.host)" :disabled="loading || isNotAdmin" + @input="$v.form.host.$touch()" /> + <b-form-invalid-feedback role="alert"> + <template v-if="!$v.form.host.required"> + {{ $t('global.form.fieldRequired') }} + </template> + <template v-if="!$v.form.host.ipAddress"> + {{ $t('global.form.invalidFormat') }} + </template> + </b-form-invalid-feedback> </b-form-group> </b-col> <b-col xs="12" sm="6"> @@ -68,8 +112,18 @@ id="smtp-port" v-model="form.port" type="number" + :state="getValidationState($v.form.port)" :disabled="loading || isNotAdmin" + @input="$v.form.port.$touch()" /> + <b-form-invalid-feedback role="alert"> + <template v-if="!$v.form.port.required"> + {{ $t('global.form.fieldRequired') }} + </template> + <template v-if="!$v.form.port.pattern"> + {{ $t('global.form.invalidFormat') }} + </template> + </b-form-invalid-feedback> </b-form-group> </b-col> <b-col xs="12" sm="12"> @@ -165,6 +219,16 @@ import LoadingBarMixin, { import IconAdd from '@carbon/icons-vue/es/add--alt/20'; import IconTrashcan from '@carbon/icons-vue/es/trash-can/20'; import InputPasswordToggle from '@/components/_sila/Global/InputPasswordToggle'; +import { + helpers, + ipAddress, + maxLength, + minLength, + required, + requiredIf, +} from 'vuelidate/lib/validators'; +import VuelidateMixin from '@/components/_sila/Mixins/VuelidateMixin.js'; +import { isoPortRegex } from '@/utilities/_sila/regexConstants'; export default { name: 'Smtp', @@ -175,7 +239,7 @@ export default { TableRowAction, InputPasswordToggle, }, - mixins: [BVToastMixin, LoadingBarMixin], + mixins: [BVToastMixin, LoadingBarMixin, VuelidateMixin], data() { return { @@ -236,7 +300,40 @@ export default { this.endLoader(); }); }, + validations() { + return { + form: { + username: { + required: requiredIf(function () { + return this.form.is_need_auth; + }), + maxLength: maxLength(16), + pattern: helpers.regex('pattern', /^([a-zA-Z_][a-zA-Z0-9_]*)/), + }, + password: { + required: requiredIf(function () { + return this.form.is_need_auth; + }), + minLength: minLength(8), + maxLength: maxLength(20), + }, + host: { + required, + ipAddress, + }, + port: { + required, + pattern: helpers.regex('pattern', isoPortRegex), + }, + }, + }; + }, methods: { + onChangeAuthCheckbox($event) { + if (!$event) { + this.resetAuthForm(); + } + }, onTableAction($event, { host }) { if ($event === 'delete') { this.deleteSubscriber(host); @@ -254,6 +351,9 @@ export default { this.$bvModal.show('modal-smtp'); }, saveSmtp() { + this.$v.$touch(); + if (this.$v.$invalid) return; + this.startLoader(); if (!this.form.is_need_auth) { // eslint-disable-next-line no-unused-vars @@ -290,6 +390,10 @@ export default { this.form.is_need_auth = this.settings.is_need_auth; this.form.is_need_ssl = this.settings.is_need_ssl; }, + resetAuthForm() { + this.form.username = null; + this.form.password = null; + }, }, }; </script> diff --git a/src/views/_sila/Settings/TransferInfo/Syslog.vue b/src/views/_sila/Settings/TransferInfo/Syslog.vue index 163a7f5b..07884de5 100644 --- a/src/views/_sila/Settings/TransferInfo/Syslog.vue +++ b/src/views/_sila/Settings/TransferInfo/Syslog.vue @@ -12,6 +12,7 @@ data-test-id="checkbox-status" switch :disabled="loading || isNotAdmin" + @change="onChangeStatusCheckbox($event)" > <span v-if="syslogStatus"> {{ $t('global.status.enabled') }} @@ -28,9 +29,20 @@ <b-form-input id="syslog-ip" v-model="form.Address" + :state="getValidationState($v.form.Address)" :disabled="!syslogStatus || loading || isNotAdmin" - /> </b-form-group - ></b-col> + @input="$v.form.Address.$touch()" + /> + <b-form-invalid-feedback role="alert"> + <template v-if="!$v.form.Address.required"> + {{ $t('global.form.fieldRequired') }} + </template> + <template v-if="!$v.form.Address.ipAddress"> + {{ $t('global.form.invalidFormat') }} + </template> + </b-form-invalid-feedback> + </b-form-group> + </b-col> <b-col xs="12" sm="6"> <b-form-group :label="$t('pageTransfer.syslog.port')" @@ -40,8 +52,18 @@ id="syslog-port" v-model="form.Port" type="number" + :state="getValidationState($v.form.Port)" :disabled="!syslogStatus || loading || isNotAdmin" + @input="$v.form.Address.$touch()" /> + <b-form-invalid-feedback role="alert"> + <template v-if="!$v.form.Port.required"> + {{ $t('global.form.fieldRequired') }} + </template> + <template v-if="!$v.form.Port.pattern"> + {{ $t('global.form.invalidFormat') }} + </template> + </b-form-invalid-feedback> </b-form-group> </b-col> <b-col xs="4" class="d-flex justify-content-end align-items-start"> @@ -64,12 +86,16 @@ import LoadingBarMixin, { loading, } from '@/components/_sila/Mixins/LoadingBarMixin'; +import { helpers, ipAddress, requiredIf } from 'vuelidate/lib/validators'; +import VuelidateMixin from '@/components/_sila/Mixins/VuelidateMixin.js'; +import { isoPortRegex } from '@/utilities/_sila/regexConstants'; + export default { name: 'Syslog', components: { PageSection, }, - mixins: [BVToastMixin, LoadingBarMixin], + mixins: [BVToastMixin, LoadingBarMixin, VuelidateMixin], data() { return { @@ -107,8 +133,35 @@ export default { }); }, + validations() { + return { + form: { + Address: { + required: requiredIf(function () { + return this.syslogStatus; + }), + ipAddress, + }, + Port: { + required: requiredIf(function () { + return this.syslogStatus; + }), + pattern: helpers.regex('pattern', isoPortRegex), + }, + }, + }; + }, + methods: { + onChangeStatusCheckbox($event) { + if (!$event) { + this.resetForm(); + } + }, saveSyslog() { + this.$v.$touch(); + if (this.$v.$invalid) return; + this.startLoader(); if (!this.syslogStatus) { this.form = { @@ -130,14 +183,22 @@ export default { return; } - if (!this.settings.Address && this.settings.Port === 0) { + const isOff = !this.settings.Address && this.settings.Port === 0; + + if (isOff) { this.syslogStatus = false; + this.form.Address = null; + this.form.Port = null; } else { this.syslogStatus = true; + this.form.Address = this.settings.Address; + this.form.Port = this.settings.Port; } + }, - this.form.Address = this.settings.Address; - this.form.Port = this.settings.Port || null; + resetForm() { + this.form.Address = null; + this.form.Port = null; }, }, }; |