Projekt

Obecné

Profil

« Předchozí | Další » 

Revize 5885e489

Přidáno uživatelem Jan Pašek před asi 4 roky(ů)

Re #8583 - Loading screen and error reaction in certificate.html

Zobrazit rozdíly:

static/certificate.html
4 4 
    <meta charset="UTF-8">
5 5 
    <title>X.509 Certificate Management</title>
6 6 
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
7 
    <link href="https://cdn.jsdelivr.net/npm/vue-loading-overlay@3/dist/vue-loading.css" rel="stylesheet">
7 8 
    <link rel="stylesheet" href="/static/css/app.css">
8 9 
</head>
9 10 
<body class="p-4">
10 11 
    <div id="certificate-detailed-view-content" class="p-4">
11 
        <div class="row">
12 
            <a href="/static/index.html"><div class="caret-left font-weight-bold ml-2 mb-2">Home</div></a>
12 
        <div v-if="loading">
13 
            <loading :active.sync="loading"
14 
                     :can-cancel="false"
15 
                      loader="dots"
16 
                     :is-full-page="true"></loading>
13 17 
        </div>
14 
        <h1 class="mb-5 text-center">Certificate Detailed View</h1>
15 
        <div class="alert alert-success" v-if="successMessage !== ''" role="alert" v-cloak>
16 
            {{ successMessage }}
17 
        </div>
18 
        <div v-if="errorMessage !== ''" class="alert alert-danger" v-cloak role="alert">
19 
            {{ errorMessage }}
18 
        <div id="404_page" v-if="!loading && error" align="center" v-cloak>
19 
            <div class="fof">
20 
                    <h1>Error 404</h1>
21 
            </div>
22 
            <a href="/" class="caret-left">Home</a>
20 23 
        </div>
21 
        <div class="row">
22 
            <div class="col-xl-6">
23 
                <table class="ml-auto mr-auto mb-4">
24 
                    <tr>
25 
                        <div class="form-group">
26 
                            <td><label for="validity_start">Validity start:</label></td>
27 
                            <td class="pl-3">
28 
                                <input :value="startDate" type="text" id="validity_start" name="validity_start" class="form-control" disabled>
29 
                            </td>
30 
                        </div>
31 
                    </tr>
32 
                    <tr>
33 
                        <div class="form-group">
34 
                            <td><label for="validity_end">Validity end:</label></td>
35 
                            <td class="pl-3">
36 
                                <input :value="endDate" type="text" id="validity_end" name="validity_end" class="form-control" disabled>
37 
                            </td>
38 
                        </div>
39 
                    </tr>
40 
                    <tr>
41 
                        <td colspan="2"><h5>Subject</h5></td>
42 
                    </tr>
43 
                    <tr>
44 
                        <div class="form-group">
45 
                            <td><label for="subject_C">Country Code:</label></td>
46 
                            <td class="pl-3">
47 
                                <input :value="certificate.subject.C" type="text" id="subject_C" name="subject_C" class="form-control" disabled>
48 
                            </td>
49 
                        </div>
50 
                    </tr>
51 
                    <tr>
52 
                        <div class="form-group">
53 
                            <td><label for="subject_ST">Province/State:</label></td>
54 
                            <td class="pl-3">
55 
                                <input :value="certificate.subject.ST" type="text" id="subject_ST" name="subject_ST" class="form-control" disabled>
56 
                            </td>
57 
                        </div>
58 
                    </tr>
59 
                    <tr>
60 
                        <div class="form-group">
61 
                            <td><label for="subject_L">Locality:</label></td>
62 
                            <td class="pl-3">
63 
                                <input :value="certificate.subject.L" type="text" id="subject_L" name="subject_L" class="form-control" disabled>
64 
                            </td>
65 
                        </div>
66 
                    </tr>
67 
                    <tr>
68 
                        <div class="form-group">
69 
                            <td><label for="subject_CN">Common Name:</label></td>
70 
                            <td class="pl-3">
71 
                                <input :value="certificate.subject.CN" type="text" id="subject_CN" name="subject_CN" class="form-control" disabled>
72 
                            </td>
73 
                        </div>
74 
                    </tr>
75 
                    <tr>
76 
                        <div class="form-group">
77 
                            <td><label for="subject_O">Organization:</label></td>
78 
                            <td class="pl-3">
79 
                                <input :value="certificate.subject.O" type="text" id="subject_O" name="subject_O" class="form-control" disabled>
80 
                            </td>
