commit 376e6be2d1f9091509d5e8a3020c0e05805cdb58
Author: Jan Pašek <janpasek97@gmail.com>
Date:   Wed May 12 13:11:43 2021 +0200

    Re #8701 - Improved created certificate page and empty list display

diff --git a/static/create_certificate.html b/static/create_certificate.html
index af3033f..1bef4e2 100644
--- a/static/create_certificate.html
+++ b/static/create_certificate.html
@@ -56,139 +56,149 @@
                             </div>
                         </tr>
                         <tr>
-                            <td colspan="2"><h5>Issuer</h5></td>
+                            <td colspan="2"><h5>Subject</h5></td>
                         </tr>
                         <tr>
                             <div class="form-group">
-                                <td><label for="issuer_CN">Common Name:</label></td>
+                                <td><label for="subject_CN">Common Name:</label></td>
                                 <td class="pl-3">
-                                    <input type="text" id="issuer_CN" name="issuer_CN" class="form-control" v-bind:value="selectedCAData.CN" disabled>
+                                    <input type="text" v-bind:class="{ 'is-invalid': invalidCN }" v-model:value="certificateData.subject.CN" id="subject_CN" name="subject_CN" class="form-control">
                                 </td>
                             </div>
                         </tr>
                         <tr>
                             <div class="form-group">
-                                <td><label for="issuer_C">Country Code:</label></td>
+                                <td><label for="subject_C">Country Code:</label></td>
                                 <td class="pl-3">
-                                    <input type="text" id="issuer_C" name="issuer_C" class="form-control" v-bind:value="selectedCAData.C" disabled>
+                                    <input type="text"  v-model:value="certificateData.subject.C" id="subject_C" name="subject_C" class="form-control">
                                 </td>
                             </div>
                         </tr>
                         <tr>
                             <div class="form-group">
-                                <td><label for="issuer_L">Locality:</label></td>
+                                <td><label for="subject_L">Locality:</label></td>
                                 <td class="pl-3">
-                                    <input type="text" id="issuer_L" name="issuer_L" class="form-control" v-bind:value="selectedCAData.L" disabled>
+                                    <input type="text" v-model:value="certificateData.subject.L" id="subject_L" name="subject_L" class="form-control">
                                 </td>
                             </div>
                         </tr>
                         <tr>
                             <div class="form-group">
-                                <td><label for="issuer_ST">Province/State:</label></td>
+                                <td><label for="subject_ST">Province/State:</label></td>
                                 <td class="pl-3">
-                                    <input type="text" id="issuer_ST" name="issuer_ST" class="form-control" v-bind:value="selectedCAData.ST" disabled>
+                                    <input type="text" v-model:value="certificateData.subject.ST" id="subject_ST" name="subject_ST" class="form-control">
                                 </td>
                             </div>
                         </tr>
                         <tr>
                             <div class="form-group">
-                                <td><label for="issuer_O">Organization:</label></td>
+                                <td><label for="subject_O">Organization:</label></td>
                                 <td class="pl-3">
-                                    <input type="text" id="issuer_O" name="issuer_O" class="form-control" v-bind:value="selectedCAData.O" disabled>
+                                    <input type="text" v-model:value="certificateData.subject.O" id="subject_O" name="subject_O" class="form-control">
                                 </td>
                             </div>
                         </tr>
                         <tr>
                             <div class="form-group">
-                                <td><label for="issuer_OU">Organization Unit:</label></td>
+                                <td><label for="subject_OU">Organization Unit:</label></td>
                                 <td class="pl-3">
-                                    <input type="text" id="issuer_OU" name="issuer_OU" class="form-control" v-bind:value="selectedCAData.OU" disabled>
+                                    <input type="text" v-model:value="certificateData.subject.OU" id="subject_OU" name="subject_OU" class="form-control">
                                 </td>
                             </div>
                         </tr>
                         <tr>
                             <div class="form-group">
-                                <td><label for="issuer_emailAddress">Email:</label></td>
+                                <td><label for="subject_emailAddress">Email:</label></td>
                                 <td class="pl-3">
