open-consul/ui/packages/consul-ui/app/components/oidc-select/index.hbs

134 lines
3.3 KiB
Handlebars

<StateChart
@src={{chart}}
as |State Guard ChartAction dispatch state|>
{{#let
(hash
State=State
Guard=Guard
Action=ChartAction
dispatch=dispatch
state=state
)
as |chart|}}
<div
class="oidc-select"
...attributes
>
<State @notMatches="idle">
<DataSource
@src={{uri '/${partition}/${nspace}/${dc}/oidc/providers'
(hash
partition=this.partition
nspace=@nspace
dc=@dc
)
}}
@onchange={{queue (action (mut this.items) value="data") (fn dispatch "SUCCESS")}}
@onerror={{queue (fn dispatch "RESET") @onerror}}
/>
</State>
<State @matches="loaded">
<Action
{{on 'click' (queue (set this 'partition' '') (fn dispatch "RESET"))}}
class="reset"
>
Choose different Admin Partition
</Action>
</State>
<StateChart
@src={{state-chart 'validate'}}
as |ignoredState ignoredGuard ignoredAction formDispatch state|>
<TextInput
@name="partition"
@label="Admin Partition"
@item={{this}}
@validations={{hash
partition=(array
(hash
test='^[a-zA-Z0-9]([a-zA-Z0-9-]{0,62}[a-zA-Z0-9])?$'
error='Name must be a valid DNS hostname.'
)
)
}}
@placeholder="Enter name of Admin Partition to log in to"
@oninput={{action (mut this.partition) value="target.value"}}
@chart={{hash
state=state
dispatch=formDispatch
}}
/>
{{! this belongs to the outer StateChart but we need }}
{{! to understand validation state }}
<State @matches="idle">
<Action
{{disabled (or (lt this.partition.length 1) (state-matches state "error"))}}
{{on "click" (fn dispatch "LOAD")}}
>
Choose provider
</Action>
</State>
</StateChart>
<State @matches="loading">
<Progress />
</State>
<State @matches="loaded">
{{#if (lt this.items.length 3)}}
<ul>
{{#each this.items as |item|}}
<li>
<Action
class={{concat item.Kind '-oidc-provider'}}
disabled={{@disabled}}
@type="button"
{{on 'click' (fn @onchange item)}}
>
Continue with {{or item.DisplayName item.Name}}{{#if (not-eq item.Namespace 'default')}} ({{item.Namespace}}){{/if}}
</Action>
</li>
{{/each}}
</ul>
{{else}}
{{#let (or this.provider (object-at 0 this.items)) as |item|}}
<OptionInput
@label="SSO Provider"
@name="provider"
@item={{this}}
@selected={{item}}
@items={{this.items}}
@onchange={{action (mut this.provider)}}
@disabled={{@disabled}}
>
<:option as |option|>
<span
class={{concat option.item.Kind '-oidc-provider'}}
>
{{or option.item.DisplayName option.item.Name}}{{#if (not-eq option.item.Namespace 'default')}} ({{option.item.Namespace}}){{/if}}
</span>
</:option>
</OptionInput>
<Action
@type="button"
{{disabled @disabled}}
{{on 'click' (fn @onchange item)}}
>
Log in
</Action>
{{/let}}
{{/if}}
</State>
</div>
{{/let}}
</StateChart>