commit f2316dc4d2468212a39ad3750f9b63b555033b55
Author: David Friesecký <frieseck@students.zcu.cz>
Date:   Thu Apr 15 14:14:28 2021 +0200

    Re #8568 - Edited detailed view by the RestAPI

diff --git a/static/certificate_detailed_view.html b/static/certificate_detailed_view.html
index 348b3af..28af6e3 100644
--- a/static/certificate_detailed_view.html
+++ b/static/certificate_detailed_view.html
@@ -21,187 +21,139 @@
         }
 
         #tree-detailed-view {
-          margin: 0;
-          padding: 0;
+            margin: 0;
+            padding: 0;
         }
 
-        .caret {
+        .caret-back::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;
-        }
-
-        .caret::before {
-          content: "\25B6";
-          color: black;
+            content: "\25B6";
           display: inline-block;
           margin-right: 6px;
-        }
-
-        .caret-down::before {
-          -ms-transform: rotate(90deg); /* IE 9 */
-          -webkit-transform: rotate(90deg); /* Safari */'
-          transform: rotate(90deg);
-        }
-
-        .nested {
-          display: none;
-        }
-
-        .active {
-          display: block;
+          -ms-transform: rotate(180deg); /* IE 9 */
+          -webkit-transform: rotate(180deg); /* Safari */'
+          transform: rotate(180deg);
         }
     </style>
 </head>
 <body class="p-4">
     <div id="certificate-detailed-view-content" class="container">
-        <h1 class="ml-2 d-inline-block">Certificate Detailed View</h1><br>
-        <h2 class="ml-2 d-inline-block">&ltcommon-name&gt [&ltid&gt]</h2>
+        <div class="row">
+            <h1 class="ml-2 d-inline-block">Certificate Detailed View</h1>
+            <div>
+                <a class="btn btn-warning ml-4 mb-3" href="">Revoke certificate</a>
+                <a class="btn btn-danger ml-4 mb-3" href="">Delete certificate</a>
+            </div>
+        </div>
+        <a class="ml-auto" href=""><span class="caret-back font-weight-bold">Issuing Certificate Authority</span></a>
         <div class="row">
             <div class="col-md-6">
