From 37393810fa1ed2ae69ec05d0b19887e27760d48e Mon Sep 17 00:00:00 2001
From: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Date: Tue, 24 Mar 2020 15:25:24 -0700
Subject: 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
---
 .../SslCertificates/SslCertificates.vue            | 209 +++++++++++++++++++++
 1 file changed, 209 insertions(+)
 create mode 100644 src/views/AccessControl/SslCertificates/SslCertificates.vue

(limited to 'src/views/AccessControl/SslCertificates/SslCertificates.vue')

diff --git a/src/views/AccessControl/SslCertificates/SslCertificates.vue b/src/views/AccessControl/SslCertificates/SslCertificates.vue
new file mode 100644
index 00000000..ae28271f
--- /dev/null
+++ b/src/views/AccessControl/SslCertificates/SslCertificates.vue
@@ -0,0 +1,209 @@
+<template>
+  <b-container fluid>
+    <page-title />
+    <b-row>
+      <b-col xl="9" class="text-right">
+        <b-button
+          variant="primary"
+          :disabled="certificatesForUpload.length === 0"
+          @click="initModalUploadCertificate(null)"
+        >
+          <icon-add />
+          {{ $t('pageSslCertificates.addNewCertificate') }}
+        </b-button>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col xl="9">
+        <b-table :fields="fields" :items="tableItems">
+          <template v-slot:cell(validFrom)="{ value }">
+            {{ value | formatDate }}
+          </template>
+
+          <template v-slot:cell(validUntil)="{ value }">
+            {{ value | formatDate }}
+          </template>
+
+          <template v-slot:cell(actions)="{ value, item }">
+            <table-row-action
+              v-for="(action, index) in value"
+              :key="index"
+              :value="action.value"
+              :title="action.title"
+              :enabled="action.enabled"
+              @click:tableAction="onTableRowAction($event, item)"
+            >
+              <template v-slot:icon>
+                <icon-replace v-if="action.value === 'replace'" />
+                <icon-trashcan v-if="action.value === 'delete'" />
+              </template>
+            </table-row-action>
+          </template>
+        </b-table>
+      </b-col>
+    </b-row>
+
+    <!-- Modals -->
+    <modal-upload-certificate :certificate="modalCertificate" @ok="onModalOk" />
+  </b-container>
+</template>
+
+<script>
+import IconAdd from '@carbon/icons-vue/es/add--alt/20';
+import IconReplace from '@carbon/icons-vue/es/renew/20';
+import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
+
+import ModalUploadCertificate from './ModalUploadCertificate';
+import PageTitle from '../../../components/Global/PageTitle';
+import TableRowAction from '../../../components/Global/TableRowAction';
+
+import BVToastMixin from '../../../components/Mixins/BVToastMixin';
+
+export default {
+  name: 'SslCertificates',
+  components: {
+    IconAdd,
+    IconReplace,
+    IconTrashcan,
+    ModalUploadCertificate,
+    PageTitle,
+    TableRowAction
+  },
+  mixins: [BVToastMixin],
+  data() {
+    return {
+      modalCertificate: null,
+      fields: [
+        {
+          key: 'certificate',
+          label: this.$t('pageSslCertificates.table.certificate')
+        },
+        {
+          key: 'issuedBy',
+          label: this.$t('pageSslCertificates.table.issuedBy')
+        },
+        {
+          key: 'issuedTo',
+          label: this.$t('pageSslCertificates.table.issuedTo')
+        },
+        {
+          key: 'validFrom',
+          label: this.$t('pageSslCertificates.table.validFrom')
+        },
+        {
+          key: 'validUntil',
+          label: this.$t('pageSslCertificates.table.validUntil')
+        },
+        {
+          key: 'actions',
+          label: '',
+          tdClass: 'text-right'
+        }
+      ]
+    };
+  },
+  computed: {
+    certificates() {
+      return this.$store.getters['sslCertificates/allCertificates'];
+    },
+    tableItems() {
+      return this.certificates.map(certificate => {
+        return {
+          ...certificate,
+          actions: [
+            {
+              value: 'replace',
+              title: this.$t('pageSslCertificates.replaceCertificate')
+            },
+            {
+              value: 'delete',
+              title: this.$t('pageSslCertificates.deleteCertificate'),
+              enabled:
+                certificate.type === 'TrustStore Certificate' ? true : false
+            }
+          ]
+        };
+      });
+    },
+    certificatesForUpload() {
+      return this.$store.getters['sslCertificates/availableUploadTypes'];
+    }
+  },
+  created() {
+    this.$store.dispatch('sslCertificates/getCertificates');
+  },
+  methods: {
+    onTableRowAction(event, rowItem) {
+      switch (event) {
+        case 'replace':
+          this.initModalUploadCertificate(rowItem);
+          break;
+        case 'delete':
+          this.initModalDeleteCertificate(rowItem);
+          break;
+        default:
+          break;
+      }
+    },
+    initModalUploadCertificate(certificate = null) {
+      this.modalCertificate = certificate;
+      this.$bvModal.show('upload-certificate');
+    },
+    initModalDeleteCertificate(certificate) {
+      this.$bvModal
+        .msgBoxConfirm(
+          this.$t('pageSslCertificates.modal.deleteConfirmMessage', {
+            issuedBy: certificate.issuedBy,
+            certificate: certificate.certificate
+          }),
+          {
+            title: this.$t('pageSslCertificates.deleteCertificate'),
+            okTitle: this.$t('global.action.delete')
+          }
+        )
+        .then(deleteConfirmed => {
+          if (deleteConfirmed) this.deleteCertificate(certificate);
+        });
+    },
+    onModalOk({ addNew, file, type, location }) {
+      if (addNew) {
+        // Upload a new certificate
+        this.addNewCertificate(file, type);
+      } else {
+        // Replace an existing certificate
+        this.replaceCertificate(file, type, location);
+      }
+    },
+    addNewCertificate(file, type) {
+      this.$store
+        .dispatch('sslCertificates/addNewCertificate', { file, type })
+        .then(success => this.successToast(success))
+        .catch(({ message }) => this.errorToast(message));
+    },
+    replaceCertificate(file, type, location) {
+      const reader = new FileReader();
+      reader.readAsBinaryString(file);
+      reader.onloadend = event => {
+        const certificateString = event.target.result;
+        this.$store
+          .dispatch('sslCertificates/replaceCertificate', {
+            certificateString,
+            type,
+            location
+          })
+          .then(success => this.successToast(success))
+          .catch(({ message }) => this.errorToast(message));
+      };
+    },
+    deleteCertificate({ type, location }) {
+      this.$store
+        .dispatch('sslCertificates/deleteCertificate', {
+          type,
+          location
+        })
+        .then(success => this.successToast(success))
+        .catch(({ message }) => this.errorToast(message));
+    }
+  }
+};
+</script>
-- 
cgit v1.2.3

