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