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