xref: /openbmc/webui-vue/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue (revision 7d6b44cb263da09e575c7cb28cab88c1eb339c7b) 
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">
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          data-test-id="configureConnection-input-username"
40        />
41      </b-form-group>
42      <b-form-group
43        :label="$t('pageVirtualMedia.modal.password')"
44        label-for="password"
45      >
46        <b-form-input
47          id="password"
48          v-model="form.password"
49          type="password"
50          data-test-id="configureConnection-input-password"
51        />
52      </b-form-group>
53      <b-form-group>
54        <b-form-checkbox
55          v-model="form.isRW"
56          data-test-id="configureConnection-input-isRW"
57          name="check-button"
58        >
59          RW
60        </b-form-checkbox>
61      </b-form-group>
62    </b-form>
63    <template #modal-ok>
64      {{ $t('global.action.save') }}
65    </template>
66    <template #modal-cancel>
67      {{ $t('global.action.cancel') }}
68    </template>
69  </b-modal>
70</template>
71
72<script>
73import { required } from '@vuelidate/validators';
74import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
75import { useVuelidate } from '@vuelidate/core';
76
77export default {
78  mixins: [VuelidateMixin],
79  props: {
80    connection: {
81      type: Object,
82      default: null,
83      validator: (prop) => {
84        console.log(prop);
85        return true;
86      },
87    },
88  },
89  setup() {
90    return {
91      v$: useVuelidate(),
92    };
93  },
94  data() {
95    return {
96      form: {
97        serverUri: null,
98        username: null,
99        password: null,
100        isRW: false,
101      },
102    };
103  },
104  watch: {
105    connection: function (value) {
106      if (value === null) return;
107      Object.assign(this.form, value);
108    },
109  },
110  validations() {
111    return {
112      form: {
113        serverUri: {
114          required,
115        },
116      },
117    };
118  },
119  methods: {
120    handleSubmit() {
121      this.$v.$touch();
122      if (this.$v.$invalid) return;
123      let connectionData = {};
124      Object.assign(connectionData, this.form);
125      this.$emit('ok', connectionData);
126      this.closeModal();
127    },
128    initModal() {
129      if (this.connection) {
130        Object.assign(this.form, this.connection);
131      }
132    },
133    closeModal() {
134      this.$nextTick(() => {
135        this.$refs.modal.hide();
136      });
137    },
138    resetForm() {
139      this.form.serverUri = null;
140      this.form.username = null;
141      this.form.password = null;
142      this.form.isRW = false;
143      this.$v.$reset();
144    },
145    onOk(bvModalEvt) {
146      bvModalEvt.preventDefault();
147      this.handleSubmit();
148    },
149  },
150};
151</script>
152