Update certificate management page consistency
This change applies global styles to improve
page layout consistency and modal management
- Adds page and section styles
- Removes unused styles
- Creates individual html files for modals
- Updates certificate modals to bootstrap modal
- Updates global styles for input file field in file-upload.scss
TODO:
- Update certificate table with table component in separate commit
- Update CSR modal to use global form-field styles in separate commit
Signed-off-by: Dixsie Wolmers <dixsiew@gmail.com>
Change-Id: I9b800cb684740da1a9168294433e726efb0f9d0e
diff --git a/app/access-control/controllers/certificate-modal-csr-gen.html b/app/access-control/controllers/certificate-modal-csr-gen.html
new file mode 100644
index 0000000..bde00cf
--- /dev/null
+++ b/app/access-control/controllers/certificate-modal-csr-gen.html
@@ -0,0 +1,351 @@
+<div class="uib-modal__content">
+ <div class="modal-header">
+ <h2 class="modal-title" id="modal_label">
+ Generate a Certificate Signing Request (CSR)
+ </h2>
+ <button
+ type="button"
+ class="btn btn--close"
+ ng-click="$dismiss()"
+ aria-label="close">
+ <icon file="icon-close.svg" aria-hidden="true"></icon>
+ </button>
+ </div>
+ <form name="addCsrForm" id="addCsrForm" novalidate>
+ <div class="modal-body">
+ <div class="row">
+ <fieldset class="column large-8 add-csr__section">
+ <legend class="content-label">General</legend>
+ <div class="row">
+ <div class="column large-6">
+ <label for="certType" class="content-label">
+ Certificate Type *
+ </label>
+ <select
+ class="add-csr__select"
+ id="certType"
+ name="certType"
+ ng-model="newCSR.certificateCollection"
+ required>
+ <option
+ class="courier-bold"
+ ng-value="default"
+ ng-model="selectOption">
+ Select an option
+ </option>
+ <!-- Do not show CA certificate as an option.
+ Only a certificate authority can generate a CA certificate
+ (known as TrustStore Certificate in Redfish) -->
+ <option
+ class="courier-bold"
+ ng-value="type"
+ ng-repeat="type in allCertificateTypes"
+ ng-if="type.Description !== 'TrustStore Certificate'">
+ {{ type.name }}
+ </option>
+ </select>
+ <div
+ ng-messages="addCsrForm.certType.$error"
+ class="form-error"
+ ng-class="{'visible' : addCsrForm.certType.$touched}">
+ <p ng-message="required">Field is required</p>
+ </div>
+ </div>
+ <div class="column large-6">
+ <label for="countryCode" class="content-label">Country *</label>
+ <select
+ class="add-csr__select"
+ id="countryCode"
+ name="countryCode"
+ ng-model="newCSR.countryCode"
+ required>
+ <option
+ class="courier-bold"
+ ng-value=""
+ ng-model="selectOption">
+ Select an option
+ </option>
+ <option
+ class="courier-bold"
+ ng-value="country"
+ ng-repeat="country in countryList">
+ {{ country.Name }}
+ </option>
+ </select>
+ <div
+ ng-messages="addCsrForm.countryCode.$error"
+ class="form-error"
+ ng-class="{'visible' : addCsrForm.countryCode.$touched}">
+ <p ng-message="required">Field is required</p>
+ </div>
+ </div>
+ <div class="column large-6">
+ <label for="state" class="content-label">State *</label>
+ <input
+ class="add-csr__input"
+ ng-model="newCSR.state"
+ type="text"
+ id="state"
+ name="state"
+ required/>
+ <div
+ ng-messages="addCsrForm.state.$error"
+ class="form-error"
+ ng-class="{'visible' : addCsrForm.state.$touched}">
+ <p ng-message="required">Field is required</p>
+ </div>
+ </div>
+ <div class="column large-6">
+ <label for="city" class="content-label">City *</label>
+ <input
+ class="add-csr__input"
+ id="city"
+ name="city"
+ ng-model="newCSR.city"
+ type="text"
+ required/>
+ <div
+ ng-messages="addCsrForm.city.$error"
+ class="form-error"
+ ng-class="{'visible' : addCsrForm.city.$touched}">
+ <p ng-message="required">Field is required</p>
+ </div>
+ </div>
+ <div class="column large-6">
+ <label for="companyName" class="content-label">
+ Company Name *
+ </label>
+ <input
+ class="add-csr__input"
+ type="text"
+ ng-model="newCSR.organization"
+ id="companyName"
+ name="companyName"
+ required/>
+ <div
+ ng-messages="addCsrForm.companyName.$error"
+ class="form-error"
+ ng-class="{'visible' : addCsrForm.companyName.$touched}">
+ <p ng-message="required">Field is required</p>
+ </div>
+ </div>
+ <div class="column large-6">
+ <label for="companyUnit" class="content-label">
+ Company Unit *
+ </label>
+ <input
+ class="add-csr__input"
+ ng-model="newCSR.companyUnit"
+ name="companyUnit"
+ id="companyUnit"
+ type="text"
+ required/>
+ <div
+ ng-messages="addCsrForm.companyUnit.$error"
+ class="form-error"
+ ng-class="{'visible' : addCsrForm.companyUnit.$touched}">
+ <p ng-message="required">Field is required</p>
+ </div>
+ </div>
+ <div class="column large-6">
+ <label for="commonName" class="content-label">
+ Common Name *
+ </label>
+ <input
+ class="add-csr__input"
+ ng-model="newCSR.commonName"
+ name="commonName"
+ type="text"
+ id="commonName"
+ required/>
+ <div
+ ng-messages="addCsrForm.commonName.$error"
+ class="form-error"
+ ng-class="{'visible' : addCsrForm.commonName.$touched}">
+ <p ng-message="required">Field is required</p>
+ </div>
+ </div>
+ <div class="column large-6">
+ <label for="challengePassword" class="content-label">
+ Challenge Password
+ </label>
+ <input
+ class="add-csr__input-no-validation"
+ id="challengePassword"
+ ng-model="newCSR.challengePassword"
+ type="text"/>
+ </div>
+ <div class="column large-6">
+ <label for="contactPerson" class="content-label">
+ Contact Person
+ </label>
+ <input
+ class="add-csr__input-no-validation"
+ id="contactPerson"
+ ng-model="newCSR.contactPerson"
+ type="text"/>
+ </div>
+ <div class="column large-6">
+ <label for="emailAddress" class="content-label">
+ Email Address
+ </label>
+ <input
+ class="add-csr__input-no-validation"
+ id="emailAddress"
+ ng-model="newCSR.emailAddress"
+ type="text"/>
+ </div>
+ <div class="column large-6">
+ <label
+ id="alternate-name-label"
+ for="alternateName"
+ class="content-label">
+ Alternate Name
+ </label>
+ <input
+ class="add-csr__input-no-validation"
+ ng-model="newCSR.firstAlternativeName"
+ id="alternateName"
+ name="alternativeName"
+ type="text"/>
+ <div
+ class="add-csr__additional-alt-names"
+ ng-repeat="name in names">
+ <input
+ id="alternate-name-input-{{ $index }}"
+ aria-describedby="alternate-name-label"
+ class="add-csr__input-no-validation"
+ ng-model="name.Value"
+ type="text"/>
+ <button
+ aria-label="Delete alternate name field"
+ aria-controls="alternate-name-input-{{ $index }}"
+ class="btn btn-tertiary add-csr__alt-name-delete-btn"
+ ng-click="deleteOptionalRow($index)"
+ ng-disabled="multiSelected">
+ <icon aria-hidden="true" file="icon-trashcan.svg"></icon>
+ </button>
+ </div>
+ </div>
+ <div class="column large-6">
+ <button
+ class="btn btn-tertiary add-csr__alt-name-add-btn"
+ ng-click="addOptionalRow()">
+ <icon file="icon-plus.svg" aria-hidden="true"></icon>
+ Add another alternate name
+ </button>
+ </div>
+ </div>
+ </fieldset>
+ <fieldset
+ class="column medium-12 large-4 add-csr__section add-csr__section--border">
+ <legend class="content-label">Private key</legend>
+ <div class="add-csr__container-private-key">
+ <div class="add-csr__container-private-key">
+ <label for="keyPairAlgorithm" class="content-label">
+ Key Pair Algorithm *
+ </label>
+ <select
+ class="add-csr__select"
+ ng-model="newCSR.keyPairAlgorithm"
+ id="keyPairAlgorithm"
+ name="keyPairAlgorithm"
+ required>
+ <option
+ class="courier-bold"
+ ng-value=""
+ ng-model="selectOption">
+ Select an option
+ </option>
+ <option
+ class="courier-bold"
+ ng-value="data"
+ ng-repeat="data in keyPairAlgorithm">
+ {{ data }}
+ </option>
+ </select>
+ <div
+ ng-messages="addCsrForm.keyPairAlgorithm.$error"
+ class="form-error"
+ ng-class="{'visible' : addCsrForm.keyPairAlgorithm.$touched}">
+ <p ng-message="required">Field is required</p>
+ </div>
+ </div>
+ <div ng-if="newCSR.keyPairAlgorithm == 'EC'">
+ <div class="large-12">
+ <label for="keyCurveId" class="content-label">
+ Key Curve ID
+ </label>
+ <select
+ class="add-csr__select"
+ ng-model="newCSR.keyCurveId"
+ id="keyCurveId"
+ name="keyCurveId"
+ required>
+ <option class="courier-bold" ng-value="">None</option>
+ <option
+ class="courier-bold"
+ ng-value="data"
+ ng-repeat="data in keyCurveId">
+ {{ data }}
+ </option>
+ </select>
+ <div
+ ng-messages="addCsrForm.keyCurveId.$error"
+ class="form-error"
+ ng-class="{'visible' : addCsrForm.keyCurveId.$touched}">
+ <p ng-message="required">Field is required</p>
+ </div>
+ </div>
+ </div>
+ <div ng-if="newCSR.keyPairAlgorithm =='RSA'">
+ <div class="large-12">
+ <label for="keyBitLength" class="content-label">
+ Key Bit Length *
+ </label>
+ <select
+ class="add-csr__select"
+ ng-model="newCSR.keyBitLength"
+ id="keyBitLength"
+ name="keyBitLength"
+ required>
+ <option class="courier-bold" ng-value="">
+ Select an option
+ </option>
+ <option
+ class="courier-bold"
+ ng-value="data"
+ ng-repeat="data in keyBitLength">
+ {{ data }}
+ </option>
+ </select>
+ <div
+ ng-messages="addCsrForm.keyBitLength.$error"
+ class="form-error"
+ ng-class="{'visible' : addCsrForm.keyBitLength.$touched}">
+ <p ng-message="required">Field is required</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </fieldset>
+ </div>
+ </div>
+ <div class="modal-footer">
+ <button
+ type="reset"
+ class="btn btn-secondary"
+ ng-click="$dismiss()">
+ Cancel
+ </button>
+ <button
+ type="submit"
+ class="btn btn-primary"
+ ng-click="getCSRCode();addCsrForm.$setUntouched();$dismiss()"
+ ng-disabled="addCsrForm.$invalid">
+ Generate CSR
+ </button>
+ </div>
+ </form>
+ </div>
+</div>