diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-03-25 01:25:24 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-04-08 21:58:55 +0300 |
commit | 37393810fa1ed2ae69ec05d0b19887e27760d48e (patch) | |
tree | 55381170946aed7c856de354d7ae8e0614fadc30 /src/views/AccessControl/SslCertificates/ModalUploadCertificate.vue | |
parent | b346406f3aa407869a3c868fb14322fc529673a3 (diff) | |
download | webui-vue-37393810fa1ed2ae69ec05d0b19887e27760d48e.tar.xz |
Add SSL Certificates page
Adds ability to view, add, replace, and delete SSL
certificates in GUI.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I5cf9fa7bbd588dfb22f2431eed0b5976ff860703
Diffstat (limited to 'src/views/AccessControl/SslCertificates/ModalUploadCertificate.vue')
-rw-r--r-- | src/views/AccessControl/SslCertificates/ModalUploadCertificate.vue | 164 |
1 files changed, 164 insertions, 0 deletions
diff --git a/src/views/AccessControl/SslCertificates/ModalUploadCertificate.vue b/src/views/AccessControl/SslCertificates/ModalUploadCertificate.vue new file mode 100644 index 00000000..653a232f --- /dev/null +++ b/src/views/AccessControl/SslCertificates/ModalUploadCertificate.vue @@ -0,0 +1,164 @@ +<template> + <b-modal id="upload-certificate" ref="modal" @ok="onOk" @hidden="resetForm"> + <template v-slot:modal-title> + <template v-if="certificate"> + {{ $t('pageSslCertificates.replaceCertificate') }} + </template> + <template v-else> + {{ $t('pageSslCertificates.addNewCertificate') }} + </template> + </template> + <b-form> + <!-- Replace Certificate type --> + <template v-if="certificate !== null"> + <dl class="mb-4"> + <dt>{{ $t('pageSslCertificates.modal.certificateType') }}</dt> + <dd>{{ certificate.certificate }}</dd> + </dl> + </template> + + <!-- Add new Certificate type --> + <template v-else> + <b-form-group + :label="$t('pageSslCertificates.modal.certificateType')" + label-for="certificate-type" + > + <b-form-select + id="certificate-type" + v-model="form.certificateType" + :options="certificateOptions" + :state="getValidationState($v.form.certificateType)" + @input="$v.form.certificateType.$touch()" + > + </b-form-select> + <b-form-invalid-feedback role="alert"> + <template v-if="!$v.form.certificateType.required"> + {{ $t('global.form.fieldRequired') }} + </template> + </b-form-invalid-feedback> + </b-form-group> + </template> + + <b-form-group + :label="$t('pageSslCertificates.modal.certificateFile')" + label-for="certificate-file" + > + <b-form-file + id="certificate-file" + v-model="form.file" + accept=".pem" + plain + :state="getValidationState($v.form.file)" + /> + <b-form-invalid-feedback role="alert"> + <template v-if="!$v.form.file.required"> + {{ $t('global.form.required') }} + </template> + </b-form-invalid-feedback> + </b-form-group> + </b-form> + <template v-slot:modal-ok> + <template v-if="certificate"> + {{ $t('global.action.replace') }} + </template> + <template v-else> + {{ $t('global.action.add') }} + </template> + </template> + </b-modal> +</template> + +<script> +import { required, requiredIf } from 'vuelidate/lib/validators'; +import VuelidateMixin from '../../../components/Mixins/VuelidateMixin.js'; + +export default { + mixins: [VuelidateMixin], + props: { + certificate: { + type: Object, + default: null, + validator: prop => { + if (prop === null) return true; + return ( + prop.hasOwnProperty('type') && prop.hasOwnProperty('certificate') + ); + } + } + }, + data() { + return { + form: { + certificateType: null, + file: null + } + }; + }, + computed: { + certificateTypes() { + return this.$store.getters['sslCertificates/availableUploadTypes']; + }, + certificateOptions() { + return this.certificateTypes.map(({ type, label }) => { + return { + text: label, + value: type + }; + }); + } + }, + watch: { + certificateOptions: function(options) { + if (options.length) { + this.form.certificateType = options[0].value; + } + } + }, + validations() { + return { + form: { + certificateType: { + required: requiredIf(function() { + return !this.certificate; + }) + }, + file: { + required + } + } + }; + }, + methods: { + handleSubmit() { + this.$v.$touch(); + if (this.$v.$invalid) return; + this.$emit('ok', { + addNew: !this.certificate, + file: this.form.file, + location: this.certificate ? this.certificate.location : null, + type: this.certificate + ? this.certificate.type + : this.form.certificateType + }); + this.closeModal(); + }, + closeModal() { + this.$nextTick(() => { + this.$refs.modal.hide(); + }); + }, + resetForm() { + this.form.certificateType = this.certificateOptions.length + ? this.certificateOptions[0].value + : null; + this.form.file = null; + this.$v.$reset(); + }, + onOk(bvModalEvt) { + // prevent modal close + bvModalEvt.preventDefault(); + this.handleSubmit(); + } + } +}; +</script> |