add validation for snmp, smtp, syslogsila-smnp

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;
     },
   },
 };