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

web/admin: add modelform as base, start migrating 

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-05-11 11:48:34 +02:00
parent fd44765ff4
commit b4d750174f
26 changed files with 320 additions and 360 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/elements/forms/ModelForm.ts
View File

@ -2,11 +2,11 @@ import { property } from "lit-element";
import { EVENT_REFRESH } from "../../constants"; import { EVENT_REFRESH } from "../../constants";
import { Form } from "./Form"; import { Form } from "./Form";
export abstract class ModelForm<T, PKT> extends Form<T> { export abstract class ModelForm<T, PKT extends string | number> extends Form<T> {
abstract loadInstance(pk: PKT): Promise<T>; abstract loadInstance(pk: PKT): Promise<T>;
@property() @property({attribute: false})
set instancePk(value: PKT) { set instancePk(value: PKT) {
this._instancePk = value; this._instancePk = value;
this.loadInstance(value).then(instance => { this.loadInstance(value).then(instance => {

36
web/src/pages/applications/ApplicationForm.ts
View File

@ -13,18 +13,22 @@ import "../../elements/forms/ModalForm";
import "../../elements/forms/HorizontalFormElement"; import "../../elements/forms/HorizontalFormElement";
import "../../elements/forms/FormGroup"; import "../../elements/forms/FormGroup";
import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css"; import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css";
import { ModelForm } from "../../elements/forms/ModelForm";
@customElement("ak-application-form") @customElement("ak-application-form")
export class ApplicationForm extends Form<Application> { export class ApplicationForm extends ModelForm<Application, string> {
@property({ attribute: false }) loadInstance(pk: string): Promise<Application> {
application?: Application; return new CoreApi(DEFAULT_CONFIG).coreApplicationsRead({
slug: pk
});
}
@property({ attribute: false }) @property({ attribute: false })
provider?: number; provider?: number;
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.application) { if (this.instance) {
return t`Successfully updated application.`; return t`Successfully updated application.`;
} else { } else {
return t`Successfully created application.`; return t`Successfully created application.`;
@ -37,9 +41,9 @@ export class ApplicationForm extends Form<Application> {
send = (data: Application): Promise<Application | void> => { send = (data: Application): Promise<Application | void> => {
let writeOp: Promise<Application>; let writeOp: Promise<Application>;
if (this.application) { if (this.instance) {
writeOp = new CoreApi(DEFAULT_CONFIG).coreApplicationsUpdate({ writeOp = new CoreApi(DEFAULT_CONFIG).coreApplicationsUpdate({
slug: this.application.slug, slug: this.instance.slug,
data: data data: data
}); });
} else { } else {
@ -72,7 +76,7 @@ export class ApplicationForm extends Form<Application> {
${Array.from(m).map(([group, providers]) => { ${Array.from(m).map(([group, providers]) => {
return html`<optgroup label=${group}> return html`<optgroup label=${group}>
${providers.map(p => { ${providers.map(p => {
const selected = (this.application?.provider === p.pk) || (this.provider === p.pk); const selected = (this.instance?.provider === p.pk) || (this.provider === p.pk);
return html`<option ?selected=${selected} value=${ifDefined(p.pk)}>${p.name}</option>`; return html`<option ?selected=${selected} value=${ifDefined(p.pk)}>${p.name}</option>`;
})} })}
</optgroup>`; </optgroup>`;
@ -86,21 +90,21 @@ export class ApplicationForm extends Form<Application> {
label=${t`Name`} label=${t`Name`}
?required=${true} ?required=${true}
name="name"> name="name">
<input type="text" value="${ifDefined(this.application?.name)}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.name)}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`Application's display Name.`}</p> <p class="pf-c-form__helper-text">${t`Application's display Name.`}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Slug`} label=${t`Slug`}
?required=${true} ?required=${true}
name="slug"> name="slug">
<input type="text" value="${ifDefined(this.application?.slug)}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.slug)}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`Internal application name, used in URLs.`}</p> <p class="pf-c-form__helper-text">${t`Internal application name, used in URLs.`}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Provider`} label=${t`Provider`}
name="provider"> name="provider">
<select class="pf-c-form-control"> <select class="pf-c-form-control">
<option value="" ?selected=${this.application?.provider === undefined}>---------</option> <option value="" ?selected=${this.instance?.provider === undefined}>---------</option>
${until(new ProvidersApi(DEFAULT_CONFIG).providersAllList({}).then(providers => { ${until(new ProvidersApi(DEFAULT_CONFIG).providersAllList({}).then(providers => {
return this.groupProviders(providers.results); return this.groupProviders(providers.results);
}), html`<option>${t`Loading...`}</option>`)} }), html`<option>${t`Loading...`}</option>`)}
@ -142,10 +146,10 @@ export class ApplicationForm extends Form<Application> {
?required=${true} ?required=${true}
name="policyEngineMode"> name="policyEngineMode">
<select class="pf-c-form-control"> <select class="pf-c-form-control">
<option value=${ApplicationPolicyEngineModeEnum.Any} ?selected=${this.application?.policyEngineMode === ApplicationPolicyEngineModeEnum.Any}> <option value=${ApplicationPolicyEngineModeEnum.Any} ?selected=${this.instance?.policyEngineMode === ApplicationPolicyEngineModeEnum.Any}>
${t`ANY, any policy must match to grant access.`} ${t`ANY, any policy must match to grant access.`}
</option> </option>
<option value=${ApplicationPolicyEngineModeEnum.All} ?selected=${this.application?.policyEngineMode === ApplicationPolicyEngineModeEnum.All}> <option value=${ApplicationPolicyEngineModeEnum.All} ?selected=${this.instance?.policyEngineMode === ApplicationPolicyEngineModeEnum.All}>
${t`ALL, all policies must match to grant access.`} ${t`ALL, all policies must match to grant access.`}
</option> </option>
</select> </select>
@ -158,23 +162,23 @@ export class ApplicationForm extends Form<Application> {
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Launch URL`} label=${t`Launch URL`}
name="metaLaunchUrl"> name="metaLaunchUrl">
<input type="text" value="${ifDefined(this.application?.metaLaunchUrl)}" class="pf-c-form-control"> <input type="text" value="${ifDefined(this.instance?.metaLaunchUrl)}" class="pf-c-form-control">
<p class="pf-c-form__helper-text">${t`If left empty, authentik will try to extract the launch URL based on the selected provider.`}</p> <p class="pf-c-form__helper-text">${t`If left empty, authentik will try to extract the launch URL based on the selected provider.`}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Icon`} label=${t`Icon`}
name="metaIcon"> name="metaIcon">
<input type="file" value="${ifDefined(this.application?.metaIcon)}" class="pf-c-form-control"> <input type="file" value="${ifDefined(this.instance?.metaIcon)}" class="pf-c-form-control">
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Description`} label=${t`Description`}
name="metaDescription"> name="metaDescription">
<textarea class="pf-c-form-control">${ifDefined(this.application?.metaDescription)}</textarea> <textarea class="pf-c-form-control">${ifDefined(this.instance?.metaDescription)}</textarea>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Publisher`} label=${t`Publisher`}
name="metaPublisher"> name="metaPublisher">
<input type="text" value="${ifDefined(this.application?.metaPublisher)}" class="pf-c-form-control"> <input type="text" value="${ifDefined(this.instance?.metaPublisher)}" class="pf-c-form-control">
</ak-form-element-horizontal> </ak-form-element-horizontal>
</div> </div>
</ak-form-group> </ak-form-group>

2
web/src/pages/applications/ApplicationListPage.ts
View File

@ -89,7 +89,7 @@ export class ApplicationListPage extends TablePage<Application> {
<span slot="header"> <span slot="header">
${t`Update Application`} ${t`Update Application`}
</span> </span>
<ak-application-form slot="form" .application=${item}> <ak-application-form slot="form" .instancePk=${item.slug}>
</ak-application-form> </ak-application-form>
<button slot="trigger" class="pf-c-button pf-m-secondary"> <button slot="trigger" class="pf-c-button pf-m-secondary">
${t`Edit`} ${t`Edit`}

35
web/src/pages/outposts/OutpostForm.ts
View File

@ -3,21 +3,24 @@ import { t } from "@lingui/macro";
import { customElement, property } from "lit-element"; import { customElement, property } from "lit-element";
import { html, TemplateResult } from "lit-html"; import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../api/Config"; import { DEFAULT_CONFIG } from "../../api/Config";
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/CodeMirror"; import "../../elements/CodeMirror";
import YAML from "yaml"; import YAML from "yaml";
import { ModelForm } from "../../elements/forms/ModelForm";
@customElement("ak-outpost-form") @customElement("ak-outpost-form")
export class OutpostForm extends Form<Outpost> { export class OutpostForm extends ModelForm<Outpost, string> {
@property({attribute: false}) loadInstance(pk: string): Promise<Outpost> {
outpost?: Outpost; return new OutpostsApi(DEFAULT_CONFIG).outpostsInstancesRead({
uuid: pk
});
}
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.outpost) { if (this.instance) {
return t`Successfully updated outpost.`; return t`Successfully updated outpost.`;
} else { } else {
return t`Successfully created outpost.`; return t`Successfully created outpost.`;
@ -25,9 +28,9 @@ export class OutpostForm extends Form<Outpost> {
} }
send = (data: Outpost): Promise<Outpost> => { send = (data: Outpost): Promise<Outpost> => {
if (this.outpost) { if (this.instance) {
return new OutpostsApi(DEFAULT_CONFIG).outpostsOutpostsUpdate({ return new OutpostsApi(DEFAULT_CONFIG).outpostsOutpostsUpdate({
uuid: this.outpost.pk || "", uuid: this.instance.pk || "",
data: data data: data
}); });
} else { } else {
@ -43,27 +46,27 @@ export class OutpostForm extends Form<Outpost> {
label=${t`Name`} label=${t`Name`}
?required=${true} ?required=${true}
name="name"> name="name">
<input type="text" value="${ifDefined(this.outpost?.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>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Type`} label=${t`Type`}
?required=${true} ?required=${true}
name="type"> name="type">
<select class="pf-c-form-control"> <select class="pf-c-form-control">
<option value=${OutpostTypeEnum.Proxy} ?selected=${this.outpost?.type === OutpostTypeEnum.Proxy}>${t`Proxy`}</option> <option value=${OutpostTypeEnum.Proxy} ?selected=${this.instance?.type === OutpostTypeEnum.Proxy}>${t`Proxy`}</option>
<option value=${OutpostTypeEnum.Ldap} ?selected=${this.outpost?.type === OutpostTypeEnum.Ldap}>${t`LDAP (Technical preview)`}</option> <option value=${OutpostTypeEnum.Ldap} ?selected=${this.instance?.type === OutpostTypeEnum.Ldap}>${t`LDAP (Technical preview)`}</option>
</select> </select>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Service connection`} label=${t`Service connection`}
name="serviceConnection"> name="serviceConnection">
<select class="pf-c-form-control"> <select class="pf-c-form-control">
<option value="" ?selected=${this.outpost?.serviceConnection === undefined}>---------</option> <option value="" ?selected=${this.instance?.serviceConnection === undefined}>---------</option>
${until(new OutpostsApi(DEFAULT_CONFIG).outpostsServiceConnectionsAllList({ ${until(new OutpostsApi(DEFAULT_CONFIG).outpostsServiceConnectionsAllList({
ordering: "pk" ordering: "pk"
}).then(scs => { }).then(scs => {
return scs.results.map(sc => { return scs.results.map(sc => {
return html`<option value=${ifDefined(sc.pk)} ?selected=${this.outpost?.serviceConnection === sc.pk}> return html`<option value=${ifDefined(sc.pk)} ?selected=${this.instance?.serviceConnection === sc.pk}>
${sc.name} (${sc.verboseName}) ${sc.name} (${sc.verboseName})
</option>`; </option>`;
}); });
@ -83,7 +86,7 @@ export class OutpostForm extends Form<Outpost> {
ordering: "pk" ordering: "pk"
}).then(providers => { }).then(providers => {
return providers.results.map(provider => { return providers.results.map(provider => {
const selected = Array.from(this.outpost?.providers || []).some(sp => { const selected = Array.from(this.instance?.providers || []).some(sp => {
return sp == provider.pk; return sp == provider.pk;
}); });
return html`<option value=${ifDefined(provider.pk)} ?selected=${selected}>${provider.verboseName} ${provider.name}</option>`; return html`<option value=${ifDefined(provider.pk)} ?selected=${selected}>${provider.verboseName} ${provider.name}</option>`;
@ -93,7 +96,7 @@ export class OutpostForm extends Form<Outpost> {
ordering: "pk" ordering: "pk"
}).then(providers => { }).then(providers => {
return providers.results.map(provider => { return providers.results.map(provider => {
const selected = Array.from(this.outpost?.providers || []).some(sp => { const selected = Array.from(this.instance?.providers || []).some(sp => {
return sp == provider.pk; return sp == provider.pk;
}); });
return html`<option value=${ifDefined(provider.pk)} ?selected=${selected}>${provider.verboseName} ${provider.name}</option>`; return html`<option value=${ifDefined(provider.pk)} ?selected=${selected}>${provider.verboseName} ${provider.name}</option>`;
@ -107,8 +110,8 @@ export class OutpostForm extends Form<Outpost> {
name="config"> name="config">
<ak-codemirror mode="yaml" value="${until(new OutpostsApi(DEFAULT_CONFIG).outpostsOutpostsDefaultSettings({}).then(config => { <ak-codemirror mode="yaml" value="${until(new OutpostsApi(DEFAULT_CONFIG).outpostsOutpostsDefaultSettings({}).then(config => {
let fc = config.config; let fc = config.config;
if (this.outpost) { if (this.instance) {
fc = this.outpost.config; fc = this.instance.config;
} }
return YAML.stringify(fc); return YAML.stringify(fc);
}))}"></ak-codemirror> }))}"></ak-codemirror>

2
web/src/pages/outposts/OutpostListPage.ts
View File

@ -66,7 +66,7 @@ export class OutpostListPage extends TablePage<Outpost> {
<span slot="header"> <span slot="header">
${t`Update Outpost`} ${t`Update Outpost`}
</span> </span>
<ak-outpost-form slot="form" .outpost=${item}> <ak-outpost-form slot="form" .instancePk=${item.pk}>
</ak-outpost-form> </ak-outpost-form>
<button slot="trigger" class="pf-c-button pf-m-secondary"> <button slot="trigger" class="pf-c-button pf-m-secondary">
${t`Edit`} ${t`Edit`}

27
web/src/pages/property-mappings/PropertyMappingLDAPForm.ts
View File

@ -3,27 +3,22 @@ import { t } from "@lingui/macro";
import { customElement, property } from "lit-element"; import { customElement, property } from "lit-element";
import { html, TemplateResult } from "lit-html"; import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../api/Config"; import { DEFAULT_CONFIG } from "../../api/Config";
import { Form } from "../../elements/forms/Form";
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/CodeMirror"; import "../../elements/CodeMirror";
import { ModelForm } from "../../elements/forms/ModelForm";
@customElement("ak-property-mapping-ldap-form") @customElement("ak-property-mapping-ldap-form")
export class PropertyMappingLDAPForm extends Form<LDAPPropertyMapping> { export class PropertyMappingLDAPForm extends ModelForm<LDAPPropertyMapping, string> {
set mappingUUID(value: string) { loadInstance(pk: string): Promise<LDAPPropertyMapping> {
new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsLdapRead({ return new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsLdapRead({
pmUuid: value, pmUuid: pk,
}).then(mapping => {
this.mapping = mapping;
}); });
} }
@property({attribute: false})
mapping?: LDAPPropertyMapping;
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.mapping) { if (this.instance) {
return t`Successfully updated mapping.`; return t`Successfully updated mapping.`;
} else { } else {
return t`Successfully created mapping.`; return t`Successfully created mapping.`;
@ -31,9 +26,9 @@ export class PropertyMappingLDAPForm extends Form<LDAPPropertyMapping> {
} }
send = (data: LDAPPropertyMapping): Promise<LDAPPropertyMapping> => { send = (data: LDAPPropertyMapping): Promise<LDAPPropertyMapping> => {
if (this.mapping) { if (this.instance) {
return new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsLdapUpdate({ return new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsLdapUpdate({
pmUuid: this.mapping.pk || "", pmUuid: this.instance.pk || "",
data: data data: data
}); });
} else { } else {
@ -49,20 +44,20 @@ export class PropertyMappingLDAPForm extends Form<LDAPPropertyMapping> {
label=${t`Name`} label=${t`Name`}
?required=${true} ?required=${true}
name="name"> name="name">
<input type="text" value="${ifDefined(this.mapping?.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>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Object field`} label=${t`Object field`}
?required=${true} ?required=${true}
name="objectField"> name="objectField">
<input type="text" value="${ifDefined(this.mapping?.objectField)}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.objectField)}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`Field of the user object this value is written to.`}</p> <p class="pf-c-form__helper-text">${t`Field of the user object this value is written to.`}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Expression`} label=${t`Expression`}
?required=${true} ?required=${true}
name="expression"> name="expression">
<ak-codemirror mode="python" value="${ifDefined(this.mapping?.expression)}"> <ak-codemirror mode="python" value="${ifDefined(this.instance?.expression)}">
</ak-codemirror> </ak-codemirror>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Expression using Python.`} ${t`Expression using Python.`}

30
web/src/pages/property-mappings/PropertyMappingSAMLForm.ts
View File

@ -3,27 +3,21 @@ import { t } from "@lingui/macro";
import { customElement, property } from "lit-element"; import { customElement, property } from "lit-element";
import { html, TemplateResult } from "lit-html"; import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../api/Config"; import { DEFAULT_CONFIG } from "../../api/Config";
import { Form } from "../../elements/forms/Form";
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/CodeMirror"; import "../../elements/CodeMirror";
import { ModelForm } from "../../elements/forms/ModelForm";
@customElement("ak-property-mapping-saml-form") @customElement("ak-property-mapping-saml-form")
export class PropertyMappingLDAPForm extends Form<SAMLPropertyMapping> { export class PropertyMappingLDAPForm extends ModelForm<SAMLPropertyMapping, string> {
loadInstance(pk: string): Promise<SAMLPropertyMapping> {
set mappingUUID(value: string) { return new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsSamlRead({
new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsSamlRead({ pmUuid: pk,
pmUuid: value,
}).then(mapping => {
this.mapping = mapping;
}); });
} }
@property({attribute: false})
mapping?: SAMLPropertyMapping;
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.mapping) { if (this.instance) {
return t`Successfully updated mapping.`; return t`Successfully updated mapping.`;
} else { } else {
return t`Successfully created mapping.`; return t`Successfully created mapping.`;
@ -31,9 +25,9 @@ export class PropertyMappingLDAPForm extends Form<SAMLPropertyMapping> {
} }
send = (data: SAMLPropertyMapping): Promise<SAMLPropertyMapping> => { send = (data: SAMLPropertyMapping): Promise<SAMLPropertyMapping> => {
if (this.mapping) { if (this.instance) {
return new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsSamlUpdate({ return new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsSamlUpdate({
pmUuid: this.mapping.pk || "", pmUuid: this.instance.pk || "",
data: data data: data
}); });
} else { } else {
@ -49,13 +43,13 @@ export class PropertyMappingLDAPForm extends Form<SAMLPropertyMapping> {
label=${t`Name`} label=${t`Name`}
?required=${true} ?required=${true}
name="name"> name="name">
<input type="text" value="${ifDefined(this.mapping?.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>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`SAML Attribute Name`} label=${t`SAML Attribute Name`}
?required=${true} ?required=${true}
name="samlName"> name="samlName">
<input type="text" value="${ifDefined(this.mapping?.samlName)}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.samlName)}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Attribute name used for SAML Assertions. Can be a URN OID, a schema reference, or a any other string. If this property mapping is used for NameID Property, this field is discarded.`} ${t`Attribute name used for SAML Assertions. Can be a URN OID, a schema reference, or a any other string. If this property mapping is used for NameID Property, this field is discarded.`}
</p> </p>
@ -63,7 +57,7 @@ export class PropertyMappingLDAPForm extends Form<SAMLPropertyMapping> {
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Friendly Name`} label=${t`Friendly Name`}
name="friendlyName"> name="friendlyName">
<input type="text" value="${ifDefined(this.mapping?.friendlyName || "")}" class="pf-c-form-control"> <input type="text" value="${ifDefined(this.instance?.friendlyName || "")}" class="pf-c-form-control">
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Optionally set the 'FriendlyName' value of the Assertion attribute.`} ${t`Optionally set the 'FriendlyName' value of the Assertion attribute.`}
</p> </p>
@ -72,7 +66,7 @@ export class PropertyMappingLDAPForm extends Form<SAMLPropertyMapping> {
label=${t`Expression`} label=${t`Expression`}
?required=${true} ?required=${true}
name="expression"> name="expression">
<ak-codemirror mode="python" value="${ifDefined(this.mapping?.expression)}"> <ak-codemirror mode="python" value="${ifDefined(this.instance?.expression)}">
</ak-codemirror> </ak-codemirror>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Expression using Python.`} ${t`Expression using Python.`}

29
web/src/pages/property-mappings/PropertyMappingScopeForm.ts
View File

@ -3,27 +3,22 @@ import { t } from "@lingui/macro";
import { customElement, property } from "lit-element"; import { customElement, property } from "lit-element";
import { html, TemplateResult } from "lit-html"; import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../api/Config"; import { DEFAULT_CONFIG } from "../../api/Config";
import { Form } from "../../elements/forms/Form"; import { ModelForm } from "../../elements/forms/ModelForm";
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/CodeMirror"; import "../../elements/CodeMirror";
@customElement("ak-property-mapping-scope-form") @customElement("ak-property-mapping-scope-form")
export class PropertyMappingScopeForm extends Form<ScopeMapping> { export class PropertyMappingScopeForm extends ModelForm<ScopeMapping, string> {
set mappingUUID(value: string) { loadInstance(pk: string): Promise<ScopeMapping> {
new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsScopeRead({ return new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsScopeRead({
pmUuid: value, pmUuid: pk,
}).then(mapping => {
this.mapping = mapping;
}); });
} }
@property({attribute: false})
mapping?: ScopeMapping;
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.mapping) { if (this.instance) {
return t`Successfully updated mapping.`; return t`Successfully updated mapping.`;
} else { } else {
return t`Successfully created mapping.`; return t`Successfully created mapping.`;
@ -31,9 +26,9 @@ export class PropertyMappingScopeForm extends Form<ScopeMapping> {
} }
send = (data: ScopeMapping): Promise<ScopeMapping> => { send = (data: ScopeMapping): Promise<ScopeMapping> => {
if (this.mapping) { if (this.instance) {
return new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsScopeUpdate({ return new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsScopeUpdate({
pmUuid: this.mapping.pk || "", pmUuid: this.instance.pk || "",
data: data data: data
}); });
} else { } else {
@ -49,27 +44,27 @@ export class PropertyMappingScopeForm extends Form<ScopeMapping> {
label=${t`Name`} label=${t`Name`}
?required=${true} ?required=${true}
name="name"> name="name">
<input type="text" value="${ifDefined(this.mapping?.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>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Scope name`} label=${t`Scope name`}
?required=${true} ?required=${true}
name="scopeName"> name="scopeName">
<input type="text" value="${ifDefined(this.mapping?.scopeName)}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.scopeName)}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`Scope which the client can specify to access these properties.`}</p> <p class="pf-c-form__helper-text">${t`Scope which the client can specify to access these properties.`}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Description`} label=${t`Description`}
?required=${true} ?required=${true}
name="description"> name="description">
<input type="text" value="${ifDefined(this.mapping?.description)}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.description)}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`Description shown to the user when consenting. If left empty, the user won't be informed.`}</p> <p class="pf-c-form__helper-text">${t`Description shown to the user when consenting. If left empty, the user won't be informed.`}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Expression`} label=${t`Expression`}
?required=${true} ?required=${true}
name="expression"> name="expression">
<ak-codemirror mode="python" value="${ifDefined(this.mapping?.expression)}"> <ak-codemirror mode="python" value="${ifDefined(this.instance?.expression)}">
</ak-codemirror> </ak-codemirror>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Expression using Python.`} ${t`Expression using Python.`}

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

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

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

@ -3,7 +3,7 @@ import { t } from "@lingui/macro";
import { customElement, property } from "lit-element"; import { customElement, property } from "lit-element";
import { html, TemplateResult } from "lit-html"; import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../../api/Config"; 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 { 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";
@ -11,21 +11,16 @@ import "../../../elements/forms/FormGroup";
import { first } from "../../../utils"; import { first } from "../../../utils";
@customElement("ak-provider-ldap-form") @customElement("ak-provider-ldap-form")
export class LDAPProviderFormPage extends Form<LDAPProvider> { export class LDAPProviderFormPage extends ModelForm<LDAPProvider, number> {
set providerUUID(value: number) { loadInstance(pk: number): Promise<LDAPProvider> {
new ProvidersApi(DEFAULT_CONFIG).providersLdapRead({ return new ProvidersApi(DEFAULT_CONFIG).providersLdapRead({
id: value, id: pk,
}).then(provider => {
this.provider = provider;
}); });
} }
@property({attribute: false})
provider?: LDAPProvider;
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.provider) { if (this.instance) {
return t`Successfully updated provider.`; return t`Successfully updated provider.`;
} else { } else {
return t`Successfully created provider.`; return t`Successfully created provider.`;
@ -33,9 +28,9 @@ export class LDAPProviderFormPage extends Form<LDAPProvider> {
} }
send = (data: LDAPProvider): Promise<LDAPProvider> => { send = (data: LDAPProvider): Promise<LDAPProvider> => {
if (this.provider) { if (this.instance) {
return new ProvidersApi(DEFAULT_CONFIG).providersLdapUpdate({ return new ProvidersApi(DEFAULT_CONFIG).providersLdapUpdate({
id: this.provider.pk || 0, id: this.instance.pk || 0,
data: data data: data
}); });
} else { } else {
@ -51,7 +46,7 @@ export class LDAPProviderFormPage extends Form<LDAPProvider> {
label=${t`Name`} label=${t`Name`}
?required=${true} ?required=${true}
name="name"> 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>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Bind flow`} label=${t`Bind flow`}
@ -63,7 +58,7 @@ export class LDAPProviderFormPage extends Form<LDAPProvider> {
designation: FlowDesignationEnum.Authentication, designation: FlowDesignationEnum.Authentication,
}).then(flows => { }).then(flows => {
return flows.results.map(flow => { 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>`)} }), html`<option>${t`Loading...`}</option>`)}
</select> </select>
@ -73,10 +68,10 @@ export class LDAPProviderFormPage extends Form<LDAPProvider> {
label=${t`Group`} label=${t`Group`}
name="searchGroup"> name="searchGroup">
<select class="pf-c-form-control"> <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 => { ${until(new CoreApi(DEFAULT_CONFIG).coreGroupsList({}).then(groups => {
return groups.results.map(group => { 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>`)} }), html`<option>${t`Loading...`}</option>`)}
</select> </select>
@ -92,7 +87,7 @@ export class LDAPProviderFormPage extends Form<LDAPProvider> {
label=${t`Base DN`} label=${t`Base DN`}
?required=${true} ?required=${true}
name="baseDn"> 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> <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> </ak-form-element-horizontal>
</div> </div>

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

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

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

@ -127,7 +127,7 @@ export class OAuth2ProviderViewPage extends LitElement {
</span> </span>
<ak-provider-oauth2-form <ak-provider-oauth2-form
slot="form" slot="form"
.providerUUID=${this.provider.pk || 0}> .instancePk=${this.provider.pk || 0}>
</ak-provider-oauth2-form> </ak-provider-oauth2-form>
<button slot="trigger" class="pf-c-button pf-m-primary"> <button slot="trigger" class="pf-c-button pf-m-primary">
${t`Edit`} ${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 { customElement, property } from "lit-element";
import { html, TemplateResult } from "lit-html"; import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../../api/Config"; 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 { 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";
@ -11,21 +11,18 @@ import "../../../elements/forms/FormGroup";
import { first } from "../../../utils"; import { first } from "../../../utils";
@customElement("ak-provider-proxy-form") @customElement("ak-provider-proxy-form")
export class ProxyProviderFormPage extends Form<ProxyProvider> { export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
set providerUUID(value: number) { loadInstance(pk: number): Promise<ProxyProvider> {
new ProvidersApi(DEFAULT_CONFIG).providersProxyRead({ return new ProvidersApi(DEFAULT_CONFIG).providersProxyRead({
id: value, id: pk,
}).then(provider => { }).then(provider => {
this.provider = provider;
this.showHttpBasic = first(provider.basicAuthEnabled, true); this.showHttpBasic = first(provider.basicAuthEnabled, true);
this.showInternalServer = first(!provider.forwardAuthMode, true); this.showInternalServer = first(!provider.forwardAuthMode, true);
return provider;
}); });
} }
@property({attribute: false})
provider?: ProxyProvider;
@property({type: Boolean}) @property({type: Boolean})
showHttpBasic = true; showHttpBasic = true;
@ -33,7 +30,7 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
showInternalServer = true; showInternalServer = true;
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.provider) { if (this.instance) {
return t`Successfully updated provider.`; return t`Successfully updated provider.`;
} else { } else {
return t`Successfully created provider.`; return t`Successfully created provider.`;
@ -41,9 +38,9 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
} }
send = (data: ProxyProvider): Promise<ProxyProvider> => { send = (data: ProxyProvider): Promise<ProxyProvider> => {
if (this.provider) { if (this.instance) {
return new ProvidersApi(DEFAULT_CONFIG).providersProxyUpdate({ return new ProvidersApi(DEFAULT_CONFIG).providersProxyUpdate({
id: this.provider.pk || 0, id: this.instance.pk || 0,
data: data data: data
}); });
} else { } else {
@ -60,13 +57,13 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
return html`<ak-form-element-horizontal return html`<ak-form-element-horizontal
label=${t`HTTP-Basic Username Key`} label=${t`HTTP-Basic Username Key`}
name="basicAuthUserAttribute"> 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> <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>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`HTTP-Basic Password Key`} label=${t`HTTP-Basic Password Key`}
name="basicAuthPasswordAttribute"> 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> <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>`; </ak-form-element-horizontal>`;
} }
@ -79,12 +76,12 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
label=${t`Internal host`} label=${t`Internal host`}
?required=${true} ?required=${true}
name="internalHost"> 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> <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>
<ak-form-element-horizontal name="internalHostSslValidation"> <ak-form-element-horizontal name="internalHostSslValidation">
<div class="pf-c-check"> <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"> <label class="pf-c-check__label">
${t`Internal host SSL Validation`} ${t`Internal host SSL Validation`}
</label> </label>
@ -99,7 +96,7 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
label=${t`Name`} label=${t`Name`}
?required=${true} ?required=${true}
name="name"> 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>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Authorization flow`} label=${t`Authorization flow`}
@ -111,7 +108,7 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
designation: FlowDesignationEnum.Authorization, designation: FlowDesignationEnum.Authorization,
}).then(flows => { }).then(flows => {
return flows.results.map(flow => { 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>`)} }), html`<option>${t`Loading...`}</option>`)}
</select> </select>
@ -127,12 +124,12 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
label=${t`External host`} label=${t`External host`}
?required=${true} ?required=${true}
name="externalHost"> 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> <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>
<ak-form-element-horizontal name="forwardAuthMode"> <ak-form-element-horizontal name="forwardAuthMode">
<div class="pf-c-check"> <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; const el = ev.target as HTMLInputElement;
this.showInternalServer = !el.checked; this.showInternalServer = !el.checked;
}}> }}>
@ -162,7 +159,7 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
hasKey: "true", hasKey: "true",
}).then(keys => { }).then(keys => {
return keys.results.map(key => { 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>`)} }), html`<option>${t`Loading...`}</option>`)}
</select> </select>
@ -171,13 +168,13 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Skip path regex`} label=${t`Skip path regex`}
name="skipPathRegex"> 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> <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>
<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=${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; const el = ev.target as HTMLInputElement;
this.showHttpBasic = el.checked; this.showHttpBasic = el.checked;
}}> }}>

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

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

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

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

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

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

2
web/src/pages/sources/SourcesListPage.ts
View File

@ -75,7 +75,7 @@ export class SourceListPage extends TablePage<Source> {
<ak-proxy-form <ak-proxy-form
slot="form" slot="form"
.args=${{ .args=${{
"sourceSlug": item.slug "instancePk": item.slug
}} }}
type=${ifDefined(item.component)}> type=${ifDefined(item.component)}>
</ak-proxy-form> </ak-proxy-form>

67
web/src/pages/sources/ldap/LDAPSourceForm.ts
View File

@ -1,31 +1,26 @@
import { LDAPSource, SourcesApi, PropertymappingsApi } from "authentik-api"; import { LDAPSource, SourcesApi, PropertymappingsApi } from "authentik-api";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
import { customElement, property } from "lit-element"; import { customElement } from "lit-element";
import { html, TemplateResult } from "lit-html"; import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../../api/Config"; import { DEFAULT_CONFIG } from "../../../api/Config";
import { Form } from "../../../elements/forms/Form";
import "../../../elements/forms/FormGroup"; import "../../../elements/forms/FormGroup";
import "../../../elements/forms/HorizontalFormElement"; import "../../../elements/forms/HorizontalFormElement";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import { until } from "lit-html/directives/until"; import { until } from "lit-html/directives/until";
import { first } from "../../../utils"; import { first } from "../../../utils";
import { ModelForm } from "../../../elements/forms/ModelForm";
@customElement("ak-source-ldap-form") @customElement("ak-source-ldap-form")
export class LDAPSourceForm extends Form<LDAPSource> { export class LDAPSourceForm extends ModelForm<LDAPSource, string> {
set sourceSlug(value: string) { loadInstance(pk: string): Promise<LDAPSource> {
new SourcesApi(DEFAULT_CONFIG).sourcesLdapRead({ return new SourcesApi(DEFAULT_CONFIG).sourcesLdapRead({
slug: value, slug: pk,
}).then(source => {
this.source = source;
}); });
} }
@property({attribute: false})
source?: LDAPSource;
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.source) { if (this.instance) {
return t`Successfully updated source.`; return t`Successfully updated source.`;
} else { } else {
return t`Successfully created source.`; return t`Successfully created source.`;
@ -33,9 +28,9 @@ export class LDAPSourceForm extends Form<LDAPSource> {
} }
send = (data: LDAPSource): Promise<LDAPSource> => { send = (data: LDAPSource): Promise<LDAPSource> => {
if (this.source) { if (this.instance) {
return new SourcesApi(DEFAULT_CONFIG).sourcesLdapPartialUpdate({ return new SourcesApi(DEFAULT_CONFIG).sourcesLdapPartialUpdate({
slug: this.source.slug, slug: this.instance.slug,
data: data data: data
}); });
} else { } else {
@ -51,17 +46,17 @@ export class LDAPSourceForm extends Form<LDAPSource> {
label=${t`Name`} label=${t`Name`}
?required=${true} ?required=${true}
name="name"> name="name">
<input type="text" value="${ifDefined(this.source?.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>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Slug`} label=${t`Slug`}
?required=${true} ?required=${true}
name="slug"> name="slug">
<input type="text" value="${ifDefined(this.source?.slug)}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.slug)}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal name="enabled"> <ak-form-element-horizontal name="enabled">
<div class="pf-c-check"> <div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.source?.enabled, true)}> <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.enabled, true)}>
<label class="pf-c-check__label"> <label class="pf-c-check__label">
${t`Enabled`} ${t`Enabled`}
</label> </label>
@ -69,7 +64,7 @@ export class LDAPSourceForm extends Form<LDAPSource> {
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal name="syncUsers"> <ak-form-element-horizontal name="syncUsers">
<div class="pf-c-check"> <div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.source?.syncUsers, true)}> <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.syncUsers, true)}>
<label class="pf-c-check__label"> <label class="pf-c-check__label">
${t`Sync users`} ${t`Sync users`}
</label> </label>
@ -77,7 +72,7 @@ export class LDAPSourceForm extends Form<LDAPSource> {
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal name="syncUsersPassword"> <ak-form-element-horizontal name="syncUsersPassword">
<div class="pf-c-check"> <div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.source?.syncUsersPassword, true)}> <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.syncUsersPassword, true)}>
<label class="pf-c-check__label"> <label class="pf-c-check__label">
${t`User password writeback`} ${t`User password writeback`}
</label> </label>
@ -86,7 +81,7 @@ export class LDAPSourceForm extends Form<LDAPSource> {
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal name="syncGroups"> <ak-form-element-horizontal name="syncGroups">
<div class="pf-c-check"> <div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.source?.syncGroups, true)}> <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.syncGroups, true)}>
<label class="pf-c-check__label"> <label class="pf-c-check__label">
${t`Sync groups`} ${t`Sync groups`}
</label> </label>
@ -101,11 +96,11 @@ export class LDAPSourceForm extends Form<LDAPSource> {
label=${t`Server URI`} label=${t`Server URI`}
?required=${true} ?required=${true}
name="serverUri"> name="serverUri">
<input type="text" value="${ifDefined(this.source?.serverUri)}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.serverUri)}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal name="startTls"> <ak-form-element-horizontal name="startTls">
<div class="pf-c-check"> <div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.source?.startTls, true)}> <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.startTls, true)}>
<label class="pf-c-check__label"> <label class="pf-c-check__label">
${t`Enable StartTLS`} ${t`Enable StartTLS`}
</label> </label>
@ -115,20 +110,20 @@ export class LDAPSourceForm extends Form<LDAPSource> {
label=${t`Bind CN`} label=${t`Bind CN`}
?required=${true} ?required=${true}
name="bindCn"> name="bindCn">
<input type="text" value="${ifDefined(this.source?.bindCn)}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.bindCn)}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Bind Password`} label=${t`Bind Password`}
?required=${true} ?required=${true}
?writeOnly=${this.source !== undefined} ?writeOnly=${this.instance !== undefined}
name="bindPassword"> name="bindPassword">
<input type="text" value="${ifDefined(this.source?.bindPassword)}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.bindPassword)}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Base DN`} label=${t`Base DN`}
?required=${true} ?required=${true}
name="baseDn"> name="baseDn">
<input type="text" value="${ifDefined(this.source?.baseDn)}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.baseDn)}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
</div> </div>
</ak-form-group> </ak-form-group>
@ -147,10 +142,10 @@ export class LDAPSourceForm extends Form<LDAPSource> {
}).then(mappings => { }).then(mappings => {
return mappings.results.map(mapping => { return mappings.results.map(mapping => {
let selected = false; let selected = false;
if (!this.source?.propertyMappings) { if (!this.instance?.propertyMappings) {
selected = mapping.managed?.startsWith("goauthentik.io/sources/ldap/default") || mapping.managed?.startsWith("goauthentik.io/sources/ldap/ms") || false; selected = mapping.managed?.startsWith("goauthentik.io/sources/ldap/default") || mapping.managed?.startsWith("goauthentik.io/sources/ldap/ms") || false;
} else { } else {
selected = Array.from(this.source?.propertyMappings).some(su => { selected = Array.from(this.instance?.propertyMappings).some(su => {
return su == mapping.pk; return su == mapping.pk;
}); });
} }
@ -171,10 +166,10 @@ export class LDAPSourceForm extends Form<LDAPSource> {
}).then(mappings => { }).then(mappings => {
return mappings.results.map(mapping => { return mappings.results.map(mapping => {
let selected = false; let selected = false;
if (!this.source?.propertyMappingsGroup) { if (!this.instance?.propertyMappingsGroup) {
selected = mapping.managed === "goauthentik.io/sources/ldap/default-name"; selected = mapping.managed === "goauthentik.io/sources/ldap/default-name";
} else { } else {
selected = Array.from(this.source?.propertyMappingsGroup).some(su => { selected = Array.from(this.instance?.propertyMappingsGroup).some(su => {
return su == mapping.pk; return su == mapping.pk;
}); });
} }
@ -188,41 +183,41 @@ export class LDAPSourceForm extends Form<LDAPSource> {
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Addition User DN`} label=${t`Addition User DN`}
name="additionalUserDn"> name="additionalUserDn">
<input type="text" value="${ifDefined(this.source?.additionalUserDn)}" class="pf-c-form-control"> <input type="text" value="${ifDefined(this.instance?.additionalUserDn)}" class="pf-c-form-control">
<p class="pf-c-form__helper-text">${t`Additional user DN, prepended to the Base DN.`}</p> <p class="pf-c-form__helper-text">${t`Additional user DN, prepended to the Base DN.`}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Addition Group DN`} label=${t`Addition Group DN`}
name="additionalGroupDn"> name="additionalGroupDn">
<input type="text" value="${ifDefined(this.source?.additionalGroupDn)}" class="pf-c-form-control"> <input type="text" value="${ifDefined(this.instance?.additionalGroupDn)}" class="pf-c-form-control">
<p class="pf-c-form__helper-text">${t`Additional group DN, prepended to the Base DN.`}</p> <p class="pf-c-form__helper-text">${t`Additional group DN, prepended to the Base DN.`}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`User object filter`} label=${t`User object filter`}
?required=${true} ?required=${true}
name="userObjectFilter"> name="userObjectFilter">
<input type="text" value="${this.source?.userObjectFilter || "(objectClass=person)"}" class="pf-c-form-control" required> <input type="text" value="${this.instance?.userObjectFilter || "(objectClass=person)"}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`Consider Objects matching this filter to be Users.`}</p> <p class="pf-c-form__helper-text">${t`Consider Objects matching this filter to be Users.`}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Group object filter`} label=${t`Group object filter`}
?required=${true} ?required=${true}
name="groupObjectFilter"> name="groupObjectFilter">
<input type="text" value="${this.source?.groupObjectFilter || "(objectClass=group)"}" class="pf-c-form-control" required> <input type="text" value="${this.instance?.groupObjectFilter || "(objectClass=group)"}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`Consider Objects matching this filter to be Groups.`}</p> <p class="pf-c-form__helper-text">${t`Consider Objects matching this filter to be Groups.`}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Group membership field`} label=${t`Group membership field`}
?required=${true} ?required=${true}
name="groupMembershipField"> name="groupMembershipField">
<input type="text" value="${this.source?.groupMembershipField || "member"}" class="pf-c-form-control" required> <input type="text" value="${this.instance?.groupMembershipField || "member"}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`Field which contains members of a group.`}</p> <p class="pf-c-form__helper-text">${t`Field which contains members of a group.`}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Object uniqueness field`} label=${t`Object uniqueness field`}
?required=${true} ?required=${true}
name="objectUniquenessField"> name="objectUniquenessField">
<input type="text" value="${this.source?.objectUniquenessField || "objectSid"}" class="pf-c-form-control" required> <input type="text" value="${this.instance?.objectUniquenessField || "objectSid"}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`Field which contains a unique Identifier.`}</p> <p class="pf-c-form__helper-text">${t`Field which contains a unique Identifier.`}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
</div> </div>

2
web/src/pages/sources/ldap/LDAPSourceViewPage.ts
View File

@ -103,7 +103,7 @@ export class LDAPSourceViewPage extends LitElement {
</span> </span>
<ak-source-ldap-form <ak-source-ldap-form
slot="form" slot="form"
.sourceSlug=${this.source.slug}> .instancePk=${this.source.slug}>
</ak-source-ldap-form> </ak-source-ldap-form>
<button slot="trigger" class="pf-c-button pf-m-primary"> <button slot="trigger" class="pf-c-button pf-m-primary">
${t`Edit`} ${t`Edit`}

71
web/src/pages/sources/oauth/OAuthSourceForm.ts
View File

@ -3,32 +3,29 @@ import { t } from "@lingui/macro";
import { customElement, property } from "lit-element"; import { customElement, property } from "lit-element";
import { html, TemplateResult } from "lit-html"; import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../../api/Config"; import { DEFAULT_CONFIG } from "../../../api/Config";
import { Form } from "../../../elements/forms/Form";
import "../../../elements/forms/FormGroup"; import "../../../elements/forms/FormGroup";
import "../../../elements/forms/HorizontalFormElement"; import "../../../elements/forms/HorizontalFormElement";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import { until } from "lit-html/directives/until"; import { until } from "lit-html/directives/until";
import { first } from "../../../utils"; import { first } from "../../../utils";
import { AppURLManager } from "../../../api/legacy"; import { AppURLManager } from "../../../api/legacy";
import { ModelForm } from "../../../elements/forms/ModelForm";
@customElement("ak-source-oauth-form") @customElement("ak-source-oauth-form")
export class OAuthSourceForm extends Form<OAuthSource> { export class OAuthSourceForm extends ModelForm<OAuthSource, string> {
set sourceSlug(value: string) { loadInstance(pk: string): Promise<OAuthSource> {
new SourcesApi(DEFAULT_CONFIG).sourcesOauthRead({ return new SourcesApi(DEFAULT_CONFIG).sourcesOauthRead({
slug: value, slug: pk,
}).then(source => { }).then(source => {
this.source = source;
this.showUrlOptions = first(source.type?.urlsCustomizable, false); this.showUrlOptions = first(source.type?.urlsCustomizable, false);
return source;
}); });
} }
@property() @property()
modelName?: string; modelName?: string;
@property({attribute: false})
source?: OAuthSource;
@property({type: Boolean}) @property({type: Boolean})
showUrlOptions = false; showUrlOptions = false;
@ -36,7 +33,7 @@ export class OAuthSourceForm extends Form<OAuthSource> {
showRequestTokenURL = false; showRequestTokenURL = false;
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.source) { if (this.instance) {
return t`Successfully updated source.`; return t`Successfully updated source.`;
} else { } else {
return t`Successfully created source.`; return t`Successfully created source.`;
@ -44,9 +41,9 @@ export class OAuthSourceForm extends Form<OAuthSource> {
} }
send = (data: OAuthSource): Promise<OAuthSource> => { send = (data: OAuthSource): Promise<OAuthSource> => {
if (this.source) { if (this.instance) {
return new SourcesApi(DEFAULT_CONFIG).sourcesOauthUpdate({ return new SourcesApi(DEFAULT_CONFIG).sourcesOauthUpdate({
slug: this.source.slug, slug: this.instance.slug,
data: data data: data
}); });
} else { } else {
@ -70,27 +67,27 @@ export class OAuthSourceForm extends Form<OAuthSource> {
label=${t`Authorization URL`} label=${t`Authorization URL`}
?required=${true} ?required=${true}
name="authorizationUrl"> name="authorizationUrl">
<input type="text" value="${first(this.source?.authorizationUrl, "")}" class="pf-c-form-control" required> <input type="text" value="${first(this.instance?.authorizationUrl, "")}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`URL the user is redirect to to consent the authorization.`}</p> <p class="pf-c-form__helper-text">${t`URL the user is redirect to to consent the authorization.`}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Access token URL`} label=${t`Access token URL`}
?required=${true} ?required=${true}
name="accessTokenUrl"> name="accessTokenUrl">
<input type="text" value="${first(this.source?.accessTokenUrl, "")}" class="pf-c-form-control" required> <input type="text" value="${first(this.instance?.accessTokenUrl, "")}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`URL used by authentik to retrieve tokens.`}</p> <p class="pf-c-form__helper-text">${t`URL used by authentik to retrieve tokens.`}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Profile URL`} label=${t`Profile URL`}
?required=${true} ?required=${true}
name="profileUrl"> name="profileUrl">
<input type="text" value="${first(this.source?.profileUrl, "")}" class="pf-c-form-control" required> <input type="text" value="${first(this.instance?.profileUrl, "")}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`URL used by authentik to get user information.`}</p> <p class="pf-c-form__helper-text">${t`URL used by authentik to get user information.`}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
${this.showRequestTokenURL ? html`<ak-form-element-horizontal ${this.showRequestTokenURL ? html`<ak-form-element-horizontal
label=${t`Request token URL`} label=${t`Request token URL`}
name="requestTokenUrl"> name="requestTokenUrl">
<input type="text" value="${first(this.source?.requestTokenUrl, "")}" class="pf-c-form-control"> <input type="text" value="${first(this.instance?.requestTokenUrl, "")}" class="pf-c-form-control">
<p class="pf-c-form__helper-text">${t`URL used to request the initial token. This URL is only required for OAuth 1.`}</p> <p class="pf-c-form__helper-text">${t`URL used to request the initial token. This URL is only required for OAuth 1.`}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
` : html``} ` : html``}
@ -112,13 +109,13 @@ export class OAuthSourceForm extends Form<OAuthSource> {
label=${t`Name`} label=${t`Name`}
?required=${true} ?required=${true}
name="name"> name="name">
<input type="text" value="${ifDefined(this.source?.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>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Slug`} label=${t`Slug`}
?required=${true} ?required=${true}
name="slug"> name="slug">
<input type="text" value="${ifDefined(this.source?.slug)}" class="pf-c-form-control" required @input=${(ev: Event) => { <input type="text" value="${ifDefined(this.instance?.slug)}" class="pf-c-form-control" required @input=${(ev: Event) => {
const current = (ev.target as HTMLInputElement).value; const current = (ev.target as HTMLInputElement).value;
const label = this.shadowRoot?.querySelector<HTMLSpanElement>("#callback-url"); const label = this.shadowRoot?.querySelector<HTMLSpanElement>("#callback-url");
if (!label) return; if (!label) return;
@ -126,12 +123,12 @@ export class OAuthSourceForm extends Form<OAuthSource> {
}}> }}>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Use this redirect URL:`} ${t`Use this redirect URL:`}
<span id="callback-url">${this.getRedirectURI(this.source?.slug)}</span> <span id="callback-url">${this.getRedirectURI(this.instance?.slug)}</span>
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal name="enabled"> <ak-form-element-horizontal name="enabled">
<div class="pf-c-check"> <div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.source?.enabled, true)}> <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.enabled, true)}>
<label class="pf-c-check__label"> <label class="pf-c-check__label">
${t`Enabled`} ${t`Enabled`}
</label> </label>
@ -142,19 +139,19 @@ export class OAuthSourceForm extends Form<OAuthSource> {
?required=${true} ?required=${true}
name="userMatchingMode"> name="userMatchingMode">
<select class="pf-c-form-control"> <select class="pf-c-form-control">
<option value=${OAuthSourceUserMatchingModeEnum.Identifier} ?selected=${this.source?.userMatchingMode === OAuthSourceUserMatchingModeEnum.Identifier}> <option value=${OAuthSourceUserMatchingModeEnum.Identifier} ?selected=${this.instance?.userMatchingMode === OAuthSourceUserMatchingModeEnum.Identifier}>
${t`Link users on unique identifier`} ${t`Link users on unique identifier`}
</option> </option>
<option value=${OAuthSourceUserMatchingModeEnum.UsernameLink} ?selected=${this.source?.userMatchingMode === OAuthSourceUserMatchingModeEnum.UsernameLink}> <option value=${OAuthSourceUserMatchingModeEnum.UsernameLink} ?selected=${this.instance?.userMatchingMode === OAuthSourceUserMatchingModeEnum.UsernameLink}>
${t`Link to a user with identical email address. Can have security implications when a source doesn't validate email addresses`} ${t`Link to a user with identical email address. Can have security implications when a source doesn't validate email addresses`}
</option> </option>
<option value=${OAuthSourceUserMatchingModeEnum.UsernameDeny} ?selected=${this.source?.userMatchingMode === OAuthSourceUserMatchingModeEnum.UsernameDeny}> <option value=${OAuthSourceUserMatchingModeEnum.UsernameDeny} ?selected=${this.instance?.userMatchingMode === OAuthSourceUserMatchingModeEnum.UsernameDeny}>
${t`Use the user's email address, but deny enrollment when the email address already exists.`} ${t`Use the user's email address, but deny enrollment when the email address already exists.`}
</option> </option>
<option value=${OAuthSourceUserMatchingModeEnum.EmailLink} ?selected=${this.source?.userMatchingMode === OAuthSourceUserMatchingModeEnum.EmailLink}> <option value=${OAuthSourceUserMatchingModeEnum.EmailLink} ?selected=${this.instance?.userMatchingMode === OAuthSourceUserMatchingModeEnum.EmailLink}>
${t`Link to a user with identical username address. Can have security implications when a username is used with another source.`} ${t`Link to a user with identical username address. Can have security implications when a username is used with another source.`}
</option> </option>
<option value=${OAuthSourceUserMatchingModeEnum.EmailDeny} ?selected=${this.source?.userMatchingMode === OAuthSourceUserMatchingModeEnum.EmailDeny}> <option value=${OAuthSourceUserMatchingModeEnum.EmailDeny} ?selected=${this.instance?.userMatchingMode === OAuthSourceUserMatchingModeEnum.EmailDeny}>
${t`Use the user's username, but deny enrollment when the username already exists.`} ${t`Use the user's username, but deny enrollment when the username already exists.`}
</option> </option>
</select> </select>
@ -169,14 +166,14 @@ export class OAuthSourceForm extends Form<OAuthSource> {
label=${t`Consumer key`} label=${t`Consumer key`}
?required=${true} ?required=${true}
name="consumerKey"> name="consumerKey">
<input type="text" value="${ifDefined(this.source?.consumerKey)}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.consumerKey)}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Consumer secret`} label=${t`Consumer secret`}
?required=${true} ?required=${true}
?writeOnly=${this.source !== undefined} ?writeOnly=${this.instance !== undefined}
name="consumerSecret"> name="consumerSecret">
<input type="text" value="${ifDefined(this.source?.consumerSecret)}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.consumerSecret)}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Provider type`} label=${t`Provider type`}
@ -194,15 +191,15 @@ export class OAuthSourceForm extends Form<OAuthSource> {
} else { } else {
this.showRequestTokenURL = false; this.showRequestTokenURL = false;
} }
if (!this.source) { if (!this.instance) {
this.source = {} as OAuthSource; this.instance = {} as OAuthSource;
} }
this.source.providerType = selected.value; this.instance.providerType = selected.value;
}}> }}>
${until(new SourcesApi(DEFAULT_CONFIG).sourcesOauthSourceTypes().then(types => { ${until(new SourcesApi(DEFAULT_CONFIG).sourcesOauthSourceTypes().then(types => {
return types.map(type => { return types.map(type => {
let selected = this.source?.providerType === type.slug; let selected = this.instance?.providerType === type.slug;
if (!this.source?.pk) { if (!this.instance?.pk) {
if (this.modelName?.replace("oauthsource", "") === type.slug) { if (this.modelName?.replace("oauthsource", "") === type.slug) {
selected = true; selected = true;
} }
@ -236,8 +233,8 @@ export class OAuthSourceForm extends Form<OAuthSource> {
designation: FlowDesignationEnum.Authentication, designation: FlowDesignationEnum.Authentication,
}).then(flows => { }).then(flows => {
return flows.results.map(flow => { return flows.results.map(flow => {
let selected = this.source?.authenticationFlow === flow.pk; let selected = this.instance?.authenticationFlow === flow.pk;
if (!this.source?.pk && !this.source?.authenticationFlow && flow.slug === "default-source-authentication") { if (!this.instance?.pk && !this.instance?.authenticationFlow && flow.slug === "default-source-authentication") {
selected = true; selected = true;
} }
return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`; return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`;
@ -256,8 +253,8 @@ export class OAuthSourceForm extends Form<OAuthSource> {
designation: FlowDesignationEnum.Enrollment, designation: FlowDesignationEnum.Enrollment,
}).then(flows => { }).then(flows => {
return flows.results.map(flow => { return flows.results.map(flow => {
let selected = this.source?.enrollmentFlow === flow.pk; let selected = this.instance?.enrollmentFlow === flow.pk;
if (!this.source?.pk && !this.source?.enrollmentFlow && flow.slug === "default-source-enrollment") { if (!this.instance?.pk && !this.instance?.enrollmentFlow && flow.slug === "default-source-enrollment") {
selected = true; selected = true;
} }
return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`; return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`;

2
web/src/pages/sources/oauth/OAuthSourceViewPage.ts
View File

@ -122,7 +122,7 @@ export class OAuthSourceViewPage extends LitElement {
</span> </span>
<ak-source-oauth-form <ak-source-oauth-form
slot="form" slot="form"
.sourceSlug=${this.source.slug}> .instancePk=${this.source.slug}>
</ak-source-oauth-form> </ak-source-oauth-form>
<button slot="trigger" class="pf-c-button pf-m-primary"> <button slot="trigger" class="pf-c-button pf-m-primary">
${t`Edit`} ${t`Edit`}

56
web/src/pages/sources/plex/PlexSourceForm.ts
View File

@ -10,26 +10,22 @@ import { ifDefined } from "lit-html/directives/if-defined";
import { until } from "lit-html/directives/until"; import { until } from "lit-html/directives/until";
import { first, randomString } from "../../../utils"; import { first, randomString } from "../../../utils";
import { PlexAPIClient, PlexResource, popupCenterScreen} from "../../../flows/sources/plex/API"; import { PlexAPIClient, PlexResource, popupCenterScreen} from "../../../flows/sources/plex/API";
import { ModelForm } from "../../../elements/forms/ModelForm";
@customElement("ak-source-plex-form") @customElement("ak-source-plex-form")
export class PlexSourceForm extends Form<PlexSource> { export class PlexSourceForm extends ModelForm<PlexSource, string> {
set sourceSlug(value: string) { loadInstance(pk: string): Promise<PlexSource> {
new SourcesApi(DEFAULT_CONFIG).sourcesPlexRead({ return new SourcesApi(DEFAULT_CONFIG).sourcesPlexRead({
slug: value, slug: pk,
}).then(source => { }).then(source => {
this.source = source;
this.plexToken = source.plexToken; this.plexToken = source.plexToken;
this.loadServers(); this.loadServers();
return source;
}); });
} }
@property({attribute: false})
source: PlexSource = {
clientId: randomString(40)
} as PlexSource;
@property() @property()
plexToken?: string; plexToken?: string;
@ -37,7 +33,7 @@ export class PlexSourceForm extends Form<PlexSource> {
plexResources?: PlexResource[]; plexResources?: PlexResource[];
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.source) { if (this.instance) {
return t`Successfully updated source.`; return t`Successfully updated source.`;
} else { } else {
return t`Successfully created source.`; return t`Successfully created source.`;
@ -46,9 +42,9 @@ export class PlexSourceForm extends Form<PlexSource> {
send = (data: PlexSource): Promise<PlexSource> => { send = (data: PlexSource): Promise<PlexSource> => {
data.plexToken = this.plexToken; data.plexToken = this.plexToken;
if (this.source.slug) { if (this.instance?.slug) {
return new SourcesApi(DEFAULT_CONFIG).sourcesPlexUpdate({ return new SourcesApi(DEFAULT_CONFIG).sourcesPlexUpdate({
slug: this.source.slug, slug: this.instance.slug,
data: data data: data
}); });
} else { } else {
@ -59,9 +55,9 @@ export class PlexSourceForm extends Form<PlexSource> {
}; };
async doAuth(): Promise<void> { async doAuth(): Promise<void> {
const authInfo = await PlexAPIClient.getPin(this.source?.clientId || ""); const authInfo = await PlexAPIClient.getPin(this.instance?.clientId || "");
const authWindow = popupCenterScreen(authInfo.authUrl, "plex auth", 550, 700); const authWindow = popupCenterScreen(authInfo.authUrl, "plex auth", 550, 700);
PlexAPIClient.pinPoll(this.source?.clientId || "", authInfo.pin.id).then(token => { PlexAPIClient.pinPoll(this.instance?.clientId || "", authInfo.pin.id).then(token => {
authWindow?.close(); authWindow?.close();
this.plexToken = token; this.plexToken = token;
this.loadServers(); this.loadServers();
@ -81,17 +77,17 @@ export class PlexSourceForm extends Form<PlexSource> {
label=${t`Name`} label=${t`Name`}
?required=${true} ?required=${true}
name="name"> name="name">
<input type="text" value="${ifDefined(this.source?.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>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Slug`} label=${t`Slug`}
?required=${true} ?required=${true}
name="slug"> name="slug">
<input type="text" value="${ifDefined(this.source?.slug)}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.slug)}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal name="enabled"> <ak-form-element-horizontal name="enabled">
<div class="pf-c-check"> <div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.source?.enabled, true)}> <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.enabled, true)}>
<label class="pf-c-check__label"> <label class="pf-c-check__label">
${t`Enabled`} ${t`Enabled`}
</label> </label>
@ -102,19 +98,19 @@ export class PlexSourceForm extends Form<PlexSource> {
?required=${true} ?required=${true}
name="userMatchingMode"> name="userMatchingMode">
<select class="pf-c-form-control"> <select class="pf-c-form-control">
<option value=${PlexSourceUserMatchingModeEnum.Identifier} ?selected=${this.source?.userMatchingMode === PlexSourceUserMatchingModeEnum.Identifier}> <option value=${PlexSourceUserMatchingModeEnum.Identifier} ?selected=${this.instance?.userMatchingMode === PlexSourceUserMatchingModeEnum.Identifier}>
${t`Link users on unique identifier`} ${t`Link users on unique identifier`}
</option> </option>
<option value=${PlexSourceUserMatchingModeEnum.UsernameLink} ?selected=${this.source?.userMatchingMode === PlexSourceUserMatchingModeEnum.UsernameLink}> <option value=${PlexSourceUserMatchingModeEnum.UsernameLink} ?selected=${this.instance?.userMatchingMode === PlexSourceUserMatchingModeEnum.UsernameLink}>
${t`Link to a user with identical email address. Can have security implications when a source doesn't validate email addresses`} ${t`Link to a user with identical email address. Can have security implications when a source doesn't validate email addresses`}
</option> </option>
<option value=${PlexSourceUserMatchingModeEnum.UsernameDeny} ?selected=${this.source?.userMatchingMode === PlexSourceUserMatchingModeEnum.UsernameDeny}> <option value=${PlexSourceUserMatchingModeEnum.UsernameDeny} ?selected=${this.instance?.userMatchingMode === PlexSourceUserMatchingModeEnum.UsernameDeny}>
${t`Use the user's email address, but deny enrollment when the email address already exists.`} ${t`Use the user's email address, but deny enrollment when the email address already exists.`}
</option> </option>
<option value=${PlexSourceUserMatchingModeEnum.EmailLink} ?selected=${this.source?.userMatchingMode === PlexSourceUserMatchingModeEnum.EmailLink}> <option value=${PlexSourceUserMatchingModeEnum.EmailLink} ?selected=${this.instance?.userMatchingMode === PlexSourceUserMatchingModeEnum.EmailLink}>
${t`Link to a user with identical username address. Can have security implications when a username is used with another source.`} ${t`Link to a user with identical username address. Can have security implications when a username is used with another source.`}
</option> </option>
<option value=${PlexSourceUserMatchingModeEnum.EmailDeny} ?selected=${this.source?.userMatchingMode === PlexSourceUserMatchingModeEnum.EmailDeny}> <option value=${PlexSourceUserMatchingModeEnum.EmailDeny} ?selected=${this.instance?.userMatchingMode === PlexSourceUserMatchingModeEnum.EmailDeny}>
${t`Use the user's username, but deny enrollment when the username already exists.`} ${t`Use the user's username, but deny enrollment when the username already exists.`}
</option> </option>
</select> </select>
@ -129,11 +125,11 @@ export class PlexSourceForm extends Form<PlexSource> {
label=${t`Client ID`} label=${t`Client ID`}
?required=${true} ?required=${true}
name="clientId"> name="clientId">
<input type="text" value="${first(this.source?.clientId)}" class="pf-c-form-control" required> <input type="text" value="${first(this.instance?.clientId)}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal name="allowFriends"> <ak-form-element-horizontal name="allowFriends">
<div class="pf-c-check"> <div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.source?.allowFriends, true)}> <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.allowFriends, true)}>
<label class="pf-c-check__label"> <label class="pf-c-check__label">
${t`Allow friends to authenticate via Plex, even if you don't share any servers`} ${t`Allow friends to authenticate via Plex, even if you don't share any servers`}
</label> </label>
@ -145,7 +141,7 @@ export class PlexSourceForm extends Form<PlexSource> {
name="allowedServers"> name="allowedServers">
<select class="pf-c-form-control" multiple> <select class="pf-c-form-control" multiple>
${this.plexResources?.map(r => { ${this.plexResources?.map(r => {
const selected = Array.from(this.source?.allowedServers || []).some(server => { const selected = Array.from(this.instance?.allowedServers || []).some(server => {
return server == r.clientIdentifier; return server == r.clientIdentifier;
}); });
return html`<option value=${r.clientIdentifier} ?selected=${selected}>${r.name}</option>`; return html`<option value=${r.clientIdentifier} ?selected=${selected}>${r.name}</option>`;
@ -178,8 +174,8 @@ export class PlexSourceForm extends Form<PlexSource> {
designation: FlowDesignationEnum.Authentication, designation: FlowDesignationEnum.Authentication,
}).then(flows => { }).then(flows => {
return flows.results.map(flow => { return flows.results.map(flow => {
let selected = this.source?.authenticationFlow === flow.pk; let selected = this.instance?.authenticationFlow === flow.pk;
if (!this.source?.pk && !this.source?.authenticationFlow && flow.slug === "default-source-authentication") { if (!this.instance?.pk && !this.instance?.authenticationFlow && flow.slug === "default-source-authentication") {
selected = true; selected = true;
} }
return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`; return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`;
@ -198,8 +194,8 @@ export class PlexSourceForm extends Form<PlexSource> {
designation: FlowDesignationEnum.Enrollment, designation: FlowDesignationEnum.Enrollment,
}).then(flows => { }).then(flows => {
return flows.results.map(flow => { return flows.results.map(flow => {
let selected = this.source?.enrollmentFlow === flow.pk; let selected = this.instance?.enrollmentFlow === flow.pk;
if (!this.source?.pk && !this.source?.enrollmentFlow && flow.slug === "default-source-enrollment") { if (!this.instance?.pk && !this.instance?.enrollmentFlow && flow.slug === "default-source-enrollment") {
selected = true; selected = true;
} }
return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`; return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`;

2
web/src/pages/sources/plex/PlexSourceViewPage.ts
View File

@ -82,7 +82,7 @@ export class PlexSourceViewPage extends LitElement {
</span> </span>
<ak-source-plex-form <ak-source-plex-form
slot="form" slot="form"
.sourceSlug=${this.source.slug}> .instancePk=${this.source.slug}>
</ak-source-plex-form> </ak-source-plex-form>
<button slot="trigger" class="pf-c-button pf-m-primary"> <button slot="trigger" class="pf-c-button pf-m-primary">
${t`Edit`} ${t`Edit`}

86
web/src/pages/sources/saml/SAMLSourceForm.ts
View File

@ -9,23 +9,19 @@ import "../../../elements/forms/HorizontalFormElement";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import { until } from "lit-html/directives/until"; import { until } from "lit-html/directives/until";
import { first } from "../../../utils"; import { first } from "../../../utils";
import { ModelForm } from "../../../elements/forms/ModelForm";
@customElement("ak-source-saml-form") @customElement("ak-source-saml-form")
export class SAMLSourceForm extends Form<SAMLSource> { export class SAMLSourceForm extends ModelForm<SAMLSource, string> {
set sourceSlug(value: string) { loadInstance(pk: string): Promise<SAMLSource> {
new SourcesApi(DEFAULT_CONFIG).sourcesSamlRead({ return new SourcesApi(DEFAULT_CONFIG).sourcesSamlRead({
slug: value, slug: pk,
}).then(source => {
this.source = source;
}); });
} }
@property({attribute: false})
source?: SAMLSource;
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.source) { if (this.instance) {
return t`Successfully updated source.`; return t`Successfully updated source.`;
} else { } else {
return t`Successfully created source.`; return t`Successfully created source.`;
@ -33,9 +29,9 @@ export class SAMLSourceForm extends Form<SAMLSource> {
} }
send = (data: SAMLSource): Promise<SAMLSource> => { send = (data: SAMLSource): Promise<SAMLSource> => {
if (this.source) { if (this.instance) {
return new SourcesApi(DEFAULT_CONFIG).sourcesSamlUpdate({ return new SourcesApi(DEFAULT_CONFIG).sourcesSamlUpdate({
slug: this.source.slug, slug: this.instance.slug,
data: data data: data
}); });
} else { } else {
@ -51,17 +47,17 @@ export class SAMLSourceForm extends Form<SAMLSource> {
label=${t`Name`} label=${t`Name`}
?required=${true} ?required=${true}
name="name"> name="name">
<input type="text" value="${ifDefined(this.source?.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>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Slug`} label=${t`Slug`}
?required=${true} ?required=${true}
name="slug"> name="slug">
<input type="text" value="${ifDefined(this.source?.slug)}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.slug)}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal name="enabled"> <ak-form-element-horizontal name="enabled">
<div class="pf-c-check"> <div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.source?.enabled, true)}> <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.enabled, true)}>
<label class="pf-c-check__label"> <label class="pf-c-check__label">
${t`Enabled`} ${t`Enabled`}
</label> </label>
@ -77,19 +73,19 @@ export class SAMLSourceForm extends Form<SAMLSource> {
label=${t`SSO URL`} label=${t`SSO URL`}
?required=${true} ?required=${true}
name="ssoUrl"> name="ssoUrl">
<input type="text" value="${ifDefined(this.source?.ssoUrl)}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.ssoUrl)}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`URL that the initial Login request is sent to.`}</p> <p class="pf-c-form__helper-text">${t`URL that the initial Login request is sent to.`}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`SLO URL`} label=${t`SLO URL`}
name="sloUrl"> name="sloUrl">
<input type="text" value="${ifDefined(this.source?.sloUrl || "")}" class="pf-c-form-control"> <input type="text" value="${ifDefined(this.instance?.sloUrl || "")}" class="pf-c-form-control">
<p class="pf-c-form__helper-text">${t`Optional URL if the IDP supports Single-Logout.`}</p> <p class="pf-c-form__helper-text">${t`Optional URL if the IDP supports Single-Logout.`}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Issuer`} label=${t`Issuer`}
name="issuer"> name="issuer">
<input type="text" value="${ifDefined(this.source?.issuer)}" class="pf-c-form-control"> <input type="text" value="${ifDefined(this.instance?.issuer)}" class="pf-c-form-control">
<p class="pf-c-form__helper-text">${t`Also known as Entity ID. Defaults the Metadata URL.`}</p> <p class="pf-c-form__helper-text">${t`Also known as Entity ID. Defaults the Metadata URL.`}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
@ -97,13 +93,13 @@ export class SAMLSourceForm extends Form<SAMLSource> {
?required=${true} ?required=${true}
name="bindingType"> name="bindingType">
<select class="pf-c-form-control"> <select class="pf-c-form-control">
<option value=${SAMLSourceBindingTypeEnum.Redirect} ?selected=${this.source?.bindingType === SAMLSourceBindingTypeEnum.Redirect}> <option value=${SAMLSourceBindingTypeEnum.Redirect} ?selected=${this.instance?.bindingType === SAMLSourceBindingTypeEnum.Redirect}>
${t`Redirect binding`} ${t`Redirect binding`}
</option> </option>
<option value=${SAMLSourceBindingTypeEnum.PostAuto} ?selected=${this.source?.bindingType === SAMLSourceBindingTypeEnum.PostAuto}> <option value=${SAMLSourceBindingTypeEnum.PostAuto} ?selected=${this.instance?.bindingType === SAMLSourceBindingTypeEnum.PostAuto}>
${t`Post binding (auto-submit)`} ${t`Post binding (auto-submit)`}
</option> </option>
<option value=${SAMLSourceBindingTypeEnum.Post} ?selected=${this.source?.bindingType === SAMLSourceBindingTypeEnum.Post}> <option value=${SAMLSourceBindingTypeEnum.Post} ?selected=${this.instance?.bindingType === SAMLSourceBindingTypeEnum.Post}>
${t`Post binding`} ${t`Post binding`}
</option> </option>
</select> </select>
@ -112,12 +108,12 @@ export class SAMLSourceForm extends Form<SAMLSource> {
label=${t`Signing keypair`} label=${t`Signing keypair`}
name="signingKp"> name="signingKp">
<select class="pf-c-form-control"> <select class="pf-c-form-control">
<option value="" ?selected=${this.source?.signingKp === undefined}>---------</option> <option value="" ?selected=${this.instance?.signingKp === undefined}>---------</option>
${until(new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsList({ ${until(new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsList({
ordering: "pk", ordering: "pk",
}).then(keys => { }).then(keys => {
return keys.results.map(key => { return keys.results.map(key => {
return html`<option value=${ifDefined(key.pk)} ?selected=${this.source?.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>`)} }), html`<option>${t`Loading...`}</option>`)}
</select> </select>
@ -132,7 +128,7 @@ export class SAMLSourceForm extends Form<SAMLSource> {
<div slot="body" class="pf-c-form"> <div slot="body" class="pf-c-form">
<ak-form-element-horizontal name="allowIdpInitiated"> <ak-form-element-horizontal name="allowIdpInitiated">
<div class="pf-c-check"> <div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.source?.allowIdpInitiated, false)}> <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.allowIdpInitiated, false)}>
<label class="pf-c-check__label"> <label class="pf-c-check__label">
${t` Allow IDP-initiated logins`} ${t` Allow IDP-initiated logins`}
</label> </label>
@ -144,19 +140,19 @@ export class SAMLSourceForm extends Form<SAMLSource> {
?required=${true} ?required=${true}
name="nameIdPolicy"> name="nameIdPolicy">
<select class="pf-c-form-control"> <select class="pf-c-form-control">
<option value=${SAMLSourceNameIdPolicyEnum._20nameidFormatpersistent} ?selected=${this.source?.nameIdPolicy === SAMLSourceNameIdPolicyEnum._20nameidFormatpersistent}> <option value=${SAMLSourceNameIdPolicyEnum._20nameidFormatpersistent} ?selected=${this.instance?.nameIdPolicy === SAMLSourceNameIdPolicyEnum._20nameidFormatpersistent}>
${t`Persistent`} ${t`Persistent`}
</option> </option>
<option value=${SAMLSourceNameIdPolicyEnum._11nameidFormatemailAddress} ?selected=${this.source?.nameIdPolicy === SAMLSourceNameIdPolicyEnum._11nameidFormatemailAddress}> <option value=${SAMLSourceNameIdPolicyEnum._11nameidFormatemailAddress} ?selected=${this.instance?.nameIdPolicy === SAMLSourceNameIdPolicyEnum._11nameidFormatemailAddress}>
${t`Email address`} ${t`Email address`}
</option> </option>
<option value=${SAMLSourceNameIdPolicyEnum._20nameidFormatWindowsDomainQualifiedName} ?selected=${this.source?.nameIdPolicy === SAMLSourceNameIdPolicyEnum._20nameidFormatWindowsDomainQualifiedName}> <option value=${SAMLSourceNameIdPolicyEnum._20nameidFormatWindowsDomainQualifiedName} ?selected=${this.instance?.nameIdPolicy === SAMLSourceNameIdPolicyEnum._20nameidFormatWindowsDomainQualifiedName}>
${t`Windows`} ${t`Windows`}
</option> </option>
<option value=${SAMLSourceNameIdPolicyEnum._20nameidFormatX509SubjectName} ?selected=${this.source?.nameIdPolicy === SAMLSourceNameIdPolicyEnum._20nameidFormatX509SubjectName}> <option value=${SAMLSourceNameIdPolicyEnum._20nameidFormatX509SubjectName} ?selected=${this.instance?.nameIdPolicy === SAMLSourceNameIdPolicyEnum._20nameidFormatX509SubjectName}>
${t`X509 Subject`} ${t`X509 Subject`}
</option> </option>
<option value=${SAMLSourceNameIdPolicyEnum._20nameidFormattransient} ?selected=${this.source?.nameIdPolicy === SAMLSourceNameIdPolicyEnum._20nameidFormattransient}> <option value=${SAMLSourceNameIdPolicyEnum._20nameidFormattransient} ?selected=${this.instance?.nameIdPolicy === SAMLSourceNameIdPolicyEnum._20nameidFormattransient}>
${t`Transient`} ${t`Transient`}
</option> </option>
</select> </select>
@ -165,7 +161,7 @@ export class SAMLSourceForm extends Form<SAMLSource> {
label=${t`Delete temporary users after`} label=${t`Delete temporary users after`}
?required=${true} ?required=${true}
name="temporaryUserDeleteAfter"> name="temporaryUserDeleteAfter">
<input type="text" value="${this.source?.temporaryUserDeleteAfter || "days=1"}" class="pf-c-form-control" required> <input type="text" value="${this.instance?.temporaryUserDeleteAfter || "days=1"}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`Time offset when temporary users should be deleted. This only applies if your IDP uses the NameID Format 'transient', and the user doesn't log out manually. (Format: hours=1;minutes=2;seconds=3).`}</p> <p class="pf-c-form__helper-text">${t`Time offset when temporary users should be deleted. This only applies if your IDP uses the NameID Format 'transient', and the user doesn't log out manually. (Format: hours=1;minutes=2;seconds=3).`}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
@ -173,16 +169,16 @@ export class SAMLSourceForm extends Form<SAMLSource> {
?required=${true} ?required=${true}
name="digestAlgorithm"> name="digestAlgorithm">
<select class="pf-c-form-control"> <select class="pf-c-form-control">
<option value=${SAMLSourceDigestAlgorithmEnum._200009Xmldsigsha1} ?selected=${this.source?.digestAlgorithm === SAMLSourceDigestAlgorithmEnum._200009Xmldsigsha1}> <option value=${SAMLSourceDigestAlgorithmEnum._200009Xmldsigsha1} ?selected=${this.instance?.digestAlgorithm === SAMLSourceDigestAlgorithmEnum._200009Xmldsigsha1}>
${t`SHA1`} ${t`SHA1`}
</option> </option>
<option value=${SAMLSourceDigestAlgorithmEnum._200104Xmlencsha256} ?selected=${this.source?.digestAlgorithm === SAMLSourceDigestAlgorithmEnum._200104Xmlencsha256 || this.source?.digestAlgorithm === undefined}> <option value=${SAMLSourceDigestAlgorithmEnum._200104Xmlencsha256} ?selected=${this.instance?.digestAlgorithm === SAMLSourceDigestAlgorithmEnum._200104Xmlencsha256 || this.instance?.digestAlgorithm === undefined}>
${t`SHA256`} ${t`SHA256`}
</option> </option>
<option value=${SAMLSourceDigestAlgorithmEnum._200104XmldsigMoresha384} ?selected=${this.source?.digestAlgorithm === SAMLSourceDigestAlgorithmEnum._200104XmldsigMoresha384}> <option value=${SAMLSourceDigestAlgorithmEnum._200104XmldsigMoresha384} ?selected=${this.instance?.digestAlgorithm === SAMLSourceDigestAlgorithmEnum._200104XmldsigMoresha384}>
${t`SHA384`} ${t`SHA384`}
</option> </option>
<option value=${SAMLSourceDigestAlgorithmEnum._200104Xmlencsha512} ?selected=${this.source?.digestAlgorithm === SAMLSourceDigestAlgorithmEnum._200104Xmlencsha512}> <option value=${SAMLSourceDigestAlgorithmEnum._200104Xmlencsha512} ?selected=${this.instance?.digestAlgorithm === SAMLSourceDigestAlgorithmEnum._200104Xmlencsha512}>
${t`SHA512`} ${t`SHA512`}
</option> </option>
</select> </select>
@ -192,19 +188,19 @@ export class SAMLSourceForm extends Form<SAMLSource> {
?required=${true} ?required=${true}
name="signatureAlgorithm"> name="signatureAlgorithm">
<select class="pf-c-form-control"> <select class="pf-c-form-control">
<option value=${SAMLSourceSignatureAlgorithmEnum._200009XmldsigrsaSha1} ?selected=${this.source?.signatureAlgorithm === SAMLSourceSignatureAlgorithmEnum._200009XmldsigrsaSha1}> <option value=${SAMLSourceSignatureAlgorithmEnum._200009XmldsigrsaSha1} ?selected=${this.instance?.signatureAlgorithm === SAMLSourceSignatureAlgorithmEnum._200009XmldsigrsaSha1}>
${t`RSA-SHA1`} ${t`RSA-SHA1`}
</option> </option>
<option value=${SAMLSourceSignatureAlgorithmEnum._200104XmldsigMorersaSha256} ?selected=${this.source?.signatureAlgorithm === SAMLSourceSignatureAlgorithmEnum._200104XmldsigMorersaSha256 || this.source?.signatureAlgorithm === undefined}> <option value=${SAMLSourceSignatureAlgorithmEnum._200104XmldsigMorersaSha256} ?selected=${this.instance?.signatureAlgorithm === SAMLSourceSignatureAlgorithmEnum._200104XmldsigMorersaSha256 || this.instance?.signatureAlgorithm === undefined}>
${t`RSA-SHA256`} ${t`RSA-SHA256`}
</option> </option>
<option value=${SAMLSourceSignatureAlgorithmEnum._200104XmldsigMorersaSha384} ?selected=${this.source?.signatureAlgorithm === SAMLSourceSignatureAlgorithmEnum._200104XmldsigMorersaSha384}> <option value=${SAMLSourceSignatureAlgorithmEnum._200104XmldsigMorersaSha384} ?selected=${this.instance?.signatureAlgorithm === SAMLSourceSignatureAlgorithmEnum._200104XmldsigMorersaSha384}>
${t`RSA-SHA384`} ${t`RSA-SHA384`}
</option> </option>
<option value=${SAMLSourceSignatureAlgorithmEnum._200104XmldsigMorersaSha512} ?selected=${this.source?.signatureAlgorithm === SAMLSourceSignatureAlgorithmEnum._200104XmldsigMorersaSha512}> <option value=${SAMLSourceSignatureAlgorithmEnum._200104XmldsigMorersaSha512} ?selected=${this.instance?.signatureAlgorithm === SAMLSourceSignatureAlgorithmEnum._200104XmldsigMorersaSha512}>
${t`RSA-SHA512`} ${t`RSA-SHA512`}
</option> </option>
<option value=${SAMLSourceSignatureAlgorithmEnum._200009XmldsigdsaSha1} ?selected=${this.source?.signatureAlgorithm === SAMLSourceSignatureAlgorithmEnum._200009XmldsigdsaSha1}> <option value=${SAMLSourceSignatureAlgorithmEnum._200009XmldsigdsaSha1} ?selected=${this.instance?.signatureAlgorithm === SAMLSourceSignatureAlgorithmEnum._200009XmldsigdsaSha1}>
${t`DSA-SHA1`} ${t`DSA-SHA1`}
</option> </option>
</select> </select>
@ -226,8 +222,8 @@ export class SAMLSourceForm extends Form<SAMLSource> {
designation: FlowDesignationEnum.StageConfiguration, designation: FlowDesignationEnum.StageConfiguration,
}).then(flows => { }).then(flows => {
return flows.results.map(flow => { return flows.results.map(flow => {
let selected = this.source?.preAuthenticationFlow === flow.pk; let selected = this.instance?.preAuthenticationFlow === flow.pk;
if (!this.source?.pk && !this.source?.preAuthenticationFlow && flow.slug === "default-source-pre-authentication") { if (!this.instance?.pk && !this.instance?.preAuthenticationFlow && flow.slug === "default-source-pre-authentication") {
selected = true; selected = true;
} }
return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`; return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`;
@ -246,8 +242,8 @@ export class SAMLSourceForm extends Form<SAMLSource> {
designation: FlowDesignationEnum.Authentication, designation: FlowDesignationEnum.Authentication,
}).then(flows => { }).then(flows => {
return flows.results.map(flow => { return flows.results.map(flow => {
let selected = this.source?.authenticationFlow === flow.pk; let selected = this.instance?.authenticationFlow === flow.pk;
if (!this.source?.pk && !this.source?.authenticationFlow && flow.slug === "default-source-authentication") { if (!this.instance?.pk && !this.instance?.authenticationFlow && flow.slug === "default-source-authentication") {
selected = true; selected = true;
} }
return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`; return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`;
@ -266,8 +262,8 @@ export class SAMLSourceForm extends Form<SAMLSource> {
designation: FlowDesignationEnum.Enrollment, designation: FlowDesignationEnum.Enrollment,
}).then(flows => { }).then(flows => {
return flows.results.map(flow => { return flows.results.map(flow => {
let selected = this.source?.enrollmentFlow === flow.pk; let selected = this.instance?.enrollmentFlow === flow.pk;
if (!this.source?.pk && !this.source?.enrollmentFlow && flow.slug === "default-source-enrollment") { if (!this.instance?.pk && !this.instance?.enrollmentFlow && flow.slug === "default-source-enrollment") {
selected = true; selected = true;
} }
return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`; return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`;

2
web/src/pages/sources/saml/SAMLSourceViewPage.ts
View File

@ -109,7 +109,7 @@ export class SAMLSourceViewPage extends LitElement {
</span> </span>
<ak-source-saml-form <ak-source-saml-form
slot="form" slot="form"
.sourceSlug=${this.source.slug}> .instancePk=${this.source.slug}>
</ak-source-saml-form> </ak-source-saml-form>
<button slot="trigger" class="pf-c-button pf-m-primary"> <button slot="trigger" class="pf-c-button pf-m-primary">
${t`Edit`} ${t`Edit`}