1<template>
2  <b-modal
3    id="modal-default-gateway"
4    ref="modal"
5    :title="$t('pageNetwork.modal.editIPv6DefaultGatewayTitle')"
6    @hidden="resetForm"
7  >
8    <b-form id="gateway-settings" @submit.prevent="handleSubmit">
9      <b-row>
10        <b-col sm="6">
11          <b-form-group
12            :label="$t('pageNetwork.gateway')"
13            label-for="defaultGateway"
14          >
15            <b-form-input
16              id="defaultGateway"
17              v-model.trim="form.defaultGateway"
18              data-test-id="network-input-gateway"
19              type="text"
20              :state="getValidationState(v$.form.defaultGateway)"
21              @change="v$.form.defaultGateway.$touch()"
22            />
23            <b-form-invalid-feedback role="alert">
24              <div v-if="v$.form.defaultGateway.required.$invalid">
25                {{ $t('global.form.fieldRequired') }}
26              </div>
27              <div v-if="v$.form.defaultGateway.validateGateway.$invalid">
28                {{ $t('global.form.invalidFormat') }}
29              </div>
30            </b-form-invalid-feedback>
31          </b-form-group>
32        </b-col>
33      </b-row>
34    </b-form>
35    <template #modal-footer="{ cancel }">
36      <b-button variant="secondary" @click="cancel()">
37        {{ $t('global.action.cancel') }}
38      </b-button>
39      <b-button
40        form="gateway-settings"
41        type="submit"
42        variant="primary"
43        @click="onOk"
44      >
45        {{ $t('global.action.add') }}
46      </b-button>
47    </template>
48  </b-modal>
49</template>
50
51<script>
52import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
53import { required } from '@vuelidate/validators';
54import { helpers } from 'vuelidate/lib/validators';
55import { useVuelidate } from '@vuelidate/core';
56import { useI18n } from 'vue-i18n';
57
58const validateGateway = helpers.regex(
59  'validateGateway',
60  /^((?:[a-fA-F0-9]{1,4}:){7}[a-fA-F0-9]{1,4}|(?:[a-fA-F0-9]{1,4}:){1,7}:|(?:[a-fA-F0-9]{1,4}:){1,6}:[a-fA-F0-9]{1,4}|(?:[a-fA-F0-9]{1,4}:){1,5}(?::[a-fA-F0-9]{1,4}){1,2}|(?:[a-fA-F0-9]{1,4}:){1,4}(?::[a-fA-F0-9]{1,4}){1,3}|(?:[a-fA-F0-9]{1,4}:){1,3}(?::[a-fA-F0-9]{1,4}){1,4}|(?:[a-fA-F0-9]{1,4}:){1,2}(?::[a-fA-F0-9]{1,4}){1,5}|[a-fA-F0-9]{1,4}:(?::[a-fA-F0-9]{1,4}){1,6}|:(?::[a-fA-F0-9]{1,4}){1,7}|::|(?:[a-fA-F0-9]{1,4}:){6}(?:[0-9]{1,3}\.){3}[0-9]{1,3}|::(?:[a-fA-F0-9]{1,4}:){0,5}(?:[0-9]{1,3}\.){3}[0-9]{1,3}|(?:[a-fA-F0-9]{1,4}:){1,5}:(?:[0-9]{1,3}\.){3}[0-9]{1,3}|(?:[a-fA-F0-9]{1,4}:){1,4}:(?:[0-9]{1,3}\.){3}[0-9]{1,3}|(?:[a-fA-F0-9]{1,4}:){1,3}:(?:[0-9]{1,3}\.){3}[0-9]{1,3}|(?:[a-fA-F0-9]{1,4}:){1,2}:(?:[0-9]{1,3}\.){3}[0-9]{1,3}|[a-fA-F0-9]{1,4}:(?:[0-9]{1,3}\.){3}[0-9]{1,3}|::(?:[0-9]{1,3}\.){3}[0-9]{1,3})$/,
61);
62
63export default {
64  mixins: [VuelidateMixin],
65  props: {
66    defaultGateway: {
67      type: String,
68      default: '',
69    },
70  },
71  setup() {
72    return {
73      v$: useVuelidate(),
74    };
75  },
76  data() {
77    return {
78      $t: useI18n().t,
79      form: {
80        defaultGateway: '',
81      },
82    };
83  },
84  watch: {
85    defaultGateway() {
86      this.form.defaultGateway = this.defaultGateway;
87    },
88  },
89  validations() {
90    return {
91      form: {
92        defaultGateway: {
93          required,
94          validateGateway,
95        },
96      },
97    };
98  },
99  methods: {
100    handleSubmit() {
101      this.v$.$touch();
102      if (this.v$.$invalid) return;
103      this.$emit('ok', { IPv6DefaultGateway: this.form.defaultGateway });
104      this.closeModal();
105    },
106    closeModal() {
107      this.$nextTick(() => {
108        this.$refs.modal.hide();
109      });
110    },
111    resetForm() {
112      this.form.defaultGateway = this.defaultGateway;
113      this.v$.$reset();
114      this.$emit('hidden');
115    },
116    onOk(bvModalEvt) {
117      // prevent modal close
118      bvModalEvt.preventDefault();
119      this.handleSubmit();
120    },
121  },
122};
123</script>
124