1<div class="uib-modal__content"> 2 <div class="modal-header"> 3 <h2 class="modal-title" id="modal_label"> 4 Generate a Certificate Signing Request (CSR) 5 </h2> 6 <button 7 type="button" 8 class="btn btn--close" 9 ng-click="$dismiss()" 10 aria-label="close"> 11 <icon file="icon-close.svg" aria-hidden="true"></icon> 12 </button> 13 </div> 14 <form name="addCsrForm" id="addCsrForm" novalidate> 15 <div class="modal-body"> 16 <div class="row"> 17 <fieldset class="column large-8 add-csr__section"> 18 <legend class="content-label">General</legend> 19 <div class="row"> 20 <div class="column large-6"> 21 <label for="certType" class="content-label"> 22 Certificate Type * 23 </label> 24 <select 25 class="add-csr__select" 26 id="certType" 27 name="certType" 28 ng-model="newCSR.certificateCollection" 29 required> 30 <option 31 class="courier-bold" 32 ng-value="default" 33 ng-model="selectOption"> 34 Select an option 35 </option> 36 <!-- Do not show CA certificate as an option. 37 Only a certificate authority can generate a CA certificate 38 (known as TrustStore Certificate in Redfish) --> 39 <option 40 class="courier-bold" 41 ng-value="type" 42 ng-repeat="type in allCertificateTypes" 43 ng-if="type.Description !== 'TrustStore Certificate'"> 44 {{ type.name }} 45 </option> 46 </select> 47 <div 48 ng-messages="addCsrForm.certType.$error" 49 class="form-error" 50 ng-class="{'visible' : addCsrForm.certType.$touched}"> 51 <p ng-message="required">Field is required</p> 52 </div> 53 </div> 54 <div class="column large-6"> 55 <label for="countryCode" class="content-label">Country *</label> 56 <select 57 class="add-csr__select" 58 id="countryCode" 59 name="countryCode" 60 ng-model="newCSR.countryCode" 61 required> 62 <option 63 class="courier-bold" 64 ng-value="" 65 ng-model="selectOption"> 66 Select an option 67 </option> 68 <option 69 class="courier-bold" 70 ng-value="country" 71 ng-repeat="country in countryList"> 72 {{ country.Name }} 73 </option> 74 </select> 75 <div 76 ng-messages="addCsrForm.countryCode.$error" 77 class="form-error" 78 ng-class="{'visible' : addCsrForm.countryCode.$touched}"> 79 <p ng-message="required">Field is required</p> 80 </div> 81 </div> 82 <div class="column large-6"> 83 <label for="state" class="content-label">State *</label> 84 <input 85 class="add-csr__input" 86 ng-model="newCSR.state" 87 type="text" 88 id="state" 89 name="state" 90 required/> 91 <div 92 ng-messages="addCsrForm.state.$error" 93 class="form-error" 94 ng-class="{'visible' : addCsrForm.state.$touched}"> 95 <p ng-message="required">Field is required</p> 96 </div> 97 </div> 98 <div class="column large-6"> 99 <label for="city" class="content-label">City *</label> 100 <input 101 class="add-csr__input" 102 id="city" 103 name="city" 104 ng-model="newCSR.city" 105 type="text" 106 required/> 107 <div 108 ng-messages="addCsrForm.city.$error" 109 class="form-error" 110 ng-class="{'visible' : addCsrForm.city.$touched}"> 111 <p ng-message="required">Field is required</p> 112 </div> 113 </div> 114 <div class="column large-6"> 115 <label for="companyName" class="content-label"> 116 Company Name * 117 </label> 118 <input 119 class="add-csr__input" 120 type="text" 121 ng-model="newCSR.organization" 122 id="companyName" 123 name="companyName" 124 required/> 125 <div 126 ng-messages="addCsrForm.companyName.$error" 127 class="form-error" 128 ng-class="{'visible' : addCsrForm.companyName.$touched}"> 129 <p ng-message="required">Field is required</p> 130 </div> 131 </div> 132 <div class="column large-6"> 133 <label for="companyUnit" class="content-label"> 134 Company Unit * 135 </label> 136 <input 137 class="add-csr__input" 138 ng-model="newCSR.companyUnit" 139 name="companyUnit" 140 id="companyUnit" 141 type="text" 142 required/> 143 <div 144 ng-messages="addCsrForm.companyUnit.$error" 145 class="form-error" 146 ng-class="{'visible' : addCsrForm.companyUnit.$touched}"> 147 <p ng-message="required">Field is required</p> 148 </div> 149 </div> 150 <div class="column large-6"> 151 <label for="commonName" class="content-label"> 152 Common Name * 153 </label> 154 <input 155 class="add-csr__input" 156 ng-model="newCSR.commonName" 157 name="commonName" 158 type="text" 159 id="commonName" 160 required/> 161 <div 162 ng-messages="addCsrForm.commonName.$error" 163 class="form-error" 164 ng-class="{'visible' : addCsrForm.commonName.$touched}"> 165 <p ng-message="required">Field is required</p> 166 </div> 167 </div> 168 <div class="column large-6"> 169 <label for="challengePassword" class="content-label"> 170 Challenge Password 171 </label> 172 <input 173 class="add-csr__input-no-validation" 174 id="challengePassword" 175 ng-model="newCSR.challengePassword" 176 type="text"/> 177 </div> 178 <div class="column large-6"> 179 <label for="contactPerson" class="content-label"> 180 Contact Person 181 </label> 182 <input 183 class="add-csr__input-no-validation" 184 id="contactPerson" 185 ng-model="newCSR.contactPerson" 186 type="text"/> 187 </div> 188 <div class="column large-6"> 189 <label for="emailAddress" class="content-label"> 190 Email Address 191 </label> 192 <input 193 class="add-csr__input-no-validation" 194 id="emailAddress" 195 ng-model="newCSR.emailAddress" 196 type="text"/> 197 </div> 198 <div class="column large-6"> 199 <label 200 id="alternate-name-label" 201 for="alternateName" 202 class="content-label"> 203 Alternate Name 204 </label> 205 <input 206 class="add-csr__input-no-validation" 207 ng-model="newCSR.firstAlternativeName" 208 id="alternateName" 209 name="alternativeName" 210 type="text"/> 211 <div 212 class="add-csr__additional-alt-names" 213 ng-repeat="name in names"> 214 <input 215 id="alternate-name-input-{{ $index }}" 216 aria-describedby="alternate-name-label" 217 class="add-csr__input-no-validation" 218 ng-model="name.Value" 219 type="text"/> 220 <button 221 aria-label="Delete alternate name field" 222 aria-controls="alternate-name-input-{{ $index }}" 223 class="btn btn-tertiary add-csr__alt-name-delete-btn" 224 ng-click="deleteOptionalRow($index)" 225 ng-disabled="multiSelected"> 226 <icon aria-hidden="true" file="icon-trashcan.svg"></icon> 227 </button> 228 </div> 229 </div> 230 <div class="column large-6"> 231 <button 232 class="btn btn-tertiary add-csr__alt-name-add-btn" 233 ng-click="addOptionalRow()"> 234 <icon file="icon-plus.svg" aria-hidden="true"></icon> 235 Add another alternate name 236 </button> 237 </div> 238 </div> 239 </fieldset> 240 <fieldset 241 class="column medium-12 large-4 add-csr__section add-csr__section--border"> 242 <legend class="content-label">Private key</legend> 243 <div class="add-csr__container-private-key"> 244 <div class="add-csr__container-private-key"> 245 <label for="keyPairAlgorithm" class="content-label"> 246 Key Pair Algorithm * 247 </label> 248 <select 249 class="add-csr__select" 250 ng-model="newCSR.keyPairAlgorithm" 251 id="keyPairAlgorithm" 252 name="keyPairAlgorithm" 253 required> 254 <option 255 class="courier-bold" 256 ng-value="" 257 ng-model="selectOption"> 258 Select an option 259 </option> 260 <option 261 class="courier-bold" 262 ng-value="data" 263 ng-repeat="data in keyPairAlgorithm"> 264 {{ data }} 265 </option> 266 </select> 267 <div 268 ng-messages="addCsrForm.keyPairAlgorithm.$error" 269 class="form-error" 270 ng-class="{'visible' : addCsrForm.keyPairAlgorithm.$touched}"> 271 <p ng-message="required">Field is required</p> 272 </div> 273 </div> 274 <div ng-if="newCSR.keyPairAlgorithm == 'EC'"> 275 <div class="large-12"> 276 <label for="keyCurveId" class="content-label"> 277 Key Curve ID 278 </label> 279 <select 280 class="add-csr__select" 281 ng-model="newCSR.keyCurveId" 282 id="keyCurveId" 283 name="keyCurveId" 284 required> 285 <option class="courier-bold" ng-value="">None</option> 286 <option 287 class="courier-bold" 288 ng-value="data" 289 ng-repeat="data in keyCurveId"> 290 {{ data }} 291 </option> 292 </select> 293 <div 294 ng-messages="addCsrForm.keyCurveId.$error" 295 class="form-error" 296 ng-class="{'visible' : addCsrForm.keyCurveId.$touched}"> 297 <p ng-message="required">Field is required</p> 298 </div> 299 </div> 300 </div> 301 <div ng-if="newCSR.keyPairAlgorithm =='RSA'"> 302 <div class="large-12"> 303 <label for="keyBitLength" class="content-label"> 304 Key Bit Length * 305 </label> 306 <select 307 class="add-csr__select" 308 ng-model="newCSR.keyBitLength" 309 id="keyBitLength" 310 name="keyBitLength" 311 required> 312 <option class="courier-bold" ng-value=""> 313 Select an option 314 </option> 315 <option 316 class="courier-bold" 317 ng-value="data" 318 ng-repeat="data in keyBitLength"> 319 {{ data }} 320 </option> 321 </select> 322 <div 323 ng-messages="addCsrForm.keyBitLength.$error" 324 class="form-error" 325 ng-class="{'visible' : addCsrForm.keyBitLength.$touched}"> 326 <p ng-message="required">Field is required</p> 327 </div> 328 </div> 329 </div> 330 </div> 331 </fieldset> 332 </div> 333 </div> 334 <div class="modal-footer"> 335 <button 336 type="reset" 337 class="btn btn-secondary" 338 ng-click="$dismiss()"> 339 Cancel 340 </button> 341 <button 342 type="submit" 343 class="btn btn-primary" 344 ng-click="getCSRCode();addCsrForm.$setUntouched();$dismiss()" 345 ng-disabled="addCsrForm.$invalid"> 346 Generate CSR 347 </button> 348 </div> 349 </form> 350 </div> 351</div> 352