56442f673d
* 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>
95 lines
3.1 KiB
Handlebars
95 lines
3.1 KiB
Handlebars
{{#unless @uploadOnly}}
|
|
<div class="level is-mobile">
|
|
<div class="level-left">
|
|
<label for="input-{{this.elementId}}" class="is-label" data-test-text-file-label>
|
|
{{or @label "File"}}
|
|
{{#if @helpText}}
|
|
<InfoTooltip>
|
|
<span data-test-help-text>
|
|
{{@helpText}}
|
|
</span>
|
|
</InfoTooltip>
|
|
{{/if}}
|
|
</label>
|
|
</div>
|
|
<div class="level-right">
|
|
<div class="control is-flex">
|
|
<Input
|
|
data-test-text-toggle
|
|
id="use-text-{{this.elementId}}"
|
|
class="switch is-rounded is-success is-small"
|
|
@type="checkbox"
|
|
@checked={{this.showTextArea}}
|
|
{{on "change" (fn (mut this.showTextArea) (not this.showTextArea))}}
|
|
/>
|
|
<label for="use-text-{{this.elementId}}">
|
|
Enter as text
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{/unless}}
|
|
<div class="field text-file box is-fullwidth is-marginless is-shadowless is-paddingless" data-test-component="text-file">
|
|
{{#if this.showTextArea}}
|
|
<div class="control has-icon-right">
|
|
<textarea
|
|
id="input-{{this.elementId}}"
|
|
class="textarea {{if (and (not this.showValue) this.content) 'masked-font'}}"
|
|
{{on "input" this.handleTextInput}}
|
|
data-test-text-file-textarea
|
|
>
|
|
{{this.content}}
|
|
</textarea>
|
|
<button
|
|
type="button"
|
|
class="masked-input-toggle button is-compact"
|
|
data-test-button="toggle-masked"
|
|
{{on "click" (fn (mut this.showValue) (not this.showValue))}}
|
|
>
|
|
<Icon @name={{if this.showValue "eye" "eye-off"}} @stretched={{true}} />
|
|
</button>
|
|
</div>
|
|
<p class="help has-text-grey">Enter the value as text</p>
|
|
{{else}}
|
|
<div class="control is-expanded">
|
|
<div class="file has-name is-fullwidth">
|
|
<div class="file-label" aria-label="Choose a file">
|
|
<Input
|
|
id="file-input-{{this.elementId}}"
|
|
class="file-input"
|
|
@type="file"
|
|
{{on "change" this.handleFileUpload}}
|
|
data-test-text-file-input
|
|
/>
|
|
<label for="file-input-{{this.elementId}}" class="file-cta button">
|
|
<Icon @name="upload" class="has-light-grey-text" />
|
|
Choose a file…
|
|
</label>
|
|
<span class="file-name has-text-grey-dark" data-test-text-file-input-label>
|
|
{{or this.filename "No file chosen"}}
|
|
</span>
|
|
{{#if this.filename}}
|
|
<button
|
|
type="button"
|
|
class="file-delete-button"
|
|
aria-label="Clear file selection"
|
|
{{on "click" this.clearFile}}
|
|
data-test-text-clear
|
|
>
|
|
<Icon @name="x-circle" />
|
|
</button>
|
|
{{/if}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="help has-text-grey">Select a file from your computer</p>
|
|
{{#if (or @validationError this.uploadError)}}
|
|
<AlertInline
|
|
@type="danger"
|
|
@message={{or @validationError this.uploadError}}
|
|
@paddingTop={{true}}
|
|
data-test-field-validation="text-file"
|
|
/>
|
|
{{/if}}
|
|
{{/if}}
|
|
</div> |