1<template>
2  <b-modal id="upload-certificate" ref="modal" @ok="onOk" @hidden="resetForm">
3    <template #modal-title>
4      <template v-if="certificate">
5        {{ $t('pageCertificates.replaceCertificate') }}
6      </template>
7      <template v-else>
8        {{ $t('pageCertificates.addNewCertificate') }}
9      </template>
10    </template>
11    <b-form>
12      <!-- Replace Certificate type -->
13      <template v-if="certificate !== null">
14        <dl class="mb-4">
15          <dt>{{ $t('pageCertificates.modal.certificateType') }}</dt>
16          <dd>{{ certificate.certificate }}</dd>
17        </dl>
18      </template>
19
20      <!-- Add new Certificate type -->
21      <template v-else>
22        <b-form-group
23          :label="$t('pageCertificates.modal.certificateType')"
24          label-for="certificate-type"
25        >
26          <b-form-select
27            id="certificate-type"
28            v-model="form.certificateType"
29            :options="certificateOptions"
30            :state="getValidationState(v$.form.certificateType)"
31            @input="v$.form.certificateType.$touch()"
32          >
33          </b-form-select>
34          <b-form-invalid-feedback role="alert">
35            <template v-if="v$.form.certificateType.required.$invalid">
36              {{ $t('global.form.fieldRequired') }}
37            </template>
38          </b-form-invalid-feedback>
39        </b-form-group>
40      </template>
41
42      <b-form-group :label="$t('pageCertificates.modal.certificateFile')">
43        <form-file
44          id="certificate-file"
45          v-model="form.file"
46          accept=".pem"
47          :state="getValidationState(v$.form.file)"
48        >
49          <template #invalid>
50            <b-form-invalid-feedback role="alert">
51              {{ $t('global.form.required') }}
52            </b-form-invalid-feedback>
53          </template>
54        </form-file>
55      </b-form-group>
56    </b-form>
57    <template #modal-ok>
58      <template v-if="certificate">
59        {{ $t('global.action.replace') }}
60      </template>
61      <template v-else>
62        {{ $t('global.action.add') }}
63      </template>
64    </template>
65    <template #modal-cancel>
66      {{ $t('global.action.cancel') }}
67    </template>
68  </b-modal>
69</template>
70
71<script>
72import { required, requiredIf } from '@vuelidate/validators';
73import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
74import { useVuelidate } from '@vuelidate/core';
75
76import FormFile from '@/components/Global/FormFile';
77import { useI18n } from 'vue-i18n';
78
79export default {
80  components: { FormFile },
81  mixins: [VuelidateMixin],
82  props: {
83    certificate: {
84      type: Object,
85      default: null,
86      validator: (prop) => {
87        if (prop === null) return true;
88        return (
89          Object.prototype.hasOwnProperty.call(prop, 'type') &&
90          Object.prototype.hasOwnProperty.call(prop, 'certificate')
91        );
92      },
93    },
94  },
95  setup() {
96    return {
97      v$: useVuelidate(),
98    };
99  },
100  data() {
101    return {
102      $t: useI18n().t,
103      form: {
104        certificateType: null,
105        file: null,
106      },
107    };
108  },
109  computed: {
110    certificateTypes() {
111      return this.$store.getters['certificates/availableUploadTypes'];
112    },
113    certificateOptions() {
114      return this.certificateTypes.map(({ type, label }) => {
115        return {
116          text: label,
117          value: type,
118        };
119      });
120    },
121  },
122  watch: {
123    certificateOptions: function (options) {
124      if (options.length) {
125        this.form.certificateType = options[0].value;
126      }
127    },
128  },
129  validations() {
130    return {
131      form: {
132        certificateType: {
133          required: requiredIf(function () {
134            return !this.certificate;
135          }),
136        },
137        file: {
138          required,
139        },
140      },
141    };
142  },
143  methods: {
144    handleSubmit() {
145      this.v$.$touch();
146      if (this.v$.$invalid) return;
147      this.$emit('ok', {
148        addNew: !this.certificate,
149        file: this.form.file,
150        location: this.certificate ? this.certificate.location : null,
151        type: this.certificate
152          ? this.certificate.type
153          : this.form.certificateType,
154      });
155      this.closeModal();
156    },
157    closeModal() {
158      this.$nextTick(() => {
159        this.$refs.modal.hide();
160      });
161    },
162    resetForm() {
163      this.form.certificateType = this.certificateOptions.length
164        ? this.certificateOptions[0].value
165        : null;
166      this.form.file = null;
167      this.v$.$reset();
168    },
169    onOk(bvModalEvt) {
170      // prevent modal close
171      bvModalEvt.preventDefault();
172      this.handleSubmit();
173    },
174  },
175};
176</script>
177