xref: /openbmc/webui-vue/src/views/Settings/Network/ModalIpv6.vue (revision d36ac8a8be8636ddd0e64ce005d507b21bcdeb00) 
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 #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  props: {
89    modelValue: {
90      type: Boolean,
91      default: false,
92    },
93  },
94  emits: ['ok', 'hidden', 'update:modelValue'],
95  setup() {
96    return {
97      v$: useVuelidate(),
98    };
99  },
100  data() {
101    return {
102      $t: useI18n().t,
103      form: {
104        ipAddress: '',
105        prefixLength: '',
106      },
107    };
108  },
109  validations() {
110    return {
111      form: {
112        ipAddress: {
113          required,
114          validateIpv6,
115        },
116        prefixLength: {
117          required,
118          validatePrefixLength,
119        },
120      },
121    };
122  },
123  watch: {
124    modelValue: {
125      handler(newValue) {
126        if (newValue) {
127          this.$nextTick(() => {
128            this.$refs.modal?.show();
129          });
130        }
131      },
132      immediate: true,
133    },
134  },
135  methods: {
136    handleSubmit() {
137      this.v$.$touch();
138      if (this.v$.$invalid) return;
139      this.$emit('ok', {
140        Address: this.form.ipAddress,
141        PrefixLength: parseInt(this.form.prefixLength),
142      });
143      this.closeModal();
144    },
145    closeModal() {
146      this.$nextTick(() => {
147        this.$refs.modal.hide();
148      });
149    },
150    resetForm() {
151      this.form.ipAddress = null;
152      this.form.prefixLength = null;
153      this.v$.$reset();
154      this.$emit('update:modelValue', false);
155      this.$emit('hidden');
156    },
157    onOk(bvModalEvt) {
158      // prevent modal close
159      bvModalEvt.preventDefault();
160      this.handleSubmit();
161    },
162  },
163};
164</script>
165