Projekt

Obecné

Profil

« Předchozí | Další » 

Revize 376e6be2

Přidáno uživatelem Jan Pašek před téměř 4 roky(ů)

Re #8701 - Improved created certificate page and empty list display

Zobrazit rozdíly:

static/index.html
16 16
                     :is-full-page="true"></loading>
17 17
        </div>
18 18
        <div v-if="!loading" v-cloak class="card h-100">
19
            <div class="card-body">
20
                <div>
21
                    <h1 class="d-inline-block">Certificate Listing</h1>
22
                </div>
23
                <div class="alert alert-success" v-if="successMessage !== ''" role="alert" v-cloak>
24
                    {{ successMessage }}
25
                </div>
26
                <div class="mt-2 mb-2">
27
                    <a class="btn btn-success mb-3 text-center" href="/static/create_certificate.html"><b>+</b></a>
28
                    <button v-on:click="toggleFilters" v-if="!displayFilters" class="btn btn-outline-primary ml-4 mb-3" data-toggle="collapse" data-target="#filteringCollapse">Show filtering</button>
29
                    <button v-on:click="toggleFilters" v-if="displayFilters" class="btn btn-outline-primary ml-4 mb-3" data-toggle="collapse" data-target="#filteringCollapse">Hide filtering</button>
30
                    <div class="collapse mt-2" id="filteringCollapse">
31
                        <div class="card card-body filtering-box">
32
                            <div class="container">
33
                                <div class="row align-items-center">
34
                                    <div class="col-3">
35
                                        <div class="form-group mb-0">
36
                                            <h5>Usage:</h5>
37
                                            <div class="form-check ml-4">
38
                                                <input class="form-check-input" type="checkbox" id="usageCA" v-model="filtering.usage.CA">
39
                                                <label class="form-check-label" for="usageCA">
40
                                                    CA
41
                                                </label>
42
                                            </div>
43
                                            <div class="form-check ml-4">
44
                                                <input class="form-check-input" type="checkbox" id="usageSignature" v-model="filtering.usage.digitalSignature">
45
                                                <label class="form-check-label" for="usageSignature">
46
                                                    Digital signature
47
                                                </label>
48
                                            </div>
49
                                            <div class="form-check ml-4">
50
                                                <input class="form-check-input" type="checkbox" id="usageAuth" v-model="filtering.usage.authentication">
51
                                                <label class="form-check-label" for="usageAuth">
52
                                                    Authentication
53
                                                </label>
54
                                            </div>
55
                                            <div class="form-check ml-4">
56
                                                <input class="form-check-input" type="checkbox" id="usageSSL" v-model="filtering.usage.SSL">
57
                                                <label class="form-check-label" for="usageSSL">
58
                                                    SSL/TLS
59
                                                </label>
19
            <div class="card">
20
                <div class="card-body">
21
                    <div>
22
                        <h1 class="d-inline-block">Certificate Listing</h1>
23
                    </div>
24
                    <div class="alert alert-success" v-if="successMessage !== ''" role="alert" v-cloak>
25
                        {{ successMessage }}
26
                    </div>
27
                    <div class="mt-2 mb-2">
28
                        <a class="btn btn-success mb-3 text-center" href="/static/create_certificate.html"><b>+</b></a>
29
                        <button v-on:click="toggleFilters" v-if="!displayFilters" class="btn btn-outline-primary ml-4 mb-3" data-toggle="collapse" data-target="#filteringCollapse">Show filtering</button>
30
                        <button v-on:click="toggleFilters" v-if="displayFilters" class="btn btn-outline-primary ml-4 mb-3" data-toggle="collapse" data-target="#filteringCollapse">Hide filtering</button>
31
                        <div class="collapse mt-2" id="filteringCollapse">
32
                            <div class="card card-body filtering-box">
33
                                <div class="container">
34
                                    <div class="row align-items-center">
35
                                        <div class="col-3">
36
                                            <div class="form-group mb-0">
37
                                                <h5>Usage:</h5>
38
                                                <div class="form-check ml-4">
39
                                                    <input class="form-check-input" type="checkbox" id="usageCA" v-model="filtering.usage.CA">
40
                                                    <label class="form-check-label" for="usageCA">
41
                                                        CA
