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 #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 modelValue: { 67 type: Boolean, 68 default: false, 69 }, 70 defaultGateway: { 71 type: String, 72 default: '', 73 }, 74 }, 75 emits: ['ok', 'hidden', 'update:modelValue'], 76 setup() { 77 return { 78 v$: useVuelidate(), 79 }; 80 }, 81 data() { 82 return { 83 $t: useI18n().t, 84 form: { 85 defaultGateway: '', 86 }, 87 }; 88 }, 89 watch: { 90 defaultGateway() { 91 this.form.defaultGateway = this.defaultGateway; 92 }, 93 modelValue: { 94 handler(newValue) { 95 if (newValue) { 96 this.$nextTick(() => { 97 this.$refs.modal?.show(); 98 }); 99 } 100 }, 101 immediate: true, 102 }, 103 }, 104 validations() { 105 return { 106 form: { 107 defaultGateway: { 108 required, 109 validateGateway, 110 }, 111 }, 112 }; 113 }, 114 methods: { 115 handleSubmit() { 116 this.v$.$touch(); 117 if (this.v$.$invalid) return; 118 this.$emit('ok', { IPv6DefaultGateway: this.form.defaultGateway }); 119 this.closeModal(); 120 }, 121 closeModal() { 122 this.$nextTick(() => { 123 this.$refs.modal.hide(); 124 }); 125 }, 126 resetForm() { 127 this.form.defaultGateway = this.defaultGateway; 128 this.v$.$reset(); 129 this.$emit('update:modelValue', false); 130 this.$emit('hidden'); 131 }, 132 onOk(bvModalEvt) { 133 // prevent modal close 134 bvModalEvt.preventDefault(); 135 this.handleSubmit(); 136 }, 137 }, 138}; 139</script> 140