open-vault/ui/app/templates/components/pgp-file.hbs
claire bontempo 56442f673d
ui: refactor text file component (#18458)
* wip tests

* Move text-file to addon

* rename fileName to filename, initial cleanup of text-fil

* rename args, rename test selector

* fix eye-con, remove enterAsText from file object

* add tests

* move files back to original location

* rename files via git for git diff

* adjsut test

* Revert "wip tests"

This reverts commit 63716a1e647a0b01236d34322837456ef3e9db43.

* fix policy form input

* cleanup conditional

* add bottom margin

* add element id

* change arg name

* add text area input test

* add upload test to policy form

Co-authored-by: Chelsea Shaw <cshaw@hashicorp.com>
2022-12-19 23:54:59 +00:00

84 lines
2.4 KiB
Handlebars

<div class="level is-mobile">
<div class="level-left">
<label class="is-label" data-test-pgp-label>
{{#if this.label}}
{{this.label}}
{{else}}
PGP KEY
{{if (not-eq this.index "") (inc this.index)}}
{{/if}}
</label>
</div>
<div class="level-right">
<div class="control is-flex">
<input
data-test-text-toggle
id={{concat "useText-" this.elementId}}
type="checkbox"
name={{concat "useText-" this.elementId}}
class="switch is-rounded is-success is-small"
checked={{this.key.enterAsText}}
onchange={{action (toggle "enterAsText" this.key)}}
/>
<label for={{concat "useText-" this.elementId}}>
Enter as text
</label>
</div>
</div>
</div>
<div class="field">
{{#if this.key.enterAsText}}
<div class="control">
<textarea
class="textarea"
oninput={{action "updateData"}}
data-test-pgp-file-textarea={{true}}
>{{this.key.value}}</textarea>
</div>
<p class="help has-text-grey">
{{#if this.textareaHelpText}}
{{this.textareaHelpText}}
{{else}}
Enter a base64-encoded key
{{/if}}
</p>
{{else}}
<div class="control is-expanded">
<div class="file">
<div class="file-label is-fullwidth">
<input
id="file-input"
class="file-input"
type="file"
onchange={{action "pickedFile"}}
data-test-pgp-file-input={{true}}
/>
<span class="file-cta is-fullwidth">
<span class="file-icon has-text-grey-dark">
<Icon @name="file" />
</span>
<label for="file-input" class="file-label has-text-grey-dark" data-test-pgp-file-input-label={{true}}>
{{#if this.key.filename}}
{{this.key.filename}}
{{else}}
Choose a file&hellip;
{{/if}}
</label>
{{#if this.key.filename}}
<button type="button" class="file-delete-button" {{action "clearKey"}} data-test-pgp-clear={{true}}>
<Icon @name="x" aria-label="Close" />
</button>
{{/if}}
</span>
</div>
</div>
</div>
<p class="help has-text-grey">
{{#if this.fileHelpText}}
{{this.fileHelpText}}
{{else}}
Select a PGP key from your computer
{{/if}}
</p>
{{/if}}
</div>