81 
                        </div>
82 
                    </tr>
83 
                    <tr>
84 
                        <div class="form-group">
85 
                            <td><label for="subject_OU">Organization Unit:</label></td>
86 
                            <td class="pl-3">
87 
                                <input :value="certificate.subject.OU" type="text" id="subject_OU" name="subject_OU" class="form-control" disabled>
88 
                            </td>
89 
                        </div>
90 
                    </tr>
91 
                    <tr>
92 
                        <div class="form-group">
93 
                            <td><label for="subject_emailAddress">Email Address:</label></td>
94 
                            <td class="pl-3">
95 
                                <input :value="certificate.subject.emailAddress" type="text" id="subject_emailAddress" name="subject_emailAddress" class="form-control" disabled>
96 
                            </td>
97 
                        </div>
98 
                    </tr>
99 
                    <tr>
100 
                        <td>Usage:</td>
101 
                        <td class="form-check">
102 
                            <input class="form-check-input" v-model="certificate.usage.CA" type="checkbox" id="isCA" name="isCA" value="CA" disabled>
103 
                            <label class="form-check-label" for="isCA">CA</label><br>
24 
        <div v-if="!loading && !error" v-cloak>
25 
            <div class="row">
26 
                <a href="/static/index.html"><div class="caret-left font-weight-bold ml-2 mb-2">Home</div></a>
27 
            </div>
28 
            <h1 class="mb-5 text-center">Certificate Detailed View</h1>
29 
            <div class="alert alert-success" v-if="successMessage !== ''" role="alert" v-cloak>
30 
                {{ successMessage }}
31 
            </div>
32 
            <div v-if="errorMessage !== ''" class="alert alert-danger" v-cloak role="alert">
33 
                {{ errorMessage }}
34 
            </div>
35 
            <div class="row">
36 
                <div class="col-xl-6">
37 
                    <table class="ml-auto mr-auto mb-4">
38 
                        <tr>
39 
                            <div class="form-group">
40 
                                <td><label for="validity_start">Validity start:</label></td>
41 
                                <td class="pl-3">
42 
                                    <input :value="startDate" type="text" id="validity_start" name="validity_start" class="form-control" disabled>
43 
                                </td>
44 
                            </div>
45 
                        </tr>
46 
                        <tr>
47 
                            <div class="form-group">
48 
                                <td><label for="validity_end">Validity end:</label></td>
49 
                                <td class="pl-3">
50 
                                    <input :value="endDate" type="text" id="validity_end" name="validity_end" class="form-control" disabled>
51 
                                </td>
52 
                            </div>
53 
                        </tr>
54 
                        <tr>
55 
                            <td colspan="2"><h5>Subject</h5></td>
56 
                        </tr>
57 
                        <tr>
58 
                            <div class="form-group">
59 
                                <td><label for="subject_C">Country Code:</label></td>
60 
                                <td class="pl-3">
61 
                                    <input :value="certificate.subject.C" type="text" id="subject_C" name="subject_C" class="form-control" disabled>
62 
                                </td>
63 
                            </div>
64 
                        </tr>
65 
                        <tr>
66 
                            <div class="form-group">
67 
                                <td><label for="subject_ST">Province/State:</label></td>
68 
                                <td class="pl-3">
69 
                                    <input :value="certificate.subject.ST" type="text" id="subject_ST" name="subject_ST" class="form-control" disabled>
70 
                                </td>
71 
                            </div>
72 
                        </tr>
73 
                        <tr>
74 
                            <div class="form-group">
75 
                                <td><label for="subject_L">Locality:</label></td>
76 
                                <td class="pl-3">
77 
                                    <input :value="certificate.subject.L" type="text" id="subject_L" name="subject_L" class="form-control" disabled>
78 
                                </td>
79 
                            </div>
80 
                        </tr>
81 
                        <tr>
82 
                            <div class="form-group">
83 
                                <td><label for="subject_CN">Common Name:</label></td>
84 
                                <td class="pl-3">
85 
                                    <input :value="certificate.subject.CN" type="text" id="subject_CN" name="subject_CN" class="form-control" disabled>
86 
                                </td>
87 
                            </div>
88 
                        </tr>
89 
                        <tr>
90 
                            <div class="form-group">
91 
                                <td><label for="subject_O">Organization:</label></td>
92 
                                <td class="pl-3">
93 
                                    <input :value="certificate.subject.O" type="text" id="subject_O" name="subject_O" class="form-control" disabled>
