open-consul/ui-v2/app/components/auth-form/index.hbs
John Cowen 9b256d3da6 ui: New Empty States (#7940)
* ui: CSS and component changes to the <EmptyState /> component

* ui: Reset the auth-form component back to its initial state

Moving forwards we are going to have the auth-form on the page all the
time, even when logged in (for relogging in purposes). This means the
auth-form will not always be removed from the DOM when you log in.

This sets the form back to its idle state before calling onsubmit

* ui: Make a public api for modal-dialog with a single close method

* ui : Move cache reset somewhere that makes more sense, + single refresh

1. Centralize cache resetting elsewhere, for now the store makes most
sense, although I would prefer the Repository class, so using the store
is temporary
2. We only need to refresh on login once, unless we have a differing
nspace

* ui: Ensure visibilitychange events are cleaned up

* ui: Only cache DataSource data if we have any, + only clear the cache

* ui: Add the modal login dialog to both unauth and auth views

This means we can 'relogin' when already logged in

* ui: Add new empty states

* ui: CSS Tweaks

* Remove marketing grays
2020-06-03 16:46:50 +00:00

100 lines
3.7 KiB
Handlebars

<StateChart @src={{chart}} as |State Guard Action dispatch state|>
{{yield (hash
reset=(action dispatch "RESET")
focus=(action 'focus')
)}}
<Guard @name="hasValue" @cond={{action 'hasValue'}} />
{{!FIXME: Call this reset or similar }}
<Action @name="clearError" @exec={{queue (action (mut error) undefined) (action (mut secret) undefined)}} />
<div class="auth-form" ...attributes>
<State @matches="error">
{{#if error.status}}
<p role="alert" class="notice error">
{{#if value.Name}}
{{#if (eq error.status '403')}}
<strong>Consul login failed</strong><br />
We received a token from your OIDC provider but could not log in to Consul with it.
{{else if (eq error.status '401')}}
<strong>Could not log in to provider</strong><br />
The OIDC provider has rejected this access token. Please have an administrator check your auth method configuration.
{{else if (eq error.status '499')}}
<strong>SSO log in window closed</strong><br />
The OIDC provider window was closed. Please try again.
{{else}}
<strong>Error</strong><br />
{{error.detail}}
{{/if}}
{{else}}
{{#if (eq error.status '403')}}
<strong>Invalid token</strong><br />
The token entered does not exist. Please enter a valid token to log in.
{{else}}
<strong>Error</strong><br />
{{error.detail}}
{{/if}}
{{/if}}
</p>
{{/if}}
</State>
<form onsubmit={{action dispatch "SUBMIT"}}>
<fieldset>
<label class={{concat "type-password" (if (and (state-matches state 'error') (not error.status)) ' has-error' '')}}>
<span>Log in with a token</span>
<input
{{ref this 'input'}}
disabled={{state-matches state "loading"}}
type={{inputType}}
name="auth[SecretID]"
placeholder="SecretID"
value={{secret}}
oninput={{queue
(action (mut secret) value="target.value")
(action (mut value) value="target.value")
(action dispatch "TYPING")
}}
/>
<State @matches="error">
{{#if (not error.status)}}
<strong role="alert">
Please enter your secret
</strong>
{{/if}}
</State>
</label>
</fieldset>
<button type="submit" disabled={{state-matches state "loading"}}>
Log in
</button>
<em>Contact your administrator for login credentials.</em>
</form>
{{#if (env 'CONSUL_SSO_ENABLED')}}
<DataSource
@src={{concat '/' (or nspace 'default') '/' dc '/oidc/providers'}}
@onchange={{queue (action (mut providers) value="data")}}
@onerror={{queue (action (mut error) value="error.errors.firstObject")}}
@loading="lazy"
/>
{{#if (gt providers.length 0)}}
<p>
<span>or</span>
</p>
{{/if}}
<OidcSelect
@items={{providers}}
@disabled={{state-matches state "loading"}}
@onchange={{queue (action (mut value)) (action dispatch "SUBMIT") }}
@onerror={{queue (action (mut error) value="error.errors.firstObject") (action dispatch "ERROR")}}
/>
{{/if}}
</div>
<State @matches="loading">
<TokenSource
@dc={{dc}}
@nspace={{or value.Namespace nspace}}
@type={{if value.Name 'oidc' 'secret'}}
@value={{if value.Name value.Name value}}
@onchange={{queue (action dispatch "RESET") (action onsubmit)}}
@onerror={{queue (action (mut error) value="error.errors.firstObject") (action dispatch "ERROR")}}
/>
</State>
</StateChart>