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