beccabroek | 309b5da | 2018-11-07 12:22:31 -0600 | [diff] [blame] | 1 | <loader loading="loading"></loader> |
| 2 | <div id="configuration-cert"> |
| 3 | <div class="row column"> |
| 4 | <h1>SSL certificates</h1> |
| 5 | </div> |
miramurali23 | 5e8785d | 2019-06-10 15:09:27 -0500 | [diff] [blame] | 6 | <div ng-repeat="certificate in certificates | filter:{isExpiring:true}" class="row column"> |
beccabroek | 309b5da | 2018-11-07 12:22:31 -0600 | [diff] [blame] | 7 | <div class="small-12 alert alert-warning" role="alert"> |
miramurali23 | 219738d | 2019-08-15 16:22:06 -0400 | [diff] [blame] | 8 | <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. |
beccabroek | 309b5da | 2018-11-07 12:22:31 -0600 | [diff] [blame] | 11 | </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 Muranaka | 4b366b5 | 2019-09-24 08:32:42 -0700 | [diff] [blame] | 15 | <icon file="icon-critical.svg" aria-hidden="true"></icon> The uploaded {{certificate.name}} has expired! Consider replacing it with a new certificate. |
beccabroek | 309b5da | 2018-11-07 12:22:31 -0600 | [diff] [blame] | 16 | </div> |
| 17 | </div> |
| 18 | <div class="row column"> |
miramurali23 | 5e8785d | 2019-06-10 15:09:27 -0500 | [diff] [blame] | 19 | <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> |
beccabroek | 309b5da | 2018-11-07 12:22:31 -0600 | [diff] [blame] | 21 | Add new certificate |
| 22 | </button> |
miramurali23 | 5e8785d | 2019-06-10 15:09:27 -0500 | [diff] [blame] | 23 | <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> |
beccabroek | 309b5da | 2018-11-07 12:22:31 -0600 | [diff] [blame] | 27 | </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 Kurzynski | c81cdd4 | 2019-07-25 11:52:15 +0200 | [diff] [blame] | 35 | <div class="certificate__issue-header"> |
| 36 | Issued by |
| 37 | </div> |
| 38 | <div class="certificate__issue-header"> |
| 39 | Issued to |
| 40 | </div> |
beccabroek | 309b5da | 2018-11-07 12:22:31 -0600 | [diff] [blame] | 41 | <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> |
miramurali23 | 5e8785d | 2019-06-10 15:09:27 -0500 | [diff] [blame] | 51 | <div ng-if="certificates.length < 1" class="empty__logs">There have been no certificates added.</div> |
beccabroek | 309b5da | 2018-11-07 12:22:31 -0600 | [diff] [blame] | 52 | <div ng-repeat="certificate in certificates"> |
miramurali23 | 5e8785d | 2019-06-10 15:09:27 -0500 | [diff] [blame] | 53 | <certificate cert="certificate" reload="loadCertificates()" )></certificate> |
beccabroek | 309b5da | 2018-11-07 12:22:31 -0600 | [diff] [blame] | 54 | </div> |
| 55 | </div> |
| 56 | </div> |
| 57 | <section class="modal add__certificate__modal" aria-hidden="true" role="dialog" ng-class="{'active': addCertificateModal}"> |
miramurali23 | 5e8785d | 2019-06-10 15:09:27 -0500 | [diff] [blame] | 58 | <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 "> |
beccabroek | 309b5da | 2018-11-07 12:22:31 -0600 | [diff] [blame] | 65 | <div class="small-12"> |
miramurali23 | 5e8785d | 2019-06-10 15:09:27 -0500 | [diff] [blame] | 66 | <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 Muranaka | dbafdc5 | 2019-06-28 09:41:19 -0500 | [diff] [blame] | 70 | {{type.name}}</option> |
miramurali23 | 5e8785d | 2019-06-10 15:09:27 -0500 | [diff] [blame] | 71 | </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> |
beccabroek | 309b5da | 2018-11-07 12:22:31 -0600 | [diff] [blame] | 74 | </div> |
| 75 | </div> |
| 76 | </div> |
miramurali23 | 5e8785d | 2019-06-10 15:09:27 -0500 | [diff] [blame] | 77 | <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> |
beccabroek | 309b5da | 2018-11-07 12:22:31 -0600 | [diff] [blame] | 100 | </section> |
miramurali23 | 5e8785d | 2019-06-10 15:09:27 -0500 | [diff] [blame] | 101 | |
| 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 Muranaka | dbafdc5 | 2019-06-28 09:41:19 -0500 | [diff] [blame] | 147 | <!-- Do not show CA certificate as an option. Only a certificate authority can generate a CA certificate (known as TrustStore Certificate in Redfish) --> |
miramurali23 | 219738d | 2019-08-15 16:22:06 -0400 | [diff] [blame] | 148 | <option class="courier-bold" ng-value="type" ng-repeat="type in allCertificateTypes" ng-if="type.Description !== 'TrustStore Certificate'"> |
Yoshie Muranaka | dbafdc5 | 2019-06-28 09:41:19 -0500 | [diff] [blame] | 149 | {{type.name}}</option> |
miramurali23 | 5e8785d | 2019-06-10 15:09:27 -0500 | [diff] [blame] | 150 | </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> |