-                <ul id="tree-detailed-view">
-                    <li><span class="caret caret-down font-weight-bold">Data</span>
-                        <ul class="nested active">
-                            <li><span class="caret caret-down font-weight-bold">Basic information</span>
-                                <ul class="nested active">
-                                    <table>
-                                        <tr>
-                                            <td>Version number:</td><td>&ltversion_number&gt</td>
-                                        </tr>
-                                        <tr>
-                                            <td>Serial number:</td><td>&ltserial_number&gt</td>
-                                        </tr>
-                                        <tr>
-                                            <td>Signature algorithm ID:</td><td>&ltsignature_algorithm_id&gt</td>
-                                        </tr>
-                                        <tr>
-                                            <td>Valid not before:</td><td>&ltnot_before&gt</td>
-                                        </tr>
-                                        <tr>
-                                            <td>Valid not after:</td><td>&ltnot_after&gt</td>
-                                        </tr>
-                                    </table>
-                                </ul>
-                            </li>
-                            <li><span class="caret font-weight-bold">Issuer</span>
-                                <ul class="nested">
-                                    <table>
-                                        <tr>
-                                            <td>Country code:</td><td>&ltcountry_code&gt</td>
-                                        </tr>
-                                        <tr>
-                                            <td>Province:</td><td>&ltprovince&gt</td>
-                                        </tr>
-                                        <tr>
-                                            <td>Locality:</td><td>&ltlocality&gt</td>
-                                        </tr>
-                                        <tr>
-                                            <td>Organization:</td><td>&ltorganization&gt</td>
-                                        </tr>
-                                        <tr>
-                                            <td>Organizational unit:</td><td>&ltorganizational_unit&gt</td>
-                                        </tr>
-                                        <tr>
-                                            <td>Common name:</td><td>&ltcommon_name&gt</td>
-                                        </tr>
-                                        <tr>
-                                            <td>Email address:</td><td>&ltemail_address&gt</td>
-                                        </tr>
-                                    </table>
-                                </ul>
-                            </li>
-                            <li><span class="caret font-weight-bold">Subject</span>
-                                <ul class="nested">
-                                    <table>
-                                        <tr>
-                                            <td>Country code:</td><td>&ltcountry_code&gt</td>
-                                        </tr>
-                                        <tr>
-                                            <td>Province:</td><td>&ltprovince&gt</td>
-                                        </tr>
-                                        <tr>
-                                            <td>Locality:</td><td>&ltlocality&gt</td>
-                                        </tr>
-                                        <tr>
-                                            <td>Organization:</td><td>&ltorganization&gt</td>
-                                        </tr>
-                                        <tr>
-                                            <td>Organizational unit:</td><td>&ltorganizational_unit&gt</td>
-                                        </tr>
-                                        <tr>
-                                            <td>Common name:</td><td>&ltcommon_name&gt</td>
-                                        </tr>
-                                        <tr>
-                                            <td>Email address:</td><td>&ltemail_address&gt</td>
-                                        </tr>
-                                    </table>
-                                </ul>
-                            </li>
-                            <li><span class="caret font-weight-bold">Subject public key info</span>
-                                <ul class="nested">
-                                    <li><span class="font-weight-bold">Public key algorithm</span>
-                                        <table>
-                                            <tr>
-                                                <td>Algorithm name:</td><td>&ltalgorithm_name&gt</td>
-                                            </tr>
-                                            <tr>
-                                                <td>Key definition:</td><td>&ltkey_definition&gt</td>
-                                            </tr>
-                                        </table>
-                                    </li>
-                                </ul>
-                            </li>
-                            <li><span class="caret font-weight-bold">X509v3 extensions</span>
-                                <ul class="nested">
-                                    <li>Constraints:
-                                        <ul>
-                                            <table>
-                                                <tr>
-                                                    <td>&ltsome_constraint&gt:</td><td>&ltsome_value&gt</td>
-                                                </tr>
-                                            </table>
-                                        </ul>
-                                    </li>
-                                    <li>Identifiers:
-                                        <ul>
-                                            <table>
-                                                <tr>
-                                                    <td>&ltsome_identifier&gt:</td><td>&ltsome_value&gt</td>
-                                                </tr>
-                                            </table>
-                                        </ul>
-                                    </li>
-                                    <li>Key usage:
-                                        <ul>
-                                            <table>
-                                                <tr>
-                                                    <td>&ltsome_usage&gt:</td><td>&ltsome_value&gt</td>
-                                                </tr>
-                                            </table>
-                                        </ul>
-                                    </li>
-                                </ul>
-                            </li>
-                            <li><span class="caret font-weight-bold">Signature</span>
-                                <ul class="nested">
-                                    <table>
-                                        <tr>
-                                            <td>Signature algorithm:</td><td>&ltsignature_algorithm&gt</td>
-                                        </tr>
-                                    </table>
-                                    <li>
-                                        <ul>
-                                            &ltsignature_code&gt
-                                        </ul>
-                                    </li>
-                                </ul>
-                            </li>
-                        </ul>
-                    </li>
-                </ul>
+                <table class="ml-auto mr-auto">
+                    <tr>
+                        <div class="form-group">
+                            <td><label for="distinguished_name">Distinguished name:</label></td>
+                            <td class="pl-3">
+                                <input value="" type="text" id="distinguished_name" name="distinguished_name" class="form-control" disabled>
+                            </td>
+                        </div>
+                    </tr>
+                    <tr>
+                        <div class="form-group">
+                            <td><label for="validity_start">Validity start:</label></td>
+                            <td class="pl-3">
+                                <input value="" type="date" id="validity_start" name="validity_start" class="form-control" disabled>
+                            </td>
+                        </div>
+                    </tr>
+                    <tr>
+                        <div class="form-group">
+                            <td><label for="validity_end">Validity end:</label></td>
+                            <td class="pl-3">
+                                <input value="" type="date" id="validity_end" name="validity_end" class="form-control" disabled>
+                            </td>
+                        </div>
+                    </tr>
+                    <tr>
+                        <td colspan="2"><h5>Subject</h5></td>
+                    </tr>
+                    <tr>
+                        <div class="form-group">
+                            <td><label for="subject_C">Country Code:</label></td>
+                            <td class="pl-3">
+                                <input value="" type="text" id="subject_C" name="subject_C" class="form-control" disabled>
+                            </td>
+                        </div>
+                    </tr>
+                    <tr>
+                        <div class="form-group">
+                            <td><label for="subject_ST">Province/State:</label></td>
+                            <td class="pl-3">
+                                <input value="" type="text" id="subject_ST" name="subject_ST" class="form-control" disabled>
+                            </td>
+                        </div>
+                    </tr>
+                    <tr>
+                        <div class="form-group">
+                            <td><label for="subject_L">Locality:</label></td>
+                            <td class="pl-3">
+                                <input value="" type="text" id="subject_L" name="subject_L" class="form-control" disabled>
+                            </td>
+                        </div>
+                    </tr>
+                    <tr>
+                        <div class="form-group">
+                            <td><label for="subject_CN">Common Name:</label></td>
+                            <td class="pl-3">
+                                <input value="" type="text" id="subject_CN" name="subject_CN" class="form-control" disabled>
+                            </td>
+                        </div>
+                    </tr>
+                    <tr>
+                        <div class="form-group">
+                            <td><label for="subject_O">Organization:</label></td>
+                            <td class="pl-3">
+                                <input value="" type="text" id="subject_O" name="subject_O" class="form-control" disabled>
+                            </td>
+                        </div>
+                    </tr>
+                    <tr>
+                        <div class="form-group">
+                            <td><label for="subject_OU">Organization Unit:</label></td>
+                            <td class="pl-3">
+                                <input value="" type="text" id="subject_OU" name="subject_OU" class="form-control" disabled>
+                            </td>
+                        </div>
+                    </tr>
+                    <tr>
+                        <div class="form-group">
+                            <td><label for="subject_emailAddress">Email Address:</label></td>
+                            <td class="pl-3">
+                                <input value="" type="text" id="subject_emailAddress" name="subject_emailAddress" class="form-control" disabled>
+                            </td>
+                        </div>
+                    </tr>
+                    <tr>
+                        <td>Usage:</td>
+                        <td class="form-check">
+                            <input class="form-check-input" v-model="certificateData.usage.CA" type="checkbox" id="isCA" name="isCA" value="CA" disabled>
+                            <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" disabled>
+                            <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" disabled>
+                            <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" disabled>
+                            <label class="form-check-label" for="isSSL_TLS">SSL/TLS</label><br>
+                        </td>
+                    </tr>
+                </table>
             </div>
             <div class="col-md-6">
                 TODO list
