Projekt

Obecné

Profil

Stáhnout (10.2 KB) Statistiky
| Větev: | Tag: | Revize:
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>X.509 Certificate Management</title>
6
    <link rel="stylesheet" href="/static/css/app.css">
7
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
8
</head>
9
<body class="p-4">
10
    <div id="create-certificate-content" class="container">
11
        <h1 class="text-center">Create Certificate</h1>
12

    
13
        <div v-if="errorMessage !== ''" class="alert alert-danger" v-cloak role="alert">
14
            {{ errorMessage }}
15
        </div>
16

    
17
        <table class="ml-auto mr-auto">
18
            <tr>
19
                <div class="form-group">
20
                    <td><label for="CA">Certificate Authority:</label></td>
21
                    <td class="pl-3">
22
                        <select v-model="certificateData.CA" name="CA" id="CA" class="form-control" :disabled="isSelfSigned">
23
                            <option value=null disabled selected>-- Select issuer --</option>
24
                            <option is="ca-select-item"
25
                                    v-for="ca in authorities"
26
                                    v-bind:ca="ca"
27
                                    v-bind:key="ca.id"></option>
28
                        </select>
29
                    </td>
30
                    <td style="padding-left: 37px">
31
                        <input class="form-check-input" :disabled="authorities.length === 0" v-model="isSelfSigned" type="checkbox" id="isSelfSigned" name="isSelfSigned" value="self-signed">
32
                        <label class="form-check-label" for="isSelfSigned">Self-signed</label><br>
33
                    </td>
34
                </div>
35
            </tr>
36
            <tr>
37
                <div class="form-group">
38
                    <td><label for="validity_start">Validity start:</label></td>
39
                    <td class="pl-3"><input v-bind:value="notBefore" type="date" id="validity_start" name="validity_start" class="form-control" disabled></td>
40
                </div>
41
            </tr>
42
            <tr>
43
                <div class="form-group">
44
                    <td><label for="validity_end">Validity end:</label></td>
45
                    <td class="pl-3"><input v-bind:value="notAfter" type="date" id="validity_end" name="validity_end" class="form-control" disabled></td>
46
                    <td class="pl-3">
47
                        <span>
48
                            <input v-model="certificateData.validityDays" type="number" min="1" id="validity_days" name="validity_days" class="form-control custom-control-inline" style="width: 70px; margin-right: 0">
49
                            <label for="validity_days">days</label>
50
                        </span>
51
                    </td>
52
                </div>
53
            </tr>
54
            <tr>
55
                <td colspan="2"><h5>Issuer</h5></td>
56
            </tr>
57
            <tr>
58
                <div class="form-group">
59
                    <td><label for="issuer_CN">Common Name:</label></td>
60
                    <td class="pl-3">
61
                        <input type="text" id="issuer_CN" name="issuer_CN" class="form-control" v-bind:value="selectedCAData.CN" disabled>
62
                    </td>
63
                </div>
64
            </tr>
65
            <tr>
66
                <div class="form-group">
67
                    <td><label for="issuer_C">Country Code:</label></td>
68
                    <td class="pl-3">
69
                        <input type="text" id="issuer_C" name="issuer_C" class="form-control" v-bind:value="selectedCAData.C" disabled>
70
                    </td>
71
                </div>
72
            </tr>
73
            <tr>
74
                <div class="form-group">
75
                    <td><label for="issuer_L">Locality:</label></td>
76
                    <td class="pl-3">
77
                        <input type="text" id="issuer_L" name="issuer_L" class="form-control" v-bind:value="selectedCAData.L" disabled>
78
                    </td>
79
                </div>
80
            </tr>
81
            <tr>
82
                <div class="form-group">
83
                    <td><label for="issuer_ST">Province/State:</label></td>
84
                    <td class="pl-3">
85
                        <input type="text" id="issuer_ST" name="issuer_ST" class="form-control" v-bind:value="selectedCAData.ST" disabled>
86
                    </td>
87
                </div>
88
            </tr>
89
            <tr>
90
                <div class="form-group">
91
                    <td><label for="issuer_O">Organization:</label></td>
92
                    <td class="pl-3">
93
                        <input type="text" id="issuer_O" name="issuer_O" class="form-control" v-bind:value="selectedCAData.O" disabled>
94
                    </td>
95
                </div>
96
            </tr>
97
            <tr>
98
                <div class="form-group">
99
                    <td><label for="issuer_OU">Organization Unit:</label></td>
100
                    <td class="pl-3">
101
                        <input type="text" id="issuer_OU" name="issuer_OU" class="form-control" v-bind:value="selectedCAData.OU" disabled>
102
                    </td>
103
                </div>
104
            </tr>
105
            <tr>
106
                <div class="form-group">
107
                    <td><label for="issuer_emailAddress">Email:</label></td>
108
                    <td class="pl-3">
