112dc20c3SDixsie Wolmers<template> 212dc20c3SDixsie Wolmers <b-modal 312dc20c3SDixsie Wolmers id="modal-hostname" 412dc20c3SDixsie Wolmers ref="modal" 512dc20c3SDixsie Wolmers :title="$t('pageNetwork.modal.editHostnameTitle')" 612dc20c3SDixsie Wolmers @hidden="resetForm" 712dc20c3SDixsie Wolmers > 812dc20c3SDixsie Wolmers <b-form id="hostname-settings" @submit.prevent="handleSubmit"> 912dc20c3SDixsie Wolmers <b-row> 1012dc20c3SDixsie Wolmers <b-col sm="6"> 1112dc20c3SDixsie Wolmers <b-form-group 1212dc20c3SDixsie Wolmers :label="$t('pageNetwork.hostname')" 1312dc20c3SDixsie Wolmers label-for="hostname" 1412dc20c3SDixsie Wolmers > 1512dc20c3SDixsie Wolmers <b-form-input 1612dc20c3SDixsie Wolmers id="hostname" 1712dc20c3SDixsie Wolmers v-model="form.hostname" 1812dc20c3SDixsie Wolmers type="text" 19de23ea23SSurya V :state="getValidationState(v$.form.hostname)" 20de23ea23SSurya V @input="v$.form.hostname.$touch()" 2112dc20c3SDixsie Wolmers /> 2212dc20c3SDixsie Wolmers <b-form-invalid-feedback role="alert"> 23*4626aec4SSurya Venkatesan <template v-if="v$.form.hostname.required.$invalid"> 2412dc20c3SDixsie Wolmers {{ $t('global.form.fieldRequired') }} 2512dc20c3SDixsie Wolmers </template> 26*4626aec4SSurya Venkatesan <template v-if="v$.form.hostname.validateHostname.$invalid"> 2712dc20c3SDixsie Wolmers {{ $t('global.form.lengthMustBeBetween', { min: 1, max: 64 }) }} 2812dc20c3SDixsie Wolmers </template> 2912dc20c3SDixsie Wolmers </b-form-invalid-feedback> 3012dc20c3SDixsie Wolmers </b-form-group> 3112dc20c3SDixsie Wolmers </b-col> 3212dc20c3SDixsie Wolmers </b-row> 3312dc20c3SDixsie Wolmers </b-form> 3412dc20c3SDixsie Wolmers <template #modal-footer="{ cancel }"> 3512dc20c3SDixsie Wolmers <b-button variant="secondary" @click="cancel()"> 3612dc20c3SDixsie Wolmers {{ $t('global.action.cancel') }} 3712dc20c3SDixsie Wolmers </b-button> 3812dc20c3SDixsie Wolmers <b-button 3912dc20c3SDixsie Wolmers form="hostname-settings" 4012dc20c3SDixsie Wolmers type="submit" 4112dc20c3SDixsie Wolmers variant="primary" 4212dc20c3SDixsie Wolmers @click="onOk" 4312dc20c3SDixsie Wolmers > 4412dc20c3SDixsie Wolmers {{ $t('global.action.add') }} 4512dc20c3SDixsie Wolmers </b-button> 4612dc20c3SDixsie Wolmers </template> 4712dc20c3SDixsie Wolmers </b-modal> 4812dc20c3SDixsie Wolmers</template> 4912dc20c3SDixsie Wolmers 5012dc20c3SDixsie Wolmers<script> 5112dc20c3SDixsie Wolmersimport VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; 527d6b44cbSEd Tanousimport { useVuelidate } from '@vuelidate/core'; 53*4626aec4SSurya Venkatesanimport { helpers } from 'vuelidate/lib/validators'; 54*4626aec4SSurya Venkatesanimport { required } from '@vuelidate/validators'; 55de23ea23SSurya Vimport { useI18n } from 'vue-i18n'; 5612dc20c3SDixsie Wolmers 5712dc20c3SDixsie Wolmersconst validateHostname = helpers.regex('validateHostname', /^\S{0,64}$/); 5812dc20c3SDixsie Wolmers 5912dc20c3SDixsie Wolmersexport default { 6012dc20c3SDixsie Wolmers mixins: [VuelidateMixin], 6112dc20c3SDixsie Wolmers props: { 6212dc20c3SDixsie Wolmers hostname: { 6312dc20c3SDixsie Wolmers type: String, 6412dc20c3SDixsie Wolmers default: '', 6512dc20c3SDixsie Wolmers }, 6612dc20c3SDixsie Wolmers }, 677d6b44cbSEd Tanous setup() { 687d6b44cbSEd Tanous return { 697d6b44cbSEd Tanous v$: useVuelidate(), 707d6b44cbSEd Tanous }; 717d6b44cbSEd Tanous }, 7212dc20c3SDixsie Wolmers data() { 7312dc20c3SDixsie Wolmers return { 74de23ea23SSurya V $t: useI18n().t, 7512dc20c3SDixsie Wolmers form: { 7612dc20c3SDixsie Wolmers hostname: '', 7712dc20c3SDixsie Wolmers }, 7812dc20c3SDixsie Wolmers }; 7912dc20c3SDixsie Wolmers }, 8012dc20c3SDixsie Wolmers watch: { 8112dc20c3SDixsie Wolmers hostname() { 8212dc20c3SDixsie Wolmers this.form.hostname = this.hostname; 8312dc20c3SDixsie Wolmers }, 8412dc20c3SDixsie Wolmers }, 8512dc20c3SDixsie Wolmers validations() { 8612dc20c3SDixsie Wolmers return { 8712dc20c3SDixsie Wolmers form: { 8812dc20c3SDixsie Wolmers hostname: { 8912dc20c3SDixsie Wolmers required, 9012dc20c3SDixsie Wolmers validateHostname, 9112dc20c3SDixsie Wolmers }, 9212dc20c3SDixsie Wolmers }, 9312dc20c3SDixsie Wolmers }; 9412dc20c3SDixsie Wolmers }, 9512dc20c3SDixsie Wolmers methods: { 9612dc20c3SDixsie Wolmers handleSubmit() { 97de23ea23SSurya V this.v$.$touch(); 98de23ea23SSurya V if (this.v$.$invalid) return; 9912dc20c3SDixsie Wolmers this.$emit('ok', { HostName: this.form.hostname }); 10012dc20c3SDixsie Wolmers this.closeModal(); 10112dc20c3SDixsie Wolmers }, 10212dc20c3SDixsie Wolmers closeModal() { 10312dc20c3SDixsie Wolmers this.$nextTick(() => { 10412dc20c3SDixsie Wolmers this.$refs.modal.hide(); 10512dc20c3SDixsie Wolmers }); 10612dc20c3SDixsie Wolmers }, 10712dc20c3SDixsie Wolmers resetForm() { 10812dc20c3SDixsie Wolmers this.form.hostname = this.hostname; 109de23ea23SSurya V this.v$.$reset(); 11012dc20c3SDixsie Wolmers this.$emit('hidden'); 11112dc20c3SDixsie Wolmers }, 11212dc20c3SDixsie Wolmers onOk(bvModalEvt) { 11312dc20c3SDixsie Wolmers // prevent modal close 11412dc20c3SDixsie Wolmers bvModalEvt.preventDefault(); 11512dc20c3SDixsie Wolmers this.handleSubmit(); 11612dc20c3SDixsie Wolmers }, 11712dc20c3SDixsie Wolmers }, 11812dc20c3SDixsie Wolmers}; 11912dc20c3SDixsie Wolmers</script> 120