trustchain-oc1-orchestral/authentik
Archived
10
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

web/admin/providers: use form groups

Browse source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-04-03 12:08:35 +02:00
parent c17eb00e3b
commit a291063b9c
3 changed files with 395 additions and 351 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

280
web/src/pages/providers/oauth2/OAuth2ProviderForm.ts
View file

@ -7,6 +7,7 @@ import { Form } from "../../../elements/forms/Form";
import { until } from "lit-html/directives/until"; import { until } from "lit-html/directives/until";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import "../../../elements/forms/HorizontalFormElement"; import "../../../elements/forms/HorizontalFormElement";
import "../../../elements/forms/FormGroup";
@customElement("ak-provider-oauth2-form") @customElement("ak-provider-oauth2-form")
export class OAuth2ProviderFormPage extends Form<OAuth2Provider> { export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
@ -68,139 +69,154 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
<p class="pf-c-form__helper-text">${gettext("Flow used when authorizing this provider.")}</p> <p class="pf-c-form__helper-text">${gettext("Flow used when authorizing this provider.")}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-group .expanded=${true}>
label=${gettext("Client type")} <span slot="header">
?required=${true} ${gettext("Protocol settings")}
name="clientType"> </span>
<select class="pf-c-form-control"> <div slot="body" class="pf-c-form">
<option value=${OAuth2ProviderClientTypeEnum.Confidential} ?selected=${this.provider?.clientType === OAuth2ProviderClientTypeEnum.Confidential}> <ak-form-element-horizontal
${gettext("Confidential")} label=${gettext("Client type")}
</option> ?required=${true}
<option value=${OAuth2ProviderClientTypeEnum.Public} ?selected=${this.provider?.clientType === OAuth2ProviderClientTypeEnum.Public}> name="clientType">
${gettext("Public")} <select class="pf-c-form-control">
</option> <option value=${OAuth2ProviderClientTypeEnum.Confidential} ?selected=${this.provider?.clientType === OAuth2ProviderClientTypeEnum.Confidential}>
</select> ${gettext("Confidential")}
<p class="pf-c-form__helper-text">${gettext("Confidential clients are capable of maintaining the confidentiality of their credentials. Public clients are incapable.")}</p> </option>
</ak-form-element-horizontal> <option value=${OAuth2ProviderClientTypeEnum.Public} ?selected=${this.provider?.clientType === OAuth2ProviderClientTypeEnum.Public}>
<ak-form-element-horizontal ${gettext("Public")}
label=${gettext("Client ID")} </option>
?required=${true} </select>
name="clientId"> <p class="pf-c-form__helper-text">${gettext("Confidential clients are capable of maintaining the confidentiality of their credentials. Public clients are incapable.")}</p>
<input type="text" value="${ifDefined(this.provider?.clientId)}" class="pf-c-form-control" required> </ak-form-element-horizontal>
</ak-form-element-horizontal> <ak-form-element-horizontal
<ak-form-element-horizontal label=${gettext("Client ID")}
label=${gettext("Client Secret")} ?required=${true}
name="clientSecret"> name="clientId">
<input type="text" value="${ifDefined(this.provider?.clientSecret /* TODO: Generate secret */)}" class="pf-c-form-control"> <input type="text" value="${ifDefined(this.provider?.clientId)}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${gettext("Token validity")} label=${gettext("Client Secret")}
?required=${true} name="clientSecret">
name="tokenValidity"> <input type="text" value="${ifDefined(this.provider?.clientSecret /* TODO: Generate secret */)}" class="pf-c-form-control">
<input type="text" value="${this.provider?.tokenValidity || "minutes=10"}" class="pf-c-form-control" required> </ak-form-element-horizontal>
</ak-form-element-horizontal> <ak-form-element-horizontal
<ak-form-element-horizontal label=${gettext("Redirect URIs")}
label=${gettext("JWT Algorithm")} name="redirectUris">
?required=${true} <textarea class="pf-c-form-control">${this.provider?.redirectUris}</textarea>
name="jwtAlg"> </ak-form-element-horizontal>
<select class="pf-c-form-control">
<option value=${OAuth2ProviderJwtAlgEnum.Rs256} ?selected=${this.provider?.jwtAlg === OAuth2ProviderJwtAlgEnum.Rs256}>
${gettext("RS256 (Asymmetric Encryption)")}
</option>
<option value=${OAuth2ProviderJwtAlgEnum.Hs256} ?selected=${this.provider?.jwtAlg === OAuth2ProviderJwtAlgEnum.Hs256}>
${gettext("HS256 (Symmetric Encryption)")}
</option>
</select>
<p class="pf-c-form__helper-text">${gettext("Algorithm used to sign the JWT Tokens.")}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${gettext("Scopes")}
?required=${true}
name="propertyMappings">
<select class="pf-c-form-control" multiple>
${until(new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsScopeList({
ordering: "scope_name"
}).then(scopes => {
return scopes.results.map(scope => {
const selected = Array.from(this.provider?.propertyMappings || []).some(su => {
return su == scope.pk;
});
return html`<option value=${ifDefined(scope.pk)} ?selected=${selected}>${scope.name}</option>`;
});
}))}
</select>
<p class="pf-c-form__helper-text">${gettext("Select which scopes can be used by the client. The client stil has to specify the scope to access the data.")}</p>
<p class="pf-c-form__helper-text">${gettext("Hold control/command to select multiple items.")}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${gettext("RSA Key")}
?required=${true}
name="rsaKey">
<select class="pf-c-form-control">
<option value="" ?selected=${this.provider?.rsaKey === undefined}>---------</option>
${until(new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsList({
ordering: "pk",
hasKey: "true",
}).then(keys => {
return keys.results.map(key => {
return html`<option value=${ifDefined(key.pk)} ?selected=${this.provider?.rsaKey === key.pk}>${key.name}</option>`;
});
}))}
</select>
<p class="pf-c-form__helper-text">${gettext("Key used to sign the tokens. Only required when JWT Algorithm is set to RS256.")}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${gettext("Redirect URIs")}
name="redirectUris">
<textarea class="pf-c-form-control">${this.provider?.redirectUris}</textarea>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${gettext("Subject mode")}
?required=${true}
name="subMode">
<select class="pf-c-form-control">
<option value="${OAuth2ProviderSubModeEnum.HashedUserId}" ?selected=${this.provider?.subMode === OAuth2ProviderSubModeEnum.HashedUserId}>
${gettext("Based on the Hashed User ID")}
</option>
<option value="${OAuth2ProviderSubModeEnum.UserUsername}" ?selected=${this.provider?.subMode === OAuth2ProviderSubModeEnum.UserUsername}>
${gettext("Based on the username")}
</option>
<option value="${OAuth2ProviderSubModeEnum.UserEmail}" ?selected=${this.provider?.subMode === OAuth2ProviderSubModeEnum.UserEmail}>
${gettext("Based on the User's Email. This is recommended over the UPN method.")}
</option>
<option value="${OAuth2ProviderSubModeEnum.UserUpn}" ?selected=${this.provider?.subMode === OAuth2ProviderSubModeEnum.UserUpn}>
${gettext("Based on the User's UPN, only works if user has a 'upn' attribute set. Use this method only if you have different UPN and Mail domains.")}
</option>
</select>
<p class="pf-c-form__helper-text">
${gettext("Configure what data should be used as unique User Identifier. For most cases, the default should be fine.")}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="includeClaimsInIdToken">
<div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${this.provider?.includeClaimsInIdToken || false}>
<label class="pf-c-check__label">
${gettext("Include claims in id_token")}
</label>
</div> </div>
<p class="pf-c-form__helper-text">${gettext("Include User claims from scopes in the id_token, for applications that don't access the userinfo endpoint.")}</p> </ak-form-group>
</ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-group>
label=${gettext("Issuer mode")} <span slot="header">
?required=${true} ${gettext("Advanced protocol settings")}
name="issuerMode"> </span>
<select class="pf-c-form-control"> <div slot="body" class="pf-c-form">
<option value="${OAuth2ProviderIssuerModeEnum.PerProvider}" ?selected=${this.provider?.issuerMode === OAuth2ProviderIssuerModeEnum.PerProvider}> <ak-form-element-horizontal
${gettext("Each provider has a different issuer, based on the application slug.")} label=${gettext("Token validity")}
</option> ?required=${true}
<option value="${OAuth2ProviderIssuerModeEnum.Global}" ?selected=${this.provider?.issuerMode === OAuth2ProviderIssuerModeEnum.Global}> name="tokenValidity">
${gettext("Same identifier is used for all providers")} <input type="text" value="${this.provider?.tokenValidity || "minutes=10"}" class="pf-c-form-control" required>
</option> </ak-form-element-horizontal>
</select> <ak-form-element-horizontal
<p class="pf-c-form__helper-text"> label=${gettext("JWT Algorithm")}
${gettext("Configure how the issuer field of the ID Token should be filled.")} ?required=${true}
</p> name="jwtAlg">
</ak-form-element-horizontal> <select class="pf-c-form-control">
<option value=${OAuth2ProviderJwtAlgEnum.Rs256} ?selected=${this.provider?.jwtAlg === OAuth2ProviderJwtAlgEnum.Rs256}>
${gettext("RS256 (Asymmetric Encryption)")}
</option>
<option value=${OAuth2ProviderJwtAlgEnum.Hs256} ?selected=${this.provider?.jwtAlg === OAuth2ProviderJwtAlgEnum.Hs256}>
${gettext("HS256 (Symmetric Encryption)")}
</option>
</select>
<p class="pf-c-form__helper-text">${gettext("Algorithm used to sign the JWT Tokens.")}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${gettext("Scopes")}
?required=${true}
name="propertyMappings">
<select class="pf-c-form-control" multiple>
${until(new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsScopeList({
ordering: "scope_name"
}).then(scopes => {
return scopes.results.map(scope => {
const selected = Array.from(this.provider?.propertyMappings || []).some(su => {
return su == scope.pk;
});
return html`<option value=${ifDefined(scope.pk)} ?selected=${selected}>${scope.name}</option>`;
});
}))}
</select>
<p class="pf-c-form__helper-text">${gettext("Select which scopes can be used by the client. The client stil has to specify the scope to access the data.")}</p>
<p class="pf-c-form__helper-text">${gettext("Hold control/command to select multiple items.")}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${gettext("RSA Key")}
?required=${true}
name="rsaKey">
<select class="pf-c-form-control">
<option value="" ?selected=${this.provider?.rsaKey === undefined}>---------</option>
${until(new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsList({
ordering: "pk",
hasKey: "true",
}).then(keys => {
return keys.results.map(key => {
return html`<option value=${ifDefined(key.pk)} ?selected=${this.provider?.rsaKey === key.pk}>${key.name}</option>`;
});
}))}
</select>
<p class="pf-c-form__helper-text">${gettext("Key used to sign the tokens. Only required when JWT Algorithm is set to RS256.")}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${gettext("Subject mode")}
?required=${true}
name="subMode">
<select class="pf-c-form-control">
<option value="${OAuth2ProviderSubModeEnum.HashedUserId}" ?selected=${this.provider?.subMode === OAuth2ProviderSubModeEnum.HashedUserId}>
${gettext("Based on the Hashed User ID")}
</option>
<option value="${OAuth2ProviderSubModeEnum.UserUsername}" ?selected=${this.provider?.subMode === OAuth2ProviderSubModeEnum.UserUsername}>
${gettext("Based on the username")}
</option>
<option value="${OAuth2ProviderSubModeEnum.UserEmail}" ?selected=${this.provider?.subMode === OAuth2ProviderSubModeEnum.UserEmail}>
${gettext("Based on the User's Email. This is recommended over the UPN method.")}
</option>
<option value="${OAuth2ProviderSubModeEnum.UserUpn}" ?selected=${this.provider?.subMode === OAuth2ProviderSubModeEnum.UserUpn}>
${gettext("Based on the User's UPN, only works if user has a 'upn' attribute set. Use this method only if you have different UPN and Mail domains.")}
</option>
</select>
<p class="pf-c-form__helper-text">
${gettext("Configure what data should be used as unique User Identifier. For most cases, the default should be fine.")}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="includeClaimsInIdToken">
<div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${this.provider?.includeClaimsInIdToken || false}>
<label class="pf-c-check__label">
${gettext("Include claims in id_token")}
</label>
</div>
<p class="pf-c-form__helper-text">${gettext("Include User claims from scopes in the id_token, for applications that don't access the userinfo endpoint.")}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${gettext("Issuer mode")}
?required=${true}
name="issuerMode">
<select class="pf-c-form-control">
<option value="${OAuth2ProviderIssuerModeEnum.PerProvider}" ?selected=${this.provider?.issuerMode === OAuth2ProviderIssuerModeEnum.PerProvider}>
${gettext("Each provider has a different issuer, based on the application slug.")}
</option>
<option value="${OAuth2ProviderIssuerModeEnum.Global}" ?selected=${this.provider?.issuerMode === OAuth2ProviderIssuerModeEnum.Global}>
${gettext("Same identifier is used for all providers")}
</option>
</select>
<p class="pf-c-form__helper-text">
${gettext("Configure how the issuer field of the ID Token should be filled.")}
</p>
</ak-form-element-horizontal>
</div>
</ak-form-group>
</form>`; </form>`;
} }

