1<loader loading="loading"></loader> 2<div id="configuration-cert"> 3 <div class="row column"> 4 <h1>SSL certificates</h1> 5 </div> 6 <div ng-repeat="certificate in certificates | filter:{isExpiring:true}" class="row column"> 7 <div class="small-12 alert alert-warning" role="alert"> 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. 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"> 15 <icon file="icon-critical.svg" aria-hidden="true"></icon> The uploaded {{certificate.name}} has expired! Consider replacing it with a new certificate. 16 </div> 17 </div> 18 <div class="row column"> 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> 21 Add new certificate 22 </button> 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> 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> 35 <div class="certificate__issue-header"> 36 Issued by 37 </div> 38 <div class="certificate__issue-header"> 39 Issued to 40 </div> 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> 51 <div ng-if="certificates.length < 1" class="empty__logs">There have been no certificates added.</div> 52 <div ng-repeat="certificate in certificates"> 53 <certificate cert="certificate" reload="loadCertificates()" )></certificate> 54 </div> 55 </div> 56 </div> 57 <section class="modal add__certificate__modal" aria-hidden="true" role="dialog" ng-class="{'active': addCertificateModal}"> 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 "> 65 <div class="small-12"> 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"> 70 {{type.name}}</option> 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> 74 </div> 75 </div> 76 </div> 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> 100 </section> 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> 147 <!-- Do not show CA certificate as an option. Only a certificate authority can generate a CA certificate (known as TrustStore Certificate in Redfish) --> 148 <option class="courier-bold" ng-value="type" ng-repeat="type in allCertificateTypes" ng-if="type.Description !== 'TrustStore Certificate'"> 149 {{type.name}}</option> 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>