Create certificate management page
Displays certificates and the ability to add up to one
of each type of certificate (as limited by the backend
implementation). HTTPS certificate and LDAP client cert
are implemented in this commit, with the ability to add
more types as needed by adding them to the constants.js
CERTIFICATE_TYPES array.
Also provides the ability to replace a certificate once
it is added.
Resolves openbmc/phosphor-webui#43
Tested: loaded onto a witherspoon and able to view and
replace both the HTTPS certificate and the
LDAP certificate. GUI only allows to upload an
LDAP certificate if one doesn't already exist.
The GUI limits the user to one file per type as
expected at this time and provides the
appropriate validation messages. Alert messages
appear above the table if the certificate is
expired or within 30 days of expiring.
Change-Id: I345267280ecd3cb257e9304886cde9ebb69b1240
Signed-off-by: beccabroek <beccabroek@gmail.com>
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
diff --git a/app/common/directives/certificate.html b/app/common/directives/certificate.html
new file mode 100644
index 0000000..a46de69
--- /dev/null
+++ b/app/common/directives/certificate.html
@@ -0,0 +1,57 @@
+<div class="table__row-value row column">
+ <div class="certificate__type-cell bold">
+ {{cert.Description}}
+ </div>
+ <div class="certificate__title-inline">
+ Valid from:
+ </div>
+ <div class="certificate__date-cell">
+ {{cert.ValidNotBefore | localeDate}}
+ </div>
+ <div class="certificate__title-inline">
+ Valid until:
+ </div>
+ <div class="certificate__status-cell">
+ <span class="inline"
+ ng-class="{'icon__warning' : cert.isExpiring , 'icon__critical' : cert.isExpired}"
+ ng-if="cert.isExpired || cert.isExpiring"></span>
+ </div>
+ <div class="certificate__date-cell">
+ {{cert.ValidNotAfter | localeDate}}
+ </div>
+ <div class="certificate__buttons-cell">
+ <button type="button" class="btn btn-tertiary certificate__button">
+ <icon file="icon-replace.svg" ng-click="cert.upload = true"
+ aria-label="Replace certificate"></icon>
+ </button>
+ </div>
+ <div ng-show="cert.upload === true" class="upload__certificate">
+ <div class="certificate__upload-chooser row">
+ <div class="small-1 column">
+ <button type="button">
+ <icon file="icon-close.svg" ng-click="cert.upload=false"></icon>
+ </button>
+ </div>
+ <div class="small-2 column">
+ <label for='upload_{{cert.Description + cert.Id}}'>
+ <input name="upload_{{cert.Description + cert.Id}}"
+ id="upload_{{cert.Description + cert.Id}}"
+ type="file" file="cert.file" class="hide"/>
+ <span class="btn btn-secondary">Choose file</span>
+ </label>
+ </div>
+ <div class="small-6 column">
+ <span ng-if="!cert.file">No file selected</span>
+ <span>{{cert.file.name}}</span>
+ <button type="button" ng-if="cert.file.name" ng-click="cert.file = '';">
+ <icon file="icon-close.svg"></icon>
+ </button>
+ </div>
+ <div class="small-3 column">
+ <button type="button" ng-class="{disabled:!cert.file}"
+ class="btn btn-primary"
+ ng-click="replaceCertificate(cert)">Replace</button>
+ </div>
+ </div>
+ </div>
+</div>
\ No newline at end of file