open-vault/ui/app/templates/components/tool-random.hbs
Angel Garbarino cf511a895b
UI/tools partial (#11672)
* hash tools from partial to component

* initial setup of tools random, but issue remaining with bytes

* rewrap

* unwrap

* final two partials

* fix issues with actions on tool wrap

* fix hash

* changelog

* address pr comments

* fix onClear

* trigger run

* triggering test suite
2021-05-24 10:45:35 -06:00

74 lines
2.3 KiB
Handlebars

<PageHeader as |p|>
<p.levelLeft>
<h1 class="title is-3">
Random bytes
</h1>
</p.levelLeft>
</PageHeader>
{{#if @random_bytes}}
<div class="box is-sideless is-fullwidth is-marginless">
<label for="rand" class="is-label">Random bytes</label>
<textarea readonly class="textarea" id="rand" data-test-tools-input="random-bytes">{{@random_bytes}}</textarea>
</div>
<div class="field is-grouped box is-fullwidth is-bottomless">
<div class="control">
<CopyButton @clipboardText={{@random_bytes}} @class="button is-primary" @buttonType="button" @success={{action (set-flash-message "Random bytes copied!")}}>
Copy
</CopyButton>
</div>
<div class="control">
<button {{on "click" this.onClear}} type="button" class="button">
Back
</button>
</div>
</div>
{{else}}
<div class="box is-sideless is-fullwidth is-marginless">
<MessageError @errors={{@errors}} />
<div class="field is-horizontal">
<div class="field-body">
<div class="field">
<label for="bytes" class="is-label">
Number of bytes
</label>
<div class="control">
<Input @id="bytes" class="input" @value={{@bytes}} data-test-tools-input="bytes" />
</div>
</div>
<div class="field">
<label for="format" class="is-label">
Output format
</label>
<div class="control is-expanded">
<div class="select is-fullwidth">
<select
name="format"
id="format"
onchange={{action (mut @format) value="target.value"}}
>
{{#each (array 'base64' 'hex') as |formatOption|}}
<option selected={{if @format (eq @format formatOption)}} value={{formatOption}}>
{{formatOption}}
</option>
{{/each}}
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="field is-grouped box is-fullwidth is-bottomless">
<div class="control">
<button
type="submit"
class="button is-primary"
data-test-tools-submit="true"
>
Generate
</button>
</div>
</div>
{{/if}}