commit 5f211e7b2f6092732108fb2f893054cbcdaabb51
Author: Jan Pašek <janpasek97@gmail.com>
Date:   Fri Apr 16 16:54:42 2021 +0200

    Re #8583 - GUI simplified

diff --git a/static/certificate.html b/static/certificate.html
index 3ad86fb..e423554 100644
--- a/static/certificate.html
+++ b/static/certificate.html
@@ -9,29 +9,18 @@
 <body class="p-4">
     <div id="certificate-detailed-view-content" class="p-4">
         <div class="row">
-            <h1 class="ml-2 d-inline-block">Certificate Detailed View</h1>
-            <span class="ml-2 mb-2">
-                <div>
-                    <a class="btn btn-success ml-2 mb-3" v-on:click="onCertificateDownload()">Download Certificate</a>
-                    <a class="btn btn-success ml-2 mb-3" v-on:click="onRootDownload()">Download Root Certificate</a>
-                    <a class="btn btn-success ml-2 mb-3" v-on:click="onChainDownload()">Download Chain of Trust</a>
-                </div>
-                <div>
-                    <a class="btn btn-warning ml-2 mb-2" v-on:click="onRevoke()">Revoke certificate</a>
-                    <a class="btn btn-danger ml-2 mb-2" v-on:click="onDelete()">Delete certificate</a>
-                </div>
-            </span>
+            <a href="/static/index.html"><div class="caret-left font-weight-bold ml-2 mb-2">Home</div></a>
         </div>
-        <div>
-            <a href=""><span class="caret-top font-weight-bold ml-2 mb-2">Issuing Certificate Authority</span></a>
-            <div>
-                <a href=""><span class="font-weight-bold ml-5 mb-2">CRL</span></a>
-                <a href=""><span class="font-weight-bold ml-3 mb-2">OCSP</span></a>
-            </div>
+        <h1 class="mb-5 text-center">Certificate Detailed View</h1>
+        <div class="alert alert-success" v-if="successMessage !== ''" role="alert" v-cloak>
+            {{ successMessage }}
+        </div>
+        <div v-if="errorMessage !== ''" class="alert alert-danger" v-cloak role="alert">
+            {{ errorMessage }}
         </div>
         <div class="row">
-            <div class="col-xl-5">
-                <table class="ml-auto mr-auto">
+            <div class="col-xl-6">
+                <table class="ml-auto mr-auto mb-4">
                     <tr>
                         <div class="form-group">
                             <td><label for="validity_start">Validity start:</label></td>
@@ -124,37 +113,72 @@
                         </td>
                     </tr>
                 </table>
-                <div class="text-center">
-                    <a class="btn btn-success m-1" v-on:click="onPublicKeyDownload()">Download Public Key</a>
-                    <a class="btn btn-success m-1" v-on:click="onPrivateKeyDownload()">Download Private Key</a>
-                </div>
             </div>
