open-nomad/ui/app/components/secure-variable-form.hbs
Jai 48679fdf99 ui: make eye toggles only toggle on/off for their respective row (#13406)
* chore:  update tests to handle invidual toggle responsibility

* chore:  prettify secure-variable-form template

* ui:  extract input group markup into seperate component
2022-07-11 13:34:05 -04:00

85 lines
2.2 KiB
Handlebars

<form class="new-secure-variables" autocomplete="off" {{on "submit" this.save}}>
{{!-- TODO: {{if this.parseError 'is-danger'}} on inputs --}}
<div>
<label>
<span>
Path
</span>
<Input
@type="text"
@value={{@model.path}}
placeholder="/path/to/variable"
class="input path-input {{if this.duplicatePathWarning "error"}}"
disabled={{not @model.isNew}}
{{on "input" this.validatePath}}
{{autofocus}}
/>
</label>
{{#if this.duplicatePathWarning}}
<p class="duplicate-path-error help is-danger">
There is already a Secure Variable located at
{{@model.path}}
.
<br />
Please choose a different path, or
<LinkTo
@route="variables.variable.edit"
@model={{this.duplicatePathWarning.path}}
>
edit the existing Secure Variable
</LinkTo>
.
</p>
{{/if}}
</div>
{{#each this.keyValues as |entry iter|}}
<div class="key-value">
<label>
<span>
Key
</span>
<Input
@type="text"
@value={{entry.key}}
class="input"
{{autofocus ignore=(eq iter 0)}}
{{on "input" (fn this.validateKey entry)}}
/>
</label>
<SecureVariableForm::InputGroup @entry={{entry}} />
{{#if (eq entry this.keyValues.lastObject)}}
<button
class="add-more button is-info is-inverted"
type="button"
disabled={{not (and entry.key entry.value)}}
{{on "click" this.appendRow}}
>
Add More
</button>
{{else}}
<button
class="delete-row button is-danger is-inverted"
type="button"
{{on "click" (action this.deleteRow entry)}}
>
Delete
</button>
{{/if}}
{{#each-in entry.warnings as |k v|}}
<span class="key-value-error help is-danger">
{{v}}
</span>
{{/each-in}}
</div>
{{/each}}
<footer>
<button
disabled={{this.shouldDisableSave}}
class="button is-primary"
type="submit"
>
Save
{{pluralize "Variable" @this.keyValues.length}}
</button>
</footer>
</form>