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