Revize 366cd6f3

Re #8583 - Revocation finished, deletion modal

static/certificate.html

@@ -139 +139 @@
                             <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>
+                                    <td><button v-on:click="onCertificateDownload()" class="btn btn-primary btn-sm certificate-control" href="">Certificate</button></td>
+                                    <td><button v-on:click="onChainDownload()" class="btn btn-primary btn-sm certificate-control" href="">Chain of trust</button></td>
+                                    <td><button v-on:click="onRootDownload()" class="btn btn-primary btn-sm certificate-control" href="">Root</button></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><button v-on:click="onPublicKeyDownload()" class="btn btn-success btn-sm certificate-control" href="">Public key</button></td>
+                                    <td><button v-on:click="onPrivateKeyDownload()" class="btn btn-success btn-sm certificate-control" href="">Private key</button></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><button data-toggle="modal" data-target="#deleteModal" class="btn btn-danger btn-sm certificate-control" href="">Delete</button></td>
+                                    <td><button data-toggle="modal" data-target="#revokeModal" class="btn btn-warning btn-sm certificate-control" href="">Revoke</button></td>
                                     <td> </td>
                                 </tr>
                                 <tr class="d-flex">
@@ -196 +196 @@
                 </div>
             </div>
         </div>
+        <div id="revokeModal" class="modal" tabindex="-1" role="dialog">
+            <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title">Revoke certificate</h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                    </div>
+                    <div class="modal-body">
+                        <p>Do you really want to revoke certificate {{ certificate.subject.CN }}?</p>
+                        <div class="form-group">
+                            <label for="reasonSelect">Reason: </label>
+                            <select v-model="revocationReason" class="form-control" id="reasonSelect">
+                                <option value="unspecified">unspecified</option>
+                                <option value="keyCompromise">keyCompromise</option>
+                                <option value="cACompromise">cACompromise</option>
+                                <option value="affiliationChanged">affiliationChanged</option>
+                                <option value="superseded">superseded</option>
+                                <option value="cessationOfOperation">cessationOfOperation</option>
+                                <option value="certificateHold">certificateHold</option>
+                                <option value="removeFromCRL">removeFromCRL</option>
+                                <option value="privilegeWithdrawn">privilegeWithdrawn</option>
+                                <option value="aACompromise">aACompromise</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" v-on:click="onRevoke()" class="btn btn-warning" data-dismiss="modal">Revoke</button>
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+                <div id="deleteModal" class="modal" tabindex="-1" role="dialog">
+            <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title">Delete certificate</h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                    </div>
+                    <div class="modal-body">
+                        <p>Do you really want to delete certificate {{ certificate.subject.CN }}?</p>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" v-on:click="onDelete()" class="btn btn-danger" data-dismiss="modal">Delete</button>
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 
     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

static/js/certificate.js

@@ -8 +8 @@
             loading: true,
             error: false,
             id: null,
+            revocationReason: "unspecified",
             certificate: {
                 subject: {
                     C: "",
@@ -68 +69 @@
                 onPrivateKeyDownload(this.id);
             },
             onRevoke: function () {
-
+                document.body.scrollTop = 0;
+                document.documentElement.scrollTop = 0;
+                axios.patch(API_URL + "certificates/"+this.id, {
+                    status: "revoked",
+                    reason: this.revocationReason
+                })
+                    .then(function (response) {
+                        if(response.data["success"]) {
+                            certificateDetailsApp.successMessage = "Certificate revocation successful.";
+                        }
+                        else {
+                            certificateDetailsApp.errorMessage = "Certificate cannot be revoked - "+response.data["data"]+"!";
+                        }
+                    })
+                    .catch(function (error) {
+                        certificateDetailsApp.errorMessage = "An error occurred while revoking certificate";
+                    });
             },
             onDelete: function () {