-                                    <input type="email" id="issuer_emailAddress" name="issuer_emailAddress" class="form-control" v-bind:value="selectedCAData.emailAddress" disabled>
+                                    <input type="email" v-model:value="certificateData.subject.emailAddress" id="subject_emailAddress" name="subject_emailAddress" class="form-control">
                                 </td>
                             </div>
                         </tr>
                         <tr>
-                            <td colspan="2"><h5>Subject</h5></td>
+                            <td>Usage:</td>
+                            <td class="form-check">
+                                <input class="form-check-input" :disabled="isSelfSigned" v-model="certificateData.usage.CA" type="checkbox" id="isCA" name="isCA" value="CA">
+                                <label class="form-check-label" for="isCA">CA</label><br>
+
+                                <input class="form-check-input" v-model="certificateData.usage.digitalSignature" type="checkbox" id="isDigitalSignature" name="isDigitalSignature" value="DigitalSignature">
+                                <label class="form-check-label" for="isDigitalSignature">Digital Signature</label><br>
+
+                                <input class="form-check-input" v-model="certificateData.usage.authentication" type="checkbox" id="isAuthentication" name="isAuthentication" value="Authentication">
+                                <label class="form-check-label" for="isAuthentication">Authentication</label><br>
+
+                                <input class="form-check-input" v-model="certificateData.usage.SSL" type="checkbox" id="isSSL_TLS" name="isSSL_TLS" value="SSL_TLS">
+                                <label class="form-check-label" for="isSSL_TLS">SSL/TLS</label><br>
+                            </td>
                         </tr>
-                        <tr>
+                        <tr v-if="!isSelfSigned && !showIssuer" class="pt-2">
+                            <td colspan="3">
+                                <button v-if="!showIssuer" v-on:click="toggleShowIssuer" class="btn btn-outline-secondary btn-block">Show issuer</button>
+                            </td>
+                        </tr>
+                        <tr v-if="showIssuer" class="pt-2" v-cloak>
+                            <td colspan="3">
+                                <button v-on:click="toggleShowIssuer" class="btn btn-outline-secondary btn-block">Hide issuer</button>
+                            </td>
+                        </tr>
+                        <tr v-if="showIssuer" v-cloak>
+                            <td colspan="2"><h5>Issuer</h5></td>
+                        </tr>
+                        <tr v-if="showIssuer" v-cloak>
                             <div class="form-group">
-                                <td><label for="subject_CN">Common Name:</label></td>
+                                <td><label for="issuer_CN">Common Name:</label></td>
                                 <td class="pl-3">
-                                    <input type="text" v-bind:class="{ 'is-invalid': invalidCN }" v-model:value="certificateData.subject.CN" id="subject_CN" name="subject_CN" class="form-control">
+                                    <input type="text" id="issuer_CN" name="issuer_CN" class="form-control" v-bind:value="selectedCAData.CN" disabled>
                                 </td>
                             </div>
                         </tr>
-                        <tr>
+                        <tr v-if="showIssuer" v-cloak>
                             <div class="form-group">
-                                <td><label for="subject_C">Country Code:</label></td>
+                                <td><label for="issuer_C">Country Code:</label></td>
                                 <td class="pl-3">
-                                    <input type="text"  v-model:value="certificateData.subject.C" id="subject_C" name="subject_C" class="form-control">
+                                    <input type="text" id="issuer_C" name="issuer_C" class="form-control" v-bind:value="selectedCAData.C" disabled>
                                 </td>
                             </div>
                         </tr>
-                        <tr>
+                        <tr v-if="showIssuer" v-cloak>
                             <div class="form-group">
-                                <td><label for="subject_L">Locality:</label></td>
+                                <td><label for="issuer_L">Locality:</label></td>
                                 <td class="pl-3">
-                                    <input type="text" v-model:value="certificateData.subject.L" id="subject_L" name="subject_L" class="form-control">
+                                    <input type="text" id="issuer_L" name="issuer_L" class="form-control" v-bind:value="selectedCAData.L" disabled>
                                 </td>
                             </div>
                         </tr>
-                        <tr>
+                        <tr v-if="showIssuer" v-cloak>
                             <div class="form-group">
-                                <td><label for="subject_ST">Province/State:</label></td>
+                                <td><label for="issuer_ST">Province/State:</label></td>
                                 <td class="pl-3">
