xref: /openbmc/webui-vue/src/views/Settings/Network/ModalIpv4.vue (revision d36ac8a8be8636ddd0e64ce005d507b21bcdeb00) 
1<template>
2  <b-modal
3    id="modal-add-ipv4"
4    ref="modal"
5    :title="$t('pageNetwork.table.addIpv4Address')"
6    @hidden="resetForm"
7  >
8    <b-form id="form-ipv4" @submit.prevent="handleSubmit">
9      <b-row>
10        <b-col sm="6">
11          <b-form-group
12            :label="$t('pageNetwork.modal.ipAddress')"
13            label-for="ipAddress"
14          >
15            <b-form-input
16              id="ipAddress"
17              v-model="form.ipAddress"
18              type="text"
19              :state="getValidationState(v$.form.ipAddress)"
20              @input="v$.form.ipAddress.$touch()"
21            />
22            <b-form-invalid-feedback role="alert">
23              <template v-if="v$.form.ipAddress.required.$invalid">
24                {{ $t('global.form.fieldRequired') }}
25              </template>
26              <template v-if="v$.form.ipAddress.ipAddress.$invalid">
27                {{ $t('global.form.invalidFormat') }}
28              </template>
29            </b-form-invalid-feedback>
30          </b-form-group>
31        </b-col>
32        <b-col sm="6">
33          <b-form-group
34            :label="$t('pageNetwork.modal.gateway')"
35            label-for="gateway"
36          >
37            <b-form-input
38              id="gateway"
39              v-model="form.gateway"
40              type="text"
41              :state="getValidationState(v$.form.gateway)"
42              @input="v$.form.gateway.$touch()"
43            />
44            <b-form-invalid-feedback role="alert">
45              <template v-if="v$.form.gateway.required.$invalid">
46                {{ $t('global.form.fieldRequired') }}
47              </template>
48              <template v-if="v$.form.gateway.ipAddress.$invalid">
49                {{ $t('global.form.invalidFormat') }}
50              </template>
51            </b-form-invalid-feedback>
52          </b-form-group>
53        </b-col>
54      </b-row>
55      <b-row>
56        <b-col sm="6">
57          <b-form-group
58            :label="$t('pageNetwork.modal.subnetMask')"
59            label-for="subnetMask"
60          >
61            <b-form-input
62              id="subnetMask"
63              v-model="form.subnetMask"
64              type="text"
65              :state="getValidationState(v$.form.subnetMask)"
66              @input="v$.form.subnetMask.$touch()"
67            />
68            <b-form-invalid-feedback role="alert">
69              <template v-if="v$.form.subnetMask.required.$invalid">
70                {{ $t('global.form.fieldRequired') }}
71              </template>
72              <template v-if="v$.form.subnetMask.ipAddress.$invalid">
73                {{ $t('global.form.invalidFormat') }}
74              </template>
75            </b-form-invalid-feedback>
76          </b-form-group>
77        </b-col>
78      </b-row>
79    </b-form>
80    <template #footer="{ cancel }">
81      <b-button variant="secondary" @click="cancel()">
82        {{ $t('global.action.cancel') }}
83      </b-button>
84      <b-button form="form-ipv4" type="submit" variant="primary" @click="onOk">
85        {{ $t('global.action.add') }}
86      </b-button>
87    </template>
88  </b-modal>
89</template>
90
91<script>
92import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
93import { useVuelidate } from '@vuelidate/core';
94
95import { ipAddress, required } from '@vuelidate/validators';
96import { useI18n } from 'vue-i18n';
97
98export default {
99  mixins: [VuelidateMixin],
100  props: {
101    modelValue: {
102      type: Boolean,
103      default: false,
104    },
105    defaultGateway: {
106      type: String,
107      default: '',
108    },
109  },
110  emits: ['ok', 'hidden', 'update:modelValue'],
111  setup() {
112    return {
113      v$: useVuelidate(),
114    };
115  },
116  data() {
117    return {
118      $t: useI18n().t,
119      form: {
120        ipAddress: '',
121        gateway: '',
122        subnetMask: '',
123      },
124    };
125  },
126  watch: {
127    defaultGateway() {
128      this.form.gateway = this.defaultGateway;
129    },
130    modelValue: {
131      handler(newValue) {
132        if (newValue) {
133          this.$nextTick(() => {
134            this.$refs.modal?.show();
135          });
136        }
137      },
138      immediate: true,
139    },
140  },
141  validations() {
142    return {
143      form: {
144        ipAddress: {
145          required,
146          ipAddress,
147        },
148        gateway: {
149          required,
150          ipAddress,
151        },
152        subnetMask: {
153          required,
154          ipAddress,
155        },
156      },
157    };
158  },
159  methods: {
160    show() {
161      this.$refs.modal?.show();
162    },
163    hide() {
164      this.$refs.modal?.hide();
165    },
166    handleSubmit() {
167      this.v$.$touch();
168      if (this.v$.$invalid) return;
169      this.$emit('ok', {
170        Address: this.form.ipAddress,
171        Gateway: this.form.gateway,
172        SubnetMask: this.form.subnetMask,
173      });
174      this.closeModal();
175    },
176    closeModal() {
177      this.$nextTick(() => {
178        this.$refs.modal.hide();
179      });
180    },
181    resetForm() {
182      this.form.ipAddress = null;
183      this.form.gateway = this.defaultGateway;
184      this.form.subnetMask = null;
185      this.v$.$reset();
186      this.$emit('update:modelValue', false);
187      this.$emit('hidden');
188    },
189    onOk(bvModalEvt) {
190      // prevent modal close
191      bvModalEvt.preventDefault();
192      this.handleSubmit();
193    },
194  },
195};
196</script>
197