xref: /openbmc/webui-vue/src/views/Settings/Network/ModalHostname.vue (revision 4626aec43da32b56b7c1e87e5dc831398e39416c)
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