-                                    <input type="text" v-model:value="certificateData.subject.ST" id="subject_ST" name="subject_ST" class="form-control">
+                                    <input type="text" id="issuer_ST" name="issuer_ST" class="form-control" v-bind:value="selectedCAData.ST" disabled>
                                 </td>
                             </div>
                         </tr>
-                        <tr>
+                        <tr v-if="showIssuer" v-cloak>
                             <div class="form-group">
-                                <td><label for="subject_O">Organization:</label></td>
+                                <td><label for="issuer_O">Organization:</label></td>
                                 <td class="pl-3">
-                                    <input type="text" v-model:value="certificateData.subject.O" id="subject_O" name="subject_O" class="form-control">
+                                    <input type="text" id="issuer_O" name="issuer_O" class="form-control" v-bind:value="selectedCAData.O" disabled>
                                 </td>
                             </div>
                         </tr>
-                        <tr>
+                        <tr v-if="showIssuer" v-cloak>
                             <div class="form-group">
-                                <td><label for="subject_OU">Organization Unit:</label></td>
+                                <td><label for="issuer_OU">Organization Unit:</label></td>
                                 <td class="pl-3">
-                                    <input type="text" v-model:value="certificateData.subject.OU" id="subject_OU" name="subject_OU" class="form-control">
+                                    <input type="text" id="issuer_OU" name="issuer_OU" class="form-control" v-bind:value="selectedCAData.OU" disabled>
                                 </td>
                             </div>
                         </tr>
-                        <tr>
+                        <tr v-if="showIssuer" v-cloak>
                             <div class="form-group">
-                                <td><label for="subject_emailAddress">Email:</label></td>
+                                <td><label for="issuer_emailAddress">Email:</label></td>
                                 <td class="pl-3">
-                                    <input type="email" v-model:value="certificateData.subject.emailAddress" id="subject_emailAddress" name="subject_emailAddress" class="form-control">
+                                    <input type="email" id="issuer_emailAddress" name="issuer_emailAddress" class="form-control" v-bind:value="selectedCAData.emailAddress" disabled>
                                 </td>
                             </div>
                         </tr>
-                        <tr>
-                            <td>Usage:</td>
-                            <td class="form-check">
-                                <input class="form-check-input" :disabled="isSelfSigned" v-model="certificateData.usage.CA" type="checkbox" id="isCA" name="isCA" value="CA">
-                                <label class="form-check-label" for="isCA">CA</label><br>
-
-                                <input class="form-check-input" v-model="certificateData.usage.digitalSignature" type="checkbox" id="isDigitalSignature" name="isDigitalSignature" value="DigitalSignature">
-                                <label class="form-check-label" for="isDigitalSignature">Digital Signature</label><br>
-
-                                <input class="form-check-input" v-model="certificateData.usage.authentication" type="checkbox" id="isAuthentication" name="isAuthentication" value="Authentication">
-                                <label class="form-check-label" for="isAuthentication">Authentication</label><br>
-
-                                <input class="form-check-input" v-model="certificateData.usage.SSL" type="checkbox" id="isSSL_TLS" name="isSSL_TLS" value="SSL_TLS">
-                                <label class="form-check-label" for="isSSL_TLS">SSL/TLS</label><br>
-                            </td>
-                        </tr>
                         <tr>
                             <div class="form-group form-check">
                                 <td><label class="form-check-label" for="specifyPasswordCheckbox" style="margin-top: 15px">Custom key:</label></td>
@@ -200,7 +210,7 @@
                         <tr v-if="customKey" v-cloak>
                             <div class="form-group">
                                 <td class="pl-5"><label for="key_password">Password:</label></td>
-                                <td class="pl-3">
+                                <td class="pl-3" colspan="2">
                                     <input type="password" v-model:value="key.password" id="key_password" name="key_password" class="form-control">
                                 </td>
                             </div>
@@ -208,7 +218,7 @@
                         <tr v-if="customKey" v-cloak>
                             <div class="form-group">
                                 <td class="pl-5"><label for="key_pem">Private key:</label></td>
-                                <td class="pl-3">
+                                <td class="pl-3" colspan="2">
                                     <input type="file" v-on:change="onKeyFileChange" id="key_pem" name="key_pem" class="form-control-file">
                                 </td>
                             </div>
