open-vault/ui/app/templates/components/auth-form.hbs
Chelsea Shaw 565871f63c
UI/fix safari oidc login (#11884)
* use window.postMessage instead of localStorage on oidc callback
2021-06-17 15:56:04 -05:00

122 lines
5.1 KiB
Handlebars

<div class="auth-form">
{{#if hasMethodsWithPath}}
<nav class="tabs is-marginless">
<ul>
{{#each methodsToShow as |method|}}
{{#with (or method.path method.type) as |methodKey|}}
<li class="{{if (and selectedAuthIsPath (eq (or selectedAuthBackend.path selectedAuthBackend.type) methodKey)) 'is-active' ''}}" data-test-auth-method>
<LinkTo @route="vault.cluster.auth" @model={{cluster.name}} @query={{hash with=methodKey}} data-test-auth-method-link={{method.type}}>
{{or method.id (capitalize method.type)}}
</LinkTo>
</li>
{{/with}}
{{/each}}
{{#if hasMethodsWithPath}}
<li class="{{unless selectedAuthIsPath 'is-active' ''}}" data-test-auth-method>
<LinkTo @route="vault.cluster.auth" @model={{cluster.name}} @query={{hash with='token'}} data-test-auth-method-link="other">
Other
</LinkTo>
</li>
{{/if}}
</ul>
</nav>
{{/if}}
<div class="box is-marginless is-shadowless">
<MessageError
@errorMessage={{if (and cluster.standby hasCSPError) cspErrorText error}}
data-test-auth-error
/>
<div class="has-bottom-margin-s ">
<p class="is-label">{{this.selectedAuthBackend.path}}</p>
<span class="description has-text-grey" data-test-description={{true}}>{{this.selectedAuthBackend.mountDescription}}</span>
</div>
{{#if (or (not hasMethodsWithPath) (not selectedAuthIsPath))}}
<Select
@label='Method'
@name='auth-method'
@options={{supported-auth-backends}}
@valueAttribute={{'type'}}
@labelAttribute={{'typeDisplay'}}
@isFullwidth={{true}}
@selectedValue={{this.selectedAuth}}
@onChange={{action (mut this.selectedAuth)}}
/>
{{/if}}
{{#if (or (eq this.selectedAuthBackend.type "jwt") (eq this.selectedAuthBackend.type "oidc"))}}
<AuthJwt
@onError={{action "handleError"}}
@onLoading={{action (mut this.isLoading)}}
@onToken={{action (mut this.token)}}
@namespace={{this.namespace}}
@onNamespace={{action (mut this.namespace)}}
@onSelectedAuth={{action (mut this.selectedAuth)}}
@onSubmit={{action "doSubmit"}}
@onRoleName={{action (mut this.roleName)}}
@roleName={{this.roleName}}
@selectedAuthType={{this.selectedAuthBackend.type}}
@selectedAuthPath={{or this.customPath this.selectedAuthBackend.id}}
@disabled={{or authenticate.isRunning this.isLoading}}
>
<AuthFormOptions
@customPath={{this.customPath}}
@onPathChange={{action (mut this.customPath)}}
@selectedAuthIsPath={{this.selectedAuthIsPath}}
/>
</AuthJwt>
{{else}}
<form
id="auth-form"
onsubmit={{action "doSubmit"}}
>
{{#if (eq providerName 'github')}}
<div class="field">
<label for="token" class="is-label">GitHub token</label>
<div class="control">
<Input @type="password" @value={{token}} @name="token" @id="token" class="input" data-test-token={{true}} @autocomplete="off" @spellcheck="false" />
</div>
</div>
{{else if (eq providerName 'token')}}
<div class="field">
<label for="token" class="is-label">Token</label>
<div class="control">
<Input @type="password" @value={{token}} @name="token" class="input" @autocomplete="off" @spellcheck="false" data-test-token={{true}} />
</div>
</div>
{{else}}
<div class="field">
<label for="username" class="is-label">Username</label>
<div class="control">
<Input @value={{username}} @name="username" @id="username" class="input" @autocomplete="off" @spellcheck="false" data-test-username={{true}} />
</div>
</div>
<div class="field">
<label for="password" class="is-label">Password</label>
<div class="control">
<Input @value={{password}} @name="password" @id="password" @type="password" class="input" @autocomplete="off" @spellcheck="false" data-test-password={{true}} />
</div>
</div>
{{/if}}
{{#if (not-eq selectedAuthBackend.type "token")}}
<AuthFormOptions
@customPath={{this.customPath}}
@onPathChange={{action (mut this.customPath)}}
@selectedAuthIsPath={{this.selectedAuthIsPath}}
/>
{{/if}}
<button data-test-auth-submit=true type="submit" disabled={{authenticate.isRunning}} class="button is-primary {{if authenticate.isRunning 'is-loading'}}" id="auth-submit">
Sign In
</button>
{{#if (and delayAuthMessageReminder.isIdle showLoading)}}
<AlertInline
@paddingTop=true
@sizeSmall=true
@type="info"
@message="If login takes longer than usual, you may need to check your device for an MFA notification, or contact your administrator if login times out."
data-test-auth-message="push"
/>
{{/if}}
</form>
{{/if}}
</div>
</div>