Updated transit key action to components (#11807)

* Updated transit key action to components

* Fix indentation

* Leverage parent action directly from components

* Added tracked attribute
This commit is contained in:
Arnav Palnitkar 2021-06-11 14:44:57 -07:00 committed by GitHub
parent 5870c3daa5
commit 15b3697a9f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 194 additions and 159 deletions

View file

@ -0,0 +1,9 @@
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
export default class ExportComponent extends Component {
@tracked
wrapTTL = null;
@tracked
exportVersion = false;
}

View file

@ -1,8 +1,8 @@
<form {{action 'doSubmit' (hash param=param context=context nonce=nonce bits=bits) on="submit"}}>
<form onsubmit={{action @doSubmit (hash param=@param context=@context nonce=@nonce bits=@bits)}}>
<div class="box is-sideless is-fullwidth is-marginless">
<NamespaceReminder @mode="perform" @noun="datakey creation" />
<div class="content">
<p>Generate a new high-entropy key and value using <code>{{key.name}}</code> as the encryption key.</p>
<p>Generate a new high-entropy key and value using <code>{{@key.name}}</code> as the encryption key.</p>
</div>
<div class="field">
<label for="param" class="is-label">Output format</label>
@ -11,10 +11,10 @@
<select
name="param"
id="param"
onchange={{action (mut param) value="target.value"}}
onchange={{action (mut @param) value="target.value"}}
>
{{#each (array "plaintext" "wrapped") as |paramOption|}}
<option selected={{eq param paramOption}} value={{paramOption}}>
<option selected={{eq @param paramOption}} value={{paramOption}}>
{{paramOption}}
</option>
{{/each}}
@ -22,30 +22,30 @@
</div>
</div>
</div>
{{#if key.derived}}
{{#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" />
<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" />
<B64Toggle @value={{@context}} @data-test-transit-b64-toggle="context" />
</div>
</div>
</div>
{{/if}}
{{#if (eq key.convergentEncryptionVersion 1)}}
{{#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" />
<Input @type="text" @id="nonce" @value={{@nonce}} class="input" data-test-transit-input="nonce" />
</div>
<div class="control">
<B64Toggle @value={{nonce}} @data-test-transit-b64-toggle="nonce" />
<B64Toggle @value={{@nonce}} @data-test-transit-b64-toggle="nonce" />
</div>
</div>
</div>
@ -57,10 +57,10 @@
<select
name="bits"
id="bits"
onchange={{action (mut bits) value="target.value"}}
onchange={{action (mut @bits) value="target.value"}}
>
{{#each (array 128 256 512) as |bitOption|}}
<option selected={{eq bits bitOption}} value={{bitOption}}>
<option selected={{eq @bits bitOption}} value={{bitOption}}>
<code>{{bitOption}}</code>
</option>
{{/each}}
@ -77,47 +77,47 @@
</div>
</div>
</form>
<Modal @title="Copy your generated key" @onClose={{action (mut isModalActive) false}} @isActive={{isModalActive}}>
<Modal @title="Copy your generated key" @onClose={{action (mut @isModalActive) false}} @isActive={{@isModalActive}}>
<section class="modal-card-body">
<div class="box is-shadowless is-fullwidth is-sideless">
{{#if (eq param 'plaintext')}}
{{#if (eq @param 'plaintext')}}
<h2 class="title is-6">Plaintext</h2>
<div class="copy-text level">
<code class="level-left">{{plaintext}}</code>
<code class="level-left">{{@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!')}}>
@clipboardText={{@plaintext}} @buttonType="button" @success={{action (set-flash-message 'Plaintext copied!')}}>
<Icon @glyph="copy-action" aria-label="Copy" />
</CopyButton>
</div>
<p class="help has-bottom-margin-m">Plaintext is base64 encoded</p>
<h2 class="title is-6">Ciphertext</h2>
<div class="copy-text level">
<code class="level-left">{{ciphertext}}</code>
<code class="level-left">{{@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!')}}>
@clipboardText={{@ciphertext}} @buttonType="button" @success={{action (set-flash-message 'Ciphertext copied!')}}>
<Icon @glyph="copy-action" aria-label="Copy" />
</CopyButton>
</div>
<CopyButton class="button is-primary" data-test-button="modal-copy-close" @clipboardText={{plaintext}}
<CopyButton class="button is-primary" data-test-button="modal-copy-close" @clipboardText={{@plaintext}}
@buttonType="button" @success={{action (set-flash-message 'Plaintext copied!')}}>
Copy Plaintext
</CopyButton>
<CopyButton class="button is-primary" data-test-button="modal-copy-close" @clipboardText={{ciphertext}}
<CopyButton class="button is-primary" data-test-button="modal-copy-close" @clipboardText={{@ciphertext}}
@buttonType="button" @success={{action (set-flash-message 'Ciphertext copied!')}}>
Copy Ciphertext
</CopyButton>
<button type="submit" class="button is-secondary" onclick={{action (mut isModalActive) false}}>Close</button>
<button type="submit" class="button is-secondary" onclick={{action (mut @isModalActive) false}}>Close</button>
{{else}}
<h2 class="title is-6">Ciphertext</h2>
<div class="copy-text level">
<code class="level-left">{{ciphertext}}</code>
<code class="level-left">{{@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!')}}>
@clipboardText={{@ciphertext}} @buttonType="button" @success={{action (set-flash-message 'Ciphertext copied!')}}>
<Icon @glyph="copy-action" aria-label="Copy" />
</CopyButton>
</div>
<CopyButton class="button is-primary copy-close" data-test-button="modal-copy-close" @clipboardText={{ciphertext}}
@buttonType="button" @success={{action "toggleModal" "Ciphertext copied!"}}>
<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>
{{/if}}

View file

@ -1,43 +1,43 @@
<form {{action 'doSubmit' (hash ciphertext=ciphertext context=context nonce=nonce) on="submit"}}>
<form onsubmit={{action @doSubmit (hash ciphertext=@ciphertext context=@context nonce=@nonce)}}>
<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>
<p>You can decrypt ciphertext using <code>{{@key.name}}</code> as the encryption key.</p>
</div>
<div class="field">
<div id="ciphertext-control" class="control">
<JsonEditor
@title="Ciphertext"
@valueUpdated={{action (mut ciphertext)}}
@valueUpdated={{action (mut @ciphertext)}}
@options={{hash
mode='ruby'
}}
@data-test-transit-input="ciphertext" />
</div>
</div>
{{#if key.derived}}
{{#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" />
<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" />
<B64Toggle @value={{@context}} @data-test-transit-b64-toggle="context" />
</div>
</div>
</div>
{{/if}}
{{#if (eq key.convergentEncryptionVersion 1)}}
{{#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" />
<Input @type="text" @id="nonce" @value={{@nonce}} class="input" data-test-transit-input="nonce" />
</div>
<div class="control">
<B64Toggle @value={{nonce}} @data-test-transit-b64-toggle="nonce" />
<B64Toggle @value={{@nonce}} @data-test-transit-b64-toggle="nonce" />
</div>
</div>
</div>
@ -51,14 +51,14 @@
</div>
</div>
</form>
{{#if isModalActive}}
<Modal @title="Copy your unwrapped data" @onClose={{action (mut isModalActive) false}} @isActive={{isModalActive}}>
{{#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}}
<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>
@ -67,8 +67,8 @@
</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!"}}>
<CopyButton class="button is-primary copy-close" data-test-button="modal-copy-close" @clipboardText={{@plaintext}}
@buttonType="button" @success={{action @toggleModal "Plaintext copied!"}}>
Copy &amp; Close
</CopyButton>
</footer>

View file

@ -1,15 +1,15 @@
<form {{action 'doSubmit' (hash plaintext=plaintext context=context nonce=nonce key_version=key_version encodedBase64=encodedBase64) on="submit"}}>
<form onsubmit={{action @doSubmit (hash plaintext=@plaintext context=@context nonce=@nonce key_version=@key_version encodedBase64=@encodedBase64)}}>
<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>
<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}} />
<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)}}
@value={{@plaintext}} @valueUpdated={{action (mut @plaintext)}}
@options={{hash
mode='ruby'
}}
@ -17,36 +17,36 @@
</div>
</div>
<div class="field">
<Input @type="checkbox" @id="encodedBase64" @checked={{encodedBase64}} data-test-transit-input="encodedBase64" />
<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}}
{{#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" />
<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" />
<B64Toggle @value={{@context}} @data-test-transit-b64-toggle="context" />
</div>
</div>
</div>
{{/if}}
{{#if (eq key.convergentEncryptionVersion 1)}}
{{#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" />
<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" />
<Input @type="text" @id="nonce" @value={{@nonce}} class="input" data-test-transit-input="nonce" />
</div>
</div>
{{/if}}
@ -61,18 +61,18 @@
</form>
<Modal
@title="Copy your token"
@onClose={{action (mut isModalActive) false}}
@isActive={{isModalActive}}
@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>
<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}}
@clipboardText={{@ciphertext}}
@buttonType="button"
@success={{action (set-flash-message 'Ciphertext copied!')}}>
<Icon @glyph="copy-action" aria-label="Copy" />
@ -84,9 +84,9 @@
<CopyButton
class="button is-primary copy-close"
data-test-button="modal-copy-close"
@clipboardText={{ciphertext}}
@clipboardText={{@ciphertext}}
@buttonType="button"
@success={{action "toggleModal" "Ciphertext copied!"}}>
@success={{action @toggleModal "Ciphertext copied!"}}>
Copy &amp; Close
</CopyButton>
</footer>

View file

@ -1,11 +1,10 @@
<form {{action 'doSubmit'
(hash param=(compact (array exportKeyType (if exportVersion exportKeyVersion))))
(hash wrapTTL=wrapTTL)
on="submit" }}
<form onsubmit={{action @doSubmit
(hash param=(compact (array @exportKeyType (if this.exportVersion @exportKeyVersion))))
(hash wrapTTL=this.wrapTTL)}}
>
<div class="box is-sideless is-fullwidth is-marginless">
<div class="content">
<p>Export a key using <code>{{key.name}}</code> as the encryption key.</p>
<p>Export a key using <code>{{@key.name}}</code> as the encryption key.</p>
</div>
<div class="field">
<label for="type" class="is-label">Key type</label>
@ -14,10 +13,10 @@
<select
name="type"
id="type"
onchange={{action (mut exportKeyType) value="target.value"}}
onchange={{action (mut @exportKeyType) value="target.value"}}
>
{{#each key.exportKeyTypes as |currOption|}}
<option selected={{eq exportKeyType currOption}} value={{currOption}}>
{{#each @key.exportKeyTypes as |currOption|}}
<option selected={{eq @exportKeyType currOption}} value={{currOption}}>
<code>{{currOption}}</code>
</option>
{{/each}}
@ -27,12 +26,12 @@
</div>
<div class="field">
<div class="b-checkbox">
<Input @type="checkbox" @name="exportVersion" @id="exportVersion" class="styled" @checked={{exportVersion}} />
<Input @type="checkbox" @name="exportVersion" @id="exportVersion" class="styled" @checked={{this.exportVersion}} />
<label for="exportVersion" class="is-label">
Export a single version
</label>
</div>
{{#if exportVersion}}
{{#if this.exportVersion}}
<div class="field">
<label for="version" class="is-label">Version</label>
<div class="control is-expanded">
@ -40,12 +39,12 @@
<select
name="version"
id="version"
onchange={{action (mut exportKeyVersion) value="target.value"}}
onchange={{action (mut @exportKeyVersion) value="target.value"}}
>
{{#each key.validKeyVersions as |versionOption|}}
<option selected={{eq exportKeyVersion versionOption}} value={{versionOption}}>
{{#each @key.validKeyVersions as |versionOption|}}
<option selected={{eq @exportKeyVersion versionOption}} value={{versionOption}}>
<code>{{versionOption}}</code>
{{#if (eq key.validKeyVersions.lastObject versionOption)}}
{{#if (eq @key.validKeyVersions.lastObject versionOption)}}
<span> (latest) </span>
{{/if}}
</option>
@ -56,7 +55,7 @@
</div>
{{/if}}
</div>
<WrapTtl @onChange={{action (mut wrapTTL)}} />
<WrapTtl @onChange={{action (mut this.wrapTTL)}} />
</div>
<div class="field is-grouped box is-fullwidth is-bottomless">
<div class="control">
@ -66,22 +65,22 @@
</div>
</div>
</form>
<Modal @title="Copy your wrapped key" @onClose={{action (mut isModalActive) false}} @isActive={{isModalActive}}>
<Modal @title="Copy your wrapped key" @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">Wrapped Key</h2>
<div class="copy-text level">
<pre data-test-encrypted-value="export" class="level-left">{{if wrapTTL wrappedToken (stringify keys)}}</pre>
<pre data-test-encrypted-value="export" class="level-left">{{if this.wrapTTL @wrappedToken (stringify @keys)}}</pre>
<CopyButton class="button is-compact is-transparent level-right" data-test-button="modal-copy"
@clipboardText={{if wrapTTL wrappedToken (stringify keys)}} @buttonType="button" @success={{action (set-flash-message 'Token copied!')}}>
@clipboardText={{if this.wrapTTL @wrappedToken (stringify @keys)}} @buttonType="button" @success={{action (set-flash-message 'Token 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={{if wrapTTL wrappedToken (stringify keys)}}
@buttonType="button" @success={{action "toggleModal" "Token copied!"}}>
<CopyButton class="button is-primary copy-close" data-test-button="modal-copy-close" @clipboardText={{if this.wrapTTL @wrappedToken (stringify @keys)}}
@buttonType="button" @success={{action @toggleModal "Token copied!"}}>
Copy &amp; Close
</CopyButton>
</footer>

View file

@ -1,15 +1,15 @@
<form {{action 'doSubmit' (hash input=input algorithm=algorithm key_version=key_version) on="submit"}}>
<form onsubmit={{action @doSubmit (hash input=@input algorithm=@algorithm key_version=@key_version)}}>
<div class="box is-sideless is-fullwidth is-marginless">
<NamespaceReminder @mode="perform" @noun="HMAC creation" />
<div class="content">
<p>Generate the digest of given data using the specified hash algorithm and <code>{{key.name}}</code> as the named key.</p>
<p>Generate the digest of given data using the specified hash algorithm and <code>{{@key.name}}</code> as the named key.</p>
</div>
<KeyVersionSelect @key={{key}} @onVersionChange={{action (mut key_version)}} @key_version={{key_version}} />
<KeyVersionSelect @key={{@key}} @onVersionChange={{action (mut @key_version)}} @key_version={{@key_version}} />
<div class="field">
<div id="input-control" class="control is-relative">
<JsonEditor
@title="Input"
@valueUpdated={{action (mut input)}}
@valueUpdated={{action (mut @input)}}
@options={{hash
mode='ruby'
}}
@ -17,7 +17,7 @@
</div>
</div>
<div class="field">
<Input @type="checkbox" @id="encodedBase64" @checked={{encodedBase64}} data-test-transit-input="encodedBase64" />
<Input @type="checkbox" @id="encodedBase64" @checked={{@encodedBase64}} data-test-transit-input="encodedBase64" />
<label for="encodedBase64">This data is already encoded in base64</label>
</div>
<div class="field">
@ -27,10 +27,10 @@
<select
name="algorithm"
id="algorithm"
onchange={{action (mut algorithm) value="target.value"}}
onchange={{action (mut @algorithm) value="target.value"}}
>
{{#each (sha2-digest-sizes) as |algo|}}
<option selected={{if algorithm (eq algorithm algo)}} value={{algo}}>
<option selected={{if @algorithm (eq @algorithm algo)}} value={{algo}}>
<code>{{algo}}</code>
</option>
{{/each}}
@ -47,22 +47,22 @@
</div>
</div>
</form>
<Modal @title="Copy your unwrapped data" @onClose={{action (mut isModalActive) false}} @isActive={{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">HMAC</h2>
<div class="copy-text level">
<code class="level-left" data-test-encrypted-value="hmac">{{hmac}}</code>
<code class="level-left" data-test-encrypted-value="hmac">{{@hmac}}</code>
<CopyButton class="button is-compact is-transparent level-right" data-test-button="modal-copy"
@clipboardText={{hmac}} @buttonType="button" @success={{action (set-flash-message 'HMAC copied!')}}>
@clipboardText={{@hmac}} @buttonType="button" @success={{action (set-flash-message 'HMAC 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={{hmac}}
@buttonType="button" @success={{action "toggleModal" "HMAC copied!"}}>
<CopyButton class="button is-primary copy-close" data-test-button="modal-copy-close" @clipboardText={{@hmac}}
@buttonType="button" @success={{action @toggleModal "HMAC copied!"}}>
Copy &amp; Close
</CopyButton>
</footer>

View file

@ -1,45 +1,45 @@
<form {{action 'doSubmit' (hash ciphertext=ciphertext context=context nonce=nonce key_version=key_version) on="submit"}}>
<form onsubmit={{action @doSubmit (hash ciphertext=@ciphertext context=@context nonce=@nonce key_version=@key_version)}}>
<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>
<p>You can rewrap the provided ciphertext using the latest version of <code>{{@key.name}}</code> as the encryption key.</p>
</div>
<KeyVersionSelect @key={{key}} @onVersionChange={{action (mut key_version)}} @key_version={{key_version}} />
<KeyVersionSelect @key={{@key}} @onVersionChange={{action (mut @key_version)}} @key_version={{@key_version}} />
<div class="field">
<div class="control is-expanded">
<JsonEditor
@title="Ciphertext"
@valueUpdated={{action (mut ciphertext)}}
@valueUpdated={{action (mut @ciphertext)}}
@options={{hash
mode='ruby'
}}
/>
</div>
</div>
{{#if key.derived}}
{{#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" />
<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" />
<B64Toggle @value={{@context}} @data-test-transit-b64-toggle="context" />
</div>
</div>
</div>
{{/if}}
{{#if (eq key.convergentEncryptionVersion 1)}}
{{#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" />
<Input @type="text" @id="nonce" @value={{@nonce}} class="input" data-test-transit-input="nonce" />
</div>
<div class="control">
<B64Toggle @value={{nonce}} @data-test-transit-b64-toggle="nonce" />
<B64Toggle @value={{@nonce}} @data-test-transit-b64-toggle="nonce" />
</div>
</div>
</div>
@ -58,22 +58,22 @@
</div>
</div>
</form>
<Modal @title="Copy your token" @onClose={{action (mut isModalActive)}} @isActive={{isModalActive}}>
<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>
<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!')}}>
@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!"}}>
<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>

View file

@ -1,16 +1,16 @@
<form {{action 'doSubmit' (hash input=input hash_algorithm=hash_algorithm signature_algorithm=signature_algorithm key_version=key_version context=context prehashed=prehashed encodedBase64=encodedBase64) on="submit"}}>
<form onsubmit={{action @doSubmit (hash input=@input hash_algorithm=@hash_algorithm signature_algorithm=@signature_algorithm key_version=@key_version context=@context prehashed=@prehashed encodedBase64=@encodedBase64)}}>
<div class="box is-sideless is-fullwidth is-marginless">
<NamespaceReminder @mode="perform" @noun="signing" />
<div class="content">
<p>Return the cryptographic signature of the given data using <code>{{key.name}}</code> as the encryption key and the specified hash algorithm.</p>
<p>Return the cryptographic signature of the given data using <code>{{@key.name}}</code> as the encryption key and the specified hash algorithm.</p>
</div>
<KeyVersionSelect @key={{key}} @onVersionChange={{action (mut key_version)}} @key_version={{key_version}} />
<KeyVersionSelect @key={{@key}} @onVersionChange={{action (mut @key_version)}} @key_version={{@key_version}} />
<div class="field">
<div class="control is-relative">
<JsonEditor
@title="Input"
@value={{input}}
@valueUpdated={{action (mut input)}}
@value={{@input}}
@valueUpdated={{action (mut @input)}}
@options={{hash
mode='ruby'
}}
@ -18,20 +18,20 @@
</div>
</div>
<div class="field">
<Input @type="checkbox" @id="encodedBase64" @checked={{encodedBase64}} data-test-transit-input="encodedBase64" />
<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}}
{{#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" />
<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" />
<B64Toggle @value={{@context}} @data-test-transit-b64-toggle="context" />
</div>
</div>
</div>
@ -43,7 +43,7 @@
</div>
<div class="level-right">
<div class="control is-flex">
<Input @id="prehashed" @type="checkbox" @name="prehashed" class="switch is-rounded is-success is-small" @checked={{prehashed}} />
<Input @id="prehashed" @type="checkbox" @name="prehashed" class="switch is-rounded is-success is-small" @checked={{@prehashed}} />
<label for="prehashed">Prehashed</label>
</div>
</div>
@ -53,10 +53,10 @@
<select
name="hash_algorithm"
id="hash_algorithm"
onchange={{action (mut hash_algorithm) value="target.value"}}
onchange={{action (mut @hash_algorithm) value="target.value"}}
>
{{#each (sha2-digest-sizes) as |algo|}}
<option selected={{if hash_algorithm (eq hash_algorithm algo) (eq algo 'sha2-256')}} value={{algo}}>
<option selected={{if @hash_algorithm (eq @hash_algorithm algo) (eq algo 'sha2-256')}} value={{algo}}>
{{algo}}
</option>
{{/each}}
@ -64,7 +64,7 @@
</div>
</div>
</div>
{{#if (or (eq key.type 'rsa-2048') (eq key.type 'rsa-3072') (eq key.type 'rsa-4096'))}}
{{#if (or (eq @key.type 'rsa-2048') (eq @key.type 'rsa-3072') (eq @key.type 'rsa-4096'))}}
<div class="field">
<label for="signature_algorithm" class="is-label">Signature Algorithm</label>
<div class="control is-expanded">
@ -73,10 +73,10 @@
name="signature_algorithm"
id="signature_algorithm"
data-test-signature-algorithm="true"
onchange={{action (mut signature_algorithm) value="target.value"}}
onchange={{action (mut @signature_algorithm) value="target.value"}}
>
{{#each (array 'pss' 'pkcs1v15') as |sigAlgo|}}
<option selected={{if signature_algorithm (eq signature_algorithm sigAlgo) (eq sigAlgo 'pss')}} value={{sigAlgo}}>
<option selected={{if @signature_algorithm (eq @signature_algorithm sigAlgo) (eq sigAlgo 'pss')}} value={{sigAlgo}}>
{{sigAlgo}}
</option>
{{/each}}
@ -88,7 +88,7 @@
</div>
<div class="field is-grouped box is-fullwidth is-bottomless">
<div class="control">
<button type="submit" disabled={{loading}} class="button is-primary {{if loading 'is-loading'}}">
<button type="submit" disabled={{@loading}} class="button is-primary {{if @loading 'is-loading'}}">
Sign
</button>
</div>
@ -96,18 +96,18 @@
</form>
<Modal
@title="Copy your signature"
@onClose={{action (mut isModalActive) false}}
@isActive={{isModalActive}}
@onClose={{action (mut @isModalActive) false}}
@isActive={{@isModalActive}}
data-test-sign-modal>
<section class="modal-card-body">
<div class="box is-shadowless is-fullwidth is-sideless">
<h2 class="title is-6">Signature</h2>
<div class="copy-text level">
<code class="level-left" data-test-encrypted-value="signature">{{signature}}</code>
<code class="level-left" data-test-encrypted-value="signature">{{@signature}}</code>
<CopyButton
class="button is-compact is-transparent level-right"
data-test-button="modal-copy"
@clipboardText={{signature}}
@clipboardText={{@signature}}
@buttonType="button"
@success={{action (set-flash-message 'Signature copied!')}}>
<Icon @glyph="copy-action" aria-label="Copy" />
@ -119,9 +119,9 @@
<CopyButton
class="button is-primary copy-close"
data-test-button="modal-copy-close"
@clipboardText={{signature}}
@clipboardText={{@signature}}
@buttonType="button"
@success={{action "toggleModal" "Signature copied!"}}>
@success={{action @toggleModal "Signature copied!"}}>
Copy &amp; Close
</CopyButton>
</footer>

View file

@ -1,4 +1,4 @@
<form {{action "doSubmit" (hash input=input signature=signature signature_algorithm=signature_algorithm hmac=hmac hash_algorithm=hash_algorithm context=context prehashed=prehashed encodedBase64=encodedBase64) on="submit"}}>
<form onsubmit={{action @doSubmit (hash input=@input signature=@signature signature_algorithm=@signature_algorithm hmac=@hmac hash_algorithm=@hash_algorithm context=@context prehashed=@prehashed encodedBase64=@encodedBase64)}}>
<div class="box is-sideless is-fullwidth is-marginless">
<div class="content">
<p>Check whether the provided signature is valid for the given data.</p>
@ -7,7 +7,7 @@
<div class="control is-relative">
<JsonEditor
@title="Input"
@value={{input}} @valueUpdated={{action (mut input)}}
@value={{@input}} @valueUpdated={{action (mut @input)}}
@options={{hash
mode='ruby'
}}
@ -15,25 +15,25 @@
</div>
</div>
<div class="field">
<Input @type="checkbox" @id="encodedBase64" @checked={{encodedBase64}} data-test-transit-input="encodedBase64" />
<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 (and key.supportsSigning key.derived (not hmac))}}
{{#if (and @key.supportsSigning @key.derived (not @hmac))}}
<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" />
<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" />
<B64Toggle @value={{@context}} @data-test-transit-b64-toggle="context" />
</div>
</div>
</div>
{{/if}}
{{#if key.supportsSigning}}
{{#if @key.supportsSigning}}
<div class="columns is-5">
<div class="column is-one-third">
<div class="field">
@ -44,12 +44,12 @@
name="verification"
id="verification"
onchange={{queue
(action (mut verification) value="target.value")
(action "clearParams" (array "hmac" "signature"))
(action (mut @verification) value="target.value")
(action @clearParams (array "hmac" "signature"))
}}
>
{{#each (array 'Signature' 'HMAC') as |type|}}
<option selected={{if verification (eq verification type) (if hmac (eq type 'HMAC') (eq type 'Signature'))}} value={{type}}>
<option selected={{if @verification (eq @verification type) (if @hmac (eq type 'HMAC') (eq type 'Signature'))}} value={{type}}>
{{type}}
</option>
{{/each}}
@ -63,9 +63,9 @@
<label for="hash_algorithm" class="is-label">Hash Algorithm</label>
</div>
<div class="level-right">
{{#unless (eq verification 'HMAC')}}
{{#unless (eq @verification 'HMAC')}}
<div class="control is-flex">
<Input @id="prehashed" @type="checkbox" @name="prehashed" class="switch is-rounded is-success is-small" @checked={{prehashed}} />
<Input @id="prehashed" @type="checkbox" @name="prehashed" class="switch is-rounded is-success is-small" @checked={{@prehashed}} />
<label for="prehashed">Prehashed</label>
</div>
{{/unless}}
@ -76,10 +76,10 @@
<select
name="hash_algorithm"
id="hash_algorithm"
onchange={{action (mut hash_algorithm) value="target.value"}}
onchange={{action (mut @hash_algorithm) value="target.value"}}
>
{{#each (sha2-digest-sizes) as |algo|}}
<option selected={{if hash_algorithm (eq hash_algorithm algo) (eq algo 'sha2-256')}} value={{algo}}>
<option selected={{if @hash_algorithm (eq @hash_algorithm algo) (eq algo 'sha2-256')}} value={{algo}}>
<code>{{algo}}</code>
</option>
{{/each}}
@ -87,7 +87,7 @@
</div>
</div>
</div>
{{#if (and keyIsRSA (or (and verification (eq verification 'Signature')) signature))}}
{{#if (and @keyIsRSA (or (and @verification (eq @verification 'Signature')) @signature))}}
<div class="field">
<label for="signature_algorithm" class="is-label">Signature Algorithm</label>
<div class="control is-expanded">
@ -96,10 +96,10 @@
name="signature_algorithm"
id="signature_algorithm"
data-test-signature-algorithm="true"
onchange={{action (mut signature_algorithm) value="target.value"}}
onchange={{action (mut @signature_algorithm) value="target.value"}}
>
{{#each (array 'pss' 'pkcs1v15') as |sigAlgo|}}
<option selected={{if signature_algorithm (eq signature_algorithm sigAlgo) (eq sigAlgo 'pss')}} value={{sigAlgo}}>
<option selected={{if @signature_algorithm (eq @signature_algorithm sigAlgo) (eq sigAlgo 'pss')}} value={{sigAlgo}}>
{{sigAlgo}}
</option>
{{/each}}
@ -111,13 +111,13 @@
</div>
<div class="column is-two-thirds is-flex-column">
{{#if (or (and verification (eq verification 'HMAC')) hmac)}}
{{#if (or (and @verification (eq @verification 'HMAC')) @hmac)}}
<div class="field is-flex-column is-flex-1">
<div class="control is-flex-column is-flex-1">
<JsonEditor
@title="HMAC"
@value={{hmac}}
@valueUpdated={{action (mut hmac)}}
@value={{@hmac}}
@valueUpdated={{action (mut @hmac)}}
@options={{hash
mode='ruby'
}}
@ -129,8 +129,8 @@
<div class="control is-flex-column is-flex-1">
<JsonEditor
@title="Signature"
@value={{signature}}
@valueUpdated={{action (mut signature)}}
@value={{@signature}}
@valueUpdated={{action (mut @signature)}}
@options={{hash
mode='ruby'
}} />
@ -144,8 +144,8 @@
<div class="control">
<JsonEditor
@title="HMAC"
@value={{hmac}}
@valueUpdated={{action (mut hmac)}}
@value={{@hmac}}
@valueUpdated={{action (mut @hmac)}}
@options={{hash
mode='ruby'
}}
@ -159,10 +159,10 @@
<select
name="hash_algorithm"
id="hash_algorithm"
onchange={{action (mut hash_algorithm) value="target.value"}}
onchange={{action (mut @hash_algorithm) value="target.value"}}
>
{{#each (array 'sha2-224' 'sha2-256' 'sha2-384' 'sha2-512') as |algo|}}
<option selected={{if hash_algorithm (eq hash_algorithm algo) (eq algo 'sha2-256')}} value={{algo}}>
<option selected={{if @hash_algorithm (eq @hash_algorithm algo) (eq algo 'sha2-256')}} value={{algo}}>
<code>{{algo}}</code>
</option>
{{/each}}
@ -174,18 +174,18 @@
</div>
<div class="field is-grouped box is-fullwidth is-bottomless">
<div class="control">
<button type="submit" disabled={{loading}} class="button is-primary {{if loading 'is-loading'}}">
<button type="submit" disabled={{@loading}} class="button is-primary {{if @loading 'is-loading'}}">
Verify
</button>
</div>
</div>
</form>
<Modal @title="Results" @onClose={{action (mut isModalActive) false}} @isActive={{isModalActive}}>
<Modal @title="Results" @onClose={{action (mut @isModalActive) false}} @isActive={{@isModalActive}}>
<section class="modal-card-body">
<AlertBanner
@type={{if valid 'success' 'danger'}}
@title={{if valid 'Valid' 'Not Valid'}}
@message="The input is {{if valid 'valid' 'not valid'}} for the given {{if signature 'signature' 'HMAC'}}"
@type={{if @valid 'success' 'danger'}}
@title={{if @valid 'Valid' 'Not Valid'}}
@message="The input is {{if @valid 'valid' 'not valid'}} for the given {{if @signature 'signature' 'HMAC'}}"
data-test-transit-verify="true"/>
</section>
</Modal>

View file

@ -15,7 +15,34 @@
<MessageError @errors={{errors}} />
{{#if selectedAction}}
<div data-test-transit-action={{selectedAction}}>
{{partial (concat 'components/transit-key-action/' selectedAction)}}
{{ component (concat 'transit-key-action/' selectedAction)
key=key
keys=keys
keyIsRSA=keyIsRSA
verification=verification
hmac=hmac
param=param
key_version=key_version
isModalActive=isModalActive
ciphertext=ciphertext
plaintext=plaintext
context=context
nonce=nonce
input=input
bits=bits
algorithm=algorithm
signature=signature
signature_algorithm=signature_algorithm
hash_algorithm=hash_algorithm
prehashed=prehashed
wrappedToken=wrappedToken
exportKeyType=exportKeyType
exportKeyVersion=exportKeyVersion
encodedBase64=encodedBase64
doSubmit=(action "doSubmit")
toggleModal=(action "toggleModal")
clearParams=(action "clearParams")
}}
</div>
{{/if}}
{{/if}}