@@ -224,7 +234,7 @@
                         <tr v-if="customExtensions" v-cloak>
                             <div class="form-group">
                                 <td class="pl-5"><label for="extensions">Extensions:</label></td>
-                                <td cla ss="pl-3">
+                                <td cla ss="pl-3" colspan="2">
                                     <textarea v-model:value="extensions" id="extensions" name="extensions" class="form-control mt-2">
                                     </textarea>
                                 </td>
diff --git a/static/index.html b/static/index.html
index 3ec5e47..e8809b6 100644
--- a/static/index.html
+++ b/static/index.html
@@ -16,125 +16,130 @@
                      :is-full-page="true"></loading>
         </div>
         <div v-if="!loading" v-cloak class="card h-100">
-            <div class="card-body">
-                <div>
-                    <h1 class="d-inline-block">Certificate Listing</h1>
-                </div>
-                <div class="alert alert-success" v-if="successMessage !== ''" role="alert" v-cloak>
-                    {{ successMessage }}
-                </div>
-                <div class="mt-2 mb-2">
-                    <a class="btn btn-success mb-3 text-center" href="/static/create_certificate.html"><b>+</b></a>
-                    <button v-on:click="toggleFilters" v-if="!displayFilters" class="btn btn-outline-primary ml-4 mb-3" data-toggle="collapse" data-target="#filteringCollapse">Show filtering</button>
-                    <button v-on:click="toggleFilters" v-if="displayFilters" class="btn btn-outline-primary ml-4 mb-3" data-toggle="collapse" data-target="#filteringCollapse">Hide filtering</button>
-                    <div class="collapse mt-2" id="filteringCollapse">
-                        <div class="card card-body filtering-box">
-                            <div class="container">
-                                <div class="row align-items-center">
-                                    <div class="col-3">
-                                        <div class="form-group mb-0">
-                                            <h5>Usage:</h5>
-                                            <div class="form-check ml-4">
-                                                <input class="form-check-input" type="checkbox" id="usageCA" v-model="filtering.usage.CA">
-                                                <label class="form-check-label" for="usageCA">
-                                                    CA
-                                                </label>
-                                            </div>
-                                            <div class="form-check ml-4">
-                                                <input class="form-check-input" type="checkbox" id="usageSignature" v-model="filtering.usage.digitalSignature">
-                                                <label class="form-check-label" for="usageSignature">
-                                                    Digital signature
-                                                </label>
-                                            </div>
-                                            <div class="form-check ml-4">
-                                                <input class="form-check-input" type="checkbox" id="usageAuth" v-model="filtering.usage.authentication">
-                                                <label class="form-check-label" for="usageAuth">
-                                                    Authentication
-                                                </label>
-                                            </div>
-                                            <div class="form-check ml-4">
-                                                <input class="form-check-input" type="checkbox" id="usageSSL" v-model="filtering.usage.SSL">
-                                                <label class="form-check-label" for="usageSSL">
-                                                    SSL/TLS
-                                                </label>
+            <div class="card">
+                <div class="card-body">
+                    <div>
+                        <h1 class="d-inline-block">Certificate Listing</h1>
+                    </div>
+                    <div class="alert alert-success" v-if="successMessage !== ''" role="alert" v-cloak>
+                        {{ successMessage }}
+                    </div>
+                    <div class="mt-2 mb-2">
+                        <a class="btn btn-success mb-3 text-center" href="/static/create_certificate.html"><b>+</b></a>
+                        <button v-on:click="toggleFilters" v-if="!displayFilters" class="btn btn-outline-primary ml-4 mb-3" data-toggle="collapse" data-target="#filteringCollapse">Show filtering</button>
+                        <button v-on:click="toggleFilters" v-if="displayFilters" class="btn btn-outline-primary ml-4 mb-3" data-toggle="collapse" data-target="#filteringCollapse">Hide filtering</button>
+                        <div class="collapse mt-2" id="filteringCollapse">
+                            <div class="card card-body filtering-box">
+                                <div class="container">
+                                    <div class="row align-items-center">
+                                        <div class="col-3">
+                                            <div class="form-group mb-0">
+                                                <h5>Usage:</h5>
+                                                <div class="form-check ml-4">
+                                                    <input class="form-check-input" type="checkbox" id="usageCA" v-model="filtering.usage.CA">
+                                                    <label class="form-check-label" for="usageCA">
+                                                        CA
+                                                    </label>
+                                                </div>
+                                                <div class="form-check ml-4">
+                                                    <input class="form-check-input" type="checkbox" id="usageSignature" v-model="filtering.usage.digitalSignature">
+                                                    <label class="form-check-label" for="usageSignature">
+                                                        Digital signature
+                                                    </label>
+                                                </div>
+                                                <div class="form-check ml-4">
+                                                    <input class="form-check-input" type="checkbox" id="usageAuth" v-model="filtering.usage.authentication">
+                                                    <label class="form-check-label" for="usageAuth">
+                                                        Authentication
+                                                    </label>
+                                                </div>
+                                                <div class="form-check ml-4">
+                                                    <input class="form-check-input" type="checkbox" id="usageSSL" v-model="filtering.usage.SSL">
+                                                    <label class="form-check-label" for="usageSSL">
+                                                        SSL/TLS
+                                                    </label>
+                                                </div>
                                             </div>
                                         </div>
