<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 /> </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>