42
                                                    </label>
43
                                                </div>
44
                                                <div class="form-check ml-4">
45
                                                    <input class="form-check-input" type="checkbox" id="usageSignature" v-model="filtering.usage.digitalSignature">
46
                                                    <label class="form-check-label" for="usageSignature">
47
                                                        Digital signature
48
                                                    </label>
49
                                                </div>
50
                                                <div class="form-check ml-4">
51
                                                    <input class="form-check-input" type="checkbox" id="usageAuth" v-model="filtering.usage.authentication">
52
                                                    <label class="form-check-label" for="usageAuth">
53
                                                        Authentication
54
                                                    </label>
55
                                                </div>
56
                                                <div class="form-check ml-4">
57
                                                    <input class="form-check-input" type="checkbox" id="usageSSL" v-model="filtering.usage.SSL">
58
                                                    <label class="form-check-label" for="usageSSL">
59
                                                        SSL/TLS
60
                                                    </label>
61
                                                </div>
60 62
                                            </div>
61 63
                                        </div>
62
                                    </div>
63
                                    <div class="col-3">
64
                                        <div class="form-group mb-0">
65
                                            <h5>Type:</h5>
66
                                            <div class="form-check ml-4">
67
                                                <input class="form-check-input" type="checkbox" id="rootCA" v-model="filtering.type.RootCA">
68
                                                <label class="form-check-label" for="rootCA">
69
                                                    Root CA
70
                                                </label>
71
                                            </div>
72
                                            <div class="form-check ml-4">
73
                                                <input class="form-check-input" type="checkbox" id="intermediateCA" v-model="filtering.type.IntermediateCA">
74
                                                <label class="form-check-label" for="intermediateCA">
75
                                                    Intermediate CA
76
                                                </label>
77
                                            </div>
78
                                            <div class="form-check ml-4">
79
                                                <input class="form-check-input" type="checkbox" id="endCertificate" v-model="filtering.type.EndCertificate">
80
                                                <label class="form-check-label" for="endCertificate">
81
                                                    End certificate
82
                                                </label>
64
                                        <div class="col-3">
65
                                            <div class="form-group mb-0">
66
                                                <h5>Type:</h5>
67
                                                <div class="form-check ml-4">
68
                                                    <input class="form-check-input" type="checkbox" id="rootCA" v-model="filtering.type.RootCA">
69
                                                    <label class="form-check-label" for="rootCA">
70
                                                        Root CA
71
                                                    </label>
72
                                                </div>
73
                                                <div class="form-check ml-4">
74
                                                    <input class="form-check-input" type="checkbox" id="intermediateCA" v-model="filtering.type.IntermediateCA">
75
                                                    <label class="form-check-label" for="intermediateCA">
76
                                                        Intermediate CA
77
                                                    </label>
78
                                                </div>
79
                                                <div class="form-check ml-4">
80
                                                    <input class="form-check-input" type="checkbox" id="endCertificate" v-model="filtering.type.EndCertificate">
81
                                                    <label class="form-check-label" for="endCertificate">
82
                                                        End certificate
83
                                                    </label>
84
                                                </div>
83 85
                                            </div>
84 86
                                        </div>
85
                                    </div>
86
                                    <div class="col-3">
87
                                        <div class="form-group mb-0">
88
                                            <h5>Common name:</h5>
89
                                            <div>
90
                                                <input class="form-control" type="text" id="commonName" placeholder="Enter common name"  v-model="filtering.CN">
87
                                        <div class="col-3">
88
                                            <div class="form-group mb-0">
89
                                                <h5>Common name:</h5>
90
                                                <div>
91
                                                    <input class="form-control" type="text" id="commonName" placeholder="Enter common name"  v-model="filtering.CN">
92
                                                </div>
91 93
                                            </div>
92 94
                                        </div>
93
                                    </div>
94
                                    <div class="col-3">
95
                                        <button class="btn btn-primary mb-2" style="width: 115px;" v-on:click="reloadData">Apply filters</button>
96
                                        <button class="btn btn-secondary mb-2" style="width: 115px;" v-on:click="clearFilters">Clear filters</button>
95
                                        <div class="col-3">
96
                                            <button class="btn btn-primary mb-2" style="width: 115px;" v-on:click="reloadData">Apply filters</button>
