Revize a13b1c2d
Přidáno uživatelem Jan Pašek před téměř 4 roky(ů)
| static/index.html | ||
|---|---|---|
| 33 | 33 |
<div class="form-group mb-0"> |
| 34 | 34 |
<h5>Usage:</h5> |
| 35 | 35 |
<div class="form-check ml-4"> |
| 36 |
<input class="form-check-input" type="checkbox" id="usageCA"> |
|
| 36 |
<input class="form-check-input" type="checkbox" id="usageCA" v-model="filtering.usage.CA">
|
|
| 37 | 37 |
<label class="form-check-label" for="usageCA"> |
| 38 | 38 |
CA |
| 39 | 39 |
</label> |
| 40 | 40 |
</div> |
| 41 | 41 |
<div class="form-check ml-4"> |
| 42 |
<input class="form-check-input" type="checkbox" id="usageSignature"> |
|
| 42 |
<input class="form-check-input" type="checkbox" id="usageSignature" v-model="filtering.usage.digitalSignature">
|
|
| 43 | 43 |
<label class="form-check-label" for="usageSignature"> |
| 44 | 44 |
Digital signature |
| 45 | 45 |
</label> |
| 46 | 46 |
</div> |
| 47 | 47 |
<div class="form-check ml-4"> |
| 48 |
<input class="form-check-input" type="checkbox" id="usageAuth"> |
|
| 48 |
<input class="form-check-input" type="checkbox" id="usageAuth" v-model="filtering.usage.authentication">
|
|
| 49 | 49 |
<label class="form-check-label" for="usageAuth"> |
| 50 | 50 |
Authentication |
| 51 | 51 |
</label> |
| 52 | 52 |
</div> |
| 53 | 53 |
<div class="form-check ml-4"> |
| 54 |
<input class="form-check-input" type="checkbox" id="usageSSL"> |
|
| 54 |
<input class="form-check-input" type="checkbox" id="usageSSL" v-model="filtering.usage.SSL">
|
|
| 55 | 55 |
<label class="form-check-label" for="usageSSL"> |
| 56 | 56 |
SSL/TLS |
| 57 | 57 |
</label> |
| ... | ... | |
| 62 | 62 |
<div class="form-group mb-0"> |
| 63 | 63 |
<h5>Type:</h5> |
| 64 | 64 |
<div class="form-check ml-4"> |
| 65 |
<input class="form-check-input" type="checkbox" id="rootCA"> |
|
| 65 |
<input class="form-check-input" type="checkbox" id="rootCA" v-model="filtering.type.RootCA">
|
|
| 66 | 66 |
<label class="form-check-label" for="rootCA"> |
| 67 | 67 |
Root CA |
| 68 | 68 |
</label> |
| 69 | 69 |
</div> |
| 70 | 70 |
<div class="form-check ml-4"> |
| 71 |
<input class="form-check-input" type="checkbox" id="intermediateCA"> |
|
| 71 |
<input class="form-check-input" type="checkbox" id="intermediateCA" v-model="filtering.type.IntermediateCA">
|
|
| 72 | 72 |
<label class="form-check-label" for="intermediateCA"> |
| 73 | 73 |
Intermediate CA |
| 74 | 74 |
</label> |
| 75 | 75 |
</div> |
| 76 | 76 |
<div class="form-check ml-4"> |
| 77 |
<input class="form-check-input" type="checkbox" id="endCertificate"> |
|
| 77 |
<input class="form-check-input" type="checkbox" id="endCertificate" v-model="filtering.type.EndCertificate">
|
|
| 78 | 78 |
<label class="form-check-label" for="endCertificate"> |
| 79 | 79 |
End certificate |
| 80 | 80 |
</label> |
| ... | ... | |
| 85 | 85 |
<div class="form-group mb-0"> |
| 86 | 86 |
<h5>Common name:</h5> |
| 87 | 87 |
<div> |
| 88 |
<input class="form-control" type="text" id="commonName" placeholder="Enter common name"> |
|
| 88 |
<input class="form-control" type="text" id="commonName" placeholder="Enter common name" v-model="filtering.CN">
|
|
| 89 | 89 |
</div> |
| 90 | 90 |
</div> |
| 91 | 91 |
</div> |
| 92 | 92 |
<div class="col-3"> |
| 93 |
<button class="btn btn-primary">Apply filters</button> |
|
| 93 |
<button class="btn btn-primary mb-2" style="width: 115px;" v-on:click="reloadData">Apply filters</button> |
|
| 94 |
<button class="btn btn-secondary mb-2" style="width: 115px;" v-on:click="clearFilters">Clear filters</button> |
|
| 94 | 95 |
</div> |
| 95 | 96 |
</div> |
| 96 | 97 |
</div> |
| static/js/index.js | ||
|---|---|---|
| 5 | 5 |
var certificateListingApp = new Vue({
|
| 6 | 6 |
el: "#certificateListingPage", |
| 7 | 7 |
data: {
|
| 8 |
certificatesPerPage: 2, |
|
| 8 |
certificatesPerPage: 20,
|
|
| 9 | 9 |
hasNextPage: false, |
| 10 | 10 |
hasPreviousPage: false, |
| 11 | 11 |
currentPage: 1, |
| 12 | 12 |
loading: true, |
| 13 | 13 |
// list of all certificates to be displayed in the list |
| 14 | 14 |
certificates: [], |
| 15 |
successMessage: '' |
|
| 15 |
successMessage: '', |
|
| 16 |
filtering: {
|
|
| 17 |
type: {
|
|
| 18 |
RootCA: false, |
|
| 19 |
IntermediateCA: false, |
|
| 20 |
EndCertificate: false, |
|
| 21 |
}, |
|
| 22 |
usage: {
|
|
| 23 |
CA: false, |
|
| 24 |
authentication: false, |
|
| 25 |
digitalSignature: false, |
|
| 26 |
SSL: false, |
|
| 27 |
}, |
|
| 28 |
CN: "", |
|
| 29 |
} |
|
| 16 | 30 |
}, |
| 17 | 31 |
methods: {
|
| 18 | 32 |
onNextPage: async function () {
|
| 19 | 33 |
this.currentPage++; |
| 20 | 34 |
await this.loadPage(this.currentPage, this.certificatesPerPage); |
| 21 | 35 |
}, |
| 36 |
reloadData: async function() {
|
|
| 37 |
await this.loadPage(this.currentPage, this.certificatesPerPage); |
|
| 38 |
}, |
|
| 22 | 39 |
onPreviousPage: async function () {
|
| 23 | 40 |
this.currentPage--; |
| 24 | 41 |
await this.loadPage(this.currentPage, this.certificatesPerPage); |
| ... | ... | |
| 26 | 43 |
loadPage: async function (page, perPage) {
|
| 27 | 44 |
// download a list of all available certificates and display them in the table |
| 28 | 45 |
try {
|
| 46 |
var params = {
|
|
| 47 |
page: page - 1, |
|
| 48 |
per_page: perPage |
|
| 49 |
}; |
|
| 50 |
var filtering = this.getFilterParameter(); |
|
| 51 |
if (filtering != null) params.filtering = filtering; |
|
| 29 | 52 |
const response = await axios.get(API_URL + "certificates", {
|
| 30 |
params: {
|
|
| 31 |
page: page - 1, |
|
| 32 |
per_page: perPage |
|
| 33 |
} |
|
| 53 |
params: params |
|
| 34 | 54 |
}); |
| 35 | 55 |
if (response.data["success"]) {
|
| 36 | 56 |
this.certificates = []; |
| ... | ... | |
| 42 | 62 |
console.log(error); |
| 43 | 63 |
} |
| 44 | 64 |
}, |
| 65 |
getFilterParameter: function () {
|
|
| 66 |
var type = []; |
|
| 67 |
if (this.filtering.type.EndCertificate) type.push("end");
|
|
| 68 |
if (this.filtering.type.RootCA) type.push("root");
|
|
| 69 |
if (this.filtering.type.IntermediateCA) type.push("inter");
|
|
| 70 |
|
|
| 71 |
var usage = []; |
|
| 72 |
if (this.filtering.usage.CA) usage.push("CA");
|
|
| 73 |
if (this.filtering.usage.SSL) usage.push("SSL");
|
|
| 74 |
if (this.filtering.usage.digitalSignature) usage.push("digitalSignature");
|
|
| 75 |
if (this.filtering.usage.authentication) usage.push("authentication");
|
|
| 76 |
|
|
| 77 |
var filtering = {};
|
|
| 78 |
if (usage.length > 0) filtering.usage = usage; |
|
| 79 |
if (type.length > 0) filtering.type = type; |
|
| 80 |
|
|
| 81 |
if (this.filtering.CN.length > 0) filtering.CN = this.filtering.CN; |
|
| 82 |
|
|
| 83 |
if (this.filtering.hasOwnProperty("type") ||
|
|
| 84 |
this.filtering.hasOwnProperty("usage") ||
|
|
| 85 |
this.filtering.hasOwnProperty("CN"))
|
|
| 86 |
return filtering; |
|
| 87 |
else |
|
| 88 |
return null; |
|
| 89 |
}, |
|
| 90 |
clearFilters: async function () {
|
|
| 91 |
this.filtering = {
|
|
| 92 |
type: {
|
|
| 93 |
RootCA: false, |
|
| 94 |
IntermediateCA: false, |
|
| 95 |
EndCertificate: false, |
|
| 96 |
}, |
|
| 97 |
usage: {
|
|
| 98 |
CA: false, |
|
| 99 |
authentication: false, |
|
| 100 |
digitalSignature: false, |
|
| 101 |
SSL: false, |
|
| 102 |
}, |
|
| 103 |
CN: "", |
|
| 104 |
} |
|
| 105 |
await this.reloadData(); |
|
| 106 |
}, |
|
| 45 | 107 |
checkIfNextPage: async function(page, perPage) {
|
| 46 | 108 |
try {
|
| 47 | 109 |
const response = await axios.get(API_URL + "certificates", {
|
Také k dispozici: Unified diff
Re #8706 - Certificate list filtering