e11567be82
* 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>
81 lines
3 KiB
Handlebars
81 lines
3 KiB
Handlebars
<form {{action 'doSubmit' (hash ciphertext=ciphertext context=context nonce=nonce) on="submit"}}>
|
|
<div class="box is-sideless is-fullwidth is-marginless">
|
|
<div class="content">
|
|
<p>You can decrypt ciphertext using <code>{{key.name}}</code> as the encryption key.</p>
|
|
</div>
|
|
<div class="field">
|
|
<label for="ciphertext" class="is-label">Ciphertext</label>
|
|
<div id="ciphertext-control" class="control">
|
|
{{ivy-codemirror
|
|
valueUpdated=(action (mut ciphertext))
|
|
options=(hash
|
|
lineNumbers=true
|
|
tabSize=2
|
|
mode='ruby'
|
|
theme='hashi'
|
|
)
|
|
data-test-transit-input="ciphertext"
|
|
}}
|
|
</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 is-grouped box is-fullwidth is-bottomless">
|
|
<div class="control">
|
|
<button type="submit" class="button is-primary" id="decrypt" data-test-button-decrypt>
|
|
Decrypt
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
{{#if isModalActive}}
|
|
<Modal @title="Copy your unwrapped data" @onClose={{action (mut isModalActive) false}} @isActive={{isModalActive}}>
|
|
<section class="modal-card-body">
|
|
<div class="box is-shadowless is-fullwidth is-sideless">
|
|
<h2 class="title is-6">Plaintext</h2>
|
|
<div class="copy-text level">
|
|
<code class="level-left" data-test-encrypted-value="plaintext">{{plaintext}}</code>
|
|
<CopyButton class="button is-compact is-transparent level-right" data-test-button="modal-copy" @clipboardText={{plaintext}}
|
|
@buttonType="button" @success={{action (set-flash-message 'Plaintext copied!')}}>
|
|
<Icon @glyph="copy-action" aria-label="Copy" />
|
|
</CopyButton>
|
|
</div>
|
|
<p class="help">Plaintext is base64 encoded</p>
|
|
</div>
|
|
</section>
|
|
<footer class="modal-card-foot">
|
|
<CopyButton class="button is-primary copy-close" data-test-button="modal-copy-close" @clipboardText={{plaintext}}
|
|
@buttonType="button" @success={{action "toggleModal" "Plaintext copied!"}}>
|
|
Copy & Close
|
|
</CopyButton>
|
|
</footer>
|
|
</Modal>
|
|
{{/if}}
|