add validation for snmp modal

2 files changed, 60 insertions, 3 deletions

diff --git a/src/utilities/_sila/regexConstants.js b/src/utilities/_sila/regexConstants.js
index a377c695..e21ea109 100644
--- a/src/utilities/_sila/regexConstants.js
+++ b/src/utilities/_sila/regexConstants.js
@@ -1,3 +1,4 @@
 export const isoDateRegex = /([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/;
 export const isoTimeRegex = /^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/;
 export const isoNtpRegex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$|^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9])\.)+([A-Za-z]|[A-Za-z][A-Za-z0-9-]*[A-Za-z0-9])$/;
+export const isoPortRegex = /^((6553[0-5])|(655[0-2][0-9])|(65[0-4][0-9]{2})|(6[0-4][0-9]{3})|([1-5][0-9]{4})|([0-5]{0,5})|([0-9]{1,4}))$/;
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>