xref: /openbmc/webui-vue/src/views/Settings/Network/ModalDns.vue (revision 7d6b44cb263da09e575c7cb28cab88c1eb339c7b) 
1<template>
2  <b-modal
3    id="modal-dns"
4    ref="modal"
5    :title="$t('pageNetwork.table.addDnsAddress')"
6    @hidden="resetForm"
7  >
8    <b-form id="form-dns" @submit.prevent="handleSubmit">
9      <b-row>
10        <b-col sm="6">
11          <b-form-group
12            :label="$t('pageNetwork.modal.staticDns')"
13            label-for="staticDns"
14          >
15            <b-form-input
16              id="staticDns"
17              v-model="form.staticDns"
18              type="text"
19              :state="getValidationState($v.form.staticDns)"
20              @input="$v.form.staticDns.$touch()"
21            />
22            <b-form-invalid-feedback role="alert">
23              <template v-if="!$v.form.staticDns.required">
24                {{ $t('global.form.fieldRequired') }}
25              </template>
26              <template v-if="!$v.form.staticDns.ipAddress">
27                {{ $t('global.form.invalidFormat') }}
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 form="form-dns" type="submit" variant="primary" @click="onOk">
39        {{ $t('global.action.add') }}
40      </b-button>
41    </template>
42  </b-modal>
43</template>
44
45<script>
46import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
47import { useVuelidate } from '@vuelidate/core';
48
49import { ipAddress, required } from '@vuelidate/validators';
50
51export default {
52  mixins: [VuelidateMixin],
53  setup() {
54    return {
55      v$: useVuelidate(),
56    };
57  },
58  data() {
59    return {
60      form: {
61        staticDns: null,
62      },
63    };
64  },
65  validations() {
66    return {
67      form: {
68        staticDns: {
69          required,
70          ipAddress,
71        },
72      },
73    };
74  },
75  methods: {
76    handleSubmit() {
77      this.$v.$touch();
78      if (this.$v.$invalid) return;
79      this.$emit('ok', [this.form.staticDns]);
80      this.closeModal();
81    },
82    closeModal() {
83      this.$nextTick(() => {
84        this.$refs.modal.hide();
85      });
86    },
87    resetForm() {
88      this.form.staticDns = null;
89      this.$v.$reset();
90      this.$emit('hidden');
91    },
92    onOk(bvModalEvt) {
93      // prevent modal close
94      bvModalEvt.preventDefault();
95      this.handleSubmit();
96    },
97  },
98};
99</script>
100