1 files changed, 67 insertions, 6 deletions

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