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

118 lines
3.6 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 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 your Partition'
@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 aria-label='Loading' />
</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>