xref: /openbmc/webui-vue/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue (revision d36ac8a8be8636ddd0e64ce005d507b21bcdeb00) 
1<template>
2  <b-modal
3    id="configure-connection"
4    ref="modal"
5    @ok="onOk"
6    @hidden="resetForm"
7    @show="initModal"
8  >
9    <template #modal-title>
10      {{ $t('pageVirtualMedia.modal.title') }}
11    </template>
12    <b-form>
13      <b-form-group
14        :label="$t('pageVirtualMedia.modal.serverUri')"
15        label-for="serverUri"
16      >
17        <b-form-input
18          id="serverUri"
19          v-model="form.serverUri"
20          type="text"
21          :state="getValidationState(v$.form.serverUri)"
22          data-test-id="configureConnection-input-serverUri"
23          @input="v$.form.serverUri.$touch()"
24        />
25        <b-form-invalid-feedback role="alert">
26          <template v-if="v$.form.serverUri.required.$invalid">
27            {{ $t('global.form.fieldRequired') }}
28          </template>
29        </b-form-invalid-feedback>
30      </b-form-group>
31      <b-form-group
32        :label="$t('pageVirtualMedia.modal.username')"
33        label-for="username"
34      >
35        <b-form-input
36          id="username"
37          v-model="form.username"
38          type="text"
39          autocomplete="username"
40          data-test-id="configureConnection-input-username"
41        />
42      </b-form-group>
43      <b-form-group
44        :label="$t('pageVirtualMedia.modal.password')"
45        label-for="password"
46      >
47        <b-form-input
48          id="password"
49          v-model="form.password"
50          type="password"
51          autocomplete="current-password"
52          data-test-id="configureConnection-input-password"
53        />
54      </b-form-group>
55      <b-form-group>
56        <b-form-checkbox
57          v-model="form.isRW"
58          data-test-id="configureConnection-input-isRW"
59          name="check-button"
60        >
61          RW
62        </b-form-checkbox>
63      </b-form-group>
64    </b-form>
65    <template #modal-ok>
66      {{ $t('global.action.save') }}
67    </template>
68    <template #modal-cancel>
69      {{ $t('global.action.cancel') }}
70    </template>
71  </b-modal>
72</template>
73
74<script>
75import { required } from '@vuelidate/validators';
76import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
77import { useVuelidate } from '@vuelidate/core';
78import { useI18n } from 'vue-i18n';
79
80export default {
81  mixins: [VuelidateMixin],
82  props: {
83    connection: {
84      type: Object,
85      default: null,
86    },
87  },
88  emits: ['ok'],
89  setup() {
90    return {
91      v$: useVuelidate(),
92    };
93  },
94  data() {
95    return {
96      $t: useI18n().t,
97      form: {
98        serverUri: null,
99        username: null,
100        password: null,
101        isRW: false,
102      },
103    };
104  },
105  watch: {
106    connection: function (value) {
107      if (value === null) return;
108      Object.assign(this.form, value);
109    },
110  },
111  validations() {
112    return {
113      form: {
114        serverUri: {
115          required,
116        },
117      },
118    };
119  },
120  methods: {
121    handleSubmit() {
122      this.v$.$touch();
123      if (this.v$.$invalid) return;
124      let connectionData = {};
125      Object.assign(connectionData, this.form);
126      this.$emit('ok', connectionData);
127      this.closeModal();
128    },
129    initModal() {
130      if (this.connection) {
131        Object.assign(this.form, this.connection);
132      }
133    },
134    closeModal() {
135      this.$nextTick(() => {
136        this.$refs.modal.hide();
137      });
138    },
139    resetForm() {
140      this.form.serverUri = null;
141      this.form.username = null;
142      this.form.password = null;
143      this.form.isRW = false;
144      this.v$.$reset();
145    },
146    onOk(bvModalEvt) {
147      bvModalEvt.preventDefault();
148      this.handleSubmit();
149    },
150  },
151};
152</script>
153