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