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