Revize e75db9cd
Přidáno uživatelem Jan Pašek před asi 4 roky(ů)
| static/index.html | ||
|---|---|---|
| 5 | 5 |
<title>X.509 Certificate Management</title> |
| 6 | 6 |
<link rel="stylesheet" href="/static/css/bootstrap.min.css"> |
| 7 | 7 |
</head> |
| 8 |
<body class="p-4"> |
|
| 9 |
<div> |
|
| 10 |
<h1 class="ml-2 d-inline-block">Certificate Listing</h1> |
|
| 11 |
<a class="btn btn-success ml-4 mb-3" href="/static/create_certificate.html">Create certificate</a> |
|
| 8 |
<body> |
|
| 9 |
<div id="certificateListingPage" class="p-4"> |
|
| 10 |
<div> |
|
| 11 |
<h1 class="ml-2 d-inline-block">Certificate Listing</h1> |
|
| 12 |
<a class="btn btn-success ml-4 mb-3" href="/static/create_certificate.html">Create certificate</a> |
|
| 13 |
</div> |
|
| 14 |
|
|
| 15 |
<table class="table table-striped table-hover text-center"> |
|
| 16 |
<thead class="thead-dark"> |
|
| 17 |
<tr> |
|
| 18 |
<th class="align-middle" scope="col" rowspan="2">Common name</th> |
|
| 19 |
<th class="align-middle" scope="col" colspan="2">Validity</th> |
|
| 20 |
<th class="align-middle" scope="col" rowspan="2">Usage</th> |
|
| 21 |
<th class="align-middle" scope="col" rowspan="2">Certificate</th> |
|
| 22 |
<th class="align-middle" scope="col" rowspan="2">Trust chain</th> |
|
| 23 |
<th class="align-middle" scope="col" rowspan="2">Chain root</th> |
|
| 24 |
</tr> |
|
| 25 |
<tr> |
|
| 26 |
<th scope="col">Start</th> |
|
| 27 |
<th scope="col">End</th> |
|
| 28 |
</tr> |
|
| 29 |
</thead> |
|
| 30 |
<tbody> |
|
| 31 |
<tr is="certificate-item" |
|
| 32 |
v-for="certificate in certificates" |
|
| 33 |
v-bind:certificate="certificate" |
|
| 34 |
v-bind:key="certificate.id"> |
|
| 35 |
</tr> |
|
| 36 |
</tbody> |
|
| 37 |
</table> |
|
| 12 | 38 |
</div> |
| 13 | 39 |
|
| 14 |
<table class="table table-striped table-hover text-center"> |
|
| 15 |
<thead class="thead-dark"> |
|
| 16 |
<tr> |
|
| 17 |
<th class="align-middle" scope="col" rowspan="2">Common name</th> |
|
| 18 |
<th class="align-middle" scope="col" colspan="2">Validity</th> |
|
| 19 |
<th class="align-middle" scope="col" rowspan="2">Usage</th> |
|
| 20 |
<th class="align-middle" scope="col" rowspan="2">Certificate</th> |
|
| 21 |
<th class="align-middle" scope="col" rowspan="2">Trust chain</th> |
|
| 22 |
<th class="align-middle" scope="col" rowspan="2">Chain root</th> |
|
| 23 |
</tr> |
|
| 24 |
<tr> |
|
| 25 |
<th scope="col">Start</th> |
|
| 26 |
<th scope="col">End</th> |
|
| 27 |
</tr> |
|
| 28 |
</thead> |
|
| 29 |
<tbody> |
|
| 30 |
<tr> |
|
| 31 |
<td>My own CA</td> |
|
| 32 |
<td>2021/03/29</td> |
|
| 33 |
<td>2021/09/29</td> |
|
| 34 |
<td>CA, authentication</td> |
|
| 35 |
<td><button>Download certificate</button></td> |
|
| 36 |
<td><button>Download chain of trust</button></td> |
|
| 37 |
<td><button>Download chain root</button></td> |
|
| 38 |
</tr> |
|
| 39 |
<tr> |
|
| 40 |
<td>My own CA</td> |
|
| 41 |
<td>2021/03/29</td> |
|
| 42 |
<td>2021/09/29</td> |
|
| 43 |
<td>CA, authentication</td> |
|
| 44 |
<td><button>Download certificate</button></td> |
|
| 45 |
<td><button>Download chain of trust</button></td> |
|
| 46 |
<td><button>Download chain root</button></td> |
|
| 47 |
</tr> |
|
| 48 |
</tbody> |
|
| 49 |
</table> |
|
| 50 |
<script src="/static/js/jquery-3.6.0.min.js"></script> |
|
| 51 |
<script src="/static/js/bootstrap.bundle.min.js"></script> |
|
| 40 |
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> |
|
| 41 |
<script src="/static/js/jquery-3.6.0.min.js"></script> |
|
| 42 |
<script src="/static/js/bootstrap.bundle.min.js"></script> |
|
| 43 |
<script src="/static/js/axios.min.js"></script> |
|
| 44 |
<script src="/static/js/utilities.js"></script> |
|
| 45 |
<script src="/static/js/components.js"></script> |
|
| 46 |
<script src="/static/js/index.js"></script> |
|
| 47 |
|
|
| 52 | 48 |
</body> |
| 53 | 49 |
</html> |
| static/js/components.js | ||
|---|---|---|
| 1 |
Vue.component("certificate-item",{
|
|
| 2 |
props: ["certificate"], |
|
| 3 |
template: "<tr>"+ |
|
| 4 |
"<td class='align-middle'>{{ certificate.CN }}</td>"+
|
|
| 5 |
"<td class='align-middle'>{{ certificate.notBefore }}</td>"+
|
|
| 6 |
"<td class='align-middle'>{{ certificate.notAfter }}</td>"+
|
|
| 7 |
"<td class='align-middle'>" + |
|
| 8 |
" <div v-if='certificate.usage.CA'>CA</div>" + |
|
| 9 |
" <div v-if='certificate.usage.authentication'>authentication</div>" + |
|
| 10 |
" <div v-if='certificate.usage.digitalSignature'>digital signature</div>" + |
|
| 11 |
" <div v-if='certificate.usage.SSL'>SSL/TLS</div>" + |
|
| 12 |
"</td>"+ |
|
| 13 |
"<td class='align-middle'><button v-on:click='onCertificateDownload()'>Download certificate</button></td>"+ |
|
| 14 |
"<td class='align-middle'><button>Download chain of trust</button></td>"+ |
|
| 15 |
"<td class='align-middle'><button>Download chain root</button></td>"+ |
|
| 16 |
"</tr>", |
|
| 17 |
methods: {
|
|
| 18 |
onCertificateDownload: function () {
|
|
| 19 |
var id = this.certificate.id; |
|
| 20 |
axios.get("https://virtserver.swaggerhub.com/janpasek97/X509_management/1.0.0/api/certificates/" + id)
|
|
| 21 |
.then(function (response) {
|
|
| 22 |
if(response.data["success"]) {
|
|
| 23 |
download(id + ".crt", response.data["data"]) |
|
| 24 |
} |
|
| 25 |
else |
|
| 26 |
console.log("Error occurred while downloading the certificate") // TODO more action may be required
|
|
| 27 |
}) |
|
| 28 |
.catch(function (error) {
|
|
| 29 |
console.log(error); |
|
| 30 |
}); |
|
| 31 |
} |
|
| 32 |
} |
|
| 33 |
}); |
|
| static/js/index.js | ||
|---|---|---|
| 1 |
|
|
| 2 |
var certificateListingApp = new Vue({
|
|
| 3 |
el: "#certificateListingPage", |
|
| 4 |
data: {
|
|
| 5 |
certificates: [] |
|
| 6 |
} |
|
| 7 |
}); |
|
| 8 |
|
|
| 9 |
axios.get("https://virtserver.swaggerhub.com/janpasek97/X509_management/1.0.0/api/certificates")
|
|
| 10 |
.then(function (response) {
|
|
| 11 |
if (response.data["success"]) |
|
| 12 |
response.data["data"].forEach(item => certificateListingApp.certificates.push(item)) |
|
| 13 |
else |
|
| 14 |
console.log("Error occured while loading certificate list") // TODO more action may be required
|
|
| 15 |
}) |
|
| 16 |
.catch(function (error) {
|
|
| 17 |
console.log(error); |
|
| 18 |
}); |
|
| 19 |
|
|
| 20 |
function downloadCertificate(id) {
|
|
| 21 |
|
|
| 22 |
} |
|
Také k dispozici: Unified diff
Re #8475 - Certificate item component added