Files
threshold-ui/ui/admin/app/components/form/auth-method/oidc/index.hbs
T
Randall MoreyandDharini Jeeva 02b6afa5e7 refactor: migrate to HDS select form fields (#1447)
* chore: 🤖 install HDS and associated assets

* chore: 🤖 bump HDS version

* refactor: 💡 optimize hds/icon addon content build

* test: 💍 fix intermittent test failure

* refactor: 💡 replace auth method selects with HDS select

* refactor: 💡 update storybook and tests to reflect HDS selects

* style: 💄 fix style linting issue

* fix: 🐛 fix bad scss syntax

* fix: 🐛 fix scss syntax again

* refactor: 💡 remove references to rose/form/select

* chore: 🤖 experimental HDS dark mode

* refactor: 💡 add custom set helper to replace action helper

* chore: 🤖 remove HDS dark mode, to be implemented in another pr

* refactor: 💡 apply custom dark mode for HDS

* chore: 🤖 add tier 2 color tweaks for better dark mode contrast

* chore: 🤖 tweak HDS form borders in dark mode

* docs: ✏️ add set function comment

Co-authored-by: Dharini Jeeva <dharini@hashicorp.com>
2022-11-11 13:45:35 -08:00

703 lines
23 KiB
Handlebars

<Rose::Form
@onSubmit={{@submit}}
@cancel={{@cancel}}
@disabled={{@model.isSaving}}
@showEditToggle={{if @model.isNew false true}}
as |form|
>
<form.actions
@enableEditText={{t 'actions.edit-form'}}
@submitText={{t 'actions.save'}}
@cancelText={{t 'actions.cancel'}}
/>
<form.input
@value={{@model.type}}
@label={{t 'form.type.label'}}
readonly={{true}}
@disabled={{true}}
/>
<form.input
@name='name'
@type='text'
@value={{@model.name}}
@label={{t 'form.name.label'}}
@helperText={{t 'form.name.help'}}
@error={{@model.errors.name}}
readonly={{false}}
as |field|
>
{{#if @model.errors.name}}
<field.errors as |errors|>
{{#each @model.errors.name as |error|}}
<errors.message>{{error.message}}</errors.message>
{{/each}}
</field.errors>
{{/if}}
</form.input>
<form.textarea
@name='description'
@type='text'
@value={{@model.description}}
@label={{t 'form.description.label'}}
@helperText={{t 'form.description.help'}}
@error={{@model.errors.description}}
readonly={{false}}
as |field|
>
{{#if @model.errors.description}}
<field.errors as |errors|>
{{#each @model.errors.description as |error|}}
<errors.message>{{error.message}}</errors.message>
{{/each}}
</field.errors>
{{/if}}
</form.textarea>
<form.input
@name='issuer'
@type='text'
@value={{@model.attributes.issuer}}
@label={{t 'form.issuer.label'}}
@helperText={{t 'form.issuer.help'}}
@error={{@model.errors.attributes_issuer}}
readonly={{false}}
as |field|
>
{{#if @model.errors.attributes_issuer}}
<field.errors as |errors|>
{{#each @model.errors.attributes_issuer as |error|}}
<errors.message>{{error.message}}</errors.message>
{{/each}}
</field.errors>
{{/if}}
</form.input>
<form.checkbox
@label={{t 'form.disable_discovered_config_validation.label'}}
@helperText={{t 'form.disable_discovered_config_validation.help'}}
@checked={{@model.attributes.disable_discovered_config_validation}}
@onChange={{fn
(mut @model.attributes.disable_discovered_config_validation)
(if @model.attributes.disable_discovered_config_validation false true)
}}
/>
<form.input
@name='client_id'
@type='text'
@value={{@model.attributes.client_id}}
@label={{t 'form.client_id.label'}}
@helperText={{t 'form.client_id.help'}}
@error={{@model.errors.attributes_client_id}}
readonly={{false}}
as |field|
>
{{#if @model.errors.attributes_client_id}}
<field.errors as |errors|>
{{#each @model.errors.attributes_client_id as |error|}}
<errors.message>{{error.message}}</errors.message>
{{/each}}
</field.errors>
{{/if}}
</form.input>
<form.input
@name='client_secret'
@type='password'
@value={{@model.attributes.client_secret}}
@label={{t 'form.client_secret.label'}}
@helperText={{t 'form.client_secret.help'}}
@error={{@model.errors.attributes_client_secret}}
readonly={{false}}
as |field|
>
{{#if @model.errors.attributes_client_secret}}
<field.errors as |errors|>
{{#each @model.errors.attributes_client_secret as |error|}}
<errors.message>{{error.message}}</errors.message>
{{/each}}
</field.errors>
{{/if}}
</form.input>
{{#unless @model.isNew}}
<form.input
@value={{@model.attributes.client_secret_hmac}}
@label={{t 'form.client_secret_hmac.label'}}
readonly={{true}}
@disabled={{true}}
/>
{{/unless}}
{{! Signing Algorithms }}
<Rose::Form::Fieldset>
<:title>{{t 'form.signing_algorithms.label'}}</:title>
<:description>{{t 'form.signing_algorithms.help'}}</:description>
<:body>
{{#if @model.errors.attributes_signing_algorithms}}
<Rose::Form::Errors as |errors|>
{{#each @model.errors.attributes_signing_algorithms as |error|}}
<errors.message>{{error.message}}</errors.message>
{{/each}}
</Rose::Form::Errors>
{{/if}}
<Rose::Table @style='condensed' as |table|>
<table.header as |header|>
<header.row @hidden={{true}} as |row|>
<row.headerCell>{{t 'titles.value'}}</row.headerCell>
<row.headerCell>{{t 'titles.actions'}}</row.headerCell>
</header.row>
</table.header>
<table.body as |body|>
{{#each @model.attributes.signing_algorithms as |algorithm i|}}
<body.row as |row|>
<row.cell>
<Hds::Form::Select::Field
@value={{algorithm.value}}
@isInvalid={{@model.errors.attributes_signing_algorithms}}
disabled={{form.disabled}}
{{on 'change' (set-from-event algorithm 'value')}}
as |F|
>
<F.Label class='sr-only'>{{t
'form.algorithm.label'
}}</F.Label>
<F.Options>
{{#each this.signingAlgorithms as |algorithmOption|}}
<option
value={{algorithmOption}}
selected={{eq algorithmOption algorithm.value}}
>{{algorithmOption}}</option>
{{/each}}
</F.Options>
</Hds::Form::Select::Field>
</row.cell>
<row.cell @shrink={{true}}>
<Rose::Button
@style='warning'
@iconOnly='flight-icons/svg/trash-16'
title={{t 'actions.remove'}}
@disabled={{if
@model.isNew
false
(if form.isEditable false true)
}}
{{on
'click'
(fn @removeItemByIndex 'attributes.signing_algorithms' i)
}}
>
{{t 'actions.remove'}}
</Rose::Button>
</row.cell>
</body.row>
{{/each}}
<body.row as |row|>
<row.cell>
<Hds::Form::Select::Field
@value={{this.newSigningAlgorithm}}
disabled={{form.disabled}}
{{on 'change' (set-from-event this 'newSigningAlgorithm')}}
as |F|
>
<F.Label class='sr-only'>{{t
'resources.auth-method.titles.new-signing-algorithm'
}}</F.Label>
<F.Options>
{{#each this.signingAlgorithms as |algorithmOption|}}
<option
value={{algorithmOption}}
selected={{eq algorithmOption this.newSigningAlgorithm}}
>{{algorithmOption}}</option>
{{/each}}
</F.Options>
</Hds::Form::Select::Field>
</row.cell>
<row.cell @shrink={{true}}>
<Rose::Button
@style='secondary'
title={{t 'actions.add'}}
@disabled={{if
@model.isNew
false
(if form.isEditable false true)
}}
{{on
'click'
(fn
@addStringItem
'attributes.signing_algorithms'
this.newSigningAlgorithm
)
}}
>
{{t 'actions.add'}}
</Rose::Button>
</row.cell>
</body.row>
</table.body>
</Rose::Table>
</:body>
</Rose::Form::Fieldset>
{{! Allowed Audiences }}
<Rose::Form::Fieldset>
<:title>{{t 'form.allowed_audiences.label'}}</:title>
<:description>{{t 'form.allowed_audiences.help'}}</:description>
<:body>
{{#if @model.errors.attributes_allowed_audiences}}
<Rose::Form::Errors as |errors|>
{{#each @model.errors.attributes_allowed_audiences as |error|}}
<errors.message>{{error.message}}</errors.message>
{{/each}}
</Rose::Form::Errors>
{{/if}}
<Rose::Table @style='condensed' as |table|>
<table.header as |header|>
<header.row @hidden={{true}} as |row|>
<row.headerCell>{{t 'titles.value'}}</row.headerCell>
<row.headerCell>{{t 'titles.actions'}}</row.headerCell>
</header.row>
</table.header>
<table.body as |body|>
{{#each @model.attributes.allowed_audiences as |audience i|}}
<body.row as |row|>
<row.cell>
<form.input
@type='text'
@value={{audience.value}}
@error={{@model.errors.attributes_allowed_audiences}}
@contextual={{true}}
as |field|
>
<field.label>{{t 'form.claim.label'}}</field.label>
<field.field />
</form.input>
</row.cell>
<row.cell @shrink={{true}}>
<Rose::Button
@style='warning'
@iconOnly='flight-icons/svg/trash-16'
title={{t 'actions.remove'}}
@disabled={{if
@model.isNew
false
(if form.isEditable false true)
}}
{{on
'click'
(fn @removeItemByIndex 'attributes.allowed_audiences' i)
}}
>
{{t 'actions.remove'}}
</Rose::Button>
</row.cell>
</body.row>
{{/each}}
<body.row as |row|>
<row.cell>
<form.input
@type='text'
@value={{this.newAllowedAudience}}
@label={{t 'resources.auth-method.titles.new-allowed-audience'}}
/>
</row.cell>
<row.cell @shrink={{true}}>
<Rose::Button
@style='secondary'
title={{t 'actions.add'}}
@disabled={{if
@model.isNew
false
(if form.isEditable false true)
}}
{{on
'click'
(fn
@addStringItem
'attributes.allowed_audiences'
this.newAllowedAudience
)
}}
>
{{t 'actions.add'}}
</Rose::Button>
</row.cell>
</body.row>
</table.body>
</Rose::Table>
</:body>
</Rose::Form::Fieldset>
{{! Claims Scopes }}
<Rose::Form::Fieldset>
<:title>{{t 'form.claims_scopes.label'}}</:title>
<:description>{{t 'form.claims_scopes.help'}}</:description>
<:body>
{{#if @model.errors.attributes_claims_scopes}}
<Rose::Form::Errors as |errors|>
{{#each @model.errors.attributes_claims_scopes as |error|}}
<errors.message>{{error.message}}</errors.message>
{{/each}}
</Rose::Form::Errors>
{{/if}}
<Rose::Table @style='condensed' as |table|>
<table.header as |header|>
<header.row @hidden={{true}} as |row|>
<row.headerCell>{{t 'titles.value'}}</row.headerCell>
<row.headerCell />
</header.row>
</table.header>
<table.body as |body|>
{{#each @model.attributes.claims_scopes as |claimsScope i|}}
<body.row as |row|>
<row.cell>
<form.input
@type='text'
@value={{claimsScope.value}}
@error={{@model.errors.attributes_claims_scopes}}
@contextual={{true}}
as |field|
>
<field.label>{{t 'form.claims_scope.label'}}</field.label>
<field.field />
</form.input>
</row.cell>
<row.cell @shrink={{true}}>
<Rose::Button
@style='warning'
@iconOnly='flight-icons/svg/trash-16'
title={{t 'actions.remove'}}
@disabled={{if
@model.isNew
false
(if form.isEditable false true)
}}
{{on
'click'
(fn @removeItemByIndex 'attributes.claims_scopes' i)
}}
>
{{t 'actions.remove'}}
</Rose::Button>
</row.cell>
</body.row>
{{/each}}
<body.row as |row|>
<row.cell>
<form.input
@type='text'
@value={{this.newClaimsScope}}
@label={{t 'resources.auth-method.titles.new-claims-scope'}}
/>
</row.cell>
<row.cell @shrink={{true}}>
<Rose::Button
@style='secondary'
title={{t 'actions.add'}}
@disabled={{if
@model.isNew
false
(if form.isEditable false true)
}}
{{on
'click'
(fn
@addStringItem
'attributes.claims_scopes'
this.newClaimsScope
)
}}
>
{{t 'actions.add'}}
</Rose::Button>
</row.cell>
</body.row>
</table.body>
</Rose::Table>
</:body>
</Rose::Form::Fieldset>
{{! Account Claim Maps }}
<Rose::Form::Fieldset>
<:title>{{t 'form.account_claim_maps.label'}}</:title>
<:description>{{t 'form.account_claim_maps.help'}}</:description>
<:body>
{{#if @model.errors.attributes_account_claim_maps}}
<Rose::Form::Errors as |errors|>
{{#each @model.errors.attributes_account_claim_maps as |error|}}
<errors.message>{{error.message}}</errors.message>
{{/each}}
</Rose::Form::Errors>
{{/if}}
<Rose::Table @style='condensed' as |table|>
<table.header as |header|>
<header.row as |row|>
<row.headerCell>{{t 'form.from_claim.label'}}</row.headerCell>
<row.headerCell>{{t 'form.to_claim.label'}}</row.headerCell>
<row.headerCell>{{t 'titles.actions'}}</row.headerCell>
</header.row>
</table.header>
<table.body as |body|>
{{#each @model.attributes.account_claim_maps as |claimMap i|}}
<body.row as |row|>
<row.cell>
<form.input
@type='text'
@value={{claimMap.from}}
@error={{@model.errors.attributes_account_claim_maps}}
@contextual={{true}}
as |field|
>
<field.label>{{t 'form.from_claim.label'}}</field.label>
<field.field />
</form.input>
</row.cell>
<row.cell>
<Hds::Form::Select::Field
@value={{claimMap.to}}
@isInvalid={{@model.errors.attributes_account_claim_maps}}
disabled={{form.disabled}}
{{on 'change' (set-from-event claimMap 'to')}}
as |F|
>
<F.Label class='sr-only'>{{t 'form.to_claim.label'}}</F.Label>
<F.Options>
{{#each this.toClaims as |toClaimOption|}}
<option
value={{toClaimOption}}
selected={{eq toClaimOption claimMap.to}}
>{{toClaimOption}}</option>
{{/each}}
</F.Options>
</Hds::Form::Select::Field>
</row.cell>
<row.cell @shrink={{true}}>
<Rose::Button
@style='warning'
@iconOnly='flight-icons/svg/trash-16'
title={{t 'actions.remove'}}
@disabled={{if
@model.isNew
false
(if form.isEditable false true)
}}
{{on
'click'
(fn @removeItemByIndex 'attributes.account_claim_maps' i)
}}
>
{{t 'actions.remove'}}
</Rose::Button>
</row.cell>
</body.row>
{{/each}}
<body.row as |row|>
<row.cell>
<form.input
@type='text'
@value={{this.newFromClaim}}
@label={{t 'resources.auth-method.titles.new-from-claim'}}
/>
</row.cell>
<row.cell>
<Hds::Form::Select::Field
@value={{this.newToClaim}}
disabled={{form.disabled}}
{{on 'change' (set-from-event this 'newToClaim')}}
as |F|
>
<F.Label class='sr-only'>{{t
'resources.auth-method.titles.new-to-claim'
}}</F.Label>
<F.Options>
{{#each this.toClaims as |toClaimOption|}}
<option
value={{toClaimOption}}
selected={{eq toClaimOption this.newToClaim}}
>{{toClaimOption}}</option>
{{/each}}
</F.Options>
</Hds::Form::Select::Field>
</row.cell>
<row.cell @shrink={{true}}>
<Rose::Button
@style='secondary'
title={{t 'actions.add'}}
@disabled={{if
@model.isNew
false
(if form.isEditable false true)
}}
{{on
'click'
(fn @addAccountClaimMapItem this.newFromClaim this.newToClaim)
}}
>
{{t 'actions.add'}}
</Rose::Button>
</row.cell>
</body.row>
</table.body>
</Rose::Table>
</:body>
</Rose::Form::Fieldset>
{{! Certificates }}
<Rose::Form::Fieldset>
<:title>{{t 'form.idp_ca_certs.label'}}</:title>
<:description>{{t 'form.idp_ca_certs.help'}}</:description>
<:body>
{{#if @model.errors.attributes_idp_ca_certs}}
<Rose::Form::Errors as |errors|>
{{#each @model.errors.attributes_idp_ca_certs as |error|}}
<errors.message>{{error.message}}</errors.message>
{{/each}}
</Rose::Form::Errors>
{{/if}}
<Rose::Table @style='condensed' as |table|>
<table.header as |header|>
<header.row @hidden={{true}} as |row|>
<row.headerCell>{{t 'titles.value'}}</row.headerCell>
<row.headerCell>{{t 'titles.actions'}}</row.headerCell>
</header.row>
</table.header>
<table.body as |body|>
{{#each @model.attributes.idp_ca_certs as |cert i|}}
<body.row as |row|>
<row.cell>
<form.textarea
@value={{cert.value}}
@error={{@model.errors.attributes_idp_ca_certs}}
@contextual={{true}}
as |field|
>
<field.label>{{t 'form.certificate.label'}}</field.label>
<field.field />
</form.textarea>
</row.cell>
<row.cell @shrink={{true}}>
<Rose::Button
@style='warning'
@iconOnly='flight-icons/svg/trash-16'
title={{t 'actions.remove'}}
@disabled={{if
@model.isNew
false
(if form.isEditable false true)
}}
{{on
'click'
(fn @removeItemByIndex 'attributes.idp_ca_certs' i)
}}
>
{{t 'actions.remove'}}
</Rose::Button>
</row.cell>
</body.row>
{{/each}}
<body.row as |row|>
<row.cell>
<form.textarea
@value={{this.newCertificate}}
@label={{t 'resources.auth-method.titles.new-certificate'}}
/>
</row.cell>
<row.cell @shrink={{true}}>
<Rose::Button
@style='secondary'
title={{t 'actions.add'}}
@disabled={{if
@model.isNew
false
(if form.isEditable false true)
}}
{{on
'click'
(fn
@addStringItem 'attributes.idp_ca_certs' this.newCertificate
)
}}
>
{{t 'actions.add'}}
</Rose::Button>
</row.cell>
</body.row>
</table.body>
</Rose::Table>
</:body>
</Rose::Form::Fieldset>
<form.input
@name='max_age'
@type='number'
@value={{@model.attributes.max_age}}
@label={{t 'form.max_age.label'}}
@helperText={{t 'form.max_age.help'}}
@error={{@model.errors.attributes_max_age}}
readonly={{false}}
step='1'
min='0'
as |field|
>
{{#if @model.errors.attributes_max_age}}
<field.errors as |errors|>
{{#each @model.errors.attributes_max_age as |error|}}
<errors.message>{{error.message}}</errors.message>
{{/each}}
</field.errors>
{{/if}}
</form.input>
<form.input
@name='api_url_prefix'
@type='test'
@value={{@model.attributes.api_url_prefix}}
@label={{t 'form.api_url_prefix.label'}}
@helperText={{t 'form.api_url_prefix.help'}}
@error={{@model.errors.attributes_api_url_prefix}}
readonly={{false}}
as |field|
>
{{#if @model.errors.attributes_api_url_prefix}}
<field.errors as |errors|>
{{#each @model.errors.attributes_api_url_prefix as |error|}}
<errors.message>{{error.message}}</errors.message>
{{/each}}
</field.errors>
{{/if}}
</form.input>
{{#unless @model.isNew}}
<form.input
@value={{@model.attributes.callback_url}}
@label={{t 'form.callback_url.label'}}
@helperText={{t 'form.callback_url.help'}}
readonly={{true}}
@disabled={{true}}
/>
{{/unless}}
{{#if (can 'save model' @model)}}
<form.actions
@enableEditText={{t 'actions.edit-form'}}
@submitText={{t 'actions.save'}}
@cancelText={{t 'actions.cancel'}}
/>
{{/if}}
</Rose::Form>