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-controller.html b/app/access-control/controllers/certificate-controller.html
index c1f64fa..d2db65c 100644
--- a/app/access-control/controllers/certificate-controller.html
+++ b/app/access-control/controllers/certificate-controller.html
@@ -1,32 +1,44 @@
<loader loading="loading"></loader>
-<div id="configuration-cert">
- <div class="row column">
- <h1>SSL certificates</h1>
- </div>
- <div ng-repeat="certificate in certificates | filter:{isExpiring:true}" class="row column">
- <div class="small-12 alert alert-warning" role="alert">
- <icon file="icon-warning.svg" aria-hidden="true"></icon>
- The uploaded {{certificate.name}} is expiring in {{getDays(certificate.ValidNotAfter) === 0 ? 'less than one day!' : getDays(certificate.ValidNotAfter)
- + ' days!'}} Consider replacing it with a new certificate.
+<div id="configuration-cert" class="page">
+ <h1 class="page-title">SSL certificates</h1>
+ <section class="section">
+ <div class="section-content">
+ <div ng-repeat="certificate in certificates | filter:{isExpiring:true}">
+ <div class="alert alert-warning" role="alert">
+ <icon file="icon-warning.svg" aria-hidden="true"></icon>
+ The uploaded {{ certificate.name }} is expiring in
+ {{ getDays(certificate.ValidNotAfter) === 0
+ ? "less than one day!"
+ : getDays(certificate.ValidNotAfter) + " days!" }}
+ Consider replacing it with a new certificate.
+ </div>
+ </div>
+ <div ng-repeat="certificate in certificates | filter:{isExpired:true}">
+ <div class="alert alert-danger" role="alert">
+ <icon file="icon-critical.svg" aria-hidden="true"></icon>
+ The uploaded {{ certificate.name }} has expired! Consider replacing it
+ with a new certificate.
+ </div>
+ </div>
</div>
- </div>
- <div ng-repeat="certificate in certificates|filter:{isExpired:true}" class="row column">
- <div class="small-12 alert alert-danger" role="alert">
- <icon file="icon-critical.svg" aria-hidden="true"></icon> The uploaded {{certificate.name}} has expired! Consider replacing it with a new certificate.
+ </section>
+ <section class="section">
+ <div class="section-content">
+ <button
+ type="button"
+ class="btn btn-tertiary"
+ ng-disabled="availableCertificateTypes.length === 0"
+ ng-click="addCertModal()">
+ <icon class="icon-add" file="icon-plus.svg" aria-hidden="true"></icon>
+ Add new certificate
+ </button>
+ <button type="button" class="btn btn-tertiary" ng-click="addCsrModal()">
+ <icon class="icon-add" file="icon-plus.svg" aria-hidden="true"></icon>
+ Generate CSR
+ </button>
</div>
- </div>
- <div class="row column">
- <button type="button" class="btn btn-tertiary" ng-disabled="availableCertificateTypes.length === 0" ng-click="addCertificateModal=true">
- <icon class="icon-add" file="icon-plus.svg"></icon>
- Add new certificate
- </button>
- <button type="button" class="btn btn-tertiary" ng-click="addCSRModal=true">
- <icon class="icon-add" file="icon-plus.svg"></icon>
- Generate CSR
- </button>
- </div>
- <div class="row column">
- <div class="small-12 certificate__table">
+ <!-- TODO: Replace table with resusable table component -->
+ <div class="section-content certificate__table">
<div class="table__row-header">
<div class="row column">
<div class="certificate__type-header">
@@ -41,254 +53,18 @@
<div class="certificate__date-header">
Valid from
</div>
- <div class="certificate__status-header">
- </div>
+ <div class="certificate__status-header"></div>
<div class="certificate__date-header">
Valid until
</div>
</div>
</div>
- <div ng-if="certificates.length < 1" class="empty__logs">There have been no certificates added.</div>
+ <div ng-if="certificates.length < 1" class="empty__logs">
+ There have been no certificates added.
+ </div>
<div ng-repeat="certificate in certificates">
- <certificate cert="certificate" reload="loadCertificates()" )></certificate>
+ <certificate cert="certificate" reload="loadCertificates()"></certificate>
</div>
</div>
- </div>
- <section class="modal add__certificate__modal" aria-hidden="true" role="dialog" ng-class="{'active': addCertificateModal}">
- <form name="add__cert__form" id="add__cert__form" ng-class="{'submitted': submitted}">
- <div class="modal__content">
- <button class="certificate__close-modal" ng-click="addCertificateModal = false; add__cert__form.$setUntouched()">
- <icon aria-hidden="true" file="icon-close.svg">
- </button>
- <h2 class="page-header">Add new certificate</h2>
- <div class="row column add-certificate__section ">
- <div class="small-12">
- <label for="cert__type">Certificate type</label>
- <select id="cert__type" name="cert__type" ng-model="newCertificate.selectedType" required>
- <option class="courier-bold" ng-value="">Select an option</option>
- <option class="courier-bold" ng-value="type" ng-repeat="type in availableCertificateTypes">
- {{type.name}}</option>
- </select>
- <div ng-messages="add__cert__form.cert__type.$error" class="form-error" ng-class="{'visible' : add__cert__form.cert__type.$touched || submitted }">
- <p ng-message="required">Field is required</p>
- </div>
- </div>
- </div>
- <div class="row column add-certificate__section">
- <div class="small-12">
- <label class="select__new-label" for="upload_cert_new">Certificate file</label>
- </div>
- <div class="row column file__upload add-certificate__section ">
- <label for='upload_cert_new'>
- <input name="upload_cert_new" id="upload_cert_new" type="file" file="newCertificate.file" class="hide" />
- <span class="btn btn-secondary select__new-button">Choose file</span>
- </label>
- </div>
- <div class="row column add-certificate__section ">
- <div ng-if="newCertificate.file" class="small-7 file__name">
- <span>{{newCertificate.file.name}}</span>
- <icon file="icon-close.svg" ng-if="newCertificate.file.name" ng-click="newCertificate.file = '';" class="float-right"></icon>
- </div>
- </div>
- </div>
- </div>
- <div class="modal__button-wrapper">
- <button class="btn btn-secondary" ng-click="addCertificateModal = false; newCertificate={};add__cert__form.$setUntouched();">Cancel</button>
- <button class="btn btn-primary" ng-disabled="add__cert__form.$invalid || !newCertificate.file" ng-click="submitted = true; uploadCertificate();">Save</button>
- </div>
- </form>
</section>
-
- <section class="modal add-csr__modal" aria-hidden="true" role="dialog" ng-class="{'active': addCSRModal}">
- <!--Close button for displaying CSR Code, we need a close button within form to reset form validation correctly-->
- <button class="certificate__close-modal" ng-click="resetCSRModal();" ng-if="displayCSRCode==true">
- <icon aria-hidden="true" file="icon-close.svg">
- </button>
-
- <!-- CSR Code display content-->
-
- <div ng-if="displayCSRCode==true">
- <h2 class="page-header">Certificate Signing Request (CSR)</h2>
- <div class="modal__content add-csr__container">
- <span id="csrCode" class="add-csr__container-csr-code">{{csrCode}}</span>
- </div>
- <div class="modal__button-wrapper">
- <button class="btn btn-secondary" clipboard text="csrCode" on-copied="copySuccess(event)" on-error="copyfailed(err)">
- <span ng-if="!copied">Copy</span>
- <span ng-if="copied">
- <icon aria-hidden="true" file="icon-check.svg"></icon>
- <span>Copied</span>
- </span>
- </button>
- <button class="btn btn-primary" ng-click="addCSRModal = false;">
- <a ng-href="data:text/json;charset=utf-8,{{csrCode}}" download="csrCode.txt" class="add-csr__text-download">
- Download</a>
- </button>
- </div>
-
- </div>
-
-
-
- <form name="add__csr__form" id="add__csr__form" novalidate ng-if="displayCSRCode==false">
- <div class="modal__content add-csr__container">
- <button class="certificate__close-modal" ng-click="resetCSRModal(); add__csr__form.$setUntouched()">
- <icon aria-hidden="true" file="icon-close.svg">
- </button>
- <h2 class="page-header">Generate a Certificate Signing Request (CSR)</h2>
- <div class="row">
- <fieldset class="column medium-8 add-csr__section">
- <legend class="add-csr__section-title">General</legend>
- <div class="row">
- <div class="column medium-6">
- <label for="cert__type" class="add-csr__label">Certificate Type *</label>
- <select class="add-csr__select" id="cert__type" name="cert__type" 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="add__csr__form.cert__type.$error" class="form-error" ng-class="{'visible' : add__csr__form.cert__type.$touched}">
- <p ng-message="required">Field is required</p>
- </div>
- </div>
- <div class="column medium-6">
- <label for="countryCode" class="add-csr__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="add__csr__form.countryCode.$error" class="form-error" ng-class="{'visible' : add__csr__form.countryCode.$touched}">
- <p ng-message="required">Field is required</p>
- </div>
- </div>
-
- <div class="column medium-6">
- <label for="state" class="add-csr__label">State *</label>
- <input class="add-csr__input" ng-model="newCSR.state" type="text" id="state" name="state" required></input>
- <div ng-messages="add__csr__form.state.$error" class="form-error" ng-class="{'visible' : add__csr__form.state.$touched}">
- <p ng-message="required">Field is required</p>
- </div>
- </div>
-
- <div class="column medium-6">
- <label for="city" class="add-csr__label">City *</label>
- <input class="add-csr__input" id="city" name="city" ng-model="newCSR.city" type="text" required></input>
- <div ng-messages="add__csr__form.city.$error" class="form-error" ng-class="{'visible' : add__csr__form.city.$touched}">
- <p ng-message="required">Field is required</p>
- </div>
- </div>
-
- <div class="column medium-6">
- <label for="companyName" class="add-csr__label">Company Name *</label>
- <input class="add-csr__input" type="text" ng-model="newCSR.organization" id="companyName" name="companyName" required></input>
- <div ng-messages="add__csr__form.companyName.$error" class="form-error" ng-class="{'visible' : add__csr__form.companyName.$touched}">
- <p ng-message="required">Field is required</p>
- </div>
- </div>
-
- <div class="column medium-6">
- <label for="companyUnit" class="add-csr__label">Company Unit *</label>
- <input class="add-csr__input" ng-model="newCSR.companyUnit" name="companyUnit" id="companyUnit" type="text" required></input>
- <div ng-messages="add__csr__form.companyUnit.$error" class="form-error" ng-class="{'visible' : add__csr__form.companyUnit.$touched}">
- <p ng-message="required">Field is required</p>
- </div>
- </div>
-
- <div class="column medium-6">
- <label for="commonName" class="add-csr__label">Common Name *</label>
- <input class="add-csr__input" ng-model="newCSR.commonName" name="commonName" type="text" id="commonName" required></input>
- <div ng-messages="add__csr__form.commonName.$error" class="form-error" ng-class="{'visible' : add__csr__form.commonName.$touched}">
- <p ng-message="required">Field is required</p>
- </div>
- </div>
-
- <div class="column medium-6">
- <label for="challengePassword" class="add-csr__label">Challenge Password</label>
- <input class="add-csr__input-no-validation" id="challengePassword" ng-model="newCSR.challengePassword" type="text"></input>
- </div>
-
- <div class="column medium-6">
- <label for="contactPerson" class="add-csr__label">Contact Person</label>
- <input class="add-csr__input-no-validation" id="contactPerson" ng-model="newCSR.contactPerson" type="text"></input>
- </div>
-
- <div class="column medium-6">
- <label for="emailAddress" class="add-csr__label">Email Address</label>
- <input class="add-csr__input-no-validation" id="emailAddress" ng-model="newCSR.emailAddress" type="text"></input>
- </div>
-
- <div class="column medium-6">
- <div>
- <label id="alternate-name-label" for="alternateName" class="add-csr__label">Alternate Name</label>
- <input class="add-csr__input-no-validation" ng-model="newCSR.firstAlternativeName" id="alternateName" name="alternativeName"
- type="text"></input>
- </div>
- <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"></input>
- <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">
- </button>
- </div>
- </div>
-
- <div class="column medium-6">
- <button class="btn btn-tertiary add-csr__alt-name-add-btn" ng-click="addOptionalRow()">
- <icon file="icon-plus.svg"></icon>
- Add another alternate name
- </button>
- </div>
- </div>
- </fieldset>
-
- <fieldset class="column medium-4 add-csr__section add-csr__section--border ">
- <legend class="add-csr__section-title">Private key</legend>
- <div class="add-csr__container-private-key">
- <div class="add-csr__content-private-key">
- <label for="keyPairAlgorithm" class="add-csr__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="add__csr__form.keyPairAlgorithm.$error" class="form-error" ng-class="{'visible' : add__csr__form.keyPairAlgorithm.$touched}">
- <p ng-message="required">Field is required</p>
- </div>
-
- <div ng-if="newCSR.keyPairAlgorithm == 'EC'">
- <label for="keyCurveId" class="add-csr__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="add__csr__form.keyCurveId.$error" class="form-error" ng-class="{'visible' : add__csr__form.keyCurveId.$touched}">
- <p ng-message="required">Field is required</p>
- </div>
- </div>
-
-
- <div ng-if="newCSR.keyPairAlgorithm =='RSA'">
- <label for="keyBitLength" class="add-csr__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="add__csr__form.keyBitLength.$error" class="form-error" ng-class="{'visible' : add__csr__form.keyBitLength.$touched}">
- <p ng-message="required">Field is required</p>
- </div>
- </div>
-
- </div>
- </fieldset>
- </div>
- </div>
- <div class="modal__button-wrapper">
- <button class="btn btn-secondary" ng-click="resetCSRModal();add__csr__form.$setUntouched();">Cancel</button>
- <button class="btn btn-primary" ng-click="csrSubmitted = true; getCSRCode();add__csr__form.$setUntouched();" ng-disabled="add__csr__form.$invalid">Generate CSR</button>
- </div>
- </div>
- </form>
- </section>
- <div class="modal-overlay" tabindex="-1" ng-class="{'active': addCertificateModal || addCSRModal}"></div>
\ No newline at end of file
+</div>