97
                                            <button class="btn btn-secondary mb-2" style="width: 115px;" v-on:click="clearFilters">Clear filters</button>
98
                                        </div>
97 99
                                    </div>
98 100
                                </div>
99 101
                            </div>
100 102
                        </div>
101 103
                    </div>
102
                </div>
103
                <table class="table table-striped table-hover text-center">
104
                    <thead class="thead-dark">
105
                        <tr>
106
                            <th class="align-middle" scope="col" rowspan="2">Common name</th>
107
                            <th class="align-middle" scope="col" colspan="2">Validity</th>
108
                            <th class="align-middle" scope="col" rowspan="2">Usage</th>
109
                            <th class="align-middle" scope="col" rowspan="2">Certificate</th>
110
                            <th class="align-middle" scope="col" rowspan="2">Chain of trust</th>
111
                            <th class="align-middle" scope="col" rowspan="2">Root</th>
112
                            <th class="align-middle" scope="col" rowspan="2">Private key</th>
113
                            <th class="align-middle" scope="col" rowspan="2">Issuer</th>
114
                        </tr>
115
                        <tr>
116
                            <th scope="col">Start</th>
117
                            <th scope="col">End</th>
118
                        </tr>
119
                    </thead>
120
                    <tbody>
121
                        <tr is="certificate-item"
122
                            v-for="certificate in certificates"
123
                            v-bind:certificate="certificate"
124
                            v-bind:key="certificate.id">
125
                        </tr>
126
                    </tbody>
127
                </table>
128
                <div v-if="hasNextPage || hasPreviousPage">
129
                  <ul class="pagination justify-content-center">
130
                        <li class="page-item" v-bind:class="{disabled: !hasPreviousPage}">
131
                            <button v-on:click="onPreviousPage" class="page-link"><<</button>
132
                        </li>
133
                        <li class="page-item"><button class="page-link">{{ currentPage }}</button></li>
134
                        <li class="page-item" v-bind:class="{disabled: !hasNextPage}">
135
                            <button v-on:click="onNextPage" class="page-link">>></button>
136
                        </li>
137
                  </ul>
104
                    <table class="table table-striped table-hover text-center">
105
                        <thead class="thead-dark">
106
                            <tr>
107
                                <th class="align-middle" scope="col" rowspan="2">Common name</th>
108
                                <th class="align-middle" scope="col" colspan="2">Validity</th>
109
                                <th class="align-middle" scope="col" rowspan="2">Usage</th>
110
                                <th class="align-middle" scope="col" rowspan="2">Certificate</th>
111
                                <th class="align-middle" scope="col" rowspan="2">Chain of trust</th>
112
                                <th class="align-middle" scope="col" rowspan="2">Root</th>
113
                                <th class="align-middle" scope="col" rowspan="2">Private key</th>
114
                                <th class="align-middle" scope="col" rowspan="2">Issuer</th>
115
                            </tr>
116
                            <tr>
117
                                <th scope="col">Start</th>
118
                                <th scope="col">End</th>
119
                            </tr>
120
                        </thead>
121
                        <tbody>
122
                            <tr v-show="certificates.length == 0">
123
                                <td colspan="9">No certificate found</td>
124
                            </tr>
125
                            <tr is="certificate-item"
126
                                v-for="certificate in certificates"
127
                                v-bind:certificate="certificate"
128
                                v-bind:key="certificate.id">
129
                            </tr>
130
                        </tbody>
131
                    </table>
132
                    <div v-if="hasNextPage || hasPreviousPage">
133
                      <ul class="pagination justify-content-center">
134
                            <li class="page-item" v-bind:class="{disabled: !hasPreviousPage}">
135
                                <button v-on:click="onPreviousPage" class="page-link"><<</button>
136
                            </li>
137
                            <li class="page-item"><button class="page-link">{{ currentPage }}</button></li>
138
                            <li class="page-item" v-bind:class="{disabled: !hasNextPage}">
139
                                <button v-on:click="onNextPage" class="page-link">>></button>
140
                            </li>
141
                      </ul>
142
                    </div>
138 143
                </div>
139 144
            </div>
140 145
        </div>

Také k dispozici: Unified diff