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">
24                {{ $t('global.form.fieldRequired') }}
25              </template>
26              <template v-if="!$v.form.ipAddress.validateIpv6">
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">
46                {{ $t('global.form.fieldRequired') }}
47              </template>
48              <template v-if="!$v.form.prefixLength.validatePrefixLength">
49                {{ $t('global.form.invalidFormat') }}
50              </template>
51            </b-form-invalid-feedback>
52          </b-form-group>
53        </b-col>
54      </b-row>
55    </b-form>
56    <template #modal-footer="{ cancel }">
57      <b-button variant="secondary" @click="cancel()">
58        {{ $t('global.action.cancel') }}
59      </b-button>
60      <b-button form="form-ipv6" type="submit" variant="primary" @click="onOk">
61        {{ $t('global.action.add') }}
62      </b-button>
63    </template>
64  </b-modal>
65</template>
66
67<script>
68import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
69import { required, helpers } from 'vuelidate/lib/validators';
70
71const validateIpv6 = helpers.regex(
72  'validateIpv6',
73  /^((?:[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})$/,
74);
75
76const validatePrefixLength = helpers.regex(
77  'validatePrefixLength',
78  /^(12[0-8]|1[0-9]|[1-9][0-9]|[0-9])$/,
79);
80
81export default {
82  mixins: [VuelidateMixin],
83  data() {
84    return {
85      form: {
86        ipAddress: '',
87        prefixLength: '',
88      },
89    };
90  },
91  validations() {
92    return {
93      form: {
94        ipAddress: {
95          required,
96          validateIpv6,
97        },
98        prefixLength: {
99          required,
100          validatePrefixLength,
101        },
102      },
103    };
104  },
105  methods: {
106    handleSubmit() {
107      this.$v.$touch();
108      if (this.$v.$invalid) return;
109      this.$emit('ok', {
110        Address: this.form.ipAddress,
111        PrefixLength: parseInt(this.form.prefixLength),
112      });
113      this.closeModal();
114    },
115    closeModal() {
116      this.$nextTick(() => {
117        this.$refs.modal.hide();
118      });
119    },
120    resetForm() {
121      this.form.ipAddress = null;
122      this.form.prefixLength = null;
123      this.$v.$reset();
124      this.$emit('hidden');
125    },
126    onOk(bvModalEvt) {
127      // prevent modal close
128      bvModalEvt.preventDefault();
129      this.handleSubmit();
130    },
131  },
132};
133</script>
134