habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web/admin: improve invalidation flow default & field grouping (#11769)

Browse Source 
* web/admin: auto-select provider invalidation flow

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* new structuring

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* fix missing ldap unbind flow

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* unrelated: add enter for redirect

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens L.
2024-10-23 13:58:44 +02:00
committed by GitHub
parent d3d96b7bed
commit 3c0a8f4641
11 changed files with 247 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
web/src/admin/applications/wizard/methods/ldap/ak-application-wizard-authentication-by-ldap.ts
View File

@ -62,6 +62,19 @@ export class ApplicationWizardApplicationDetails extends WithBrandConfig(BasePro
${msg("Flow used for users to authenticate.")}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${msg("Unbind flow")}
name="invalidationFlow"
required
>
<ak-branded-flow-search
flowType=${FlowsInstancesListDesignationEnum.Invalidation}
.currentFlow=${provider?.invalidationFlow}
.brandFlow=${this.brand.flowInvalidation}
required
></ak-branded-flow-search>
<p class="pf-c-form__helper-text">${msg("Flow used for unbinding users.")}</p>
</ak-form-element-horizontal>
<ak-radio-input
label=${msg("Bind mode")}

53
web/src/admin/applications/wizard/methods/oauth/ak-application-wizard-authentication-by-oauth.ts
View File

@ -85,21 +85,6 @@ export class ApplicationWizardAuthenticationByOauth extends BaseProviderPanel {
${msg("Flow used when authorizing this provider.")}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
name="invalidationFlow"
label=${msg("Invalidation flow")}
.errorMessages=${errors?.invalidationFlow ?? []}
?required=${true}
>
<ak-flow-search
flowType=${FlowsInstancesListDesignationEnum.Invalidation}
.currentFlow=${provider?.invalidationFlow}
required
></ak-flow-search>
<p class="pf-c-form__helper-text">
${msg("Flow used when logging out of this provider.")}
</p>
</ak-form-element-horizontal>
<ak-form-group .expanded=${true}>
<span slot="header"> ${msg("Protocol settings")} </span>
@ -128,8 +113,9 @@ export class ApplicationWizardAuthenticationByOauth extends BaseProviderPanel {
<ak-text-input
name="clientSecret"
label=${msg("Client Secret")}
value=${provider?.clientSecret ??
randomString(128, ascii_letters + digits)}
value=${
provider?.clientSecret ?? randomString(128, ascii_letters + digits)
}
.errorMessages=${errors?.clientSecret ?? []}
?hidden=${!this.showClientSecret}
>
@ -162,6 +148,39 @@ export class ApplicationWizardAuthenticationByOauth extends BaseProviderPanel {
</div>
</ak-form-group>
<ak-form-group>
<span slot="header"> ${msg("Advanced flow settings")} </span>
<ak-form-element-horizontal
name="authenticationFlow"
label=${msg("Authentication flow")}
>
<ak-flow-search
flowType=${FlowsInstancesListDesignationEnum.Authentication}
.currentFlow=${provider?.authenticationFlow}
></ak-flow-search>
<p class="pf-c-form__helper-text">
${msg(
"Flow used when a user access this provider and is not authenticated.",
)}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${msg("Invalidation flow")}
name="invalidationFlow"
required
>
<ak-flow-search
flowType=${FlowsInstancesListDesignationEnum.Invalidation}
.currentFlow=${provider?.invalidationFlow}
defaultFlowSlug="default-provider-invalidation-flow"
required
></ak-flow-search>
<p class="pf-c-form__helper-text">
${msg("Flow used when logging out of this provider.")}
</p>
</ak-form-element-horizontal>
</div>
</ak-form-group>
<ak-form-group>
<span slot="header"> ${msg("Advanced protocol settings")} </span>
<div slot="body" class="pf-c-form">

54
web/src/admin/applications/wizard/methods/proxy/AuthenticationByProxyPage.ts
View File

@ -119,21 +119,6 @@ export class AkTypeProxyApplicationWizardPage extends BaseProviderPanel {
${msg("Flow used when authorizing this provider.")}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
name="invalidationFlow"
label=${msg("Invalidation flow")}
.errorMessages=${errors?.invalidationFlow ?? []}
?required=${true}
>
<ak-flow-search
flowType=${FlowsInstancesListDesignationEnum.Invalidation}
.currentFlow=${this.instance?.invalidationFlow}
required
></ak-flow-search>
<p class="pf-c-form__helper-text">
${msg("Flow used when logging out of this provider.")}
</p>
</ak-form-element-horizontal>
${this.renderProxyMode()}
@ -176,9 +161,11 @@ export class AkTypeProxyApplicationWizardPage extends BaseProviderPanel {
<ak-textarea-input
name="skipPathRegex"
label=${this.mode === ProxyMode.ForwardDomain
label=${
this.mode === ProxyMode.ForwardDomain
? msg("Unauthenticated URLs")
: msg("Unauthenticated Paths")}
: msg("Unauthenticated Paths")
}
value=${ifDefined(this.instance?.skipPathRegex)}
.errorMessages=${errors?.skipPathRegex ?? []}
.bighelp=${html` <p class="pf-c-form__helper-text">
@ -195,6 +182,39 @@ export class AkTypeProxyApplicationWizardPage extends BaseProviderPanel {
</ak-textarea-input>
</div>
</ak-form-group>
<ak-form-group>
<span slot="header"> ${msg("Advanced flow settings")} </span>
<ak-form-element-horizontal
name="authenticationFlow"
label=${msg("Authentication flow")}
>
<ak-flow-search
flowType=${FlowsInstancesListDesignationEnum.Authentication}
.currentFlow=${this.instance?.authenticationFlow}
></ak-flow-search>
<p class="pf-c-form__helper-text">
${msg(
"Flow used when a user access this provider and is not authenticated.",
)}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${msg("Invalidation flow")}
name="invalidationFlow"
required
>
<ak-flow-search
flowType=${FlowsInstancesListDesignationEnum.Invalidation}
.currentFlow=${this.instance?.invalidationFlow}
defaultFlowSlug="default-provider-invalidation-flow"
required
></ak-flow-search>
<p class="pf-c-form__helper-text">
${msg("Flow used when logging out of this provider.")}
</p>
</ak-form-element-horizontal>
</div>
</ak-form-group>
<ak-form-group>
<span slot="header">${msg("Authentication settings")}</span>
<div slot="body" class="pf-c-form">

64
web/src/admin/applications/wizard/methods/saml/ak-application-wizard-authentication-by-saml-configuration.ts
View File

@ -103,21 +103,6 @@ export class ApplicationWizardProviderSamlConfiguration extends BaseProviderPane
${msg("Flow used when authorizing this provider.")}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
name="invalidationFlow"
label=${msg("Invalidation flow")}
.errorMessages=${errors?.invalidationFlow ?? []}
?required=${true}
>
<ak-flow-search
flowType=${FlowsInstancesListDesignationEnum.Invalidation}
.currentFlow=${provider?.invalidationFlow}
required
></ak-flow-search>
<p class="pf-c-form__helper-text">
${msg("Flow used when logging out of this provider.")}
</p>
</ak-form-element-horizontal>
<ak-form-group .expanded=${true}>
<span slot="header"> ${msg("Protocol settings")} </span>
@ -160,6 +145,39 @@ export class ApplicationWizardProviderSamlConfiguration extends BaseProviderPane
</div>
</ak-form-group>
<ak-form-group>
<span slot="header"> ${msg("Advanced flow settings")} </span>
<ak-form-element-horizontal
name="authenticationFlow"
label=${msg("Authentication flow")}
>
<ak-flow-search
flowType=${FlowsInstancesListDesignationEnum.Authentication}
.currentFlow=${provider?.authenticationFlow}
></ak-flow-search>
<p class="pf-c-form__helper-text">
${msg(
"Flow used when a user access this provider and is not authenticated.",
)}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${msg("Invalidation flow")}
name="invalidationFlow"
required
>
<ak-flow-search
flowType=${FlowsInstancesListDesignationEnum.Invalidation}
.currentFlow=${provider?.invalidationFlow}
defaultFlowSlug="default-provider-invalidation-flow"
required
></ak-flow-search>
<p class="pf-c-form__helper-text">
${msg("Flow used when logging out of this provider.")}
</p>
</ak-form-element-horizontal>
</div>
</ak-form-group>
<ak-form-group>
<span slot="header"> ${msg("Advanced protocol settings")} </span>
<div slot="body" class="pf-c-form">
@ -181,7 +199,8 @@ export class ApplicationWizardProviderSamlConfiguration extends BaseProviderPane
)}
</p>
</ak-form-element-horizontal>
${this.hasSigningKp
${
this.hasSigningKp
? html` <ak-form-element-horizontal name="signAssertion">
<label class="pf-c-switch">
<input
@ -191,7 +210,10 @@ export class ApplicationWizardProviderSamlConfiguration extends BaseProviderPane
/>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
<i
class="fas fa-check"
aria-hidden="true"
></i>
</span>
</span>
<span class="pf-c-switch__label"
@ -213,7 +235,10 @@ export class ApplicationWizardProviderSamlConfiguration extends BaseProviderPane
/>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
<i
class="fas fa-check"
aria-hidden="true"
></i>
</span>
</span>
<span class="pf-c-switch__label"
@ -226,7 +251,8 @@ export class ApplicationWizardProviderSamlConfiguration extends BaseProviderPane
)}
</p>
</ak-form-element-horizontal>`
: nothing}
: nothing
}
<ak-form-element-horizontal
label=${msg("Verification Certificate")}

15
web/src/admin/common/ak-flow-search/FlowSearch.ts
View File

@ -60,6 +60,14 @@ export class FlowSearch<T extends Flow> extends CustomListenerElement(AKElement)
@query("ak-search-select")
search!: SearchSelect<T>;
/**
* When specified and the object instance does not have a flow selected, auto-select the flow with the given slug.
*
* @attr
*/
@property()
defaultFlowSlug?: string;
@property({ type: String })
name: string | null | undefined;
@ -96,9 +104,12 @@ export class FlowSearch<T extends Flow> extends CustomListenerElement(AKElement)
* use this method, but several have more complex needs, such as relating to the brand, or just
* returning false.
*/
selected(flow: Flow): boolean {
return this.currentFlow === flow.pk;
let selected = this.currentFlow === flow.pk;
if (!this.currentFlow && this.defaultFlowSlug && flow.slug === this.defaultFlowSlug) {
selected = true;
}
return selected;
}
connectedCallback() {

7
web/src/admin/providers/ldap/LDAPProviderForm.ts
View File

@ -130,7 +130,7 @@ export class LDAPProviderFormPage extends WithBrandConfig(BaseProviderForm<LDAPP
</p>
</ak-form-element-horizontal>
<ak-form-group>
<ak-form-group expanded>
<span slot="header"> ${msg("Flow settings")} </span>
<div slot="body" class="pf-c-form">
<ak-form-element-horizontal
@ -153,11 +153,12 @@ export class LDAPProviderFormPage extends WithBrandConfig(BaseProviderForm<LDAPP
name="invalidationFlow"
required
>
<ak-flow-search
<ak-branded-flow-search
flowType=${FlowsInstancesListDesignationEnum.Invalidation}
.currentFlow=${this.instance?.invalidationFlow}
.brandFlow=${this.brand.flowInvalidation}
required
></ak-flow-search>
></ak-branded-flow-search>
<p class="pf-c-form__helper-text">
${msg("Flow used for unbinding users.")}
</p>

31
web/src/admin/providers/oauth2/OAuth2ProviderForm.ts
View File

@ -155,6 +155,20 @@ export class OAuth2ProviderFormPage extends BaseProviderForm<OAuth2Provider> {
required
></ak-text-input>
<ak-form-element-horizontal
name="authorizationFlow"
label=${msg("Authorization flow")}
?required=${true}
>
<ak-flow-search
flowType=${FlowsInstancesListDesignationEnum.Authorization}
.currentFlow=${provider?.authorizationFlow}
required
></ak-flow-search>
<p class="pf-c-form__helper-text">
${msg("Flow used when authorizing this provider.")}
</p>
</ak-form-element-horizontal>
<ak-form-group expanded>
<span slot="header"> ${msg("Protocol settings")} </span>
<div slot="body" class="pf-c-form">
@ -218,7 +232,7 @@ export class OAuth2ProviderFormPage extends BaseProviderForm<OAuth2Provider> {
</ak-form-group>
<ak-form-group>
<span slot="header"> ${msg("Flow settings")} </span>
<span slot="header"> ${msg("Advanced flow settings")} </span>
<div slot="body" class="pf-c-form">
<ak-form-element-horizontal
name="authenticationFlow"
@ -234,20 +248,6 @@ export class OAuth2ProviderFormPage extends BaseProviderForm<OAuth2Provider> {
)}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
name="authorizationFlow"
label=${msg("Authorization flow")}
?required=${true}
>
<ak-flow-search
flowType=${FlowsInstancesListDesignationEnum.Authorization}
.currentFlow=${provider?.authorizationFlow}
required
></ak-flow-search>
<p class="pf-c-form__helper-text">
${msg("Flow used when authorizing this provider.")}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${msg("Invalidation flow")}
name="invalidationFlow"
@ -256,6 +256,7 @@ export class OAuth2ProviderFormPage extends BaseProviderForm<OAuth2Provider> {
<ak-flow-search
flowType=${FlowsInstancesListDesignationEnum.Invalidation}
.currentFlow=${provider?.invalidationFlow}
defaultFlowSlug="default-provider-invalidation-flow"
required
></ak-flow-search>
<p class="pf-c-form__helper-text">

31
web/src/admin/providers/proxy/ProxyProviderForm.ts
View File

@ -258,6 +258,20 @@ export class ProxyProviderFormPage extends BaseProviderForm<ProxyProvider> {
required
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${msg("Authorization flow")}
required
name="authorizationFlow"
>
<ak-flow-search
flowType=${FlowsInstancesListDesignationEnum.Authorization}
.currentFlow=${this.instance?.authorizationFlow}
required
></ak-flow-search>
<p class="pf-c-form__helper-text">
${msg("Flow used when authorizing this provider.")}
</p>
</ak-form-element-horizontal>
<div class="pf-c-card pf-m-selectable pf-m-selected">
<div class="pf-c-card__body">${this.renderModeSelector()}</div>
@ -394,7 +408,7 @@ ${this.instance?.skipPathRegex}</textarea
</ak-form-group>
<ak-form-group>
<span slot="header"> ${msg("Flow settings")} </span>
<span slot="header"> ${msg("Advanced flow settings")} </span>
<div slot="body" class="pf-c-form">
<ak-form-element-horizontal
label=${msg("Authentication flow")}
@ -411,20 +425,6 @@ ${this.instance?.skipPathRegex}</textarea
)}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${msg("Authorization flow")}
required
name="authorizationFlow"
>
<ak-flow-search
flowType=${FlowsInstancesListDesignationEnum.Authorization}
.currentFlow=${this.instance?.authorizationFlow}
required
></ak-flow-search>
<p class="pf-c-form__helper-text">
${msg("Flow used when authorizing this provider.")}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${msg("Invalidation flow")}
name="invalidationFlow"
@ -433,6 +433,7 @@ ${this.instance?.skipPathRegex}</textarea
<ak-flow-search
flowType=${FlowsInstancesListDesignationEnum.Invalidation}
.currentFlow=${this.instance?.invalidationFlow}
defaultFlowSlug="default-provider-invalidation-flow"
required
></ak-flow-search>
<p class="pf-c-form__helper-text">

31
web/src/admin/providers/saml/SAMLProviderForm.ts
View File

@ -89,6 +89,20 @@ export class SAMLProviderFormPage extends BaseProviderForm<SAMLProvider> {
required
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${msg("Authorization flow")}
required
name="authorizationFlow"
>
<ak-flow-search
flowType=${FlowsInstancesListDesignationEnum.Authorization}
.currentFlow=${this.instance?.authorizationFlow}
required
></ak-flow-search>
<p class="pf-c-form__helper-text">
${msg("Flow used when authorizing this provider.")}
</p>
</ak-form-element-horizontal>
<ak-form-group .expanded=${true}>
<span slot="header"> ${msg("Protocol settings")} </span>
@ -155,7 +169,7 @@ export class SAMLProviderFormPage extends BaseProviderForm<SAMLProvider> {
</ak-form-group>
<ak-form-group>
<span slot="header"> ${msg("Flow settings")} </span>
<span slot="header"> ${msg("Advanced flow settings")} </span>
<div slot="body" class="pf-c-form">
<ak-form-element-horizontal
label=${msg("Authentication flow")}
@ -172,20 +186,6 @@ export class SAMLProviderFormPage extends BaseProviderForm<SAMLProvider> {
)}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${msg("Authorization flow")}
required
name="authorizationFlow"
>
<ak-flow-search
flowType=${FlowsInstancesListDesignationEnum.Authorization}
.currentFlow=${this.instance?.authorizationFlow}
required
></ak-flow-search>
<p class="pf-c-form__helper-text">
${msg("Flow used when authorizing this provider.")}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${msg("Invalidation flow")}
name="invalidationFlow"
@ -194,6 +194,7 @@ export class SAMLProviderFormPage extends BaseProviderForm<SAMLProvider> {
<ak-flow-search
flowType=${FlowsInstancesListDesignationEnum.Invalidation}
.currentFlow=${this.instance?.invalidationFlow}
defaultFlowSlug="default-provider-invalidation-flow"
required
></ak-flow-search>
<p class="pf-c-form__helper-text">

1
web/src/admin/providers/saml/SAMLProviderImportForm.ts
View File

@ -54,6 +54,7 @@ export class SAMLProviderImportForm extends Form<SAMLProvider> {
>
<ak-flow-search-no-default
flowType=${FlowsInstancesListDesignationEnum.Invalidation}
defaultFlowSlug="default-provider-invalidation-flow"
required
></ak-flow-search-no-default>
<p class="pf-c-form__helper-text">

9
web/src/flow/stages/RedirectStage.ts
View File

@ -43,8 +43,17 @@ export class RedirectStage extends BaseStage<RedirectChallenge, FlowChallengeRes
firstUpdated(): void {
if (this.promptUser) {
document.addEventListener("keydown", (ev) => {
if (ev.key === "Enter") {
this.redirect();
}
});
return;
}
this.redirect();
}
redirect() {
console.debug(
"authentik/stages/redirect: redirecting to url from server",
this.challenge.to,