From 27d144ca64374386c151722e06b08cd616e334c4 Mon Sep 17 00:00:00 2001
From: Vitalii Lysak <v.lysak@dunice.net>
Date: Thu, 15 Sep 2022 10:27:31 +0300
Subject: add validation for snmp modal

---
 .../_sila/Settings/TransferInfo/ModalSnmp.vue      | 62 ++++++++++++++++++++--
 1 file changed, 59 insertions(+), 3 deletions(-)

(limited to 'src/views/_sila/Settings/TransferInfo')

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>
-- 
cgit v1.2.3