open-vault/ui/app/templates/components/oidc/key-form.hbs

102 lines
3.5 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.keys">
Keys
</LinkTo>
{{else}}
<LinkTo @route="vault.cluster.access.oidc.keys.key.details" @model={{@model.name}}>
Details
</LinkTo>
{{/if}}
</li>
</ul>
</nav>
</p.top>
<p.levelLeft>
<h1 class="title is-3" data-test-oidc-key-title>
{{if @model.isNew "Create" "Edit"}}
key
</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" />
{{#each @model.formFields as |attr|}}
<FormField @attr={{attr}} @model={{@model}} @modelValidations={{this.modelValidations}} />
{{/each}}
</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
data-test-oidc-radio="allow-all"
@title="Allow every application to use"
@description="All applications can use this key for authentication requests."
@icon="globe"
@value="allow_all"
@groupValue={{this.radioCardGroupValue}}
@onChange={{this.handleClientSelection}}
/>
<RadioCard
data-test-oidc-radio="limited"
@title="Limit access to selected application"
@description="Only selected applications can use this key for authentication requests."
@icon="globe-private"
@value="limited"
@groupValue={{this.radioCardGroupValue}}
@onChange={{this.handleClientSelection}}
@disabled={{@model.isNew}}
@disabledTooltipMessage="This option has been disabled for now. To limit access, you must first create an application that references this key."
/>
</div>
{{#if (eq this.radioCardGroupValue "limited")}}
<SearchSelect
@id="allowedClientIds"
@label="Application name"
@subText="Select which applications are allowed to use this key. Only applications that currently reference this key will appear in the dropdown."
@models={{array "oidc/client"}}
@inputValue={{@model.allowedClientIds}}
@onChange={{this.handleClientSelection}}
@disallowNewItems={{true}}
@fallbackComponent="string-list"
@passObject={{true}}
@objectKeys={{array "clientId"}}
@queryObject={{this.filterDropdownOptions}}
/>
{{/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-key-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-key-cancel
>
Cancel
</button>
</div>
{{#if this.invalidFormAlert}}
<div class="control">
<AlertInline @type="danger" @paddingTop={{true}} @message={{this.invalidFormAlert}} @mimicRefresh={{true}} />
</div>
{{/if}}
</div>
</form>