blob: faedce26114ded653a7ecbd595f8325ce937bf06 [file] [log] [blame]
beccabroek309b5da2018-11-07 12:22:31 -06001<loader loading="loading"></loader>
2<div id="configuration-cert">
3 <div class="row column">
4 <h1>SSL certificates</h1>
5 </div>
miramurali235e8785d2019-06-10 15:09:27 -05006 <div ng-repeat="certificate in certificates | filter:{isExpiring:true}" class="row column">
beccabroek309b5da2018-11-07 12:22:31 -06007 <div class="small-12 alert alert-warning" role="alert">
miramurali235e8785d2019-06-10 15:09:27 -05008 <icon aria-hidden="true" file="icon-warning.svg" /> The uploaded {{certificate.Description}} is expiring in {{getDays(certificate.ValidNotAfter) === 0 ? 'less than one
9 day!' : getDays(certificate.ValidNotAfter) + ' days!'}}. Consider replacing it with a new certificate.
beccabroek309b5da2018-11-07 12:22:31 -060010 </div>
11 </div>
12 <div ng-repeat="certificate in certificates|filter:{isExpired:true}" class="row column">
13 <div class="small-12 alert alert-danger" role="alert">
14 <div class="icon__critical inline"></div> The uploaded {{certificate.Description}} has expired! Consider replacing it with a new certificate.
15 </div>
16 </div>
17 <div class="row column">
miramurali235e8785d2019-06-10 15:09:27 -050018 <button type="button" class="btn btn-tertiary" ng-disabled="availableCertificateTypes.length === 0" ng-click="addCertificateModal=true">
19 <icon class="icon-add" file="icon-plus.svg"></icon>
beccabroek309b5da2018-11-07 12:22:31 -060020 Add new certificate
21 </button>
miramurali235e8785d2019-06-10 15:09:27 -050022 <button type="button" class="btn btn-tertiary" ng-click="addCSRModal=true">
23 <icon class="icon-add" file="icon-plus.svg"></icon>
24 Generate CSR
25 </button>
beccabroek309b5da2018-11-07 12:22:31 -060026 </div>
27 <div class="row column">
28 <div class="small-12 certificate__table">
29 <div class="table__row-header">
30 <div class="row column">
31 <div class="certificate__type-header">
32 Certificate
33 </div>
Zbigniew Kurzynskic81cdd42019-07-25 11:52:15 +020034 <div class="certificate__issue-header">
35 Issued by
36 </div>
37 <div class="certificate__issue-header">
38 Issued to
39 </div>
beccabroek309b5da2018-11-07 12:22:31 -060040 <div class="certificate__date-header">
41 Valid from
42 </div>
43 <div class="certificate__status-header">
44 </div>
45 <div class="certificate__date-header">
46 Valid until
47 </div>
48 </div>
49 </div>
miramurali235e8785d2019-06-10 15:09:27 -050050 <div ng-if="certificates.length < 1" class="empty__logs">There have been no certificates added.</div>
beccabroek309b5da2018-11-07 12:22:31 -060051 <div ng-repeat="certificate in certificates">
miramurali235e8785d2019-06-10 15:09:27 -050052 <certificate cert="certificate" reload="loadCertificates()" )></certificate>
beccabroek309b5da2018-11-07 12:22:31 -060053 </div>
54 </div>
55 </div>
56 <section class="modal add__certificate__modal" aria-hidden="true" role="dialog" ng-class="{'active': addCertificateModal}">
miramurali235e8785d2019-06-10 15:09:27 -050057 <form name="add__cert__form" id="add__cert__form" ng-class="{'submitted': submitted}">
58 <div class="modal__content">
59 <button class="certificate__close-modal" ng-click="addCertificateModal = false; add__cert__form.$setUntouched()">
60 <icon aria-hidden="true" file="icon-close.svg">
61 </button>
62 <h2 class="page-header">Add new certificate</h2>
63 <div class="row column add-certificate__section ">
beccabroek309b5da2018-11-07 12:22:31 -060064 <div class="small-12">
miramurali235e8785d2019-06-10 15:09:27 -050065 <label for="cert__type">Certificate type</label>
66 <select id="cert__type" name="cert__type" ng-model="newCertificate.selectedType" required>
67 <option class="courier-bold" ng-value="">Select an option</option>
68 <option class="courier-bold" ng-value="type" ng-repeat="type in availableCertificateTypes">
69 {{type.Description}}</option>
70 </select>
71 <div ng-messages="add__cert__form.cert__type.$error" class="form-error" ng-class="{'visible' : add__cert__form.cert__type.$touched || submitted }">
72 <p ng-message="required">Field is required</p>
beccabroek309b5da2018-11-07 12:22:31 -060073 </div>
74 </div>
75 </div>
miramurali235e8785d2019-06-10 15:09:27 -050076 <div class="row column add-certificate__section">
77 <div class="small-12">
78 <label class="select__new-label" for="upload_cert_new">Certificate file</label>
79 </div>
80 <div class="row column file__upload add-certificate__section ">
81 <label for='upload_cert_new'>
82 <input name="upload_cert_new" id="upload_cert_new" type="file" file="newCertificate.file" class="hide" />
83 <span class="btn btn-secondary select__new-button">Choose file</span>
84 </label>
85 </div>
86 <div class="row column add-certificate__section ">
87 <div ng-if="newCertificate.file" class="small-7 file__name">
88 <span>{{newCertificate.file.name}}</span>
89 <icon file="icon-close.svg" ng-if="newCertificate.file.name" ng-click="newCertificate.file = '';" class="float-right"></icon>
90 </div>
91 </div>
92 </div>
93 </div>
94 <div class="modal__button-wrapper">
95 <button class="btn btn-secondary" ng-click="addCertificateModal = false; newCertificate={};add__cert__form.$setUntouched();">Cancel</button>
96 <button class="btn btn-primary" ng-disabled="add__cert__form.$invalid || !newCertificate.file" ng-click="submitted = true; uploadCertificate();">Save</button>
97 </div>
98 </form>
beccabroek309b5da2018-11-07 12:22:31 -060099 </section>
miramurali235e8785d2019-06-10 15:09:27 -0500100
101 <section class="modal add-csr__modal" aria-hidden="true" role="dialog" ng-class="{'active': addCSRModal}">
102 <!--Close button for displaying CSR Code, we need a close button within form to reset form validation correctly-->
103 <button class="certificate__close-modal" ng-click="resetCSRModal();" ng-if="displayCSRCode==true">
104 <icon aria-hidden="true" file="icon-close.svg">
105 </button>
106
107 <!-- CSR Code display content-->
108
109 <div ng-if="displayCSRCode==true">
110 <h2 class="page-header">Certificate Signing Request (CSR)</h2>
111 <div class="modal__content add-csr__container">
112 <span id="csrCode" class="add-csr__container-csr-code">{{csrCode}}</span>
113 </div>
114 <div class="modal__button-wrapper">
115 <button class="btn btn-secondary" clipboard text="csrCode" on-copied="copySuccess(event)" on-error="copyfailed(err)">
116 <span ng-if="!copied">Copy</span>
117 <span ng-if="copied">
118 <icon aria-hidden="true" file="icon-check.svg"></icon>
119 <span>Copied</span>
120 </span>
121 </button>
122 <button class="btn btn-primary" ng-click="addCSRModal = false;">
123 <a ng-href="data:text/json;charset=utf-8,{{csrCode}}" download="csrCode.txt" class="add-csr__text-download">
124 Download</a>
125 </button>
126 </div>
127
128 </div>
129
130
131
132 <form name="add__csr__form" id="add__csr__form" novalidate ng-if="displayCSRCode==false">
133 <div class="modal__content add-csr__container">
134 <button class="certificate__close-modal" ng-click="resetCSRModal(); add__csr__form.$setUntouched()">
135 <icon aria-hidden="true" file="icon-close.svg">
136 </button>
137 <h2 class="page-header">Generate a Certificate Signing Request (CSR)</h2>
138 <div class="row">
139 <fieldset class="column medium-8 add-csr__section">
140 <legend class="add-csr__section-title">General</legend>
141 <div class="row">
142 <div class="column medium-6">
143 <label for="cert__type" class="add-csr__label">Certificate Type *</label>
144 <select class="add-csr__select" id="cert__type" name="cert__type" ng-model="newCSR.certificateCollection" required>
145 <option class="courier-bold" ng-value="default" ng-model="selectOption">Select an option</option>
146 <option class="courier-bold" ng-value="type" ng-repeat="type in allCertificateTypes">
147 {{type.Description}}</option>
148 </select>
149 <div ng-messages="add__csr__form.cert__type.$error" class="form-error" ng-class="{'visible' : add__csr__form.cert__type.$touched}">
150 <p ng-message="required">Field is required</p>
151 </div>
152 </div>
153 <div class="column medium-6">
154 <label for="countryCode" class="add-csr__label">Country *</label>
155 <select class="add-csr__select" id="countryCode" name="countryCode" ng-model="newCSR.countryCode" required>
156 <option class="courier-bold" ng-value="" ng-model="selectOption">Select an option</option>
157 <option class="courier-bold" ng-value="country" ng-repeat="country in countryList">{{country.Name}}
158 </option>
159 </select>
160 <div ng-messages="add__csr__form.countryCode.$error" class="form-error" ng-class="{'visible' : add__csr__form.countryCode.$touched}">
161 <p ng-message="required">Field is required</p>
162 </div>
163 </div>
164
165 <div class="column medium-6">
166 <label for="state" class="add-csr__label">State *</label>
167 <input class="add-csr__input" ng-model="newCSR.state" type="text" id="state" name="state" required></input>
168 <div ng-messages="add__csr__form.state.$error" class="form-error" ng-class="{'visible' : add__csr__form.state.$touched}">
169 <p ng-message="required">Field is required</p>
170 </div>
171 </div>
172
173 <div class="column medium-6">
174 <label for="city" class="add-csr__label">City *</label>
175 <input class="add-csr__input" id="city" name="city" ng-model="newCSR.city" type="text" required></input>
176 <div ng-messages="add__csr__form.city.$error" class="form-error" ng-class="{'visible' : add__csr__form.city.$touched}">
177 <p ng-message="required">Field is required</p>
178 </div>
179 </div>
180
181 <div class="column medium-6">
182 <label for="companyName" class="add-csr__label">Company Name *</label>
183 <input class="add-csr__input" type="text" ng-model="newCSR.organization" id="companyName" name="companyName" required></input>
184 <div ng-messages="add__csr__form.companyName.$error" class="form-error" ng-class="{'visible' : add__csr__form.companyName.$touched}">
185 <p ng-message="required">Field is required</p>
186 </div>
187 </div>
188
189 <div class="column medium-6">
190 <label for="companyUnit" class="add-csr__label">Company Unit *</label>
191 <input class="add-csr__input" ng-model="newCSR.companyUnit" name="companyUnit" id="companyUnit" type="text" required></input>
192 <div ng-messages="add__csr__form.companyUnit.$error" class="form-error" ng-class="{'visible' : add__csr__form.companyUnit.$touched}">
193 <p ng-message="required">Field is required</p>
194 </div>
195 </div>
196
197 <div class="column medium-6">
198 <label for="commonName" class="add-csr__label">Common Name *</label>
199 <input class="add-csr__input" ng-model="newCSR.commonName" name="commonName" type="text" id="commonName" required></input>
200 <div ng-messages="add__csr__form.commonName.$error" class="form-error" ng-class="{'visible' : add__csr__form.commonName.$touched}">
201 <p ng-message="required">Field is required</p>
202 </div>
203 </div>
204
205 <div class="column medium-6">
206 <label for="challengePassword" class="add-csr__label">Challenge Password</label>
207 <input class="add-csr__input-no-validation" id="challengePassword" ng-model="newCSR.challengePassword" type="text"></input>
208 </div>
209
210 <div class="column medium-6">
211 <label for="contactPerson" class="add-csr__label">Contact Person</label>
212 <input class="add-csr__input-no-validation" id="contactPerson" ng-model="newCSR.contactPerson" type="text"></input>
213 </div>
214
215 <div class="column medium-6">
216 <label for="emailAddress" class="add-csr__label">Email Address</label>
217 <input class="add-csr__input-no-validation" id="emailAddress" ng-model="newCSR.emailAddress" type="text"></input>
218 </div>
219
220 <div class="column medium-6">
221 <div>
222 <label id="alternate-name-label" for="alternateName" class="add-csr__label">Alternate Name</label>
223 <input class="add-csr__input-no-validation" ng-model="newCSR.firstAlternativeName" id="alternateName" name="alternativeName"
224 type="text"></input>
225 </div>
226 <div class="add-csr__additional-alt-names" ng-repeat="name in names">
227 <input id="alternate-name-input-{{$index}}" aria-describedby="alternate-name-label" class="add-csr__input-no-validation"
228 ng-model="name.Value" type="text"></input>
229 <button aria-label="Delete alternate name field" aria-controls="alternate-name-input-{{$index}}" class="btn btn-tertiary add-csr__alt-name-delete-btn"
230 ng-click="deleteOptionalRow($index)" ng-disabled="multiSelected">
231 <icon aria-hidden="true" file="icon-trashcan.svg">
232 </button>
233 </div>
234 </div>
235
236 <div class="column medium-6">
237 <button class="btn btn-tertiary add-csr__alt-name-add-btn" ng-click="addOptionalRow()">
238 <icon file="icon-plus.svg"></icon>
239 Add another alternate name
240 </button>
241 </div>
242 </div>
243 </fieldset>
244
245 <fieldset class="column medium-4 add-csr__section add-csr__section--border ">
246 <legend class="add-csr__section-title">Private key</legend>
247 <div class="add-csr__container-private-key">
248 <div class="add-csr__content-private-key">
249 <label for="keyPairAlgorithm" class="add-csr__label">Key Pair Algorithm *</label>
250 <select class="add-csr__select" ng-model="newCSR.keyPairAlgorithm" id="keyPairAlgorithm" name="keyPairAlgorithm" required>
251 <option class="courier-bold" ng-value="" ng-model="selectOption">Select an option</option>
252 <option class="courier-bold" ng-value="data" ng-repeat="data in keyPairAlgorithm">{{data}}</option>
253 </select>
254 <div ng-messages="add__csr__form.keyPairAlgorithm.$error" class="form-error" ng-class="{'visible' : add__csr__form.keyPairAlgorithm.$touched}">
255 <p ng-message="required">Field is required</p>
256 </div>
257
258 <div ng-if="newCSR.keyPairAlgorithm == 'EC'">
259 <label for="keyCurveId" class="add-csr__label">Key Curve ID</label>
260 <select class="add-csr__select" ng-model="newCSR.keyCurveId" id="keyCurveId" name="keyCurveId" required>
261 <option class="courier-bold" ng-value="">None</option>
262 <option class="courier-bold" ng-value="data" ng-repeat="data in keyCurveId">{{data}}</option>
263 </select>
264 <div ng-messages="add__csr__form.keyCurveId.$error" class="form-error" ng-class="{'visible' : add__csr__form.keyCurveId.$touched}">
265 <p ng-message="required">Field is required</p>
266 </div>
267 </div>
268
269
270 <div ng-if="newCSR.keyPairAlgorithm =='RSA'">
271 <label for="keyBitLength" class="add-csr__label">Key Bit Length *</label>
272 <select class="add-csr__select" ng-model="newCSR.keyBitLength" id="keyBitLength" name="keyBitLength" required>
273 <option class="courier-bold" ng-value="">Select an option</option>
274 <option class="courier-bold" ng-value="data" ng-repeat="data in keyBitLength">{{data}}</option>
275 </select>
276 <div ng-messages="add__csr__form.keyBitLength.$error" class="form-error" ng-class="{'visible' : add__csr__form.keyBitLength.$touched}">
277 <p ng-message="required">Field is required</p>
278 </div>
279 </div>
280
281 </div>
282 </fieldset>
283 </div>
284 </div>
285 <div class="modal__button-wrapper">
286 <button class="btn btn-secondary" ng-click="resetCSRModal();add__csr__form.$setUntouched();">Cancel</button>
287 <button class="btn btn-primary" ng-click="csrSubmitted = true; getCSRCode();add__csr__form.$setUntouched();" ng-disabled="add__csr__form.$invalid">Generate CSR</button>
288 </div>
289 </div>
290 </form>
291 </section>
292 <div class="modal-overlay" tabindex="-1" ng-class="{'active': addCertificateModal || addCSRModal}"></div>