mirror of
https://github.com/optim-enterprises-bv/vault.git
synced 2025-11-02 11:38:02 +00:00
Display CertificateCard instead of MaskedInput for certificates in PKI (#22160)
* replaced each instance of MaskedInput in PKI with CertificateCard * modify tests for pki-generate-csr * add test for pki-issuer-details. modify test for pki-certificate-details * added test for pki-key-details. modified test for pki-sign-intermediate-form * update 2 test helper files and modify test for pki-issuer-rotate-root * update test for certificate-card-test.js, update test for the kubernetes configuration-test.js * modify pki-action-forms-test.js to no longer look for masked input. expand test for pki-issuer-details-test.js to check for all issuer details * change CertificateCard to show different format types (PEM, DER, nothing) depending on the value provided. update 2 test files to account for this. * change CertificateCard arg name from @certficateValue to @data to be more inclusive of different uses of CertificateCard (i.e when used for a private key, not a certificate). add description to certificate-card.js * change naming for attr.options.masked to attr.options.displayCard to reflect the change from MaskedInput to CertificateCard * add changelog * change attribute to isCertificate to better fit the title of the component CertificateCard. edit pki-certificate-details.hbs to get rid of extraneous code
This commit is contained in:
40
ui/lib/core/addon/components/certificate-card.js
Normal file
40
ui/lib/core/addon/components/certificate-card.js
Normal file
@@ -0,0 +1,40 @@
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: MPL-2.0
|
||||
*/
|
||||
|
||||
import Component from '@glimmer/component';
|
||||
|
||||
/**
|
||||
* @module CertificateCard
|
||||
* The CertificateCard component receives data and optionally receives a boolean declaring if that data is meant to be in PEM
|
||||
* Format. It renders using the <HDS::Card::Container>. To the left there is a certificate icon. In the center there is a label
|
||||
* which says which format (PEM or DER) the data is in. Below the label is the truncated data. To the right there is a copy
|
||||
* button to copy the data.
|
||||
*
|
||||
* @example
|
||||
* ```js
|
||||
* <CertificateCard @data={{value}} @isPem={{true}} />
|
||||
* ```
|
||||
* @param {string} data - the data to be displayed in the component (usually in PEM or DER format)
|
||||
* @param {boolean} isPem - optional argument for if the data is required to be in PEM format (and should thus have the PEM Format label)
|
||||
*/
|
||||
|
||||
export default class CertificateCardComponent extends Component {
|
||||
// Returns the format the data is in: PEM, DER, or no format if no data is provided
|
||||
get format() {
|
||||
if (!this.args.data) return '';
|
||||
|
||||
let value;
|
||||
if (typeof this.args.data === 'object') {
|
||||
value = this.args.data[0];
|
||||
} else {
|
||||
value = this.args.data;
|
||||
}
|
||||
|
||||
if (value.substring(0, 11) === '-----BEGIN ' || this.args.isPem === true) {
|
||||
return 'PEM Format';
|
||||
}
|
||||
return 'DER Format';
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user