109
                        <input type="email" id="issuer_emailAddress" name="issuer_emailAddress" class="form-control" v-bind:value="selectedCAData.emailAddress" disabled>
110
                    </td>
111
                </div>
112
            </tr>
113
            <tr>
114
                <td colspan="2"><h5>Subject</h5></td>
115
            </tr>
116
            <tr>
117
                <div class="form-group">
118
                    <td><label for="subject_CN">Common Name:</label></td>
119
                    <td class="pl-3">
120
                        <input type="text" v-bind:class="{ 'is-invalid': invalidCN }" v-model:value="certificateData.subject.CN" id="subject_CN" name="subject_CN" class="form-control">
121
                    </td>
122
                </div>
123
            </tr>
124
            <tr>
125
                <div class="form-group">
126
                    <td><label for="subject_C">Country Code:</label></td>
127
                    <td class="pl-3">
128
                        <input type="text"  v-model:value="certificateData.subject.C" id="subject_C" name="subject_C" class="form-control">
129
                    </td>
130
                </div>
131
            </tr>
132
            <tr>
133
                <div class="form-group">
134
                    <td><label for="subject_L">Locality:</label></td>
135
                    <td class="pl-3">
136
                        <input type="text" v-model:value="certificateData.subject.L" id="subject_L" name="subject_L" class="form-control">
137
                    </td>
138
                </div>
139
            </tr>
140
            <tr>
141
                <div class="form-group">
142
                    <td><label for="subject_ST">Province/State:</label></td>
143
                    <td class="pl-3">
144
                        <input type="text" v-model:value="certificateData.subject.ST" id="subject_ST" name="subject_ST" class="form-control">
145
                    </td>
146
                </div>
147
            </tr>
148
            <tr>
149
                <div class="form-group">
150
                    <td><label for="subject_O">Organization:</label></td>
151
                    <td class="pl-3">
152
                        <input type="text" v-model:value="certificateData.subject.O" id="subject_O" name="subject_O" class="form-control">
153
                    </td>
154
                </div>
155
            </tr>
156
            <tr>
157
                <div class="form-group">
158
                    <td><label for="subject_OU">Organization Unit:</label></td>
159
                    <td class="pl-3">
160
                        <input type="text" v-model:value="certificateData.subject.OU" id="subject_OU" name="subject_OU" class="form-control">
161
                    </td>
162
                </div>
163
            </tr>
164
            <tr>
165
                <div class="form-group">
166
                    <td><label for="subject_emailAddress">Email:</label></td>
167
                    <td class="pl-3">
168
                        <input type="email" v-model:value="certificateData.subject.emailAddress" id="subject_emailAddress" name="subject_emailAddress" class="form-control">
169
                    </td>
170
                </div>
171
            </tr>
172
            <tr>
173
                <td>Usage:</td>
174
                <td class="form-check">
175
                    <input class="form-check-input" :disabled="isSelfSigned" v-model="certificateData.usage.CA" type="checkbox" id="isCA" name="isCA" value="CA">
176
                    <label class="form-check-label" for="isCA">CA</label><br>
177

    
178
                    <input class="form-check-input" v-model="certificateData.usage.digitalSignature" type="checkbox" id="isDigitalSignature" name="isDigitalSignature" value="DigitalSignature">
179
                    <label class="form-check-label" for="isDigitalSignature">Digital Signature</label><br>
180

    
181
                    <input class="form-check-input" v-model="certificateData.usage.authentication" type="checkbox" id="isAuthentication" name="isAuthentication" value="Authentication">
182
                    <label class="form-check-label" for="isAuthentication">Authentication</label><br>
183

    
184
                    <input class="form-check-input" v-model="certificateData.usage.SSL" type="checkbox" id="isSSL_TLS" name="isSSL_TLS" value="SSL_TLS">
185
                    <label class="form-check-label" for="isSSL_TLS">SSL/TLS</label><br>
186
                </td>
187
            </tr>
188
            <tr>
189
                <td align="center">
190
                    <button class="btn btn-success mt-3 w-auto" v-on:click="onCreateCertificate()">Create certificate</button>
191
                </td>
192
                <td align="center">
193
                    <button class="btn btn-secondary mt-3 w-75" onclick="window.location.href = '/static/index.html'">Cancel</button>
194
                </td>
195
            </tr>
196
        </table>
197
    </div>
198

    
199
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
200
    <script src="/static/js/jquery-3.6.0.min.js"></script>
201
    <script src="/static/js/bootstrap.bundle.min.js"></script>
202
    <script src="/static/js/axios.min.js"></script>
203
    <script src="/static/js/constants.js"></script>
204
    <script src="/static/js/utilities.js"></script>
205
    <script src="/static/js/components.js"></script>
206
    <script src="/static/js/create_certificate.js"></script>
207
</body>
208
</html>
(2-2/4)