|
1
|
|
|
2
|
// Component representing an instance in certificate listing
|
|
3
|
Vue.component("certificate-item",{
|
|
4
|
// certificate = certificate to be displayed by the list item
|
|
5
|
props: ["certificate"],
|
|
6
|
template: "<tr>"+
|
|
7
|
"<td class='align-middle'><a :href='certificateURL' class='font-weight-bold'>{{ certificate.CN }}</a></td>"+
|
|
8
|
"<td class='align-middle'>{{ formattedNotBefore }}</td>"+
|
|
9
|
"<td class='align-middle'>{{ formattedNotAfter }}</td>"+
|
|
10
|
"<td class='align-middle'>" +
|
|
11
|
" <div v-if='certificate.usage.CA'>CA</div>" +
|
|
12
|
" <div v-if='certificate.usage.authentication'>authentication</div>" +
|
|
13
|
" <div v-if='certificate.usage.digitalSignature'>digital signature</div>" +
|
|
14
|
" <div v-if='certificate.usage.SSL'>SSL/TLS</div>" +
|
|
15
|
"</td>"+
|
|
16
|
"<td class='align-middle'><button v-on:click='onCertificateDownload()'>Download certificate</button></td>"+
|
|
17
|
"<td class='align-middle'><button v-on:click='onChainOfTrustDownload()'>Download chain</button></td>"+
|
|
18
|
"<td class='align-middle'><button v-on:click='onRootDownload()'>Download root</button></td>"+
|
|
19
|
"<td class='align-middle'><button v-on:click='onPrivateKeyDownload()'>Download key</button></td>"+
|
|
20
|
"<td v-if='certificate.issuer.id !== certificate.id' class='align-middle'><a :href='issuerURL' class='font-weight-bold'>{{ certificate.issuer.CN }}</a></td>"+
|
|
21
|
"<td v-if='certificate.issuer.id === certificate.id' class='align-middle'><a :href='issuerURL' class='font-weight-light'>self-signed</a></td>"+
|
|
22
|
"</tr>",
|
|
23
|
computed: {
|
|
24
|
certificateURL: function () {
|
|
25
|
return "/static/certificate.html?id=" + this.certificate.id;
|
|
26
|
},
|
|
27
|
issuerURL: function () {
|
|
28
|
return "/static/certificate.html?id=" + this.certificate.issuer.id;
|
|
29
|
},
|
|
30
|
formattedNotAfter: function () {
|
|
31
|
return this.certificate.notAfter.substring(0, 16);
|
|
32
|
},
|
|
33
|
formattedNotBefore: function () {
|
|
34
|
return this.certificate.notBefore.substring(0, 16);
|
|
35
|
}
|
|
36
|
},
|
|
37
|
methods: {
|
|
38
|
// Get the certificate PEM data from the server and downloads it to users computer
|
|
39
|
onCertificateDownload: function () {
|
|
40
|
onCertificateDownload(this.certificate.id);
|
|
41
|
},
|
|
42
|
onPrivateKeyDownload: function () {
|
|
43
|
onPrivateKeyDownload(this.certificate.id);
|
|
44
|
},
|
|
45
|
onChainOfTrustDownload: function () {
|
|
46
|
onCertificateChainDownload(this.certificate.id);
|
|
47
|
},
|
|
48
|
onRootDownload: function () {
|
|
49
|
onCertificateRootDownload(this.certificate.id);
|
|
50
|
},
|
|
51
|
}
|
|
52
|
});
|
|
53
|
|
|
54
|
// Component representing an item in select of available CAs
|
|
55
|
Vue.component("ca-select-item", {
|
|
56
|
// Certificate authority to be represented by the option
|
|
57
|
props: ["ca"],
|
|
58
|
template: "<option v-bind:value='ca.id'>{{ ca.CN }}</option>"
|
|
59
|
});
|
|
60
|
|
|
61
|
// Component representing a certificate issued by displayed CA
|
|
62
|
Vue.component("issued-by-list-item", {
|
|
63
|
props: ["certificate"],
|
|
64
|
template: "<tr class='align-middle text-center'>"+
|
|
65
|
"<td class='align-middle'><a :href='certificateURL' class='font-weight-bold'>{{ certificate.CN }}</a></td>"+
|
|
66
|
"<td class='align-middle'>" +
|
|
67
|
" <div v-if='certificate.usage.CA'>CA</div>" +
|
|
68
|
" <div v-if='certificate.usage.authentication'>authentication</div>" +
|
|
69
|
" <div v-if='certificate.usage.digitalSignature'>digital signature</div>" +
|
|
70
|
" <div v-if='certificate.usage.SSL'>SSL/TLS</div>" +
|
|
71
|
"</td>"+
|
|
72
|
"</tr>",
|
|
73
|
computed: {
|
|
74
|
certificateURL: function () {
|
|
75
|
return "/static/certificate.html?id=" + this.certificate.id;
|
|
76
|
}
|
|
77
|
}
|
|
78
|
});
|