diff --git a/web/src/elements/forms/ModelForm.ts b/web/src/elements/forms/ModelForm.ts index 612fcab48..e5fd7fdef 100644 --- a/web/src/elements/forms/ModelForm.ts +++ b/web/src/elements/forms/ModelForm.ts @@ -2,11 +2,11 @@ import { property } from "lit-element"; import { EVENT_REFRESH } from "../../constants"; import { Form } from "./Form"; -export abstract class ModelForm extends Form { +export abstract class ModelForm extends Form { abstract loadInstance(pk: PKT): Promise; - @property() + @property({attribute: false}) set instancePk(value: PKT) { this._instancePk = value; this.loadInstance(value).then(instance => { diff --git a/web/src/pages/applications/ApplicationForm.ts b/web/src/pages/applications/ApplicationForm.ts index a169e0d94..74e117041 100644 --- a/web/src/pages/applications/ApplicationForm.ts +++ b/web/src/pages/applications/ApplicationForm.ts @@ -13,18 +13,22 @@ import "../../elements/forms/ModalForm"; import "../../elements/forms/HorizontalFormElement"; import "../../elements/forms/FormGroup"; import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css"; +import { ModelForm } from "../../elements/forms/ModelForm"; @customElement("ak-application-form") -export class ApplicationForm extends Form { +export class ApplicationForm extends ModelForm { - @property({ attribute: false }) - application?: Application; + loadInstance(pk: string): Promise { + return new CoreApi(DEFAULT_CONFIG).coreApplicationsRead({ + slug: pk + }); + } @property({ attribute: false }) provider?: number; getSuccessMessage(): string { - if (this.application) { + if (this.instance) { return t`Successfully updated application.`; } else { return t`Successfully created application.`; @@ -37,9 +41,9 @@ export class ApplicationForm extends Form { send = (data: Application): Promise => { let writeOp: Promise; - if (this.application) { + if (this.instance) { writeOp = new CoreApi(DEFAULT_CONFIG).coreApplicationsUpdate({ - slug: this.application.slug, + slug: this.instance.slug, data: data }); } else { @@ -72,7 +76,7 @@ export class ApplicationForm extends Form { ${Array.from(m).map(([group, providers]) => { return html` ${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``; })} `; @@ -86,21 +90,21 @@ export class ApplicationForm extends Form { label=${t`Name`} ?required=${true} name="name"> - +

${t`Application's display Name.`}

- +

${t`Internal application name, used in URLs.`}

- - @@ -158,23 +162,23 @@ export class ApplicationForm extends Form { - +

${t`If left empty, authentik will try to extract the launch URL based on the selected provider.`}

- + - + - + diff --git a/web/src/pages/applications/ApplicationListPage.ts b/web/src/pages/applications/ApplicationListPage.ts index 66177438d..3bdebecc8 100644 --- a/web/src/pages/applications/ApplicationListPage.ts +++ b/web/src/pages/applications/ApplicationListPage.ts @@ -89,7 +89,7 @@ export class ApplicationListPage extends TablePage { ${t`Update Application`} - +