open-vault/ui/app/templates/components/transit-key-action/rewrap.hbs
Noelle Daley e11567be82
Ui/transit modal (#8575)
* wip -- add modal component using ember-wormhole, add static content but still need to enable onClose

* add onClose to modal

* WIP

* add copy and close button

* add copy and close button

* and copy and close button to modal

* use modal on each key action page

* make text copied text more generic

* update datakey textareas to codemirror

* only show user input on encrypt and decrypt

* only show user input on all key actions

* separate copy ciphertext, plaintext, and close button on datakey modal

* style ciphertext and plaintext as code

* only show separate copy buttons on datakey modal if both outputs are shown

* update modal styling

* style modal

* add descriptions to each key action

* remove conditional from hmac modal since we only ever show hmac output

* add modal for export key action

* make output scroll horizontally with copy button next to it

* make output scroll horizontally with copy button next to it

* escape & in copy and close button, format text output so it scrolls horizontally

* fix formatting of key action descriptions

* Ui/add transit modal tests (#8523)

* Fix tests for updated transit with modals workflow

* WIP // remove box shadow from key actions descriptions

* WIP // flash messages on successful action match mocks

* WIP // remove ciphertext view after datakey created

* WIP // make flash messages when copy & closing less generic, and match copy flash message

* WIP // Optionally show close button on modal, with tests

* remove unused deps from modal test

* WIP // Fix verify modal styling and content

* Add modal for sign action

* Fix output of non-wrapped export key

* Fix output of non-wrapped export key

* Add description to JSDOCS about modal component

* Add help text about plaintext encoded in base64

* add flash msgs for datakey and export

* flash success msg when closing modal on export page

* clarify sign success msg

* address PR feedback

* add indentation for export key json

* Fix modal tests pt 2

* Remove decode after decrypt in transit tests

Co-authored-by: Chelsea Shaw <chelshaw.dev@gmail.com>
2020-03-16 16:48:11 -06:00

88 lines
3.2 KiB
Handlebars

<form {{action 'doSubmit' (hash ciphertext=ciphertext context=context nonce=nonce key_version=key_version) on="submit"}}>
<div class="box is-sideless is-fullwidth is-marginless">
<NamespaceReminder @mode="perform" @noun="rewrap" />
<div class="content">
<p>You can rewrap the provided ciphertext using the latest version of <code>{{key.name}}</code> as the encryption key.</p>
</div>
{{key-version-select
key=key
onVersionChange=(action (mut key_version))
key_version=key_version
}}
<div class="field">
<label for="ciphertext" class="is-label">Ciphertext</label>
<div class="control is-expanded">
{{ivy-codemirror
valueUpdated=(action (mut ciphertext))
options=(hash
lineNumbers=true
tabSize=2
mode='ruby'
theme='hashi'
)
}}
</div>
</div>
{{#if key.derived}}
<div class="field">
<label for="context" class="is-label">
Context
</label>
<div class="field has-addons">
<div class="control">
{{input type="text" id="context" value=context class="input" data-test-transit-input="context"}}
</div>
<div class="control">
{{b64-toggle value=context data-test-transit-b64-toggle="context"}}
</div>
</div>
</div>
{{/if}}
{{#if (eq key.convergentEncryptionVersion 1)}}
<div class="field">
<label for="nonce" class="is-label">Nonce</label>
<div class="field has-addons">
<div class="control">
{{input type="text" id="nonce" value=nonce class="input" data-test-transit-input="nonce"}}
</div>
<div class="control">
{{b64-toggle value=nonce data-test-transit-b64-toggle="nonce"}}
</div>
</div>
</div>
{{/if}}
</div>
<div class="field box is-fullwidth is-bottomless">
<div class="content">
<p class="help">
Submitting this form will update the <code>ciphertext</code> in-place.
</p>
</div>
<div class="control">
<button type="submit" class="button is-primary">
Rewrap
</button>
</div>
</div>
</form>
<Modal @title="Copy your token" @onClose={{action (mut isModalActive)}} @isActive={{isModalActive}}>
<section class="modal-card-body">
<div class="box is-shadowless is-fullwidth is-sideless">
<h2 class="title is-6">Ciphertext</h2>
<div class="copy-text level">
<code class="level-left" data-test-encrypted-value="ciphertext">{{ciphertext}}</code>
<CopyButton class="button is-compact is-transparent level-right" data-test-button="modal-copy"
@clipboardText={{ciphertext}} @buttonType="button" @success={{action (set-flash-message 'Ciphertext copied!')}}>
<Icon @glyph="copy-action" aria-label="Copy" />
</CopyButton>
</div>
</div>
</section>
<footer class="modal-card-foot">
<CopyButton class="button is-primary copy-close" data-test-button="modal-copy-close" @clipboardText={{ciphertext}}
@buttonType="button" @success={{action "toggleModal" "Ciphertext copied!"}}>
Copy &amp; Close
</CopyButton>
</footer>
</Modal>