open-vault/ui/app/templates/components/mount-backend-form.hbs
claire bontempo d4f3fba56e
UI/Fix form validation issues (#15560)
* clean up validators

* fix getter overriding user input

* add changelog

* remove asString option

* move invalid check up

* remove asString everywhere

* revert input value defaults

* undo form disabling if validation errors

* address comments

* remove or

* add validation message to form, create pseudo loading icon

* whole alert disappears with refresh

* glimmerize alert-inline

* add tests

* rename variables for consistency

* spread attributes to glimmerized component

* address comments

* add validation test
2022-05-25 11:22:36 -07:00

101 lines
3.8 KiB
Handlebars

<PageHeader as |p|>
<p.levelLeft>
<h1 class="title is-3 title-with-icon" data-test-mount-form-header="true">
{{#if this.showEnable}}
{{#let (find-by "type" this.mountModel.type this.mountTypes) as |typeInfo|}}
<Icon @name={{or typeInfo.glyph typeInfo.type}} @size="24" class="has-text-grey-light" />
{{#if (eq this.mountType "auth")}}
{{concat "Enable " typeInfo.displayName " Authentication Method"}}
{{else}}
{{concat "Enable " typeInfo.displayName " Secrets Engine"}}
{{/if}}
{{/let}}
{{else if (eq this.mountType "auth")}}
Enable an Authentication Method
{{else}}
Enable a Secrets Engine
{{/if}}
</h1>
</p.levelLeft>
</PageHeader>
<form {{action (perform this.mountBackend) on="submit"}}>
<div class="box is-sideless is-fullwidth is-marginless">
<NamespaceReminder @mode="enable" @noun={{if (eq this.mountType "auth") "Auth Method" "Secret Engine"}} />
<MessageError @model={{this.model}} @errorMessage={{this.errorMessage}} @errors={{this.errors}} />
{{#if this.showEnable}}
<FormFieldGroups
@model={{this.mountModel}}
@onChange={{action "onTypeChange"}}
@renderGroup="default"
@modelValidations={{this.modelValidations}}
@onKeyUp={{action "onKeyUp"}}
/>
<FormFieldGroups @model={{this.mountModel}} @onChange={{action "onTypeChange"}} @renderGroup="Method Options" />
{{else}}
{{#each (array "generic" "cloud" "infra") as |category|}}
<h3 class="title box-radio-header">
{{capitalize category}}
</h3>
<div class="box-radio-container">
{{#each (filter-by "category" category this.mountTypes) as |type|}}
<BoxRadio
@displayName={{type.displayName}}
@type={{type.type}}
@glyph={{or type.glyph type.type}}
@groupValue={{this.mountModel.type}}
@groupName="mount-type"
@onRadioChange={{queue (action (mut this.mountModel.type)) (action "onTypeChange" "type")}}
@disabled={{if type.requiredFeature (not (has-feature type.requiredFeature)) false}}
@tooltipMessage={{if
(or (eq type.type "transform") (eq type.type "kmip") (eq type.type "keymgmt"))
(concat
type.displayName
" is part of the Advanced Data Protection module, which is not included in your enterprise license."
)
"This secret engine is not included in your license."
}}
/>
{{/each}}
</div>
{{/each}}
{{/if}}
</div>
<div class="field is-grouped box is-fullwidth is-bottomless">
{{#if this.showEnable}}
<div class="control">
<button
type="submit"
data-test-mount-submit="true"
class="button is-primary {{if this.mountBackend.isRunning 'loading'}}"
disabled={{this.mountBackend.isRunning}}
>
{{#if (eq this.mountType "auth")}}
Enable Method
{{else}}
Enable Engine
{{/if}}
</button>
</div>
<div class="control">
<button data-test-mount-back type="button" class="button" onclick={{action "toggleShowEnable" false}}>
Back
</button>
</div>
{{#if this.invalidFormAlert}}
<div class="control">
<AlertInline @type="danger" @paddingTop={{true}} @message={{this.invalidFormAlert}} @mimicRefresh={{true}} />
</div>
{{/if}}
{{else}}
<button
data-test-mount-next
type="button"
class="button is-primary"
onclick={{action "toggleShowEnable" true}}
disabled={{not this.mountModel.type}}
>
Next
</button>
{{/if}}
</div>
</form>