open-vault/ui/app/templates/components/auth-form.hbs
Noelle Daley 828185db49
UI/add select dropdown (#7102)
* add SelectDropdown

* use SelectDropdown instead of HttpRequestsDropdown

* use html selector instead of class name

* ensure SelectDropdown still works when rendered inside a Toolbar

* add tests

* remove old HttpRequests component

* make SelectDropdown example easier to read in Storybook

* add isFullwidth prop

* add SelectDropbown inside a Toolbar story

* fix tests

* remove actions block and call this.onChange directly

* replace dropdownLabel with label

* rename SelectDropdown to SelecT

* add test for onChange

* remove selectedItem prop since we don't need it

* make Select accept options as an array of strings or objects

* Revert "remove selectedItem prop since we don't need it"

This reverts commit 7278516de87bb1df60482edb005137252819931e.

* use Select inside TtlPicker

* remove debugger

* use a test selector

* fix pki test selectors

* improve storybook docs

* fix selected value in ttl picker

* ensure httprequests dropdown updates the selected item

* ensure select dropdown correctly matches selectedItem

* rename selectedItem to selectedValue

* remove debugger lol

* update selectedItem test

* add valueAttribute and labelAttribute to Storybook knobs

* udpate jsdocs

* remove old httprequestsdropdown component

* add note that onChange will receive value of select

* use Select inside AuthForm

* use correct test selector
2019-08-01 14:35:18 -07:00

86 lines
3.1 KiB
Handlebars

<div class="auth-form">
{{#if showLoading}}
<div class="vault-loader">
<VaultLogoSpinner />
</div>
{{/if}}
{{#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>
{{#link-to 'vault.cluster.auth' cluster.name (query-params with=methodKey) data-test-auth-method-link=method.type}}
{{or method.id (capitalize method.type)}}
{{/link-to}}
</li>
{{/with}}
{{/each}}
{{#if hasMethodsWithPath}}
<li class="{{if (not selectedAuthIsPath) 'is-active' ''}}" data-test-auth-method>
{{#link-to 'vault.cluster.auth' cluster.name (query-params with='token') data-test-auth-method-link="other"}}
Other
{{/link-to}}
</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
/>
{{#if (or (not hasMethodsWithPath) (not selectedAuthIsPath))}}
<Select
@label='Method'
@name='auth-method'
@options={{supported-auth-backends}}
@valueAttribute={{'type'}}
@labelAttribute={{'typeDisplay'}}
@isFullwidth={{true}}
@onChange={{action (mut 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={{authenticate.isRunning}}
>
<AuthFormOptions
@customPath={{this.customPath}}
@onPathChange={{action (mut this.customPath)}}
@selectedAuthIsPath={{this.selectedAuthIsPath}}
/>
</AuthJwt>
{{else}}
<form
id="auth-form"
onsubmit={{action "doSubmit"}}
>
{{partial providerPartialName}}
{{#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>
</form>
{{/if}}
</div>
</div>