|
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-lg">
|
|
11
|
<div class="row">
|
|
12
|
<div class="col-lg-2"></div>
|
|
13
|
<div class="col-lg card">
|
|
14
|
<div class="card-body">
|
|
15
|
<h1 class="text-center">Create Certificate</h1>
|
|
16
|
|
|
17
|
<div v-if="errorMessage !== ''" class="alert alert-danger" v-cloak role="alert">
|
|
18
|
{{ errorMessage }}
|
|
19
|
</div>
|
|
20
|
|
|
21
|
<table class="ml-auto mr-auto">
|
|
22
|
<tr>
|
|
23
|
<div class="form-group">
|
|
24
|
<td><label for="CA">Certificate Authority:</label></td>
|
|
25
|
<td class="pl-3">
|
|
26
|
<select v-model="certificateData.CA" name="CA" id="CA" class="form-control" :disabled="isSelfSigned">
|
|
27
|
<option value=null disabled selected>-- Select issuer --</option>
|
|
28
|
<option is="ca-select-item"
|
|
29
|
v-for="ca in authorities"
|
|
30
|
v-bind:ca="ca"
|
|
31
|
v-bind:key="ca.id"></option>
|
|
32
|
</select>
|
|
33
|
</td>
|
|
34
|
<td style="padding-left: 37px">
|
|
35
|
<input class="form-check-input" :disabled="authorities.length === 0" v-model="isSelfSigned" type="checkbox" id="isSelfSigned" name="isSelfSigned" value="self-signed">
|
|
36
|
<label class="form-check-label" for="isSelfSigned">Self-signed</label><br>
|
|
37
|
</td>
|
|
38
|
</div>
|
|
39
|
</tr>
|
|
40
|
<tr>
|
|
41
|
<div class="form-group">
|
|
42
|
<td><label for="validity_start">Validity start:</label></td>
|
|
43
|
<td class="pl-3"><input v-bind:value="notBefore" type="date" id="validity_start" name="validity_start" class="form-control" disabled></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"><input v-bind:value="notAfter" type="date" id="validity_end" name="validity_end" class="form-control" disabled></td>
|
|
50
|
<td class="pl-3">
|
|
51
|
<span>
|
|
52
|
<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">
|
|
53
|
<label for="validity_days">days</label>
|
|
54
|
</span>
|
|
55
|
</td>
|
|
56
|
</div>
|
|
57
|
</tr>
|
|
58
|
<tr>
|
|
59
|
<td colspan="2"><h5>Subject</h5></td>
|
|
60
|
</tr>
|
|
61
|
<tr>
|
|
62
|
<div class="form-group">
|
|
63
|
<td><label for="subject_CN">Common Name:</label></td>
|
|
64
|
<td class="pl-3">
|
|
65
|
<input type="text" v-bind:class="{ 'is-invalid': invalidCN }" v-model:value="certificateData.subject.CN" id="subject_CN" name="subject_CN" class="form-control">
|
|
66
|
</td>
|
|
67
|
</div>
|
|
68
|
</tr>
|
|
69
|
<tr>
|
|
70
|
<div class="form-group">
|
|
71
|
<td><label for="subject_C">Country Code:</label></td>
|
|
72
|
<td class="pl-3">
|
|
73
|
<input type="text" v-model:value="certificateData.subject.C" id="subject_C" name="subject_C" class="form-control">
|
|
74
|
</td>
|
|
75
|
</div>
|
|
76
|
</tr>
|
|
77
|
<tr>
|
|
78
|
<div class="form-group">
|
|
79
|
<td><label for="subject_L">Locality:</label></td>
|
|
80
|
<td class="pl-3">
|
|
81
|
<input type="text" v-model:value="certificateData.subject.L" id="subject_L" name="subject_L" class="form-control">
|
|
82
|
</td>
|
|
83
|
</div>
|
|
84
|
</tr>
|
|
85
|
<tr>
|
|
86
|
<div class="form-group">
|
|
87
|
<td><label for="subject_ST">Province/State:</label></td>
|
|
88
|
<td class="pl-3">
|
|
89
|
<input type="text" v-model:value="certificateData.subject.ST" id="subject_ST" name="subject_ST" class="form-control">
|
|
90
|
</td>
|
|
91
|
</div>
|
|
92
|
</tr>
|
|
93
|
<tr>
|
|
94
|
<div class="form-group">
|
|
95
|
<td><label for="subject_O">Organization:</label></td>
|
|
96
|
<td class="pl-3">
|
|
97
|
<input type="text" v-model:value="certificateData.subject.O" id="subject_O" name="subject_O" class="form-control">
|
|
98
|
</td>
|
|
99
|
</div>
|
|
100
|
</tr>
|
|
101
|
<tr>
|
|
102
|
<div class="form-group">
|
|
103
|
<td><label for="subject_OU">Organization Unit:</label></td>
|
|
104
|
<td class="pl-3">
|
|
105
|
<input type="text" v-model:value="certificateData.subject.OU" id="subject_OU" name="subject_OU" class="form-control">
|
|
106
|
</td>
|
|
107
|
</div>
|
|
108
|
</tr>
|
|
109
|
<tr>
|
|
110
|
<div class="form-group">
|
|
111
|
<td><label for="subject_emailAddress">Email:</label></td>
|
|
112
|
<td class="pl-3">
|
|
113
|
<input type="email" v-model:value="certificateData.subject.emailAddress" id="subject_emailAddress" name="subject_emailAddress" class="form-control">
|
|
114
|
</td>
|
|
115
|
</div>
|
|
116
|
</tr>
|
|
117
|
<tr>
|
|
118
|
<td>Usage:</td>
|
|
119
|
<td class="form-check">
|
|
120
|
<input class="form-check-input" :disabled="isSelfSigned" v-model="certificateData.usage.CA" type="checkbox" id="isCA" name="isCA" value="CA">
|
|
121
|
<label class="form-check-label" for="isCA">CA</label><br>
|
|
122
|
|
|
123
|
<input class="form-check-input" v-model="certificateData.usage.digitalSignature" type="checkbox" id="isDigitalSignature" name="isDigitalSignature" value="DigitalSignature">
|
|
124
|
<label class="form-check-label" for="isDigitalSignature">Digital Signature</label><br>
|
|
125
|
|
|
126
|
<input class="form-check-input" v-model="certificateData.usage.authentication" type="checkbox" id="isAuthentication" name="isAuthentication" value="Authentication">
|
|
127
|
<label class="form-check-label" for="isAuthentication">Authentication</label><br>
|
|
128
|
|
|
129
|
<input class="form-check-input" v-model="certificateData.usage.SSL" type="checkbox" id="isSSL_TLS" name="isSSL_TLS" value="SSL_TLS">
|
|
130
|
<label class="form-check-label" for="isSSL_TLS">SSL/TLS</label><br>
|
|
131
|
</td>
|
|
132
|
</tr>
|
|
133
|
<tr v-if="!isSelfSigned && !showIssuer" class="pt-2">
|
|
134
|
<td colspan="3">
|
|
135
|
<button v-if="!showIssuer" v-on:click="toggleShowIssuer" class="btn btn-outline-secondary btn-block">Show issuer</button>
|
|
136
|
</td>
|
|
137
|
</tr>
|
|
138
|
<tr v-if="showIssuer" class="pt-2" v-cloak>
|
|
139
|
<td colspan="3">
|
|
140
|
<button v-on:click="toggleShowIssuer" class="btn btn-outline-secondary btn-block">Hide issuer</button>
|
|
141
|
</td>
|
|
142
|
</tr>
|
|
143
|
<tr v-if="showIssuer" v-cloak>
|
|
144
|
<td colspan="2"><h5>Issuer</h5></td>
|
|
145
|
</tr>
|
|
146
|
<tr v-if="showIssuer" v-cloak>
|
|
147
|
<div class="form-group">
|
|
148
|
<td><label for="issuer_CN">Common Name:</label></td>
|
|
149
|
<td class="pl-3">
|
|
150
|
<input type="text" id="issuer_CN" name="issuer_CN" class="form-control" v-bind:value="selectedCAData.CN" disabled>
|
|
151
|
</td>
|
|
152
|
</div>
|
|
153
|
</tr>
|
|
154
|
<tr v-if="showIssuer" v-cloak>
|
|
155
|
<div class="form-group">
|
|
156
|
<td><label for="issuer_C">Country Code:</label></td>
|
|
157
|
<td class="pl-3">
|
|
158
|
<input type="text" id="issuer_C" name="issuer_C" class="form-control" v-bind:value="selectedCAData.C" disabled>
|
|
159
|
</td>
|
|
160
|
</div>
|
|
161
|
</tr>
|
|
162
|
<tr v-if="showIssuer" v-cloak>
|
|
163
|
<div class="form-group">
|
|
164
|
<td><label for="issuer_L">Locality:</label></td>
|
|
165
|
<td class="pl-3">
|
|
166
|
<input type="text" id="issuer_L" name="issuer_L" class="form-control" v-bind:value="selectedCAData.L" disabled>
|
|
167
|
</td>
|
|
168
|
</div>
|
|
169
|
</tr>
|
|
170
|
<tr v-if="showIssuer" v-cloak>
|
|
171
|
<div class="form-group">
|
|
172
|
<td><label for="issuer_ST">Province/State:</label></td>
|
|
173
|
<td class="pl-3">
|
|
174
|
<input type="text" id="issuer_ST" name="issuer_ST" class="form-control" v-bind:value="selectedCAData.ST" disabled>
|
|
175
|
</td>
|
|
176
|
</div>
|
|
177
|
</tr>
|
|
178
|
<tr v-if="showIssuer" v-cloak>
|
|
179
|
<div class="form-group">
|
|
180
|
<td><label for="issuer_O">Organization:</label></td>
|
|
181
|
<td class="pl-3">
|
|
182
|
<input type="text" id="issuer_O" name="issuer_O" class="form-control" v-bind:value="selectedCAData.O" disabled>
|
|
183
|
</td>
|
|
184
|
</div>
|
|
185
|
</tr>
|
|
186
|
<tr v-if="showIssuer" v-cloak>
|
|
187
|
<div class="form-group">
|
|
188
|
<td><label for="issuer_OU">Organization Unit:</label></td>
|
|
189
|
<td class="pl-3">
|
|
190
|
<input type="text" id="issuer_OU" name="issuer_OU" class="form-control" v-bind:value="selectedCAData.OU" disabled>
|
|
191
|
</td>
|
|
192
|
</div>
|
|
193
|
</tr>
|
|
194
|
<tr v-if="showIssuer" v-cloak>
|
|
195
|
<div class="form-group">
|
|
196
|
<td><label for="issuer_emailAddress">Email:</label></td>
|
|
197
|
<td class="pl-3">
|
|
198
|
<input type="email" id="issuer_emailAddress" name="issuer_emailAddress" class="form-control" v-bind:value="selectedCAData.emailAddress" disabled>
|
|
199
|
</td>
|
|
200
|
</div>
|
|
201
|
</tr>
|
|
202
|
<tr>
|
|
203
|
<div class="form-group form-check">
|
|
204
|
<td><label class="form-check-label" for="specifyPasswordCheckbox" style="margin-top: 15px">Custom key:</label></td>
|
|
205
|
<td class="pl-3">
|
|
206
|
<input type="checkbox" v-model="customKey" id="specifyPasswordCheckbox" name="specifyPassword" class="mb-2 form-check-input form-check">
|
|
207
|
</td>
|
|
208
|
</div>
|
|
209
|
</tr>
|
|
210
|
<tr v-if="customKey" v-cloak>
|
|
211
|
<div class="form-group">
|
|
212
|
<td class="pl-5"><label for="key_password">Password:</label></td>
|
|
213
|
<td class="pl-3" colspan="2">
|
|
214
|
<input type="password" v-model:value="key.password" id="key_password" name="key_password" class="form-control">
|
|
215
|
</td>
|
|
216
|
</div>
|
|
217
|
</tr>
|
|
218
|
<tr v-if="customKey" v-cloak>
|
|
219
|
<div class="form-group">
|
|
220
|
<td class="pl-5"><label for="key_pem">Private key:</label></td>
|
|
221
|
<td class="pl-3" colspan="2">
|
|
222
|
<input type="file" v-on:change="onKeyFileChange" id="key_pem" name="key_pem" class="form-control-file">
|
|
223
|
</td>
|
|
224
|
</div>
|
|
225
|
</tr>
|
|
226
|
<tr>
|
|
227
|
<div class="form-group form-check">
|
|
228
|
<td><label class="form-check-label" for="specifyExtensionsCheckbox" style="margin-top: 15px">Custom extensions:</label></td>
|
|
229
|
<td class="pl-3">
|
|
230
|
<input type="checkbox" v-model="customExtensions" id="specifyExtensionsCheckbox" name="specifyExtensions" class="mb-2 form-check-input form-check">
|
|
231
|
</td>
|
|
232
|
</div>
|
|
233
|
</tr>
|
|
234
|
<tr v-if="customExtensions" v-cloak>
|
|
235
|
<div class="form-group">
|
|
236
|
<td class="pl-5"><label for="extensions">Extensions:</label></td>
|
|
237
|
<td cla ss="pl-3" colspan="2">
|
|
238
|
<textarea v-model:value="extensions" id="extensions" name="extensions" class="form-control mt-2">
|
|
239
|
</textarea>
|
|
240
|
</td>
|
|
241
|
</div>
|
|
242
|
</tr>
|
|
243
|
</table>
|
|
244
|
<div class="container">
|
|
245
|
<div class="">
|
|
246
|
<div class="col">
|
|
247
|
<button class="btn btn-success mt-3 w-100" v-on:click="onCreateCertificate">Create certificate</button>
|
|
248
|
</div>
|
|
249
|
<div class="col">
|
|
250
|
<button class="btn btn-secondary mt-3 w-100" onclick="window.location.href = '/static/index.html'">Cancel</button>
|
|
251
|
</div>
|
|
252
|
</div>
|
|
253
|
</div>
|
|
254
|
</div>
|
|
255
|
</div>
|
|
256
|
<div class="col-lg-2"></div>
|
|
257
|
</div>
|
|
258
|
</div>
|
|
259
|
|
|
260
|
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
|
|
261
|
<script src="/static/js/jquery-3.6.0.min.js"></script>
|
|
262
|
<script src="/static/js/bootstrap.bundle.min.js"></script>
|
|
263
|
<script src="/static/js/axios.min.js"></script>
|
|
264
|
<script src="/static/js/constants.js"></script>
|
|
265
|
<script src="/static/js/utilities.js"></script>
|
|
266
|
<script src="/static/js/components.js"></script>
|
|
267
|
<script src="/static/js/create_certificate.js"></script>
|
|
268
|
</body>
|
|
269
|
</html>
|