open-vault/ui/app/templates/components/transit-key-action/encrypt.hbs
Arnav Palnitkar 1d26f056bc
Updated code mirror component for consistency (#11500)
* Updated code mirror component for consistency

- Hide gutters, line number and selection while read only
- Show toolbar with copy functionality for all instances

* Moved toolbar and actions to json editor component

* Updated form-field-from-model template

* Added test for toolbar
2021-05-06 09:59:15 -07:00

94 lines
3.6 KiB
Handlebars

<form {{action 'doSubmit' (hash plaintext=plaintext context=context nonce=nonce key_version=key_version encodedBase64=encodedBase64) on="submit"}}>
<div class="box is-sideless is-fullwidth is-marginless">
<NamespaceReminder @mode="perform" @noun="encryption" />
<div class="content">
<p>You can encrypt plaintext data using <code>{{key.name}}</code> as the encryption key.</p>
</div>
<KeyVersionSelect @key={{key}} @onVersionChange={{action (mut key_version)}} @key_version={{key_version}} />
<div class="field">
<div id="plaintext-control" class="control is-relative">
<JsonEditor
@title="Plaintext"
@value={{plaintext}} @valueUpdated={{action (mut plaintext)}}
@options={{hash
mode='ruby'
}}
@data-test-transit-input="plaintext" />
</div>
</div>
<div class="field">
<Input @type="checkbox" @id="encodedBase64" @checked={{encodedBase64}} data-test-transit-input="encodedBase64" />
<label for="encodedBase64">This data is already encoded in base64</label>
</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">
<B64Toggle @value={{context}} @data-test-transit-b64-toggle="context" />
</div>
</div>
</div>
{{/if}}
{{#if (eq key.convergentEncryptionVersion 1)}}
<div class="field">
<div class="level">
<div class="level-left">
<label for="nonce" class="is-label">Nonce</label>
</div>
<div class="level-right">
<B64Toggle @value={{nonce}} @data-test-transit-b64-toggle="nonce" />
</div>
</div>
<div class="control">
<Input @type="text" @id="nonce" @value={{nonce}} class="input" data-test-transit-input="nonce" />
</div>
</div>
{{/if}}
</div>
<div class="field is-grouped box is-fullwidth is-bottomless">
<div class="control">
<button type="submit" class="button is-primary" data-test-button-encrypt>
Encrypt
</button>
</div>
</div>
</form>
<Modal
@title="Copy your token"
@onClose={{action (mut isModalActive) false}}
@isActive={{isModalActive}}
data-test-encrypt-modal>
<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>