xref: /openbmc/webui-vue/src/views/Settings/Network/ModalHostname.vue (revision d36ac8a8be8636ddd0e64ce005d507b21bcdeb00) 
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.$invalid">
24                {{ $t('global.form.fieldRequired') }}
25              </template>
26              <template v-if="v$.form.hostname.validateHostname.$invalid">
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 #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';
53import { helpers } from 'vuelidate/lib/validators';
54import { required } from '@vuelidate/validators';
55import { useI18n } from 'vue-i18n';
56
57const validateHostname = helpers.regex('validateHostname', /^\S{0,64}$/);
58
59export default {
60  mixins: [VuelidateMixin],
61  props: {
62    modelValue: {
63      type: Boolean,
64      default: false,
65    },
66    hostname: {
67      type: String,
68      default: '',
69    },
70  },
71  emits: ['ok', 'hidden', 'update:modelValue'],
72  setup() {
73    return {
74      v$: useVuelidate(),
75    };
76  },
77  data() {
78    return {
79      $t: useI18n().t,
80      form: {
81        hostname: '',
82      },
83    };
84  },
85  watch: {
86    hostname() {
87      this.form.hostname = this.hostname;
88    },
89    modelValue: {
90      handler(newValue) {
91        if (newValue) {
92          this.$nextTick(() => {
93            this.$refs.modal?.show();
94          });
95        }
96      },
97      immediate: true,
98    },
99  },
100  validations() {
101    return {
102      form: {
103        hostname: {
104          required,
105          validateHostname,
106        },
107      },
108    };
109  },
110  methods: {
111    handleSubmit() {
112      this.v$.$touch();
113      if (this.v$.$invalid) return;
114      this.$emit('ok', { HostName: this.form.hostname });
115      this.closeModal();
116    },
117    closeModal() {
118      this.$nextTick(() => {
119        this.$refs.modal.hide();
120      });
121    },
122    resetForm() {
123      this.form.hostname = this.hostname;
124      this.v$.$reset();
125      this.$emit('update:modelValue', false);
126      this.$emit('hidden');
127    },
128    onOk(bvModalEvt) {
129      // prevent modal close
130      bvModalEvt.preventDefault();
131      this.handleSubmit();
132    },
133  },
134};
135</script>
136