-                                    </div>
-                                    <div class="col-3">
-                                        <div class="form-group mb-0">
-                                            <h5>Type:</h5>
-                                            <div class="form-check ml-4">
-                                                <input class="form-check-input" type="checkbox" id="rootCA" v-model="filtering.type.RootCA">
-                                                <label class="form-check-label" for="rootCA">
-                                                    Root CA
-                                                </label>
-                                            </div>
-                                            <div class="form-check ml-4">
-                                                <input class="form-check-input" type="checkbox" id="intermediateCA" v-model="filtering.type.IntermediateCA">
-                                                <label class="form-check-label" for="intermediateCA">
-                                                    Intermediate CA
-                                                </label>
-                                            </div>
-                                            <div class="form-check ml-4">
-                                                <input class="form-check-input" type="checkbox" id="endCertificate" v-model="filtering.type.EndCertificate">
-                                                <label class="form-check-label" for="endCertificate">
-                                                    End certificate
-                                                </label>
+                                        <div class="col-3">
+                                            <div class="form-group mb-0">
+                                                <h5>Type:</h5>
+                                                <div class="form-check ml-4">
+                                                    <input class="form-check-input" type="checkbox" id="rootCA" v-model="filtering.type.RootCA">
+                                                    <label class="form-check-label" for="rootCA">
+                                                        Root CA
+                                                    </label>
+                                                </div>
+                                                <div class="form-check ml-4">
+                                                    <input class="form-check-input" type="checkbox" id="intermediateCA" v-model="filtering.type.IntermediateCA">
+                                                    <label class="form-check-label" for="intermediateCA">
+                                                        Intermediate CA
+                                                    </label>
+                                                </div>
+                                                <div class="form-check ml-4">
+                                                    <input class="form-check-input" type="checkbox" id="endCertificate" v-model="filtering.type.EndCertificate">
+                                                    <label class="form-check-label" for="endCertificate">
+                                                        End certificate
+                                                    </label>
+                                                </div>
                                             </div>
                                         </div>
-                                    </div>
-                                    <div class="col-3">
-                                        <div class="form-group mb-0">
-                                            <h5>Common name:</h5>
-                                            <div>
-                                                <input class="form-control" type="text" id="commonName" placeholder="Enter common name"  v-model="filtering.CN">
+                                        <div class="col-3">
+                                            <div class="form-group mb-0">
+                                                <h5>Common name:</h5>
+                                                <div>
+                                                    <input class="form-control" type="text" id="commonName" placeholder="Enter common name"  v-model="filtering.CN">
+                                                </div>
                                             </div>
                                         </div>