94 
                                </td>
95 
                            </div>
96 
                        </tr>
97 
                        <tr>
98 
                            <div class="form-group">
99 
                                <td><label for="subject_OU">Organization Unit:</label></td>
100 
                                <td class="pl-3">
101 
                                    <input :value="certificate.subject.OU" type="text" id="subject_OU" name="subject_OU" class="form-control" disabled>
102 
                                </td>
103 
                            </div>
104 
                        </tr>
105 
                        <tr>
106 
                            <div class="form-group">
107 
                                <td><label for="subject_emailAddress">Email Address:</label></td>
108 
                                <td class="pl-3">
109 
                                    <input :value="certificate.subject.emailAddress" type="text" id="subject_emailAddress" name="subject_emailAddress" class="form-control" disabled>
110 
                                </td>
111 
                            </div>
112 
                        </tr>
113 
                        <tr>
114 
                            <td>Usage:</td>
115 
                            <td class="form-check">
116 
                                <input class="form-check-input" v-model="certificate.usage.CA" type="checkbox" id="isCA" name="isCA" value="CA" disabled>
117 
                                <label class="form-check-label" for="isCA">CA</label><br>
104 118 

  		




  105
  
  
    
                            <input class="form-check-input" v-model="certificate.usage.digitalSignature" type="checkbox" id="isDigitalSignature" name="isDigitalSignature" value="DigitalSignature" disabled>


  		




  106
  
  
    
                            <label class="form-check-label" for="isDigitalSignature">Digital Signature</label><br>


  		




  
  119
  
    
                                <input class="form-check-input" v-model="certificate.usage.digitalSignature" type="checkbox" id="isDigitalSignature" name="isDigitalSignature" value="DigitalSignature" disabled>


  		




  
  120
  
    
                                <label class="form-check-label" for="isDigitalSignature">Digital Signature</label><br>


  		




  107
  121
  
    

  		




  108
  
  
    
                            <input class="form-check-input" v-model="certificate.usage.authentication" type="checkbox" id="isAuthentication" name="isAuthentication" value="Authentication" disabled>


  		




  109
  
  
    
                            <label class="form-check-label" for="isAuthentication">Authentication</label><br>


  		




  
  122
  
    
                                <input class="form-check-input" v-model="certificate.usage.authentication" type="checkbox" id="isAuthentication" name="isAuthentication" value="Authentication" disabled>


  		




  
  123
  
    
                                <label class="form-check-label" for="isAuthentication">Authentication</label><br>


  		




  110
  124
  
    

  		




  111
  
  
    
                            <input class="form-check-input" v-model="certificate.usage.SSL" type="checkbox" id="isSSL_TLS" name="isSSL_TLS" value="SSL_TLS" disabled>


  		




  112
  
  
    
                            <label class="form-check-label" for="isSSL_TLS">SSL/TLS</label><br>


  		




  113
  
  
    
                        </td>


  		




  114
  
  
    
                    </tr>


  		




  115
  
  
    
                </table>


  		




  116
  
  
    
            </div>


  		




  117
  
  
    
            <div class="col-xl-5">


  		




  118
  
  
    
                <div class="row table-responsive">


  		




  119
  
  
    
                    <table class="table table-striped">


  		




  120
  
  
    
                        <thead class="thead-dark">


  		




  121
  
  
    
                            <tr>


  		




  122
  
  
    
                                <th colspan="4" class="text-center">Manage certificate</th>


  		




  123
  
  
    
                            </tr>


  		




  124
  
  
    
                        </thead>


  		




  125
  
  
    
                        <tbody>


  		




  126
  
  
    
                            <tr class="d-flex">


  		




  127
  
  
    
                                <td style="width: 30%" class="font-weight-bold">Certificate download:</td>


  		




  128
  
  
    
                                <td><a v-on:click="onCertificateDownload()" class="btn btn-primary btn-sm certificate-control" href="">Certificate</a></td>


  		




  129
  
  
    
                                <td><a v-on:click="onChainDownload()" class="btn btn-primary btn-sm certificate-control" href="">Chain of trust</a></td>


  		




  130
  
  
    
                                <td><a v-on:click="onRootDownload()" class="btn btn-primary btn-sm certificate-control" href="">Root</a></td>


  		




  131
  
  
    
                            </tr>


  		




  132
  
  
    
                            <tr class="d-flex">


  		




  133
  
  
    
                                <td style="width: 30%" class="font-weight-bold">Key download:</td>


  		




  134
  
  
    
                                <td><a v-on:click="onPublicKeyDownload()" class="btn btn-success btn-sm certificate-control" href="">Public key</a></td>


  		




  135
  
  
    
                                <td><a v-on:click="onPrivateKeyDownload()" class="btn btn-success btn-sm certificate-control" href="">Private key</a></td>


  		




  136
  
  
    
                                <td> </td>


  		




  137
  
  
    
                            </tr>


  		




  138
  
  
    
                            <tr class="d-flex">


  		




  139
  
  
    
                                <td style="width: 30%" class="font-weight-bold">Actions:</td>


  		




  140
  
  
    
                                <td><a v-on:click="onDelete()" class="btn btn-danger btn-sm certificate-control" href="">Delete</a></td>


  		




  141
  
  
    
                                <td><a v-on:click="onRevoke()" class="btn btn-warning btn-sm certificate-control" href="">Revoke</a></td>


  		




  142
  
  
    
                                <td> </td>


  		




  143
  
  
    
                            </tr>


  		




  144
  
  
    
                            <tr class="d-flex">


  		




  145
  
  
    
                                <td style="width: 30%" class="font-weight-bold">Endpoints:</td>


  		




  146
  
  
    
                                <td><a class="certificate-control font-weight-bold" :href="crlEndpoint">CRL</a></td>


  		




  147
  
  
    
                                <td><a class="certificate-control font-weight-bold" :href="ocspEndpoint">OCSP</a></td>


  		




  148
  
  
    
                                <td> </td>


  		




  149
  
  
    
                            </tr>


  		




  150
  
  
    
                            <tr class="d-flex" v-if="id != certificate.CA">


  		




  151
  
  
    
                                <td style="width: 30%" class="font-weight-bold">Issuer:</td>


  		




  152
  
  
    
                                <td><a class="certificate-control font-weight-bold" :href="issuerURL">show details</a></td>


  		




  153
  
  
    
                                <td> </td>


  		




  154
  
  
    
                                <td> </td>


  		




  155
  
  
    
                            </tr>


  		




  156
  
  
    
                        </tbody>


  		




  
  125
  
    
                                <input class="form-check-input" v-model="certificate.usage.SSL" type="checkbox" id="isSSL_TLS" name="isSSL_TLS" value="SSL_TLS" disabled>


  		




  
  126
  
    
                                <label class="form-check-label" for="isSSL_TLS">SSL/TLS</label><br>


  		




  
  127
  
    
                            </td>


  		




  
  128
  
    
                        </tr>


  		




  157
  129
  
    
                    </table>


  		




  158
  130
  
    
                </div>


  		




  159
  
  
    
                <div class="row table-responsive">


  		




  160
  
  
    
                    <table class="table table-striped table-hover">


  		




  161
  
  
    
                        <thead class="thead-dark text-center">


  		




  162
  
  
    
                            <tr>


  		




  163
  
  
    
                                <th scope="col" colspan="2">Issued Certificates</th>


  		




  164
  
  
    
                            </tr>


  		




  165
  
  
    
                            <tr>


  		




  166
  
  
    
                                <th class="w-65" scope="col">Common Name</th>


  		




  167
  
  
    
                                <th class="w-35" scope="col">Type</th>


  		




  168
  
  
    
                            </tr>


  		




  169
  
  
    
                        </thead>


  		




  170
  
  
    
                        <tbody>


  		




  171
  
  
    
                            <tr>


  		




  172
  
  
    
                                <td>&ltsome_certificate_name&gt</td>


  		




  173
  
  
    
                                <td>&lttype&gt</td>


  		




  174
  
  
    
                            </tr>


  		




  175
  
  
    
                            <tr>


  		




  176
  
  
    
                                <td>&ltsome_certificate_long_name&gt</td>


  		




  177
  
  
    
                                <td>&ltCA&gt</td>


  		




  178
  
  
    
                            </tr>


  		




  179
  
  
    
                        </tbody>


  		




  180
  
  
    
                    </table>


  		




  
  131
  
    
                <div class="col-xl-5">


  		




  
  132
  
    
                    <div class="row table-responsive">


  		




  
  133
  
    
                        <table class="table table-striped">


  		




  
  134
  
    
                            <thead class="thead-dark">


  		




  
  135
  
    
                                <tr>


  		




  
  136
  
    
                                    <th colspan="4" class="text-center">Manage certificate</th>


  		




  
  137
  
    
                                </tr>


  		




  
  138
  
    
                            </thead>


  		




  
  139
  
    
                            <tbody>


  		




  
  140
  
    
                                <tr class="d-flex">


  		




  
  141
  
    
                                    <td style="width: 30%" class="font-weight-bold">Certificate download:</td>


  		




  
  142
  
    
                                    <td><a v-on:click="onCertificateDownload()" class="btn btn-primary btn-sm certificate-control" href="">Certificate</a></td>


  		




  
  143
  
    
                                    <td><a v-on:click="onChainDownload()" class="btn btn-primary btn-sm certificate-control" href="">Chain of trust</a></td>


  		




  
  144
  
    
                                    <td><a v-on:click="onRootDownload()" class="btn btn-primary btn-sm certificate-control" href="">Root</a></td>


  		




  
  145
  
    
                                </tr>


  		




  
  146
  
    
                                <tr class="d-flex">


  		




  
  147
  
    
                                    <td style="width: 30%" class="font-weight-bold">Key download:</td>


  		




  
  148
  
    
                                    <td><a v-on:click="onPublicKeyDownload()" class="btn btn-success btn-sm certificate-control" href="">Public key</a></td>


  		




  
  149
  
    
                                    <td><a v-on:click="onPrivateKeyDownload()" class="btn btn-success btn-sm certificate-control" href="">Private key</a></td>


  		




  
  150
  
    
                                    <td> </td>


  		




  
  151
  
    
                                </tr>


  		




  
  152
  
    
                                <tr class="d-flex">


  		




  
  153
  
    
                                    <td style="width: 30%" class="font-weight-bold">Actions:</td>


  		




  
  154
  
    
                                    <td><a v-on:click="onDelete()" class="btn btn-danger btn-sm certificate-control" href="">Delete</a></td>


  		




  
  155
  
    
                                    <td><a v-on:click="onRevoke()" class="btn btn-warning btn-sm certificate-control" href="">Revoke</a></td>


  		




  
  156
  
    
                                    <td> </td>


  		




  
  157
  
    
                                </tr>


  		




  
  158
  
    
                                <tr class="d-flex">


  		




  
  159
  
    
                                    <td style="width: 30%" class="font-weight-bold">Endpoints:</td>


  		




  
  160
  
    
                                    <td><a class="certificate-control font-weight-bold" :href="crlEndpoint">CRL</a></td>


  		




  
  161
  
    
                                    <td><a class="certificate-control font-weight-bold" :href="ocspEndpoint">OCSP</a></td>


  		




  
  162
  
    
                                    <td> </td>


  		




  
  163
  
    
                                </tr>


  		




  
  164
  
    
                                <tr class="d-flex" v-if="id != certificate.CA">


  		




  
  165
  
    
                                    <td style="width: 30%" class="font-weight-bold">Issuer:</td>


  		




  
  166
  
    
                                    <td><a class="certificate-control font-weight-bold" :href="issuerURL">show details</a></td>


  		




  
  167
  
    
                                    <td> </td>


  		




  
  168
  
    
                                    <td> </td>


  		




  
  169
  
    
                                </tr>


  		




  
  170
  
    
                            </tbody>


  		




  
  171
  
    
                        </table>


  		




  
  172
  
    
                    </div>


  		




  
  173
  
    
                    <div class="row table-responsive">


  		




  
  174
  
    
                        <table class="table table-striped table-hover">


  		




  
  175
  
    
                            <thead class="thead-dark text-center">


  		




  
  176
  
    
                                <tr>


  		




  
  177
  
    
                                    <th scope="col" colspan="2">Issued Certificates</th>


  		




  
  178
  
    
                                </tr>


  		




  
  179
  
    
                                <tr>


  		




  
  180
  
    
                                    <th class="w-65" scope="col">Common Name</th>


  		




  
  181
  
    
                                    <th class="w-35" scope="col">Type</th>


  		




  
  182
  
    
                                </tr>


  		




  
  183
  
    
                            </thead>


  		




  
  184
  
    
                            <tbody>


  		




  
  185
  
    
                                <tr>


  		




  
  186
  
    
                                    <td>&ltsome_certificate_name&gt</td>


  		




  
  187
  
    
                                    <td>&lttype&gt</td>


  		




  
  188
  
    
                                </tr>


  		




  
  189
  
    
                                <tr>


  		




  
  190
  
    
                                    <td>&ltsome_certificate_long_name&gt</td>


  		




  
  191
  
    
                                    <td>&ltCA&gt</td>


  		




  
  192
  
    
                                </tr>


  		




  
  193
  
    
                            </tbody>


  		




  
  194
  
    
                        </table>


  		




  
  195
  
    
                    </div>


  		




  181
  196
  
    
                </div>


  		




  182
  197
  
    
            </div>


  		




  183
  198
  
    
        </div>


  		




  184
  199
  
    
    </div>


  		




  185
  200
  
    

  		




  186
  201
  
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>


  		




  
  202
  
    
    <script src="https://cdn.jsdelivr.net/npm/vue-loading-overlay@3"></script>


  		




  187
  203
  
    
    <script src="/static/js/jquery-3.6.0.min.js"></script>


  		




  188
  204
  
    
    <script src="/static/js/bootstrap.bundle.min.js"></script>


  		




  189
  205
  
    
    <script src="/static/js/axios.min.js"></script>


  		












  

    
      static/css/app.css
    
  





  44
  44
  
    
    -ms-transform: rotate(180deg); /* IE 9 */


  		




  45
  45
  
    
    -webkit-transform: rotate(180deg); /* Safari */'


  		




  46
  46
  
    
    transform: rotate(180deg);


  		




  
  47
  
    
}


  		




  
  48
  
    

  		




  
  49
  
    