135
web/src/pages/providers/proxy/ProxyProviderForm.ts
View file

@ -7,6 +7,8 @@ import { Form } from "../../../elements/forms/Form";
import { until } from "lit-html/directives/until"; import { until } from "lit-html/directives/until";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import "../../../elements/forms/HorizontalFormElement"; import "../../../elements/forms/HorizontalFormElement";
import "../../../elements/forms/FormGroup";
import { first } from "../../../utils";
@customElement("ak-provider-proxy-form") @customElement("ak-provider-proxy-form")
export class ProxyProviderFormPage extends Form<ProxyProvider> { export class ProxyProviderFormPage extends Form<ProxyProvider> {
@ -68,71 +70,84 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
<p class="pf-c-form__helper-text">${gettext("Flow used when authorizing this provider.")}</p> <p class="pf-c-form__helper-text">${gettext("Flow used when authorizing this provider.")}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-group .expanded=${true}>
label=${gettext("Internal host")} <span slot="header">
?required=${true} ${gettext("Protocol settings")}
name="internalHost"> </span>
<input type="text" value="${ifDefined(this.provider?.internalHost)}" class="pf-c-form-control" required> <div slot="body" class="pf-c-form">
</ak-form-element-horizontal> <ak-form-element-horizontal
<ak-form-element-horizontal name="internalHostSslValidation"> label=${gettext("Internal host")}
<div class="pf-c-check"> ?required=${true}
<input type="checkbox" class="pf-c-check__input" ?checked=${this.provider?.internalHostSslValidation || false}> name="internalHost">
<label class="pf-c-check__label"> <input type="text" value="${ifDefined(this.provider?.internalHost)}" class="pf-c-form-control" required>
${gettext("Internal host SSL Validation")} </ak-form-element-horizontal>
</label> <ak-form-element-horizontal name="internalHostSslValidation">
<div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.provider?.internalHostSslValidation, true)}>
<label class="pf-c-check__label">
${gettext("Internal host SSL Validation")}
</label>
</div>
<p class="pf-c-form__helper-text">${gettext("Validate SSL Certificates of upstream servers.")}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${gettext("External host")}
?required=${true}
name="externalHost">
<input type="text" value="${ifDefined(this.provider?.externalHost)}" class="pf-c-form-control" required>
</ak-form-element-horizontal>
</div> </div>
<p class="pf-c-form__helper-text">${gettext("Validate SSL Certificates of upstream servers.")}</p> </ak-form-group>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${gettext("External host")}
?required=${true}
name="externalHost">
<input type="text" value="${ifDefined(this.provider?.externalHost)}" class="pf-c-form-control" required>
</ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-group>
label=${gettext("Certificate")} <span slot="header">
name="certificate"> ${gettext("Advanced protocol settings")}
<select class="pf-c-form-control"> </span>
${until(new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsList({ <ak-form-element-horizontal
ordering: "pk", label=${gettext("Certificate")}
hasKey: "true", name="certificate">
}).then(keys => { <select class="pf-c-form-control">
return keys.results.map(key => { ${until(new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsList({
return html`<option value=${ifDefined(key.pk)} ?selected=${this.provider?.certificate === key.pk}>${key.name}</option>`; ordering: "pk",
}); hasKey: "true",
}))} }).then(keys => {
</select> return keys.results.map(key => {
</ak-form-element-horizontal> return html`<option value=${ifDefined(key.pk)} ?selected=${this.provider?.certificate === key.pk}>${key.name}</option>`;
});
}))}
</select>
</ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${gettext("Skip path regex")} label=${gettext("Skip path regex")}
name="skipPathRegex"> name="skipPathRegex">
<textarea class="pf-c-form-control">${this.provider?.skipPathRegex}</textarea> <textarea class="pf-c-form-control">${this.provider?.skipPathRegex}</textarea>
<p class="pf-c-form__helper-text">${gettext("Regular expressions for which authentication is not required. Each new line is interpreted as a new Regular Expression.")}</p> <p class="pf-c-form__helper-text">${gettext("Regular expressions for which authentication is not required. Each new line is interpreted as a new Regular Expression.")}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal name="basicAuthEnabled"> <ak-form-element-horizontal name="basicAuthEnabled">
<div class="pf-c-check"> <div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${this.provider?.basicAuthEnabled || false}> <input type="checkbox" class="pf-c-check__input" ?checked=${this.provider?.basicAuthEnabled || false}>
<label class="pf-c-check__label"> <label class="pf-c-check__label">
${gettext("Set HTTP-Basic Authentication")} ${gettext("Set HTTP-Basic Authentication")}
</label> </label>
</div>
<p class="pf-c-form__helper-text">${gettext("Set a custom HTTP-Basic Authentication header based on values from authentik.")}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${gettext("HTTP-Basic Username Key")}
name="basicAuthUserAttribute">
<input type="text" value="${ifDefined(this.provider?.basicAuthUserAttribute)}" class="pf-c-form-control">
<p class="pf-c-form__helper-text">${gettext("User/Group Attribute used for the user part of the HTTP-Basic Header. If not set, the user's Email address is used.")}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${gettext("HTTP-Basic Password Key")}
name="basicAuthPasswordAttribute">
<input type="text" value="${ifDefined(this.provider?.basicAuthPasswordAttribute)}" class="pf-c-form-control">
<p class="pf-c-form__helper-text">${gettext("User/Group Attribute used for the password part of the HTTP-Basic Header.")}</p>
</ak-form-element-horizontal>
</div> </div>
<p class="pf-c-form__helper-text">${gettext("Set a custom HTTP-Basic Authentication header based on values from authentik.")}</p> </ak-form-group>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${gettext("HTTP-Basic Username Key")}
name="basicAuthUserAttribute">
<input type="text" value="${ifDefined(this.provider?.basicAuthUserAttribute)}" class="pf-c-form-control">
<p class="pf-c-form__helper-text">${gettext("User/Group Attribute used for the user part of the HTTP-Basic Header. If not set, the user's Email address is used.")}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${gettext("HTTP-Basic Password Key")}
name="basicAuthPasswordAttribute">
<input type="text" value="${ifDefined(this.provider?.basicAuthPasswordAttribute)}" class="pf-c-form-control">
<p class="pf-c-form__helper-text">${gettext("User/Group Attribute used for the password part of the HTTP-Basic Header.")}</p>
</ak-form-element-horizontal>
</form>`; </form>`;
} }