-                                    </div>
-                                    <div class="col-3">
-                                        <button class="btn btn-primary mb-2" style="width: 115px;" v-on:click="reloadData">Apply filters</button>
-                                        <button class="btn btn-secondary mb-2" style="width: 115px;" v-on:click="clearFilters">Clear filters</button>
+                                        <div class="col-3">
+                                            <button class="btn btn-primary mb-2" style="width: 115px;" v-on:click="reloadData">Apply filters</button>
+                                            <button class="btn btn-secondary mb-2" style="width: 115px;" v-on:click="clearFilters">Clear filters</button>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
-                </div>
-                <table class="table table-striped table-hover text-center">
-                    <thead class="thead-dark">
-                        <tr>
-                            <th class="align-middle" scope="col" rowspan="2">Common name</th>
-                            <th class="align-middle" scope="col" colspan="2">Validity</th>
-                            <th class="align-middle" scope="col" rowspan="2">Usage</th>
-                            <th class="align-middle" scope="col" rowspan="2">Certificate</th>
-                            <th class="align-middle" scope="col" rowspan="2">Chain of trust</th>
-                            <th class="align-middle" scope="col" rowspan="2">Root</th>
-                            <th class="align-middle" scope="col" rowspan="2">Private key</th>
-                            <th class="align-middle" scope="col" rowspan="2">Issuer</th>
-                        </tr>
-                        <tr>
-                            <th scope="col">Start</th>
-                            <th scope="col">End</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr is="certificate-item"
-                            v-for="certificate in certificates"
-                            v-bind:certificate="certificate"
-                            v-bind:key="certificate.id">
-                        </tr>
-                    </tbody>
-                </table>
-                <div v-if="hasNextPage || hasPreviousPage">
-                  <ul class="pagination justify-content-center">
-                        <li class="page-item" v-bind:class="{disabled: !hasPreviousPage}">
-                            <button v-on:click="onPreviousPage" class="page-link"><<</button>
-                        </li>
-                        <li class="page-item"><button class="page-link">{{ currentPage }}</button></li>
-                        <li class="page-item" v-bind:class="{disabled: !hasNextPage}">
-                            <button v-on:click="onNextPage" class="page-link">>></button>
-                        </li>
-                  </ul>
+                    <table class="table table-striped table-hover text-center">
+                        <thead class="thead-dark">
+                            <tr>
+                                <th class="align-middle" scope="col" rowspan="2">Common name</th>
+                                <th class="align-middle" scope="col" colspan="2">Validity</th>
+                                <th class="align-middle" scope="col" rowspan="2">Usage</th>
+                                <th class="align-middle" scope="col" rowspan="2">Certificate</th>
+                                <th class="align-middle" scope="col" rowspan="2">Chain of trust</th>
+                                <th class="align-middle" scope="col" rowspan="2">Root</th>
+                                <th class="align-middle" scope="col" rowspan="2">Private key</th>
+                                <th class="align-middle" scope="col" rowspan="2">Issuer</th>
+                            </tr>
+                            <tr>
+                                <th scope="col">Start</th>
+                                <th scope="col">End</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr v-show="certificates.length == 0">
+                                <td colspan="9">No certificate found</td>
+                            </tr>
+                            <tr is="certificate-item"
+                                v-for="certificate in certificates"
+                                v-bind:certificate="certificate"
+                                v-bind:key="certificate.id">
+                            </tr>
+                        </tbody>
+                    </table>
+                    <div v-if="hasNextPage || hasPreviousPage">
+                      <ul class="pagination justify-content-center">
+                            <li class="page-item" v-bind:class="{disabled: !hasPreviousPage}">
+                                <button v-on:click="onPreviousPage" class="page-link"><<</button>
+                            </li>
+                            <li class="page-item"><button class="page-link">{{ currentPage }}</button></li>
+                            <li class="page-item" v-bind:class="{disabled: !hasNextPage}">
+                                <button v-on:click="onNextPage" class="page-link">>></button>
+                            </li>
+                      </ul>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/static/js/create_certificate.js b/static/js/create_certificate.js
index e55fa86..c3c919e 100644
--- a/static/js/create_certificate.js
+++ b/static/js/create_certificate.js
@@ -7,6 +7,7 @@ var createCertificateApp = new Vue({
         isSelfSigned: false,
         invalidCN: false,
         customKey: false,
+        showIssuer: false,
         customExtensions: false,
         // available certificate authorities
         authorities: [],
@@ -73,6 +74,9 @@ var createCertificateApp = new Vue({
         }
     },
     methods: {
+        toggleShowIssuer: function () {
+            this.showIssuer = ~this.showIssuer;
+        },
         onKeyFileChange: function (event) {
             var file = event.target.files[0];
             var reader = new FileReader();
