open-consul/ui/packages/consul-ui/app/components/auth-dialog/index.hbs

<StateChart @src={{chart}} as |State Guard Action dispatch state|>

  <Guard @name="hasToken" @cond={{action 'hasToken'}} />
  <Action @name="login" @exec={{action 'login'}} />
  <Action @name="logout" @exec={{action 'logout'}} />
  {{! This DataSource just permanently listens to any changes to the users }}
  {{! token, whether thats a new token, a changed token or a deleted token }}
  <DataSource
    @src="settings://consul:token"
    @onchange={{queue (action (mut token) value="data") (action dispatch "CHANGE") (action (mut previousToken) value="data")}}
  />
  {{! This DataSink is just used for logging in from the form, }}
  {{! or logging out via the exposed logout function }}
  <DataSink
    @sink="settings://consul:token"
    as |sink|
  >
    {{yield}}
    {{#let (hash
      login=(action sink.open)
      logout=(action sink.open null)
      token=token
    ) (hash
      AuthProfile=(component 'auth-profile' item=token)
      AuthForm=(component 'auth-form'
        dc=dc
        partition=partition
        nspace=nspace
        onsubmit=(action sink.open value="data"))
    ) as |api components|}}
      <State @matches="authorized">
        {{#yield-slot name="authorized"}}
          {{yield api components}}
        {{/yield-slot}}
      </State>

      <State @matches="unauthorized">
      {{#yield-slot name="unauthorized"}}
          {{yield api components}}
        {{/yield-slot}}
      </State>
    {{/let}}
  </DataSink>
</StateChart>