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'>{{ certificate.notBefore }}</td>"+
|
9
|
"<td class='align-middle'>{{ certificate.notAfter }}</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 v-if='certificate.issuer.id !== certificate.id' class='align-middle'><a :href='issuerURL' class='font-weight-bold'>{{ certificate.issuer.CN }}</a></td>"+
|
18
|
"<td v-if='certificate.issuer.id === certificate.id' class='align-middle'><a :href='issuerURL' class='font-weight-light'>self-signed</a></td>"+
|
19
|
"</tr>",
|
20
|
computed: {
|
21
|
certificateURL: function () {
|
22
|
return "/static/certificate.html?id=" + this.certificate.id;
|
23
|
},
|
24
|
issuerURL: function () {
|
25
|
return "/static/certificate.html?id=" + this.certificate.issuer.id;
|
26
|
}
|
27
|
},
|
28
|
methods: {
|
29
|
// Get the certificate PEM data from the server and downloads it to users computer
|
30
|
onCertificateDownload: function () {
|
31
|
var id = this.certificate.id;
|
32
|
axios.get(API_URL + "certificates/" + id)
|
33
|
.then(function (response) {
|
34
|
if(response.data["success"]) {
|
35
|
download(id + ".pem", response.data["data"])
|
36
|
}
|
37
|
else
|
38
|
console.log("Error occurred while downloading the certificate") // TODO more action may be required
|
39
|
})
|
40
|
.catch(function (error) {
|
41
|
console.log(error);
|
42
|
});
|
43
|
},
|
44
|
// Get the certificate's chain of trust in PEM format from the server and downloads it to users computer
|
45
|
onCertificateChainDownload: function () {
|
46
|
var id = this.certificate.id;
|
47
|
axios.get(API_URL + "certificates/" + id + "/chain")
|
48
|
.then(function (response) {
|
49
|
if(response.data["success"]) {
|
50
|
download(id + "_chain.pem", response.data["data"])
|
51
|
}
|
52
|
else
|
53
|
console.log("Error occurred while downloading the certificate's chain of trust") // TODO more action may be required
|
54
|
})
|
55
|
.catch(function (error) {
|
56
|
console.log(error);
|
57
|
});
|
58
|
},
|
59
|
// Get the certificate's root CA as PEM data from the server and downloads it to users computer
|
60
|
onCertificateRootDownload: function () {
|
61
|
var id = this.certificate.id;
|
62
|
axios.get(API_URL + "certificates/" + id + "/root")
|
63
|
.then(function (response) {
|
64
|
if(response.data["success"]) {
|
65
|
download(id + "_root.pem", response.data["data"])
|
66
|
}
|
67
|
else
|
68
|
console.log("Error occurred while downloading the certificate's root CA") // TODO more action may be required
|
69
|
})
|
70
|
.catch(function (error) {
|
71
|
console.log(error);
|
72
|
});
|
73
|
}
|
74
|
}
|
75
|
});
|
76
|
|
77
|
// Component representing an item in select of available CAs
|
78
|
Vue.component("ca-select-item", {
|
79
|
// Certificate authority to be represented by the option
|
80
|
props: ["ca"],
|
81
|
template: "<option v-bind:value='ca.id'>{{ ca.CN }}</option>"
|
82
|
});
|