/*404 page*/


  		




  
  50
  
    
#404_page{


  		




  
  51
  
    
    display: table;


  		




  
  52
  
    
    width: 100%;


  		




  
  53
  
    
    height: 100vh;


  		




  
  54
  
    
    text-align: center;


  		




  
  55
  
    
}


  		




  
  56
  
    

  		




  
  57
  
    
.fof{


  		




  
  58
  
    
	  display: table-cell;


  		




  
  59
  
    
	  vertical-align: middle;


  		




  
  60
  
    
}


  		




  
  61
  
    

  		




  
  62
  
    
.fof h1{


  		




  
  63
  
    
	  font-size: 50px;


  		




  
  64
  
    
	  display: inline-block;


  		




  
  65
  
    
	  padding-right: 12px;


  		




  
  66
  
    
	  animation: type .5s alternate infinite;


  		




  
  67
  
    
}


  		




  
  68
  
    

  		




  
  69
  
    
@keyframes type{


  		




  
  70
  
    
	  from{box-shadow: inset -3px 0px 0px #888;}


  		




  
  71
  
    
	  to{box-shadow: inset -3px 0px 0px transparent;}


  		




  47
  72
  
    
}


  		












  

    
      static/index.html
    
  





  5
  5
  
    
    <title>X.509 Certificate Management</title>


  		




  6
  6
  
    
    <link rel="stylesheet" href="/static/css/app.css">


  		




  7
  7
  
    
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">


  		




  
  8
  
    
    <link href="https://cdn.jsdelivr.net/npm/vue-loading-overlay@3/dist/vue-loading.css" rel="stylesheet">


  		




  8
  9
  
    
</head>


  		




  9
  10
  
    
<body>


  		




  10
  11
  
    
    <div id="certificateListingPage" class="p-4">


  		




  11
  
  
    
        <div>


  		




  12
  
  
    
            <h1 class="ml-2 d-inline-block">Certificate Listing</h1>


  		




  13
  
  
    
            <a class="btn btn-success ml-4 mb-3" href="/static/create_certificate.html">Create certificate</a>


  		




  
  12
  
    
        <div v-if="loading">


  		




  
  13
  
    
            <loading :active.sync="loading"


  		




  
  14
  
    
                     :can-cancel="false"


  		




  
  15
  
    
                      loader="dots"


  		




  
  16
  
    
                     :is-full-page="true"></loading>


  		




  14
  17
  
    
        </div>


  		




  15
  
  
    
        <div class="alert alert-success" v-if="successMessage !== ''" role="alert" v-cloak>


  		




  16
  
  
    
            {{ successMessage }}


  		




  
  18
  
    
        <div v-if="!loading" v-cloak>


  		




  
  19
  
    
            <div>


  		




  
  20
  
    
                <h1 class="ml-2 d-inline-block">Certificate Listing</h1>


  		




  
  21
  
    
                <a class="btn btn-success ml-4 mb-3" href="/static/create_certificate.html">Create certificate</a>


  		




  
  22
  
    
            </div>


  		




  
  23
  
    
            <div class="alert alert-success" v-if="successMessage !== ''" role="alert" v-cloak>


  		




  
  24
  
    
                {{ successMessage }}


  		




  
  25
  
    
            </div>


  		




  
  26
  
    
            <table class="table table-striped table-hover text-center">


  		




  
  27
  
    
                <thead class="thead-dark">


  		




  
  28
  
    
                    <tr>


  		




  
  29
  
    
                        <th class="align-middle" scope="col" rowspan="2">Common name</th>


  		




  
  30
  
    
                        <th class="align-middle" scope="col" colspan="2">Validity</th>


  		




  
  31
  
    
                        <th class="align-middle" scope="col" rowspan="2">Usage</th>


  		




  
  32
  
    
                        <th class="align-middle" scope="col" rowspan="2">Certificate</th>


  		




  
  33
  
    
                        <th class="align-middle" scope="col" rowspan="2">Issuer</th>


  		




  
  34
  
    
                    </tr>


  		




  
  35
  
    
                    <tr>


  		




  
  36
  
    
                        <th scope="col">Start</th>


  		




  
  37
  
    
                        <th scope="col">End</th>


  		




  
  38
  
    
                    </tr>


  		




  
  39
  
    
                </thead>


  		




  
  40
  
    
                <tbody>


  		




  
  41
  
    
                    <tr is="certificate-item"


  		




  
  42
  
    
                        v-for="certificate in certificates"


  		




  
  43
  
    
                        v-bind:certificate="certificate"


  		




  
  44
  
    
                        v-bind:key="certificate.id">


  		




  
  45
  
    
                    </tr>


  		




  
  46
  
    
                </tbody>


  		




  
  47
  
    
            </table>


  		




  17
  48
  
    
        </div>


  		




  18
  
  
    
        <table class="table table-striped table-hover text-center">


  		




  19
  
  
    
            <thead class="thead-dark">


  		




  20
  
  
    
                <tr>


  		




  21
  
  
    
                    <th class="align-middle" scope="col" rowspan="2">Common name</th>


  		




  22
  
  
    
                    <th class="align-middle" scope="col" colspan="2">Validity</th>


  		




  23
  
  
    
                    <th class="align-middle" scope="col" rowspan="2">Usage</th>


  		




  24
  
  
    
                    <th class="align-middle" scope="col" rowspan="2">Certificate</th>


  		




  25
  
  
    
                    <th class="align-middle" scope="col" rowspan="2">Issuer</th>


  		




  26
  
  
    
                </tr>


  		




  27
  
  
    
                <tr>


  		




  28
  
  
    
                    <th scope="col">Start</th>


  		




  29
  
  
    
                    <th scope="col">End</th>


  		




  30
  
  
    
                </tr>


  		




  31
  
  
    
            </thead>


  		




  32
  
  
    
            <tbody>


  		




  33
  
  
    
                <tr is="certificate-item"


  		




  34
  
  
    
                    v-for="certificate in certificates"


  		




  35
  
  
    
                    v-bind:certificate="certificate"


  		




  36
  
  
    
                    v-bind:key="certificate.id">


  		




  37
  
  
    
                </tr>


  		




  38
  
  
    
            </tbody>


  		




  39
  
  
    
        </table>


  		




  40
  49
  
    
    </div>


  		




  41
  
  
    

  		




  
  50
  
    
    <script src="https://cdn.jsdelivr.net/npm/vue-loading-overlay@3"></script>


  		




  42
  51
  
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>


  		




  43
  52
  
    
    <script src="/static/js/jquery-3.6.0.min.js"></script>


  		




  44
  53
  
    
    <script src="/static/js/bootstrap.bundle.min.js"></script>


  		












  

    
      static/js/certificate.js
    
  





  
  1
  
    
    Vue.use(VueLoading);


  		




  
  2
  
    
    Vue.component('loading', VueLoading)


  		




  
  3
  
    

  		




  1
  4
  
    

  		




  2
  5
  
    
    var certificateDetailsApp = new Vue({


  		




  3
  6
  
    
        el: "#certificate-detailed-view-content",


  		




  4
  7
  
    
        data: {


  		




  
  8
  
    
            loading: true,


  		




  
  9
  
    
            error: false,


  		




  5
  10
  
    
            id: null,


  		




  6
  11
  
    
            certificate: {


  		




  7
  12
  
    
                subject: {


  		




  ......




  74
  79
  
    
    // get details of the selected certificate


  		




  75
  80
  
    
    const params = window.location.search;


  		




  76
  81
  
    
    if (params !== "") {


  		




  
  82
  
    
        // get requested ID


  		




  77
  83
  
    
        const urlParams = new URLSearchParams(params);


  		




  78
  84
  
    
        if (urlParams.get("id") != null) {


  		




  79
  85
  
    
            const id = urlParams.get("id");


  		




  80
  86
  
    
            certificateDetailsApp.id = id;


  		




  
  87
  
    
            // query certificate detailes


  		




  81
  88
  
    
            axios.get(API_URL + "certificates/"+id+"/details")


  		




  82
  89
  
    
                .then(function (response) {


  		




  83
  
  
    
                    if (response.data["success"])


  		




  
  90
  
    
                    if (response.data["success"]) {


  		




  
  91
  
    
                        // display certificate


  		




  84
  92
  
    
                        certificateDetailsApp.certificate = response.data["data"];


  		




  
  93
  
    
                        certificateDetailsApp.loading = false;


  		




  
  94
  
    
                        certificateDetailsApp.error = false;


  		




  
  95
  
    
                    }


  		




  
  96
  
    
                    else {


  		




  
  97
  
    
                        // certificate does not exists


  		




  
  98
  
    
                        console.error("Required certificate does not exists");


  		




  
  99
  
    
                        certificateDetailsApp.loading = false;


  		




  
  100
  
    
                        certificateDetailsApp.error = true;


  		




  
  101
  
    
                    }


  		




  85
  102
  
    
                })


  		




  86
  103
  
    
                .catch(function (error) {


  		




  87
  
  
    
                    alert("There should be some error reaction");


  		




  88
  
  
    
                    // TODO error reaction -> display fault window


  		




  
  104
  
    
                    // server error


  		




  
  105
  
    
                    console.error(error);


  		




  
  106
  
    
                    certificateDetailsApp.loading = false;


  		




  
  107
  
    
                    certificateDetailsApp.error = true;


  		




  89
  108
  
    
                });


  		




  90
  109
  
    
        } else {


  		




  91
  
  
    
            alert("There should be some error reaction");


  		




  92
  
  
    
            // TODO error reaction -> display fault window


  		




  
  110
  
    
            // id was not provided as a URL parameter


  		




  
  111
  
    
            console.error("URL does not contain 'id' parameter")


  		




  
  112
  
    
            certificateDetailsApp.loading = false;


  		




  
  113
  
    
            certificateDetailsApp.error = true;


  		




  93
  114
  
    
        }


  		




  94
  115
  
    
    } else {


  		




  95
  
  
    
        alert("There should be some error reaction");


  		




  96
  
  
    
        // TODO error reaction -> display fault window


  		




  97
  
  
    
    }


  		




  
  116
  
    
        console.error("URL does not contain 'id' parameter")


  		




  
  117
  
    
        certificateDetailsApp.loading = false;


  		




  
  118
  
    
        certificateDetailsApp.error = true;


  		




  
  119
  
    
    }


  		












  

    
      static/js/index.js
    
  





  
  1
  
    
    Vue.use(VueLoading);


  		




  
  2
  
    
    Vue.component('loading', VueLoading)


  		




  1
  3
  
    

  		




  2
  4
  
    
    // certificate listing app VUE instance


  		




  3
  5
  
    
    var certificateListingApp = new Vue({


  		




  4
  6
  
    
        el: "#certificateListingPage",


  		




  5
  7
  
    
        data: {


  		




  
  8
  
    
            loading: true,


  		




  6
  9
  
    
            // list of all certificates to be displayed in the list


  		




  7
  10
  
    
            certificates: [],


  		




  8
  11
  
    
            successMessage: ''


  		




  ......




  30
  33
  
    
    // download a list of all available certificates and display them in the table


  		




  31
  34
  
    
    axios.get(API_URL + "certificates")


  		




  32
  35
  
    
        .then(function (response) {


  		




  33
  
  
    
            if (response.data["success"])


  		




  
  36
  
    
            if (response.data["success"]) {


  		




  34
  37
  
    
                response.data["data"].forEach(item => certificateListingApp.certificates.push(item))


  		




  
  38
  
    
            }


  		




  
  39
  
    
            certificateListingApp.loading = false;


  		




  35
  40
  
    
        })


  		




  36
  41
  
    
        .catch(function (error) {


  		




  37
  42
  
    
            console.log(error);


  		




  
  43
  
    
            certificateListingApp.loading = false;


  		




  38
  44
  
    
        });


  		












Také k dispozici:  Unified diff