-            <div class="col-xl-7 table-responsive">
-                <table class="table table-striped table-hover">
-                    <thead class="thead-dark text-center">
-                        <tr>
-                            <th scope="col" colspan="2">Issued Certificates</th>
-                        </tr>
-                        <tr>
-                            <th class="w-65" scope="col">Common Name</th>
-                            <th class="w-35" scope="col">Type</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>&ltsome_certificate_name&gt</td>
-                            <td>&lttype&gt</td>
-                        </tr>
-                        <tr>
-                            <td>&ltsome_certificate_long_name&gt</td>
-                            <td>&ltCA&gt</td>
-                        </tr>
-                        <tr>
-                            <td>&ltsome _certificat e_very____________ _________l on gname&gt</td>
-                            <td>&ltEnd Certificate&gt</td>
-                        </tr>
-                    </tbody>
-                </table>
+            <div class="col-xl-5">
+                <div class="row table-responsive">
+                    <table class="table table-striped">
+                        <thead class="thead-dark">
+                            <tr>
+                                <th colspan="4" class="text-center">Manage certificate</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr class="d-flex">
+                                <td style="width: 30%" class="font-weight-bold">Certificate download:</td>
+                                <td><a v-on:click="onCertificateDownload()" class="btn btn-primary btn-sm certificate-control" href="">Certificate</a></td>
+                                <td><a v-on:click="onChainDownload()" class="btn btn-primary btn-sm certificate-control" href="">Chain of trust</a></td>
+                                <td><a v-on:click="onRootDownload()" class="btn btn-primary btn-sm certificate-control" href="">Root</a></td>
+                            </tr>
+                            <tr class="d-flex">
+                                <td style="width: 30%" class="font-weight-bold">Key download:</td>
+                                <td><a v-on:click="onPublicKeyDownload()" class="btn btn-success btn-sm certificate-control" href="">Public key</a></td>
+                                <td><a v-on:click="onPrivateKeyDownload()" class="btn btn-success btn-sm certificate-control" href="">Private key</a></td>
+                                <td> </td>
+                            </tr>
+                            <tr class="d-flex">
+                                <td style="width: 30%" class="font-weight-bold">Actions:</td>
+                                <td><a v-on:click="onDelete()" class="btn btn-danger btn-sm certificate-control" href="">Delete</a></td>
+                                <td><a v-on:click="onRevoke()" class="btn btn-warning btn-sm certificate-control" href="">Revoke</a></td>
+                                <td> </td>
+                            </tr>
+                            <tr class="d-flex">
+                                <td style="width: 30%" class="font-weight-bold">Endpoints:</td>
+                                <td><a class="certificate-control font-weight-bold" :href="crlEndpoint">CRL</a></td>
+                                <td><a class="certificate-control font-weight-bold" :href="ocspEndpoint">OCSP</a></td>
+                                <td> </td>
+                            </tr>
+                            <tr class="d-flex" v-if="id != certificate.CA">
+                                <td style="width: 30%" class="font-weight-bold">Issuer:</td>
+                                <td><a class="certificate-control font-weight-bold" :href="issuerURL">show details</a></td>
+                                <td> </td>
+                                <td> </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="row table-responsive">
+                    <table class="table table-striped table-hover">
+                        <thead class="thead-dark text-center">
+                            <tr>
+                                <th scope="col" colspan="2">Issued Certificates</th>
+                            </tr>
+                            <tr>
+                                <th class="w-65" scope="col">Common Name</th>
+                                <th class="w-35" scope="col">Type</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>&ltsome_certificate_name&gt</td>
+                                <td>&lttype&gt</td>
+                            </tr>
+                            <tr>
+                                <td>&ltsome_certificate_long_name&gt</td>
+                                <td>&ltCA&gt</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
             </div>
         </div>
     </div>
diff --git a/static/css/app.css b/static/css/app.css
index 27099a2..cebcd37 100644
--- a/static/css/app.css
+++ b/static/css/app.css
@@ -2,6 +2,12 @@
   display: none;
 }
 
+.certificate-control {
+    width: 105px;
+    display: block;
+    text-align: center;
+}
+
 .w-65 {
     max-width: 65%;
 }
@@ -23,4 +29,19 @@
     -ms-transform: rotate(270deg); /* IE 9 */
     -webkit-transform: rotate(270deg); /* Safari */'
     transform: rotate(270deg);
+}
+
+.caret-left::before {
+    font-family: sans-serif;
+    cursor: pointer;
+    -webkit-user-select: none; /* Safari 3.1+ */
+    -moz-user-select: none; /* Firefox 2+ */
+    -ms-user-select: none; /* IE 10+ */
+    user-select: none;
+    content: "\25B6";
+    display: inline-block;
+    margin-right: 6px;
+    -ms-transform: rotate(180deg); /* IE 9 */
+    -webkit-transform: rotate(180deg); /* Safari */'
+    transform: rotate(180deg);
 }
\ No newline at end of file
diff --git a/static/js/certificate.js b/static/js/certificate.js
index 78ed2e6..9ea4ef5 100644
--- a/static/js/certificate.js
+++ b/static/js/certificate.js
@@ -23,6 +23,8 @@
                 },
                 CA: null,
             },
+            errorMessage: "",
+            successMessage: "",
         },
         computed: {
             startDate: function () {
@@ -30,6 +32,15 @@
             },
             endDate: function () {
                 return this.certificate.notAfter.substr(0, 16);
+            },
+            issuerURL: function () {
+                return "/static/certificate.html?id=" + this.certificate.CA;
+            },
+            crlEndpoint: function () {
+                return "/api/crl/" + this.certificate.CA;
+            },
+            ocspEndpoint: function () {
+                return "/api/ocsp/" + this.certificate.CA;
             }
         },
         watch: {
