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