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">
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/lib/validators';
73import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
74
75import FormFile from '@/components/Global/FormFile';
76
77export default {
78  components: { FormFile },
79  mixins: [VuelidateMixin],
80  props: {
81    certificate: {
82      type: Object,
83      default: null,
84      validator: (prop) => {
85        if (prop === null) return true;
86        return (
87          Object.prototype.hasOwnProperty.call(prop, 'type') &&
88          Object.prototype.hasOwnProperty.call(prop, 'certificate')
89        );
90      },
91    },
92  },
93  data() {
94    return {
95      form: {
96        certificateType: null,
97        file: null,
98      },
99    };
100  },
101  computed: {
102    certificateTypes() {
103      return this.$store.getters['certificates/availableUploadTypes'];
104    },
105    certificateOptions() {
106      return this.certificateTypes.map(({ type, label }) => {
107        return {
108          text: label,
109          value: type,
110        };
111      });
112    },
113  },
114  watch: {
115    certificateOptions: function (options) {
116      if (options.length) {
117        this.form.certificateType = options[0].value;
118      }
119    },
120  },
121  validations() {
122    return {
123      form: {
124        certificateType: {
125          required: requiredIf(function () {
126            return !this.certificate;
127          }),
128        },
129        file: {
130          required,
131        },
132      },
133    };
134  },
135  methods: {
136    handleSubmit() {
137      this.$v.$touch();
138      if (this.$v.$invalid) return;
139      this.$emit('ok', {
140        addNew: !this.certificate,
141        file: this.form.file,
142        location: this.certificate ? this.certificate.location : null,
143        type: this.certificate
144          ? this.certificate.type
145          : this.form.certificateType,
146      });
147      this.closeModal();
148    },
149    closeModal() {
150      this.$nextTick(() => {
151        this.$refs.modal.hide();
152      });
153    },
154    resetForm() {
155      this.form.certificateType = this.certificateOptions.length
156        ? this.certificateOptions[0].value
157        : null;
158      this.form.file = null;
159      this.$v.$reset();
160    },
161    onOk(bvModalEvt) {
162      // prevent modal close
163      bvModalEvt.preventDefault();
164      this.handleSubmit();
165    },
166  },
167};
168</script>
169