Projekt

Obecné

Profil

« Předchozí | Další » 

Revize 5f211e7b

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

Re #8583 - GUI simplified

Zobrazit rozdíly:

static/certificate.html
9 9 
<body class="p-4">
10 10 
    <div id="certificate-detailed-view-content" class="p-4">
11 11 
        <div class="row">
12 
            <h1 class="ml-2 d-inline-block">Certificate Detailed View</h1>
13 
            <span class="ml-2 mb-2">
14 
                <div>
15 
                    <a class="btn btn-success ml-2 mb-3" v-on:click="onCertificateDownload()">Download Certificate</a>
16 
                    <a class="btn btn-success ml-2 mb-3" v-on:click="onRootDownload()">Download Root Certificate</a>
17 
                    <a class="btn btn-success ml-2 mb-3" v-on:click="onChainDownload()">Download Chain of Trust</a>
18 
                </div>
19 
                <div>
20 
                    <a class="btn btn-warning ml-2 mb-2" v-on:click="onRevoke()">Revoke certificate</a>
21 
                    <a class="btn btn-danger ml-2 mb-2" v-on:click="onDelete()">Delete certificate</a>
22 
                </div>
23 
            </span>
12 
            <a href="/static/index.html"><div class="caret-left font-weight-bold ml-2 mb-2">Home</div></a>
24 13 
        </div>
25 
        <div>
26 
            <a href=""><span class="caret-top font-weight-bold ml-2 mb-2">Issuing Certificate Authority</span></a>
27 
            <div>
28 
                <a href=""><span class="font-weight-bold ml-5 mb-2">CRL</span></a>
29 
                <a href=""><span class="font-weight-bold ml-3 mb-2">OCSP</span></a>
30 
            </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 }}
31 20 
        </div>
32 21 
        <div class="row">
33 
            <div class="col-xl-5">
34 
                <table class="ml-auto mr-auto">
22 
            <div class="col-xl-6">
23 
                <table class="ml-auto mr-auto mb-4">
35 24 
                    <tr>
36 25 
                        <div class="form-group">
37 26 
                            <td><label for="validity_start">Validity start:</label></td>
......
124 113 
                        </td>
125 114 
                    </tr>
126 115 
                </table>
127 
                <div class="text-center">
128 
                    <a class="btn btn-success m-1" v-on:click="onPublicKeyDownload()">Download Public Key</a>
129 
                    <a class="btn btn-success m-1" v-on:click="onPrivateKeyDownload()">Download Private Key</a>
130 
                </div>
131 116 
            </div>
132 
            <div class="col-xl-7 table-responsive">
133 
                <table class="table table-striped table-hover">
134 
                    <thead class="thead-dark text-center">
135 
                        <tr>
136 
                            <th scope="col" colspan="2">Issued Certificates</th>
137 
                        </tr>
138 
                        <tr>
139 
                            <th class="w-65" scope="col">Common Name</th>
140 
                            <th class="w-35" scope="col">Type</th>
141 
                        </tr>
142 
                    </thead>
143 
                    <tbody>
144 
                        <tr>
145 
                            <td>&ltsome_certificate_name&gt</td>
146 
                            <td>&lttype&gt</td>
147 
                        </tr>
148 
                        <tr>
149 
                            <td>&ltsome_certificate_long_name&gt</td>
150 
                            <td>&ltCA&gt</td>
151 
                        </tr>
152 
                        <tr>
153 
                            <td>&ltsome _certificat e_very____________ _________l on gname&gt</td>
154 
                            <td>&ltEnd Certificate&gt</td>
155 
                        </tr>
156 
                    </tbody>
157 
                </table>
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>
157 
                    </table>
158 
                </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>
181 
                </div>
158 182 
            </div>
159 183 
        </div>
160 184 
    </div>
static/css/app.css
2 2 
  display: none;
3 3 
}
4 4 

  		




  
  5
  
    
.certificate-control {


  		




  
  6
  
    
    width: 105px;


  		




  
  7
  
    
    display: block;


  		




  
  8
  
    
    text-align: center;


  		




  
  9
  
    
}


  		




  
  10
  
    

  		




  5
  11
  
    
.w-65 {


  		




  6
  12
  
    
    max-width: 65%;


  		




  7
  13
  
    
}


  		




  ......




  23
  29
  
    
    -ms-transform: rotate(270deg); /* IE 9 */


  		




  24
  30
  
    
    -webkit-transform: rotate(270deg); /* Safari */'


  		




  25
  31
  
    
    transform: rotate(270deg);


  		




  
  32
  
    
}


  		




  
  33
  
    

  		




  
  34
  
    
.caret-left::before {


  		




  
  35
  
    
    font-family: sans-serif;


  		




  
  36
  
    
    cursor: pointer;


  		




  
  37
  
    
    -webkit-user-select: none; /* Safari 3.1+ */


  		




  
  38
  
    
    -moz-user-select: none; /* Firefox 2+ */


  		




  
  39
  
    
    -ms-user-select: none; /* IE 10+ */


  		




  
  40
  
    
    user-select: none;


  		




  
  41
  
    
    content: "\25B6";


  		




  
  42
  
    
    display: inline-block;


  		




  
  43
  
    
    margin-right: 6px;


  		




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


  		




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


  		




  
  46
  
    
    transform: rotate(180deg);


  		




  26
  47
  
    
}


  		












  

    
      static/js/certificate.js
    
  





  23
  23
  
    
                },


  		




  24
  24
  
    
                CA: null,


  		




  25
  25
  
    
            },


  		




  
  26
  
    
            errorMessage: "",


  		




  
  27
  
    
            successMessage: "",


  		




  26
  28
  
    
        },


  		




  27
  29
  
    
        computed: {


  		




  28
  30
  
    
            startDate: function () {


  		




  ......




  30
  32
  
    
            },


  		




  31
  33
  
    
            endDate: function () {


  		




  32
  34
  
    
                return this.certificate.notAfter.substr(0, 16);


  		




  
  35
  
    
            },


  		




  
  36
  
    
            issuerURL: function () {


  		




  
  37
  
    
                return "/static/certificate.html?id=" + this.certificate.CA;


  		




  
  38
  
    
            },


  		




  
  39
  
    
            crlEndpoint: function () {


  		




  
  40
  
    
                return "/api/crl/" + this.certificate.CA;


  		




  
  41
  
    
            },


  		




  
  42
  
    
            ocspEndpoint: function () {


  		




  
  43
  
    
                return "/api/ocsp/" + this.certificate.CA;


  		




  33
  44
  
    
            }


  		




  34
  45
  
    
        },


  		




  35
  46
  
    
        watch: {


  		












Také k dispozici:  Unified diff