open-vault/ui/app/templates/components/config-pki-ca.hbs
Angel Garbarino 2e35e9578c
UI/obscure secret on input (#11284)
* new font and add as font-family to be used in masked-input

* clean up logic

* refactor for displayOnly

* start cert masking

* work on certificates

* upload cert work

* fix global styling

* fix styling for class no longer used

* make mask by default and remove option

* glimmerize start and certificate on LDAP a file field

* glimmerize actions

* first part of glimmerizing text-file still need to do some clean up

* not doing awesome over here

* getting ready to un-glimmer

* unglimmerize

* remove placeholder based on conversations with design

* clean up text-file

* cleanup

* fix class bindings

* handle class binding

* set up for test

* fix elementId

* track down index

* update masked-input test

* add more to the masked-input test

* test-file test

* fix broken test

* clear old style

* clean up

* remove pgp key masked font, this really needs to be refactored to text-file component

* changelog

* cover other certificate view

* add allowCopy

* address some pr styling comments

* improve test coverage

* fix some issues

* add attr.options.masked
2021-04-22 08:58:37 -06:00

202 lines
7.7 KiB
Handlebars

{{#if replaceCA}}
<MessageError @model={{model}} />
<h2 data-test-title class="title is-3">
{{#if needsConfig}}
Configure CA Certificate
{{else}}
Replace CA Certificate
{{/if}}
</h2>
{{#if (or model.certificate model.csr)}}
{{#each model.attrs as |attr|}}
{{#if attr.options.masked}}
<InfoTableRow @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}} @value={{get model attr.name}}>
<MaskedInput
@value={{get model attr.name}}
@displayOnly={{true}}
@allowCopy={{true}}
/>
</InfoTableRow>
{{else if (eq attr.name "expiration")}}
{{info-table-row
data-test-table-row
label=(capitalize (or attr.options.label (humanize (dasherize attr.name))))
value=(date-format (get model attr.name) 'MMM dd, yyyy hh:mm:ss a')
}}
{{else}}
{{info-table-row
data-test-table-row
label=(capitalize (or attr.options.label (humanize (dasherize attr.name))))
value=(get model attr.name)
}}
{{/if}}
{{/each}}
<div class="field is-grouped box is-fullwidth is-bottomless">
<div class="control">
<CopyButton @clipboardText={{or model.certificate model.csr}} @class="button" @buttonType="button" @success={{action (set-flash-message (concat (if model.certificate "Certificate" "CSR") " copied!"))}}>
Copy {{if model.certificate "Certificate" "CSR"}}
</CopyButton>
</div>
<div class="control">
<button data-test-back-button {{action "refresh"}} type="button" class="button">
Back
</button>
</div>
</div>
{{else}}
<form {{action "saveCA" on="submit"}} data-test-generate-root-cert="true">
<NamespaceReminder @mode="save" @noun="PKI change" />
{{#if model.uploadPemBundle}}
<AlertBanner
@type="warning"
@message="If you have already set a certificate and key, they will be overridden with the successful saving of a new PEM bundle."
data-test-warning
/>
{{/if}}
{{partial "partials/form-field-groups-loop"}}
<div class="field is-grouped is-grouped-split box is-fullwidth is-bottomless">
<div class="field is-grouped">
<div class="control">
<button data-test-submit type="submit" class="button is-primary {{if loading 'is-loading'}}" disabled={{loading}}>
Save
</button>
</div>
<div class="control">
<button data-test-back-button {{action "toggleReplaceCA"}} type="button" class="button">
Cancel
</button>
</div>
</div>
<div class="control">
{{#if model.canDeleteRoot}}
<ConfirmAction
@buttonClasses="button"
@confirmTitle="Delete this CA key?"
@confirmMessage="This CA certificate will still be available for reading until a new certificate/key is generated or uploaded."
@onConfirmAction={{action "deleteCA"}}
>
Delete
</ConfirmAction>
{{/if}}
</div>
</div>
</form>
{{/if}}
{{else if signIntermediate}}
{{#if (or model.certificate)}}
<AlertBanner
@type="warning"
@message="If using this for an Intermediate CA in Vault, copy the certificate below and write it to the PKI mount being used as an intermediate using the `Set signed Intermediate` endpoint."
data-test-warning
/>
{{#each model.attrs as |attr|}}
{{#if attr.options.masked}}
<InfoTableRow @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}} @value={{get model attr.name}}>
<MaskedInput
@value={{get model attr.name}}
@displayOnly={{true}}
@allowCopy={{true}}
/>
</InfoTableRow>
{{else}}
{{info-table-row data-test-table-row label=(capitalize (or attr.options.label (humanize (dasherize attr.name)))) value=(get model attr.name)}}
{{/if}}
{{/each}}
<div class="field is-grouped box is-fullwidth is-bottomless">
<div class="control">
<CopyButton @clipboardText={{model.certificate}} @class="button" @buttonType="button" @success={{action (set-flash-message "Certificate copied!")}}>
Copy Certificate
</CopyButton>
</div>
<div class="control">
<button data-test-back-button {{action "refresh"}} type="button" class="button">
Back
</button>
</div>
</div>
{{else}}
<h2 data-test-title class="title is-3">Sign intermediate</h2>
<NamespaceReminder @mode="save" @noun="PKI change" />
<MessageError @model={{model}} />
<form {{action "saveCA" on="submit"}} data-test-sign-intermediate-form="true">
{{partial "partials/form-field-groups-loop"}}
<div class="field is-grouped box is-fullwidth is-bottomless">
<div class="control">
<button data-test-submit type="submit" class="button is-primary {{if loading 'is-loading'}}" disabled={{loading}}>
Save
</button>
</div>
<div class="control">
<button {{action "toggleVal" "signIntermediate" false}} type="button" class="button">
Cancel
</button>
</div>
</div>
</form>
{{/if}}
{{else if setSignedIntermediate}}
<h2 data-test-title class="title is-3">Set signed intermediate</h2>
<NamespaceReminder @mode="save" @noun="PKI change" />
<MessageError @model={{model}} />
<p class="has-text-grey-dark">
Submit a signed CA certificate corresponding to a generated private key.
</p>
<form {{action "saveCA" "setSignedIntermediate" on="submit"}} data-test-set-signed-intermediate-form="true">
<div class="field">
<label for="certificate" class="is-label">
Signed Intermediate Certificate
</label>
<div class="control">
{{textarea data-test-signed-intermediate class="textarea" id="certificate" name="certificate" value=model.certificate}}
</div>
</div>
<div class="field is-grouped box is-fullwidth is-bottomless">
<div class="control">
<button data-test-submit type="submit" class="button is-primary {{if loading 'is-loading'}}" disabled={{loading}}>
Save
</button>
</div>
<div class="control">
<button data-test-back-button {{action "toggleVal" "setSignedIntermediate" false}} type="button" class="button">
Cancel
</button>
</div>
</div>
</form>
{{else}}
<p class="has-text-grey-dark">
This is the default CA certificate used in Vault. It is not used for self-signed certificates or if you have a signed intermediate CA certificate with a generated key.
</p>
{{#each downloadHrefs as |dl|}}
<div class="box is-shadowless is-marginless is-fullwidth has-slim-padding">
<a data-test-ca-download-link href={{dl.url}} download={{dl.name}}>
{{dl.display}}
</a>
</div>
{{/each}}
<div class="field is-grouped box is-fullwidth is-shadowless">
<div class="control">
<button data-test-go-replace-ca type="button" {{action "toggleReplaceCA"}} class="button">
{{#if needsConfig}}
Configure CA
{{else}}
Replace CA
{{/if}}
</button>
</div>
{{#if config.pem}}
<div class="control">
<button data-test-go-sign-intermediate type="button" {{action "toggleVal" "signIntermediate"}} class="button">
Sign intermediate
</button>
</div>
{{/if}}
<div class="control">
<button data-test-go-set-signed-intermediate type="button" {{action "toggleVal" "setSignedIntermediate"}} class="button">
Set signed intermediate
</button>
</div>
</div>
{{/if}}