open-vault/ui/app/templates/components/oidc/provider-form.hbs
claire bontempo 9cc2f52bc1
UI: Glimmerize search select component (#17276)
* initial commit for glimmerizing search-select

* fix credentials card tests

* WIP/fixing manually passed in options

* note for small change made in other PR

* still a work in progress, but maybe fixed some tests...maybe

* fix path filter config tests

* remove comments

* clean up merge conflicts

* remove redundant subLabel

* remove subLabel, change default label to form field size

* split up format method

* cleanup, try to keep types consistent

* change logic for ss lable

* remove comment

* cleanup naming

* fix incorrect glimmer change

* refactor to allow for parent handling selected options

* update jsdoc and reogranize functions

* add test to path filter config

* address comments, small cleanup

* add test for path filter config ss

* rearrange functions so git diff is easier to compare

* change isNotSectionHeader to isSectionHeader

* add more explicit test coverage, tidying for search select

* small doc tidy

* add comments, one more test! last cleanup!

* fix search select tests
2022-10-03 11:01:34 -07:00

127 lines
3.9 KiB
Handlebars

<PageHeader as |p|>
<p.top>
<nav class="breadcrumb">
<ul>
<li>
<span class="sep">&#x0002f;</span>
{{#if @model.isNew}}
<LinkTo @route="vault.cluster.access.oidc.providers">
Providers
</LinkTo>
{{else}}
<LinkTo @route="vault.cluster.access.oidc.providers.provider.details" @model={{@model.name}}>
Details
</LinkTo>
{{/if}}
</li>
</ul>
</nav>
</p.top>
<p.levelLeft>
<h1 class="title is-3" data-test-oidc-provider-title>
{{if @model.isNew "Create" "Edit"}}
provider
</h1>
</p.levelLeft>
</PageHeader>
<form {{on "submit" (perform this.save)}}>
<div class="box is-sideless is-fullwidth is-bottomless">
<MessageError @errorMessage={{this.errorBanner}} class="has-top-margin-s" />
{{! name field }}
<FormField
data-test-field={{true}}
@attr={{get @model.formFields "0"}}
@model={{@model}}
@modelValidations={{this.modelValidations}}
/>
{{#let (get @model.formFields "1") as |attr|}}
<FormFieldLabel
for={{attr.name}}
@label="Issuer"
@helpText={{attr.options.helpText}}
@subText={{attr.options.subText}}
@docLink={{attr.options.docLink}}
/>
<Input
data-test-field={{true}}
data-test-input={{attr.name}}
id={{attr.name}}
autocomplete="off"
spellcheck="false"
@value={{@model.issuer}}
class="input {{if this.validationError 'has-error-border'}}"
placeholder={{attr.options.placeholderText}}
/>
{{/let}}
{{! scopesSupported field }}
<FormField
data-test-field={{true}}
@attr={{get @model.formFields "2"}}
@model={{@model}}
@modelValidations={{this.modelValidations}}
/>
</div>
{{! RADIO CARD + SEARCH SELECT }}
<div class="box is-sideless is-fullwidth is-marginless has-top-padding-xxl">
<h4 class="title is-4">Allowed applications</h4>
<div class="is-flex-row">
<RadioCard
@title="Allow every application to use"
@description="All applications can use this provider for authentication requests."
@icon="globe"
@value="allow_all"
@groupValue={{this.radioCardGroupValue}}
@onChange={{this.handleClientSelection}}
/>
<RadioCard
@title="Limit access to selected application"
@description="Only selected applications can use this provider for authentication requests."
@icon="globe-private"
@value="limited"
@groupValue={{this.radioCardGroupValue}}
@onChange={{this.handleClientSelection}}
/>
</div>
{{#if (eq this.radioCardGroupValue "limited")}}
<SearchSelect
@id="allowedClientIds"
@label="Application name"
@models={{array "oidc/client"}}
@inputValue={{@model.allowedClientIds}}
@onChange={{this.handleClientSelection}}
@disallowNewItems={{true}}
@fallbackComponent="string-list"
@passObject={{true}}
@objectKeys={{array "clientId"}}
@renderInfoTooltip={{this.renderInfoTooltip}}
/>
{{/if}}
</div>
<div class="field box is-fullwidth is-bottomless">
<div class="control">
<button
type="submit"
class="button is-primary {{if this.save.isRunning 'is-loading'}}"
disabled={{this.save.isRunning}}
data-test-oidc-provider-save
>
{{if @model.isNew "Create" "Update"}}
</button>
<button
type="button"
class="button has-left-margin-s"
disabled={{this.save.isRunning}}
{{on "click" this.cancel}}
data-test-oidc-provider-cancel
>
Cancel
</button>
</div>
{{#if this.invalidFormAlert}}
<div class="control">
<AlertInline @type="danger" @paddingTop={{true}} @message={{this.invalidFormAlert}} @mimicRefresh={{true}} />
</div>
{{/if}}
</div>
</form>