331
web/src/pages/providers/saml/SAMLProviderForm.ts
View file

@ -7,6 +7,7 @@ import { Form } from "../../../elements/forms/Form";
import { until } from "lit-html/directives/until"; import { until } from "lit-html/directives/until";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import "../../../elements/forms/HorizontalFormElement"; import "../../../elements/forms/HorizontalFormElement";
import "../../../elements/forms/FormGroup";
@customElement("ak-provider-saml-form") @customElement("ak-provider-saml-form")
export class SAMLProviderFormPage extends Form<SAMLProvider> { export class SAMLProviderFormPage extends Form<SAMLProvider> {
@ -68,169 +69,181 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
<p class="pf-c-form__helper-text">${gettext("Flow used when authorizing this provider.")}</p> <p class="pf-c-form__helper-text">${gettext("Flow used when authorizing this provider.")}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-group .expanded=${true}>
label=${gettext("ACS URL")} <span slot="header">
?required=${true} ${gettext("Protocol settings")}
name="acsUrl"> </span>
<input type="text" value="${ifDefined(this.provider?.acsUrl)}" class="pf-c-form-control" required> <div slot="body" class="pf-c-form">
</ak-form-element-horizontal> <ak-form-element-horizontal
<ak-form-element-horizontal label=${gettext("ACS URL")}
label=${gettext("Issuer")} ?required=${true}
?required=${true} name="acsUrl">
name="issuer"> <input type="text" value="${ifDefined(this.provider?.acsUrl)}" class="pf-c-form-control" required>
<input type="text" value="${this.provider?.issuer || "authentik"}" class="pf-c-form-control" required> </ak-form-element-horizontal>
</ak-form-element-horizontal> <ak-form-element-horizontal
label=${gettext("Issuer")}
?required=${true}
name="issuer">
<input type="text" value="${this.provider?.issuer || "authentik"}" class="pf-c-form-control" required>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${gettext("Service Provider Binding")}
?required=${true}
name="spBinding">
<select class="pf-c-form-control">
<option value=${SAMLProviderSpBindingEnum.Redirect} ?selected=${this.provider?.spBinding === SAMLProviderSpBindingEnum.Redirect}>
${gettext("Redirect")}
</option>
<option value=${SAMLProviderSpBindingEnum.Post} ?selected=${this.provider?.spBinding === SAMLProviderSpBindingEnum.Post}>
${gettext("Post")}
</option>
</select>
<p class="pf-c-form__helper-text">${gettext("Determines how authentik sends the response back to the Service Provider.")}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${gettext("Audience")}
name="audience">
<input type="text" value="${ifDefined(this.provider?.audience)}" class="pf-c-form-control">
</ak-form-element-horizontal>
</div>
</ak-form-group>
<ak-form-element-horizontal <ak-form-group>
label=${gettext("Service Provider Binding")} <span slot="header">
?required=${true} ${gettext("Advanced protocol settings")}
name="spBinding"> </span>
<select class="pf-c-form-control"> <div slot="body" class="pf-c-form">
<option value=${SAMLProviderSpBindingEnum.Redirect} ?selected=${this.provider?.spBinding === SAMLProviderSpBindingEnum.Redirect}> <ak-form-element-horizontal
${gettext("Redirect")} label=${gettext("Signing Keypair")}
</option> name="signingKp">
<option value=${SAMLProviderSpBindingEnum.Post} ?selected=${this.provider?.spBinding === SAMLProviderSpBindingEnum.Post}> <select class="pf-c-form-control">
${gettext("Post")} <option value="" ?selected=${this.provider?.signingKp === undefined}>---------</option>
</option> ${until(new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsList({
</select> ordering: "pk",
<p class="pf-c-form__helper-text">${gettext("Determines how authentik sends the response back to the Service Provider.")}</p> hasKey: "true",
</ak-form-element-horizontal> }).then(keys => {
<ak-form-element-horizontal return keys.results.map(key => {
label=${gettext("Audience")} return html`<option value=${ifDefined(key.pk)} ?selected=${this.provider?.signingKp === key.pk}>${key.name}</option>`;
name="audience"> });
<input type="text" value="${ifDefined(this.provider?.audience)}" class="pf-c-form-control"> }))}
</ak-form-element-horizontal> </select>
<p class="pf-c-form__helper-text">${gettext("Keypair used to sign outgoing Responses going to the Service Provider.")}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${gettext("Verification Certificate")}
name="verificationKp">
<select class="pf-c-form-control">
<option value="" ?selected=${this.provider?.verificationKp === undefined}>---------</option>
${until(new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsList({
ordering: "pk",
}).then(keys => {
return keys.results.map(key => {
return html`<option value=${ifDefined(key.pk)} ?selected=${this.provider?.verificationKp === key.pk}>${key.name}</option>`;
});
}))}
</select>
<p class="pf-c-form__helper-text">${gettext("When selected, incoming assertion's Signatures will be validated against this certificate. To allow unsigned Requests, leave on default.")}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${gettext("Signing Keypair")} label=${gettext("Property mappings")}
name="signingKp"> ?required=${true}
<select class="pf-c-form-control"> name="propertyMappings">
<option value="" ?selected=${this.provider?.signingKp === undefined}>---------</option> <select class="pf-c-form-control" multiple>
${until(new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsList({ ${until(new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsSamlList({
ordering: "pk", ordering: "saml_name"
hasKey: "true", }).then(mappings => {
}).then(keys => { return mappings.results.map(mapping => {
return keys.results.map(key => { const selected = Array.from(this.provider?.propertyMappings || []).some(su => {
return html`<option value=${ifDefined(key.pk)} ?selected=${this.provider?.signingKp === key.pk}>${key.name}</option>`; return su == mapping.pk;
}); });
}))} return html`<option value=${ifDefined(mapping.pk)} ?selected=${selected}>${mapping.name}</option>`;
</select> });
<p class="pf-c-form__helper-text">${gettext("Keypair used to sign outgoing Responses going to the Service Provider.")}</p> }))}
</ak-form-element-horizontal> </select>
<ak-form-element-horizontal <p class="pf-c-form__helper-text">${gettext("Hold control/command to select multiple items.")}</p>
label=${gettext("Verification Certificate")} </ak-form-element-horizontal>
?required=${true} <ak-form-element-horizontal
name="verificationKp"> label=${gettext("NameID Property Mapping")}
<select class="pf-c-form-control"> name="nameIdMapping">
<option value="" ?selected=${this.provider?.verificationKp === undefined}>---------</option> <select class="pf-c-form-control">
${until(new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsList({ <option value="" ?selected=${this.provider?.nameIdMapping === undefined}>---------</option>
ordering: "pk", ${until(new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsSamlList({
}).then(keys => { ordering: "saml_name"
return keys.results.map(key => { }).then(mappings => {
return html`<option value=${ifDefined(key.pk)} ?selected=${this.provider?.verificationKp === key.pk}>${key.name}</option>`; return mappings.results.map(mapping => {
}); return html`<option value=${ifDefined(mapping.pk)} ?selected=${this.provider?.nameIdMapping === mapping.pk}>${mapping.name}</option>`;
}))} });
</select> }))}
<p class="pf-c-form__helper-text">${gettext("When selected, incoming assertion's Signatures will be validated against this certificate. To allow unsigned Requests, leave on default.")}</p> </select>
</ak-form-element-horizontal> <p class="pf-c-form__helper-text">${gettext("Configure how the NameID value will be created. When left empty, the NameIDPolicy of the incoming request will be respected.")}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${gettext("Property mappings")} label=${gettext("Assertion valid not before")}
?required=${true} ?required=${true}
name="propertyMappings"> name="assertionValidNotBefore">
<select class="pf-c-form-control" multiple> <input type="text" value="${this.provider?.assertionValidNotBefore || "minutes=-5"}" class="pf-c-form-control" required>
${until(new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsSamlList({ <p class="pf-c-form__helper-text">${gettext("Assertion valid not before current time + this value (Format: hours=-1;minutes=-2;seconds=-3).")}</p>
ordering: "saml_name" </ak-form-element-horizontal>
}).then(mappings => { <ak-form-element-horizontal
return mappings.results.map(mapping => { label=${gettext("Assertion valid not on or after")}
const selected = Array.from(this.provider?.propertyMappings || []).some(su => { ?required=${true}
return su == mapping.pk; name="assertionValidNotOnOrAfter">
}); <input type="text" value="${this.provider?.assertionValidNotOnOrAfter || "minutes=5"}" class="pf-c-form-control" required>
return html`<option value=${ifDefined(mapping.pk)} ?selected=${selected}>${mapping.name}</option>`; <p class="pf-c-form__helper-text">${gettext("Assertion not valid on or after current time + this value (Format: hours=1;minutes=2;seconds=3).")}</p>
}); </ak-form-element-horizontal>
}))} <ak-form-element-horizontal
</select> label=${gettext("Session valid not on or after")}
<p class="pf-c-form__helper-text">${gettext("Hold control/command to select multiple items.")}</p> ?required=${true}
</ak-form-element-horizontal> name="sessionValidNotOnOrAfter">
<ak-form-element-horizontal <input type="text" value="${this.provider?.sessionValidNotOnOrAfter || "minutes=86400"}" class="pf-c-form-control" required>
label=${gettext("NameID Property Mapping")} <p class="pf-c-form__helper-text">${gettext("Session not valid on or after current time + this value (Format: hours=1;minutes=2;seconds=3).")}</p>
name="nameIdMapping"> </ak-form-element-horizontal>
<select class="pf-c-form-control">
<option value="" ?selected=${this.provider?.nameIdMapping === undefined}>---------</option>
${until(new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsSamlList({
ordering: "saml_name"
}).then(mappings => {
return mappings.results.map(mapping => {
return html`<option value=${ifDefined(mapping.pk)} ?selected=${this.provider?.nameIdMapping === mapping.pk}>${mapping.name}</option>`;
});
}))}
</select>
<p class="pf-c-form__helper-text">${gettext("Configure how the NameID value will be created. When left empty, the NameIDPolicy of the incoming request will be respected.")}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${gettext("Assertion valid not before")} label=${gettext("Digest algorithm")}
?required=${true} ?required=${true}
name="assertionValidNotBefore"> name="digestAlgorithm">
<input type="text" value="${this.provider?.assertionValidNotBefore || "minutes=-5"}" class="pf-c-form-control" required> <select class="pf-c-form-control">
<p class="pf-c-form__helper-text">${gettext("Assertion valid not before current time + this value (Format: hours=-1;minutes=-2;seconds=-3).")}</p> <option value=${SAMLProviderDigestAlgorithmEnum._200009Xmldsigsha1} ?selected=${this.provider?.digestAlgorithm === SAMLProviderDigestAlgorithmEnum._200009Xmldsigsha1}>
</ak-form-element-horizontal> ${gettext("SHA1")}
<ak-form-element-horizontal </option>
label=${gettext("Assertion valid not on or after")} <option value=${SAMLProviderDigestAlgorithmEnum._200104Xmlencsha256} ?selected=${this.provider?.digestAlgorithm === SAMLProviderDigestAlgorithmEnum._200104Xmlencsha256 || this.provider?.digestAlgorithm === undefined}>
?required=${true} ${gettext("SHA256")}
name="assertionValidNotOnOrAfter"> </option>
<input type="text" value="${this.provider?.assertionValidNotOnOrAfter || "minutes=5"}" class="pf-c-form-control" required> <option value=${SAMLProviderDigestAlgorithmEnum._200104XmldsigMoresha384} ?selected=${this.provider?.digestAlgorithm === SAMLProviderDigestAlgorithmEnum._200104XmldsigMoresha384}>
<p class="pf-c-form__helper-text">${gettext("Assertion not valid on or after current time + this value (Format: hours=1;minutes=2;seconds=3).")}</p> ${gettext("SHA384")}
</ak-form-element-horizontal> </option>
<ak-form-element-horizontal <option value=${SAMLProviderDigestAlgorithmEnum._200104Xmlencsha512} ?selected=${this.provider?.digestAlgorithm === SAMLProviderDigestAlgorithmEnum._200104Xmlencsha512}>
label=${gettext("Session valid not on or after")} ${gettext("SHA512")}
?required=${true} </option>
name="sessionValidNotOnOrAfter"> </select>
<input type="text" value="${this.provider?.sessionValidNotOnOrAfter || "minutes=86400"}" class="pf-c-form-control" required> </ak-form-element-horizontal>
<p class="pf-c-form__helper-text">${gettext("Session not valid on or after current time + this value (Format: hours=1;minutes=2;seconds=3).")}</p> <ak-form-element-horizontal
</ak-form-element-horizontal> label=${gettext("Signature algorithm")}
?required=${true}
<ak-form-element-horizontal name="signatureAlgorithm">
label=${gettext("Digest algorithm")} <select class="pf-c-form-control">
?required=${true} <option value=${SAMLProviderSignatureAlgorithmEnum._200009XmldsigrsaSha1} ?selected=${this.provider?.signatureAlgorithm === SAMLProviderSignatureAlgorithmEnum._200009XmldsigrsaSha1}>
name="digestAlgorithm"> ${gettext("RSA-SHA1")}
<select class="pf-c-form-control"> </option>
<option value=${SAMLProviderDigestAlgorithmEnum._200009Xmldsigsha1} ?selected=${this.provider?.digestAlgorithm === SAMLProviderDigestAlgorithmEnum._200009Xmldsigsha1}> <option value=${SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha256} ?selected=${this.provider?.signatureAlgorithm === SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha256 || this.provider?.signatureAlgorithm === undefined}>
${gettext("SHA1")} ${gettext("RSA-SHA256")}
</option> </option>
<option value=${SAMLProviderDigestAlgorithmEnum._200104Xmlencsha256} ?selected=${this.provider?.digestAlgorithm === SAMLProviderDigestAlgorithmEnum._200104Xmlencsha256 || this.provider?.digestAlgorithm === undefined}> <option value=${SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha384} ?selected=${this.provider?.signatureAlgorithm === SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha384}>
${gettext("SHA256")} ${gettext("RSA-SHA384")}
</option> </option>
<option value=${SAMLProviderDigestAlgorithmEnum._200104XmldsigMoresha384} ?selected=${this.provider?.digestAlgorithm === SAMLProviderDigestAlgorithmEnum._200104XmldsigMoresha384}> <option value=${SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha512} ?selected=${this.provider?.signatureAlgorithm === SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha512}>
${gettext("SHA384")} ${gettext("RSA-SHA512")}
</option> </option>
<option value=${SAMLProviderDigestAlgorithmEnum._200104Xmlencsha512} ?selected=${this.provider?.digestAlgorithm === SAMLProviderDigestAlgorithmEnum._200104Xmlencsha512}> <option value=${SAMLProviderSignatureAlgorithmEnum._200009XmldsigdsaSha1} ?selected=${this.provider?.signatureAlgorithm === SAMLProviderSignatureAlgorithmEnum._200009XmldsigdsaSha1}>
${gettext("SHA512")} ${gettext("DSA-SHA1")}
</option> </option>
</select> </select>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal </div>
label=${gettext("Signature algorithm")} </ak-form-group>
?required=${true}
name="signatureAlgorithm">
<select class="pf-c-form-control">
<option value=${SAMLProviderSignatureAlgorithmEnum._200009XmldsigrsaSha1} ?selected=${this.provider?.signatureAlgorithm === SAMLProviderSignatureAlgorithmEnum._200009XmldsigrsaSha1}>
${gettext("RSA-SHA1")}
</option>
<option value=${SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha256} ?selected=${this.provider?.signatureAlgorithm === SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha256 || this.provider?.signatureAlgorithm === undefined}>
${gettext("RSA-SHA256")}
</option>
<option value=${SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha384} ?selected=${this.provider?.signatureAlgorithm === SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha384}>
${gettext("RSA-SHA384")}
</option>
<option value=${SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha512} ?selected=${this.provider?.signatureAlgorithm === SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha512}>
${gettext("RSA-SHA512")}
</option>
<option value=${SAMLProviderSignatureAlgorithmEnum._200009XmldsigdsaSha1} ?selected=${this.provider?.signatureAlgorithm === SAMLProviderSignatureAlgorithmEnum._200009XmldsigdsaSha1}>
${gettext("DSA-SHA1")}
</option>
</select>
</ak-form-element-horizontal>
</form>`; </form>`;
} }