diff options
Diffstat (limited to 'src/views/_sila/Settings/TransferInfo/Smtp.vue')
-rw-r--r-- | src/views/_sila/Settings/TransferInfo/Smtp.vue | 110 |
1 files changed, 107 insertions, 3 deletions
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> |