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

Merge pull request #862 from goauthentik/form-refresh-on-save

Browse Source 
Form refresh on save
This commit is contained in:
Jens L
2021-05-11 14:23:32 +02:00
committed by GitHub
parent e441ac1e43 124ce80694
commit 36f7cad23b
82 changed files with 2342 additions and 2393 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/pages/providers/ProviderListPage.ts
View File

@ -79,7 +79,7 @@ export class ProviderListPage extends TablePage<Provider> {
<ak-proxy-form
slot="form"
.args=${{
"providerUUID": item.pk
"instancePk": item.pk
}}
type=${ifDefined(item.component)}>
</ak-proxy-form>

33
web/src/pages/providers/ldap/LDAPProviderForm.ts
View File

@ -1,9 +1,9 @@
import { FlowDesignationEnum, FlowsApi, ProvidersApi, LDAPProvider, CoreApi } from "authentik-api";
import { t } from "@lingui/macro";
import { customElement, property } from "lit-element";
import { customElement } from "lit-element";
import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../../api/Config";
import { Form } from "../../../elements/forms/Form";
import { ModelForm } from "../../../elements/forms/ModelForm";
import { until } from "lit-html/directives/until";
import { ifDefined } from "lit-html/directives/if-defined";
import "../../../elements/forms/HorizontalFormElement";
@ -11,21 +11,16 @@ import "../../../elements/forms/FormGroup";
import { first } from "../../../utils";
@customElement("ak-provider-ldap-form")
export class LDAPProviderFormPage extends Form<LDAPProvider> {
export class LDAPProviderFormPage extends ModelForm<LDAPProvider, number> {
set providerUUID(value: number) {
new ProvidersApi(DEFAULT_CONFIG).providersLdapRead({
id: value,
}).then(provider => {
this.provider = provider;
loadInstance(pk: number): Promise<LDAPProvider> {
return new ProvidersApi(DEFAULT_CONFIG).providersLdapRead({
id: pk,
});
}
@property({attribute: false})
provider?: LDAPProvider;
getSuccessMessage(): string {
if (this.provider) {
if (this.instance) {
return t`Successfully updated provider.`;
} else {
return t`Successfully created provider.`;
@ -33,9 +28,9 @@ export class LDAPProviderFormPage extends Form<LDAPProvider> {
}
send = (data: LDAPProvider): Promise<LDAPProvider> => {
if (this.provider) {
if (this.instance) {
return new ProvidersApi(DEFAULT_CONFIG).providersLdapUpdate({
id: this.provider.pk || 0,
id: this.instance.pk || 0,
data: data
});
} else {
@ -51,7 +46,7 @@ export class LDAPProviderFormPage extends Form<LDAPProvider> {
label=${t`Name`}
?required=${true}
name="name">
<input type="text" value="${ifDefined(this.provider?.name)}" class="pf-c-form-control" required>
<input type="text" value="${ifDefined(this.instance?.name)}" class="pf-c-form-control" required>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Bind flow`}
@ -63,7 +58,7 @@ export class LDAPProviderFormPage extends Form<LDAPProvider> {
designation: FlowDesignationEnum.Authentication,
}).then(flows => {
return flows.results.map(flow => {
return html`<option value=${ifDefined(flow.pk)} ?selected=${this.provider?.authorizationFlow === flow.pk}>${flow.name} (${flow.slug})</option>`;
return html`<option value=${ifDefined(flow.pk)} ?selected=${this.instance?.authorizationFlow === flow.pk}>${flow.name} (${flow.slug})</option>`;
});
}), html`<option>${t`Loading...`}</option>`)}
</select>
@ -73,10 +68,10 @@ export class LDAPProviderFormPage extends Form<LDAPProvider> {
label=${t`Group`}
name="searchGroup">
<select class="pf-c-form-control">
<option value="" ?selected=${this.provider?.searchGroup === undefined}>---------</option>
<option value="" ?selected=${this.instance?.searchGroup === undefined}>---------</option>
${until(new CoreApi(DEFAULT_CONFIG).coreGroupsList({}).then(groups => {
return groups.results.map(group => {
return html`<option value=${ifDefined(group.pk)} ?selected=${this.provider?.searchGroup === group.pk}>${group.name}</option>`;
return html`<option value=${ifDefined(group.pk)} ?selected=${this.instance?.searchGroup === group.pk}>${group.name}</option>`;
});
}), html`<option>${t`Loading...`}</option>`)}
</select>
@ -92,7 +87,7 @@ export class LDAPProviderFormPage extends Form<LDAPProvider> {
label=${t`Base DN`}
?required=${true}
name="baseDn">
<input type="text" value="${first(this.provider?.baseDn, "DC=ldap,DC=goauthentik,DC=io")}" class="pf-c-form-control" required>
<input type="text" value="${first(this.instance?.baseDn, "DC=ldap,DC=goauthentik,DC=io")}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`LDAP DN under which bind requests and search requests can be made.`}</p>
</ak-form-element-horizontal>
</div>

2
web/src/pages/providers/ldap/LDAPProviderViewPage.ts
View File

@ -102,7 +102,7 @@ export class LDAPProviderViewPage extends LitElement {
</span>
<ak-provider-ldap-form
slot="form"
.providerUUID=${this.provider.pk || 0}>
.instancePk=${this.provider.pk || 0}>
</ak-provider-ldap-form>
<button slot="trigger" class="pf-c-button pf-m-primary">
${t`Edit`}

65
web/src/pages/providers/oauth2/OAuth2ProviderForm.ts
View File

@ -3,7 +3,7 @@ import { t } from "@lingui/macro";
import { customElement, property } from "lit-element";
import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../../api/Config";
import { Form } from "../../../elements/forms/Form";
import { ModelForm } from "../../../elements/forms/ModelForm";
import { until } from "lit-html/directives/until";
import { ifDefined } from "lit-html/directives/if-defined";
import "../../../elements/forms/HorizontalFormElement";
@ -11,25 +11,22 @@ import "../../../elements/forms/FormGroup";
import { first, randomString } from "../../../utils";
@customElement("ak-provider-oauth2-form")
export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
export class OAuth2ProviderFormPage extends ModelForm<OAuth2Provider, number> {
set providerUUID(value: number) {
new ProvidersApi(DEFAULT_CONFIG).providersOauth2Read({
id: value,
loadInstance(pk: number): Promise<OAuth2Provider> {
return new ProvidersApi(DEFAULT_CONFIG).providersOauth2Read({
id: pk,
}).then(provider => {
this.provider = provider;
this.showClientSecret = provider.clientType === OAuth2ProviderClientTypeEnum.Confidential;
return provider;
});
}
@property({attribute: false})
provider?: OAuth2Provider;
@property({type: Boolean})
showClientSecret = true;
getSuccessMessage(): string {
if (this.provider) {
if (this.instance) {
return t`Successfully updated provider.`;
} else {
return t`Successfully created provider.`;
@ -37,9 +34,9 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
}
send = (data: OAuth2Provider): Promise<OAuth2Provider> => {
if (this.provider) {
if (this.instance) {
return new ProvidersApi(DEFAULT_CONFIG).providersOauth2Update({
id: this.provider.pk || 0,
id: this.instance.pk || 0,
data: data
});
} else {
@ -55,7 +52,7 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
label=${t`Name`}
?required=${true}
name="name">
<input type="text" value="${ifDefined(this.provider?.name)}" class="pf-c-form-control" required>
<input type="text" value="${ifDefined(this.instance?.name)}" class="pf-c-form-control" required>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Authorization flow`}
@ -67,7 +64,7 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
designation: FlowDesignationEnum.Authorization,
}).then(flows => {
return flows.results.map(flow => {
return html`<option value=${ifDefined(flow.pk)} ?selected=${this.provider?.authorizationFlow === flow.pk}>${flow.name} (${flow.slug})</option>`;
return html`<option value=${ifDefined(flow.pk)} ?selected=${this.instance?.authorizationFlow === flow.pk}>${flow.name} (${flow.slug})</option>`;
});
}), html`<option>${t`Loading...`}</option>`)}
</select>
@ -91,10 +88,10 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
this.showClientSecret = true;
}
}}>
<option value=${OAuth2ProviderClientTypeEnum.Confidential} ?selected=${this.provider?.clientType === OAuth2ProviderClientTypeEnum.Confidential}>
<option value=${OAuth2ProviderClientTypeEnum.Confidential} ?selected=${this.instance?.clientType === OAuth2ProviderClientTypeEnum.Confidential}>
${t`Confidential`}
</option>
<option value=${OAuth2ProviderClientTypeEnum.Public} ?selected=${this.provider?.clientType === OAuth2ProviderClientTypeEnum.Public}>
<option value=${OAuth2ProviderClientTypeEnum.Public} ?selected=${this.instance?.clientType === OAuth2ProviderClientTypeEnum.Public}>
${t`Public`}
</option>
</select>
@ -104,19 +101,19 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
label=${t`Client ID`}
?required=${true}
name="clientId">
<input type="text" value="${first(this.provider?.clientId, randomString(40))}" class="pf-c-form-control" required>
<input type="text" value="${first(this.instance?.clientId, randomString(40))}" class="pf-c-form-control" required>
</ak-form-element-horizontal>
<ak-form-element-horizontal
?hidden=${!this.showClientSecret}
label=${t`Client Secret`}
name="clientSecret">
<input type="text" value="${first(this.provider?.clientSecret, randomString(128))}" class="pf-c-form-control">
<input type="text" value="${first(this.instance?.clientSecret, randomString(128))}" class="pf-c-form-control">
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Redirect URIs/Origins`}
?required=${true}
name="redirectUris">
<textarea class="pf-c-form-control" required>${this.provider?.redirectUris}</textarea>
<textarea class="pf-c-form-control" required>${this.instance?.redirectUris}</textarea>
<p class="pf-c-form__helper-text">
${t`Valid redirect URLs after a successful authorization flow. Also specify any origins here for Implicit flows.`}
</p>
@ -133,7 +130,7 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
label=${t`Access code validity`}
?required=${true}
name="accessCodeValidity">
<input type="text" value="${first(this.provider?.accessCodeValidity, "minutes=1")}" class="pf-c-form-control" required>
<input type="text" value="${first(this.instance?.accessCodeValidity, "minutes=1")}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`Configure how long access codes are valid for.`}</p>
<p class="pf-c-form__helper-text">${t`(Format: hours=-1;minutes=-2;seconds=-3).`}</p>
</ak-form-element-horizontal>
@ -141,7 +138,7 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
label=${t`Token validity`}
?required=${true}
name="tokenValidity">
<input type="text" value="${first(this.provider?.tokenValidity, "minutes=10")}" class="pf-c-form-control" required>
<input type="text" value="${first(this.instance?.tokenValidity, "minutes=10")}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`Configure how long refresh tokens and their id_tokens are valid for.`}</p>
<p class="pf-c-form__helper-text">${t`(Format: hours=-1;minutes=-2;seconds=-3).`}</p>
</ak-form-element-horizontal>
@ -150,10 +147,10 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
?required=${true}
name="jwtAlg">
<select class="pf-c-form-control">
<option value=${OAuth2ProviderJwtAlgEnum.Rs256} ?selected=${this.provider?.jwtAlg === OAuth2ProviderJwtAlgEnum.Rs256}>
<option value=${OAuth2ProviderJwtAlgEnum.Rs256} ?selected=${this.instance?.jwtAlg === OAuth2ProviderJwtAlgEnum.Rs256}>
${t`RS256 (Asymmetric Encryption)`}
</option>
<option value=${OAuth2ProviderJwtAlgEnum.Hs256} ?selected=${this.provider?.jwtAlg === OAuth2ProviderJwtAlgEnum.Hs256}>
<option value=${OAuth2ProviderJwtAlgEnum.Hs256} ?selected=${this.instance?.jwtAlg === OAuth2ProviderJwtAlgEnum.Hs256}>
${t`HS256 (Symmetric Encryption)`}
</option>
</select>
@ -168,10 +165,10 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
}).then(scopes => {
return scopes.results.map(scope => {
let selected = false;
if (!this.provider?.propertyMappings) {
if (!this.instance?.propertyMappings) {
selected = scope.managed?.startsWith("goauthentik.io/providers/oauth2/scope-") || false;
} else {
selected = Array.from(this.provider?.propertyMappings).some(su => {
selected = Array.from(this.instance?.propertyMappings).some(su => {
return su == scope.pk;
});
}
@ -186,13 +183,13 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
label=${t`RSA Key`}
name="rsaKey">
<select class="pf-c-form-control">
<option value="" ?selected=${this.provider?.rsaKey === undefined}>---------</option>
<option value="" ?selected=${this.instance?.rsaKey === undefined}>---------</option>
${until(new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsList({
ordering: "pk",
hasKey: "true",
}).then(keys => {
return keys.results.map(key => {
let selected = this.provider?.rsaKey === key.pk;
let selected = this.instance?.rsaKey === key.pk;
if (keys.results.length === 1) {
selected = true;
}
@ -207,16 +204,16 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
?required=${true}
name="subMode">
<select class="pf-c-form-control">
<option value="${OAuth2ProviderSubModeEnum.HashedUserId}" ?selected=${this.provider?.subMode === OAuth2ProviderSubModeEnum.HashedUserId}>
<option value="${OAuth2ProviderSubModeEnum.HashedUserId}" ?selected=${this.instance?.subMode === OAuth2ProviderSubModeEnum.HashedUserId}>
${t`Based on the Hashed User ID`}
</option>
<option value="${OAuth2ProviderSubModeEnum.UserUsername}" ?selected=${this.provider?.subMode === OAuth2ProviderSubModeEnum.UserUsername}>
<option value="${OAuth2ProviderSubModeEnum.UserUsername}" ?selected=${this.instance?.subMode === OAuth2ProviderSubModeEnum.UserUsername}>
${t`Based on the username`}
</option>
<option value="${OAuth2ProviderSubModeEnum.UserEmail}" ?selected=${this.provider?.subMode === OAuth2ProviderSubModeEnum.UserEmail}>
<option value="${OAuth2ProviderSubModeEnum.UserEmail}" ?selected=${this.instance?.subMode === OAuth2ProviderSubModeEnum.UserEmail}>
${t`Based on the User's Email. This is recommended over the UPN method.`}
</option>
<option value="${OAuth2ProviderSubModeEnum.UserUpn}" ?selected=${this.provider?.subMode === OAuth2ProviderSubModeEnum.UserUpn}>
<option value="${OAuth2ProviderSubModeEnum.UserUpn}" ?selected=${this.instance?.subMode === OAuth2ProviderSubModeEnum.UserUpn}>
${t`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>
@ -226,7 +223,7 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
</ak-form-element-horizontal>
<ak-form-element-horizontal name="includeClaimsInIdToken">
<div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.provider?.includeClaimsInIdToken, true)}>
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.includeClaimsInIdToken, true)}>
<label class="pf-c-check__label">
${t`Include claims in id_token`}
</label>
@ -238,10 +235,10 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
?required=${true}
name="issuerMode">
<select class="pf-c-form-control">
<option value="${OAuth2ProviderIssuerModeEnum.PerProvider}" ?selected=${this.provider?.issuerMode === OAuth2ProviderIssuerModeEnum.PerProvider}>
<option value="${OAuth2ProviderIssuerModeEnum.PerProvider}" ?selected=${this.instance?.issuerMode === OAuth2ProviderIssuerModeEnum.PerProvider}>
${t`Each provider has a different issuer, based on the application slug.`}
</option>
<option value="${OAuth2ProviderIssuerModeEnum.Global}" ?selected=${this.provider?.issuerMode === OAuth2ProviderIssuerModeEnum.Global}>
<option value="${OAuth2ProviderIssuerModeEnum.Global}" ?selected=${this.instance?.issuerMode === OAuth2ProviderIssuerModeEnum.Global}>
${t`Same identifier is used for all providers`}
</option>
</select>

2
web/src/pages/providers/oauth2/OAuth2ProviderViewPage.ts
View File

@ -127,7 +127,7 @@ export class OAuth2ProviderViewPage extends LitElement {
</span>
<ak-provider-oauth2-form
slot="form"
.providerUUID=${this.provider.pk || 0}>
.instancePk=${this.provider.pk || 0}>
</ak-provider-oauth2-form>
<button slot="trigger" class="pf-c-button pf-m-primary">
${t`Edit`}

43
web/src/pages/providers/proxy/ProxyProviderForm.ts
View File

@ -3,7 +3,7 @@ import { t } from "@lingui/macro";
import { customElement, property } from "lit-element";
import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../../api/Config";
import { Form } from "../../../elements/forms/Form";
import { ModelForm } from "../../../elements/forms/ModelForm";
import { until } from "lit-html/directives/until";
import { ifDefined } from "lit-html/directives/if-defined";
import "../../../elements/forms/HorizontalFormElement";
@ -11,21 +11,18 @@ import "../../../elements/forms/FormGroup";
import { first } from "../../../utils";
@customElement("ak-provider-proxy-form")
export class ProxyProviderFormPage extends Form<ProxyProvider> {
export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
set providerUUID(value: number) {
new ProvidersApi(DEFAULT_CONFIG).providersProxyRead({
id: value,
loadInstance(pk: number): Promise<ProxyProvider> {
return new ProvidersApi(DEFAULT_CONFIG).providersProxyRead({
id: pk,
}).then(provider => {
this.provider = provider;
this.showHttpBasic = first(provider.basicAuthEnabled, true);
this.showInternalServer = first(!provider.forwardAuthMode, true);
return provider;
});
}
@property({attribute: false})
provider?: ProxyProvider;
@property({type: Boolean})
showHttpBasic = true;
@ -33,7 +30,7 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
showInternalServer = true;
getSuccessMessage(): string {
if (this.provider) {
if (this.instance) {
return t`Successfully updated provider.`;
} else {
return t`Successfully created provider.`;
@ -41,9 +38,9 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
}
send = (data: ProxyProvider): Promise<ProxyProvider> => {
if (this.provider) {
if (this.instance) {
return new ProvidersApi(DEFAULT_CONFIG).providersProxyUpdate({
id: this.provider.pk || 0,
id: this.instance.pk || 0,
data: data
});
} else {
@ -60,13 +57,13 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
return html`<ak-form-element-horizontal
label=${t`HTTP-Basic Username Key`}
name="basicAuthUserAttribute">
<input type="text" value="${ifDefined(this.provider?.basicAuthUserAttribute)}" class="pf-c-form-control">
<input type="text" value="${ifDefined(this.instance?.basicAuthUserAttribute)}" class="pf-c-form-control">
<p class="pf-c-form__helper-text">${t`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=${t`HTTP-Basic Password Key`}
name="basicAuthPasswordAttribute">
<input type="text" value="${ifDefined(this.provider?.basicAuthPasswordAttribute)}" class="pf-c-form-control">
<input type="text" value="${ifDefined(this.instance?.basicAuthPasswordAttribute)}" class="pf-c-form-control">
<p class="pf-c-form__helper-text">${t`User/Group Attribute used for the password part of the HTTP-Basic Header.`}</p>
</ak-form-element-horizontal>`;
}
@ -79,12 +76,12 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
label=${t`Internal host`}
?required=${true}
name="internalHost">
<input type="text" value="${ifDefined(this.provider?.internalHost)}" class="pf-c-form-control" required>
<input type="text" value="${ifDefined(this.instance?.internalHost)}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`Upstream host that the requests are forwarded to.`}</p>
</ak-form-element-horizontal>
<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)}>
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.internalHostSslValidation, true)}>
<label class="pf-c-check__label">
${t`Internal host SSL Validation`}
</label>
@ -99,7 +96,7 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
label=${t`Name`}
?required=${true}
name="name">
<input type="text" value="${ifDefined(this.provider?.name)}" class="pf-c-form-control" required>
<input type="text" value="${ifDefined(this.instance?.name)}" class="pf-c-form-control" required>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Authorization flow`}
@ -111,7 +108,7 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
designation: FlowDesignationEnum.Authorization,
}).then(flows => {
return flows.results.map(flow => {
return html`<option value=${ifDefined(flow.pk)} ?selected=${this.provider?.authorizationFlow === flow.pk}>${flow.name} (${flow.slug})</option>`;
return html`<option value=${ifDefined(flow.pk)} ?selected=${this.instance?.authorizationFlow === flow.pk}>${flow.name} (${flow.slug})</option>`;
});
}), html`<option>${t`Loading...`}</option>`)}
</select>
@ -127,12 +124,12 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
label=${t`External host`}
?required=${true}
name="externalHost">
<input type="text" value="${ifDefined(this.provider?.externalHost)}" class="pf-c-form-control" required>
<input type="text" value="${ifDefined(this.instance?.externalHost)}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`The external URL you'll access the outpost at.`}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="forwardAuthMode">
<div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.provider?.forwardAuthMode, false)} @change=${(ev: Event) => {
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.forwardAuthMode, false)} @change=${(ev: Event) => {
const el = ev.target as HTMLInputElement;
this.showInternalServer = !el.checked;
}}>
@ -162,7 +159,7 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
hasKey: "true",
}).then(keys => {
return keys.results.map(key => {
return html`<option value=${ifDefined(key.pk)} ?selected=${this.provider?.certificate === key.pk}>${key.name}</option>`;
return html`<option value=${ifDefined(key.pk)} ?selected=${this.instance?.certificate === key.pk}>${key.name}</option>`;
});
}), html`<option>${t`Loading...`}</option>`)}
</select>
@ -171,13 +168,13 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
<ak-form-element-horizontal
label=${t`Skip path regex`}
name="skipPathRegex">
<textarea class="pf-c-form-control">${this.provider?.skipPathRegex}</textarea>
<textarea class="pf-c-form-control">${this.instance?.skipPathRegex}</textarea>
<p class="pf-c-form__helper-text">${t`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 name="basicAuthEnabled">
<div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.provider?.basicAuthEnabled, false)} @change=${(ev: Event) => {
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.basicAuthEnabled, false)} @change=${(ev: Event) => {
const el = ev.target as HTMLInputElement;
this.showHttpBasic = el.checked;
}}>

2
web/src/pages/providers/proxy/ProxyProviderViewPage.ts
View File

@ -127,7 +127,7 @@ export class ProxyProviderViewPage extends LitElement {
</span>
<ak-provider-proxy-form
slot="form"
.providerUUID=${this.provider.pk || 0}>
.instancePk=${this.provider.pk || 0}>
</ak-provider-proxy-form>
<button slot="trigger" class="pf-c-button pf-m-primary">
${t`Edit`}

78
web/src/pages/providers/saml/SAMLProviderForm.ts
View File

@ -1,30 +1,26 @@
import { CryptoApi, FlowDesignationEnum, FlowsApi, SAMLProvider, ProvidersApi, PropertymappingsApi, SAMLProviderSpBindingEnum, SAMLProviderDigestAlgorithmEnum, SAMLProviderSignatureAlgorithmEnum } from "authentik-api";
import { t } from "@lingui/macro";
import { customElement, property } from "lit-element";
import { customElement } from "lit-element";
import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../../api/Config";
import { Form } from "../../../elements/forms/Form";
import { ModelForm } from "../../../elements/forms/ModelForm";
import { until } from "lit-html/directives/until";
import { ifDefined } from "lit-html/directives/if-defined";
import "../../../elements/forms/HorizontalFormElement";
import "../../../elements/forms/FormGroup";
@customElement("ak-provider-saml-form")
export class SAMLProviderFormPage extends Form<SAMLProvider> {
export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
set providerUUID(value: number) {
new ProvidersApi(DEFAULT_CONFIG).providersSamlRead({
id: value,
}).then(provider => {
this.provider = provider;
loadInstance(pk: number): Promise<SAMLProvider> {
console.log("reading saml provider");
return new ProvidersApi(DEFAULT_CONFIG).providersSamlRead({
id: pk,
});
}
@property({attribute: false})
provider?: SAMLProvider;
getSuccessMessage(): string {
if (this.provider) {
if (this.instance) {
return t`Successfully updated provider.`;
} else {
return t`Successfully created provider.`;
@ -32,9 +28,9 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
}
send = (data: SAMLProvider): Promise<SAMLProvider> => {
if (this.provider) {
if (this.instance) {
return new ProvidersApi(DEFAULT_CONFIG).providersSamlUpdate({
id: this.provider.pk || 0,
id: this.instance.pk || 0,
data: data
});
} else {
@ -50,7 +46,7 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
label=${t`Name`}
?required=${true}
name="name">
<input type="text" value="${ifDefined(this.provider?.name)}" class="pf-c-form-control" required>
<input type="text" value="${ifDefined(this.instance?.name)}" class="pf-c-form-control" required>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Authorization flow`}
@ -62,7 +58,7 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
designation: FlowDesignationEnum.Authorization,
}).then(flows => {
return flows.results.map(flow => {
return html`<option value=${ifDefined(flow.pk)} ?selected=${this.provider?.authorizationFlow === flow.pk}>${flow.name} (${flow.slug})</option>`;
return html`<option value=${ifDefined(flow.pk)} ?selected=${this.instance?.authorizationFlow === flow.pk}>${flow.name} (${flow.slug})</option>`;
});
}), html`<option>${t`Loading...`}</option>`)}
</select>
@ -78,23 +74,23 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
label=${t`ACS URL`}
?required=${true}
name="acsUrl">
<input type="text" value="${ifDefined(this.provider?.acsUrl)}" class="pf-c-form-control" required>
<input type="text" value="${ifDefined(this.instance?.acsUrl)}" class="pf-c-form-control" required>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Issuer`}
?required=${true}
name="issuer">
<input type="text" value="${this.provider?.issuer || "authentik"}" class="pf-c-form-control" required>
<input type="text" value="${this.instance?.issuer || "authentik"}" class="pf-c-form-control" required>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Service Provider Binding`}
?required=${true}
name="spBinding">
<select class="pf-c-form-control">
<option value=${SAMLProviderSpBindingEnum.Redirect} ?selected=${this.provider?.spBinding === SAMLProviderSpBindingEnum.Redirect}>
<option value=${SAMLProviderSpBindingEnum.Redirect} ?selected=${this.instance?.spBinding === SAMLProviderSpBindingEnum.Redirect}>
${t`Redirect`}
</option>
<option value=${SAMLProviderSpBindingEnum.Post} ?selected=${this.provider?.spBinding === SAMLProviderSpBindingEnum.Post}>
<option value=${SAMLProviderSpBindingEnum.Post} ?selected=${this.instance?.spBinding === SAMLProviderSpBindingEnum.Post}>
${t`Post`}
</option>
</select>
@ -103,7 +99,7 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
<ak-form-element-horizontal
label=${t`Audience`}
name="audience">
<input type="text" value="${ifDefined(this.provider?.audience)}" class="pf-c-form-control">
<input type="text" value="${ifDefined(this.instance?.audience)}" class="pf-c-form-control">
</ak-form-element-horizontal>
</div>
</ak-form-group>
@ -117,13 +113,13 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
label=${t`Signing Certificate`}
name="signingKp">
<select class="pf-c-form-control">
<option value="" ?selected=${this.provider?.signingKp === undefined}>---------</option>
<option value="" ?selected=${this.instance?.signingKp === 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?.signingKp === key.pk}>${key.name}</option>`;
return html`<option value=${ifDefined(key.pk)} ?selected=${this.instance?.signingKp === key.pk}>${key.name}</option>`;
});
}), html`<option>${t`Loading...`}</option>`)}
</select>
@ -133,12 +129,12 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
label=${t`Verification Certificate`}
name="verificationKp">
<select class="pf-c-form-control">
<option value="" ?selected=${this.provider?.verificationKp === undefined}>---------</option>
<option value="" ?selected=${this.instance?.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>`;
return html`<option value=${ifDefined(key.pk)} ?selected=${this.instance?.verificationKp === key.pk}>${key.name}</option>`;
});
}), html`<option>${t`Loading...`}</option>`)}
</select>
@ -155,10 +151,10 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
}).then(mappings => {
return mappings.results.map(mapping => {
let selected = false;
if (!this.provider?.propertyMappings) {
if (!this.instance?.propertyMappings) {
selected = mapping.managed?.startsWith("goauthentik.io/providers/saml") || false;
} else {
selected = Array.from(this.provider?.propertyMappings).some(su => {
selected = Array.from(this.instance?.propertyMappings).some(su => {
return su == mapping.pk;
});
}
@ -172,12 +168,12 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
label=${t`NameID Property Mapping`}
name="nameIdMapping">
<select class="pf-c-form-control">
<option value="" ?selected=${this.provider?.nameIdMapping === undefined}>---------</option>
<option value="" ?selected=${this.instance?.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>`;
return html`<option value=${ifDefined(mapping.pk)} ?selected=${this.instance?.nameIdMapping === mapping.pk}>${mapping.name}</option>`;
});
}), html`<option>${t`Loading...`}</option>`)}
</select>
@ -188,7 +184,7 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
label=${t`Assertion valid not before`}
?required=${true}
name="assertionValidNotBefore">
<input type="text" value="${this.provider?.assertionValidNotBefore || "minutes=-5"}" class="pf-c-form-control" required>
<input type="text" value="${this.instance?.assertionValidNotBefore || "minutes=-5"}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`Configure the maximum allowed time drift for an asseration.`}</p>
<p class="pf-c-form__helper-text">${t`(Format: hours=-1;minutes=-2;seconds=-3).`}</p>
</ak-form-element-horizontal>
@ -196,14 +192,14 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
label=${t`Assertion valid not on or after`}
?required=${true}
name="assertionValidNotOnOrAfter">
<input type="text" value="${this.provider?.assertionValidNotOnOrAfter || "minutes=5"}" class="pf-c-form-control" required>
<input type="text" value="${this.instance?.assertionValidNotOnOrAfter || "minutes=5"}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`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
label=${t`Session valid not on or after`}
?required=${true}
name="sessionValidNotOnOrAfter">
<input type="text" value="${this.provider?.sessionValidNotOnOrAfter || "minutes=86400"}" class="pf-c-form-control" required>
<input type="text" value="${this.instance?.sessionValidNotOnOrAfter || "minutes=86400"}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`Session not valid on or after current time + this value (Format: hours=1;minutes=2;seconds=3).`}</p>
</ak-form-element-horizontal>
@ -212,16 +208,16 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
?required=${true}
name="digestAlgorithm">
<select class="pf-c-form-control">
<option value=${SAMLProviderDigestAlgorithmEnum._200009Xmldsigsha1} ?selected=${this.provider?.digestAlgorithm === SAMLProviderDigestAlgorithmEnum._200009Xmldsigsha1}>
<option value=${SAMLProviderDigestAlgorithmEnum._200009Xmldsigsha1} ?selected=${this.instance?.digestAlgorithm === SAMLProviderDigestAlgorithmEnum._200009Xmldsigsha1}>
${t`SHA1`}
</option>
<option value=${SAMLProviderDigestAlgorithmEnum._200104Xmlencsha256} ?selected=${this.provider?.digestAlgorithm === SAMLProviderDigestAlgorithmEnum._200104Xmlencsha256 || this.provider?.digestAlgorithm === undefined}>
<option value=${SAMLProviderDigestAlgorithmEnum._200104Xmlencsha256} ?selected=${this.instance?.digestAlgorithm === SAMLProviderDigestAlgorithmEnum._200104Xmlencsha256 || this.instance?.digestAlgorithm === undefined}>
${t`SHA256`}
</option>
<option value=${SAMLProviderDigestAlgorithmEnum._200104XmldsigMoresha384} ?selected=${this.provider?.digestAlgorithm === SAMLProviderDigestAlgorithmEnum._200104XmldsigMoresha384}>
<option value=${SAMLProviderDigestAlgorithmEnum._200104XmldsigMoresha384} ?selected=${this.instance?.digestAlgorithm === SAMLProviderDigestAlgorithmEnum._200104XmldsigMoresha384}>
${t`SHA384`}
</option>
<option value=${SAMLProviderDigestAlgorithmEnum._200104Xmlencsha512} ?selected=${this.provider?.digestAlgorithm === SAMLProviderDigestAlgorithmEnum._200104Xmlencsha512}>
<option value=${SAMLProviderDigestAlgorithmEnum._200104Xmlencsha512} ?selected=${this.instance?.digestAlgorithm === SAMLProviderDigestAlgorithmEnum._200104Xmlencsha512}>
${t`SHA512`}
</option>
</select>
@ -231,19 +227,19 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
?required=${true}
name="signatureAlgorithm">
<select class="pf-c-form-control">
<option value=${SAMLProviderSignatureAlgorithmEnum._200009XmldsigrsaSha1} ?selected=${this.provider?.signatureAlgorithm === SAMLProviderSignatureAlgorithmEnum._200009XmldsigrsaSha1}>
<option value=${SAMLProviderSignatureAlgorithmEnum._200009XmldsigrsaSha1} ?selected=${this.instance?.signatureAlgorithm === SAMLProviderSignatureAlgorithmEnum._200009XmldsigrsaSha1}>
${t`RSA-SHA1`}
</option>
<option value=${SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha256} ?selected=${this.provider?.signatureAlgorithm === SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha256 || this.provider?.signatureAlgorithm === undefined}>
<option value=${SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha256} ?selected=${this.instance?.signatureAlgorithm === SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha256 || this.instance?.signatureAlgorithm === undefined}>
${t`RSA-SHA256`}
</option>
<option value=${SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha384} ?selected=${this.provider?.signatureAlgorithm === SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha384}>
<option value=${SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha384} ?selected=${this.instance?.signatureAlgorithm === SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha384}>
${t`RSA-SHA384`}
</option>
<option value=${SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha512} ?selected=${this.provider?.signatureAlgorithm === SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha512}>
<option value=${SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha512} ?selected=${this.instance?.signatureAlgorithm === SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha512}>
${t`RSA-SHA512`}
</option>
<option value=${SAMLProviderSignatureAlgorithmEnum._200009XmldsigdsaSha1} ?selected=${this.provider?.signatureAlgorithm === SAMLProviderSignatureAlgorithmEnum._200009XmldsigdsaSha1}>
<option value=${SAMLProviderSignatureAlgorithmEnum._200009XmldsigdsaSha1} ?selected=${this.instance?.signatureAlgorithm === SAMLProviderSignatureAlgorithmEnum._200009XmldsigdsaSha1}>
${t`DSA-SHA1`}
</option>
</select>

2
web/src/pages/providers/saml/SAMLProviderViewPage.ts
View File

@ -121,7 +121,7 @@ export class SAMLProviderViewPage extends LitElement {
</span>
<ak-provider-saml-form
slot="form"
.providerUUID=${this.provider.pk || 0}>
.instancePk=${this.provider.pk || 0}>
</ak-provider-saml-form>
<button slot="trigger" class="pf-c-button pf-m-primary">
${t`Edit`}