From b4d750174f6d384f873055bdfe7b30af72ff7157 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Tue, 11 May 2021 11:48:34 +0200
Subject: [PATCH] web/admin: add modelform as base, start migrating

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/elements/forms/ModelForm.ts           |  4 +-
 web/src/pages/applications/ApplicationForm.ts | 36 ++++----
 .../pages/applications/ApplicationListPage.ts |  2 +-
 web/src/pages/outposts/OutpostForm.ts         | 35 ++++----
 web/src/pages/outposts/OutpostListPage.ts     |  2 +-
 .../PropertyMappingLDAPForm.ts                | 27 +++---
 .../PropertyMappingSAMLForm.ts                | 30 +++----
 .../PropertyMappingScopeForm.ts               | 29 +++----
 web/src/pages/providers/ProviderListPage.ts   |  2 +-
 .../pages/providers/ldap/LDAPProviderForm.ts  | 31 +++----
 .../providers/ldap/LDAPProviderViewPage.ts    |  2 +-
 .../providers/oauth2/OAuth2ProviderForm.ts    | 65 +++++++-------
 .../oauth2/OAuth2ProviderViewPage.ts          |  2 +-
 .../providers/proxy/ProxyProviderForm.ts      | 43 +++++-----
 .../providers/proxy/ProxyProviderViewPage.ts  |  2 +-
 .../pages/providers/saml/SAMLProviderForm.ts  | 76 ++++++++--------
 .../providers/saml/SAMLProviderViewPage.ts    |  2 +-
 web/src/pages/sources/SourcesListPage.ts      |  2 +-
 web/src/pages/sources/ldap/LDAPSourceForm.ts  | 67 +++++++--------
 .../pages/sources/ldap/LDAPSourceViewPage.ts  |  2 +-
 .../pages/sources/oauth/OAuthSourceForm.ts    | 71 ++++++++-------
 .../sources/oauth/OAuthSourceViewPage.ts      |  2 +-
 web/src/pages/sources/plex/PlexSourceForm.ts  | 56 ++++++------
 .../pages/sources/plex/PlexSourceViewPage.ts  |  2 +-
 web/src/pages/sources/saml/SAMLSourceForm.ts  | 86 +++++++++----------
 .../pages/sources/saml/SAMLSourceViewPage.ts  |  2 +-
 26 files changed, 320 insertions(+), 360 deletions(-)

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<T, PKT> extends Form<T> {
+export abstract class ModelForm<T, PKT extends string | number> extends Form<T> {
 
     abstract loadInstance(pk: PKT): Promise<T>;
 
-    @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<Application> {
+export class ApplicationForm extends ModelForm<Application, string> {
 
-    @property({ attribute: false })
-    application?: Application;
+    loadInstance(pk: string): Promise<Application> {
+        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<Application> {
 
     send = (data: Application): Promise<Application | void> => {
         let writeOp: Promise<Application>;
-        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<Application> {
             ${Array.from(m).map(([group, providers]) => {
                 return html`<optgroup label=${group}>
                     ${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>`;
                     })}
                 </optgroup>`;
@@ -86,21 +90,21 @@ export class ApplicationForm extends Form<Application> {
                 label=${t`Name`}
                 ?required=${true}
                 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>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal
                 label=${t`Slug`}
                 ?required=${true}
                 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>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal
                 label=${t`Provider`}
                 name="provider">
                 <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 => {
                         return this.groupProviders(providers.results);
                     }), html`<option>${t`Loading...`}</option>`)}
@@ -142,10 +146,10 @@ export class ApplicationForm extends Form<Application> {
                 ?required=${true}
                 name="policyEngineMode">
                 <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.`}
                     </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.`}
                     </option>
                 </select>
@@ -158,23 +162,23 @@ export class ApplicationForm extends Form<Application> {
                     <ak-form-element-horizontal
                         label=${t`Launch URL`}
                         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>
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
                         label=${t`Icon`}
                         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
                         label=${t`Description`}
                         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
                         label=${t`Publisher`}
                         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>
                 </div>
             </ak-form-group>
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<Application> {
                 <span slot="header">
                     ${t`Update Application`}
                 </span>
-                <ak-application-form slot="form" .application=${item}>
+                <ak-application-form slot="form" .instancePk=${item.slug}>
                 </ak-application-form>
                 <button slot="trigger" class="pf-c-button pf-m-secondary">
                     ${t`Edit`}
diff --git a/web/src/pages/outposts/OutpostForm.ts b/web/src/pages/outposts/OutpostForm.ts
index 1e65dd045..9bd78b0d1 100644
--- a/web/src/pages/outposts/OutpostForm.ts
+++ b/web/src/pages/outposts/OutpostForm.ts
@@ -3,21 +3,24 @@ import { t } from "@lingui/macro";
 import { customElement, property } from "lit-element";
 import { html, TemplateResult } from "lit-html";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { Form } from "../../elements/forms/Form";
 import { until } from "lit-html/directives/until";
 import { ifDefined } from "lit-html/directives/if-defined";
 import "../../elements/forms/HorizontalFormElement";
 import "../../elements/CodeMirror";
 import YAML from "yaml";
+import { ModelForm } from "../../elements/forms/ModelForm";
 
 @customElement("ak-outpost-form")
-export class OutpostForm extends Form<Outpost> {
+export class OutpostForm extends ModelForm<Outpost, string> {
 
-    @property({attribute: false})
-    outpost?: Outpost;
+    loadInstance(pk: string): Promise<Outpost> {
+        return new OutpostsApi(DEFAULT_CONFIG).outpostsInstancesRead({
+            uuid: pk
+        });
+    }
 
     getSuccessMessage(): string {
-        if (this.outpost) {
+        if (this.instance) {
             return t`Successfully updated outpost.`;
         } else {
             return t`Successfully created outpost.`;
@@ -25,9 +28,9 @@ export class OutpostForm extends Form<Outpost> {
     }
 
     send = (data: Outpost): Promise<Outpost> => {
-        if (this.outpost) {
+        if (this.instance) {
             return new OutpostsApi(DEFAULT_CONFIG).outpostsOutpostsUpdate({
-                uuid: this.outpost.pk || "",
+                uuid: this.instance.pk || "",
                 data: data
             });
         } else {
@@ -43,27 +46,27 @@ export class OutpostForm extends Form<Outpost> {
                 label=${t`Name`}
                 ?required=${true}
                 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
                 label=${t`Type`}
                 ?required=${true}
                 name="type">
                 <select class="pf-c-form-control">
-                    <option value=${OutpostTypeEnum.Proxy} ?selected=${this.outpost?.type === OutpostTypeEnum.Proxy}>${t`Proxy`}</option>
-                    <option value=${OutpostTypeEnum.Ldap} ?selected=${this.outpost?.type === OutpostTypeEnum.Ldap}>${t`LDAP (Technical preview)`}</option>
+                    <option value=${OutpostTypeEnum.Proxy} ?selected=${this.instance?.type === OutpostTypeEnum.Proxy}>${t`Proxy`}</option>
+                    <option value=${OutpostTypeEnum.Ldap} ?selected=${this.instance?.type === OutpostTypeEnum.Ldap}>${t`LDAP (Technical preview)`}</option>
                 </select>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal
                 label=${t`Service connection`}
                 name="serviceConnection">
                 <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({
                         ordering: "pk"
                     }).then(scs => {
                         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})
                             </option>`;
                         });
@@ -83,7 +86,7 @@ export class OutpostForm extends Form<Outpost> {
                         ordering: "pk"
                     }).then(providers => {
                         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 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"
                     }).then(providers => {
                         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 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">
                 <ak-codemirror mode="yaml" value="${until(new OutpostsApi(DEFAULT_CONFIG).outpostsOutpostsDefaultSettings({}).then(config => {
                         let fc = config.config;
-                        if (this.outpost) {
-                            fc = this.outpost.config;
+                        if (this.instance) {
+                            fc = this.instance.config;
                         }
                         return YAML.stringify(fc);
                     }))}"></ak-codemirror>
diff --git a/web/src/pages/outposts/OutpostListPage.ts b/web/src/pages/outposts/OutpostListPage.ts
index 8016605af..02118d1f5 100644
--- a/web/src/pages/outposts/OutpostListPage.ts
+++ b/web/src/pages/outposts/OutpostListPage.ts
@@ -66,7 +66,7 @@ export class OutpostListPage extends TablePage<Outpost> {
                 <span slot="header">
                     ${t`Update Outpost`}
                 </span>
-                <ak-outpost-form slot="form" .outpost=${item}>
+                <ak-outpost-form slot="form" .instancePk=${item.pk}>
                 </ak-outpost-form>
                 <button slot="trigger" class="pf-c-button pf-m-secondary">
                     ${t`Edit`}
diff --git a/web/src/pages/property-mappings/PropertyMappingLDAPForm.ts b/web/src/pages/property-mappings/PropertyMappingLDAPForm.ts
index 62bfd1884..755f1ea7a 100644
--- a/web/src/pages/property-mappings/PropertyMappingLDAPForm.ts
+++ b/web/src/pages/property-mappings/PropertyMappingLDAPForm.ts
@@ -3,27 +3,22 @@ import { t } from "@lingui/macro";
 import { customElement, property } from "lit-element";
 import { html, TemplateResult } from "lit-html";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { Form } from "../../elements/forms/Form";
 import { ifDefined } from "lit-html/directives/if-defined";
 import "../../elements/forms/HorizontalFormElement";
 import "../../elements/CodeMirror";
+import { ModelForm } from "../../elements/forms/ModelForm";
 
 @customElement("ak-property-mapping-ldap-form")
-export class PropertyMappingLDAPForm extends Form<LDAPPropertyMapping> {
+export class PropertyMappingLDAPForm extends ModelForm<LDAPPropertyMapping, string> {
 
-    set mappingUUID(value: string) {
-        new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsLdapRead({
-            pmUuid: value,
-        }).then(mapping => {
-            this.mapping = mapping;
+    loadInstance(pk: string): Promise<LDAPPropertyMapping> {
+        return new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsLdapRead({
+            pmUuid: pk,
         });
     }
 
-    @property({attribute: false})
-    mapping?: LDAPPropertyMapping;
-
     getSuccessMessage(): string {
-        if (this.mapping) {
+        if (this.instance) {
             return t`Successfully updated mapping.`;
         } else {
             return t`Successfully created mapping.`;
@@ -31,9 +26,9 @@ export class PropertyMappingLDAPForm extends Form<LDAPPropertyMapping> {
     }
 
     send = (data: LDAPPropertyMapping): Promise<LDAPPropertyMapping> => {
-        if (this.mapping) {
+        if (this.instance) {
             return new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsLdapUpdate({
-                pmUuid: this.mapping.pk || "",
+                pmUuid: this.instance.pk || "",
                 data: data
             });
         } else {
@@ -49,20 +44,20 @@ export class PropertyMappingLDAPForm extends Form<LDAPPropertyMapping> {
                 label=${t`Name`}
                 ?required=${true}
                 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
                 label=${t`Object field`}
                 ?required=${true}
                 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>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal
                 label=${t`Expression`}
                 ?required=${true}
                 name="expression">
-                <ak-codemirror mode="python" value="${ifDefined(this.mapping?.expression)}">
+                <ak-codemirror mode="python" value="${ifDefined(this.instance?.expression)}">
                 </ak-codemirror>
                 <p class="pf-c-form__helper-text">
                     ${t`Expression using Python.`}
diff --git a/web/src/pages/property-mappings/PropertyMappingSAMLForm.ts b/web/src/pages/property-mappings/PropertyMappingSAMLForm.ts
index 61539f035..d7aca81d3 100644
--- a/web/src/pages/property-mappings/PropertyMappingSAMLForm.ts
+++ b/web/src/pages/property-mappings/PropertyMappingSAMLForm.ts
@@ -3,27 +3,21 @@ import { t } from "@lingui/macro";
 import { customElement, property } from "lit-element";
 import { html, TemplateResult } from "lit-html";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { Form } from "../../elements/forms/Form";
 import { ifDefined } from "lit-html/directives/if-defined";
 import "../../elements/forms/HorizontalFormElement";
 import "../../elements/CodeMirror";
+import { ModelForm } from "../../elements/forms/ModelForm";
 
 @customElement("ak-property-mapping-saml-form")
-export class PropertyMappingLDAPForm extends Form<SAMLPropertyMapping> {
-
-    set mappingUUID(value: string) {
-        new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsSamlRead({
-            pmUuid: value,
-        }).then(mapping => {
-            this.mapping = mapping;
+export class PropertyMappingLDAPForm extends ModelForm<SAMLPropertyMapping, string> {
+    loadInstance(pk: string): Promise<SAMLPropertyMapping> {
+        return new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsSamlRead({
+            pmUuid: pk,
         });
     }
 
-    @property({attribute: false})
-    mapping?: SAMLPropertyMapping;
-
     getSuccessMessage(): string {
-        if (this.mapping) {
+        if (this.instance) {
             return t`Successfully updated mapping.`;
         } else {
             return t`Successfully created mapping.`;
@@ -31,9 +25,9 @@ export class PropertyMappingLDAPForm extends Form<SAMLPropertyMapping> {
     }
 
     send = (data: SAMLPropertyMapping): Promise<SAMLPropertyMapping> => {
-        if (this.mapping) {
+        if (this.instance) {
             return new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsSamlUpdate({
-                pmUuid: this.mapping.pk || "",
+                pmUuid: this.instance.pk || "",
                 data: data
             });
         } else {
@@ -49,13 +43,13 @@ export class PropertyMappingLDAPForm extends Form<SAMLPropertyMapping> {
                 label=${t`Name`}
                 ?required=${true}
                 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
                 label=${t`SAML Attribute Name`}
                 ?required=${true}
                 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">
                     ${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>
@@ -63,7 +57,7 @@ export class PropertyMappingLDAPForm extends Form<SAMLPropertyMapping> {
             <ak-form-element-horizontal
                 label=${t`Friendly Name`}
                 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">
                     ${t`Optionally set the 'FriendlyName' value of the Assertion attribute.`}
                 </p>
@@ -72,7 +66,7 @@ export class PropertyMappingLDAPForm extends Form<SAMLPropertyMapping> {
                 label=${t`Expression`}
                 ?required=${true}
                 name="expression">
-                <ak-codemirror mode="python" value="${ifDefined(this.mapping?.expression)}">
+                <ak-codemirror mode="python" value="${ifDefined(this.instance?.expression)}">
                 </ak-codemirror>
                 <p class="pf-c-form__helper-text">
                     ${t`Expression using Python.`}
diff --git a/web/src/pages/property-mappings/PropertyMappingScopeForm.ts b/web/src/pages/property-mappings/PropertyMappingScopeForm.ts
index 21014dda1..68cd24986 100644
--- a/web/src/pages/property-mappings/PropertyMappingScopeForm.ts
+++ b/web/src/pages/property-mappings/PropertyMappingScopeForm.ts
@@ -3,27 +3,22 @@ import { t } from "@lingui/macro";
 import { customElement, property } from "lit-element";
 import { html, TemplateResult } from "lit-html";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { Form } from "../../elements/forms/Form";
+import { ModelForm } from "../../elements/forms/ModelForm";
 import { ifDefined } from "lit-html/directives/if-defined";
 import "../../elements/forms/HorizontalFormElement";
 import "../../elements/CodeMirror";
 
 @customElement("ak-property-mapping-scope-form")
-export class PropertyMappingScopeForm extends Form<ScopeMapping> {
+export class PropertyMappingScopeForm extends ModelForm<ScopeMapping, string> {
 
-    set mappingUUID(value: string) {
-        new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsScopeRead({
-            pmUuid: value,
-        }).then(mapping => {
-            this.mapping = mapping;
+    loadInstance(pk: string): Promise<ScopeMapping> {
+        return new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsScopeRead({
+            pmUuid: pk,
         });
     }
 
-    @property({attribute: false})
-    mapping?: ScopeMapping;
-
     getSuccessMessage(): string {
-        if (this.mapping) {
+        if (this.instance) {
             return t`Successfully updated mapping.`;
         } else {
             return t`Successfully created mapping.`;
@@ -31,9 +26,9 @@ export class PropertyMappingScopeForm extends Form<ScopeMapping> {
     }
 
     send = (data: ScopeMapping): Promise<ScopeMapping> => {
-        if (this.mapping) {
+        if (this.instance) {
             return new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsScopeUpdate({
-                pmUuid: this.mapping.pk || "",
+                pmUuid: this.instance.pk || "",
                 data: data
             });
         } else {
@@ -49,27 +44,27 @@ export class PropertyMappingScopeForm extends Form<ScopeMapping> {
                 label=${t`Name`}
                 ?required=${true}
                 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
                 label=${t`Scope name`}
                 ?required=${true}
                 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>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal
                 label=${t`Description`}
                 ?required=${true}
                 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>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal
                 label=${t`Expression`}
                 ?required=${true}
                 name="expression">
-                <ak-codemirror mode="python" value="${ifDefined(this.mapping?.expression)}">
+                <ak-codemirror mode="python" value="${ifDefined(this.instance?.expression)}">
                 </ak-codemirror>
                 <p class="pf-c-form__helper-text">
                     ${t`Expression using Python.`}
diff --git a/web/src/pages/providers/ProviderListPage.ts b/web/src/pages/providers/ProviderListPage.ts
index cf1d56281..233ede457 100644
--- a/web/src/pages/providers/ProviderListPage.ts
+++ b/web/src/pages/providers/ProviderListPage.ts
@@ -79,7 +79,7 @@ export class ProviderListPage extends TablePage<Provider> {
                 <ak-proxy-form
                     slot="form"
                     .args=${{
-                        "providerUUID": item.pk
+                        "instancePk": item.pk
                     }}
                     type=${ifDefined(item.component)}>
                 </ak-proxy-form>
diff --git a/web/src/pages/providers/ldap/LDAPProviderForm.ts b/web/src/pages/providers/ldap/LDAPProviderForm.ts
index 4a21f4766..5f07bc379 100644
--- a/web/src/pages/providers/ldap/LDAPProviderForm.ts
+++ b/web/src/pages/providers/ldap/LDAPProviderForm.ts
@@ -3,7 +3,7 @@ import { t } from "@lingui/macro";
 import { customElement, property } from "lit-element";
 import { html, TemplateResult } from "lit-html";
 import { DEFAULT_CONFIG } from "../../../api/Config";
-import { Form } from "../../../elements/forms/Form";
+import { ModelForm } from "../../../elements/forms/ModelForm";
 import { until } from "lit-html/directives/until";
 import { ifDefined } from "lit-html/directives/if-defined";
 import "../../../elements/forms/HorizontalFormElement";
@@ -11,21 +11,16 @@ import "../../../elements/forms/FormGroup";
 import { first } from "../../../utils";
 
 @customElement("ak-provider-ldap-form")
-export class LDAPProviderFormPage extends Form<LDAPProvider> {
+export class LDAPProviderFormPage extends ModelForm<LDAPProvider, number> {
 
-    set providerUUID(value: number) {
-        new ProvidersApi(DEFAULT_CONFIG).providersLdapRead({
-            id: value,
-        }).then(provider => {
-            this.provider = provider;
+    loadInstance(pk: number): Promise<LDAPProvider> {
+        return new ProvidersApi(DEFAULT_CONFIG).providersLdapRead({
+            id: pk,
         });
     }
 
-    @property({attribute: false})
-    provider?: LDAPProvider;
-
     getSuccessMessage(): string {
-        if (this.provider) {
+        if (this.instance) {
             return t`Successfully updated provider.`;
         } else {
             return t`Successfully created provider.`;
@@ -33,9 +28,9 @@ export class LDAPProviderFormPage extends Form<LDAPProvider> {
     }
 
     send = (data: LDAPProvider): Promise<LDAPProvider> => {
-        if (this.provider) {
+        if (this.instance) {
             return new ProvidersApi(DEFAULT_CONFIG).providersLdapUpdate({
-                id: this.provider.pk || 0,
+                id: this.instance.pk || 0,
                 data: data
             });
         } else {
@@ -51,7 +46,7 @@ export class LDAPProviderFormPage extends Form<LDAPProvider> {
                 label=${t`Name`}
                 ?required=${true}
                 name="name">
-                <input type="text" value="${ifDefined(this.provider?.name)}" class="pf-c-form-control" required>
+                <input type="text" value="${ifDefined(this.instance?.name)}" class="pf-c-form-control" required>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal
                 label=${t`Bind flow`}
@@ -63,7 +58,7 @@ export class LDAPProviderFormPage extends Form<LDAPProvider> {
                         designation: FlowDesignationEnum.Authentication,
                     }).then(flows => {
                         return flows.results.map(flow => {
-                            return html`<option value=${ifDefined(flow.pk)} ?selected=${this.provider?.authorizationFlow === flow.pk}>${flow.name} (${flow.slug})</option>`;
+                            return html`<option value=${ifDefined(flow.pk)} ?selected=${this.instance?.authorizationFlow === flow.pk}>${flow.name} (${flow.slug})</option>`;
                         });
                     }), html`<option>${t`Loading...`}</option>`)}
                 </select>
@@ -73,10 +68,10 @@ export class LDAPProviderFormPage extends Form<LDAPProvider> {
                 label=${t`Group`}
                 name="searchGroup">
                 <select class="pf-c-form-control">
-                    <option value="" ?selected=${this.provider?.searchGroup === undefined}>---------</option>
+                    <option value="" ?selected=${this.instance?.searchGroup === undefined}>---------</option>
                     ${until(new CoreApi(DEFAULT_CONFIG).coreGroupsList({}).then(groups => {
                         return groups.results.map(group => {
-                            return html`<option value=${ifDefined(group.pk)} ?selected=${this.provider?.searchGroup === group.pk}>${group.name}</option>`;
+                            return html`<option value=${ifDefined(group.pk)} ?selected=${this.instance?.searchGroup === group.pk}>${group.name}</option>`;
                         });
                     }), html`<option>${t`Loading...`}</option>`)}
                 </select>
@@ -92,7 +87,7 @@ export class LDAPProviderFormPage extends Form<LDAPProvider> {
                         label=${t`Base DN`}
                         ?required=${true}
                         name="baseDn">
-                        <input type="text" value="${first(this.provider?.baseDn, "DC=ldap,DC=goauthentik,DC=io")}" class="pf-c-form-control" required>
+                        <input type="text" value="${first(this.instance?.baseDn, "DC=ldap,DC=goauthentik,DC=io")}" class="pf-c-form-control" required>
                         <p class="pf-c-form__helper-text">${t`LDAP DN under which bind requests and search requests can be made.`}</p>
                     </ak-form-element-horizontal>
                 </div>
diff --git a/web/src/pages/providers/ldap/LDAPProviderViewPage.ts b/web/src/pages/providers/ldap/LDAPProviderViewPage.ts
index e8bc97667..0f7a05768 100644
--- a/web/src/pages/providers/ldap/LDAPProviderViewPage.ts
+++ b/web/src/pages/providers/ldap/LDAPProviderViewPage.ts
@@ -102,7 +102,7 @@ export class LDAPProviderViewPage extends LitElement {
                                         </span>
                                         <ak-provider-ldap-form
                                             slot="form"
-                                            .providerUUID=${this.provider.pk || 0}>
+                                            .instancePk=${this.provider.pk || 0}>
                                         </ak-provider-ldap-form>
                                         <button slot="trigger" class="pf-c-button pf-m-primary">
                                             ${t`Edit`}
diff --git a/web/src/pages/providers/oauth2/OAuth2ProviderForm.ts b/web/src/pages/providers/oauth2/OAuth2ProviderForm.ts
index bea1cfe27..eb720b3e4 100644
--- a/web/src/pages/providers/oauth2/OAuth2ProviderForm.ts
+++ b/web/src/pages/providers/oauth2/OAuth2ProviderForm.ts
@@ -3,7 +3,7 @@ import { t } from "@lingui/macro";
 import { customElement, property } from "lit-element";
 import { html, TemplateResult } from "lit-html";
 import { DEFAULT_CONFIG } from "../../../api/Config";
-import { Form } from "../../../elements/forms/Form";
+import { ModelForm } from "../../../elements/forms/ModelForm";
 import { until } from "lit-html/directives/until";
 import { ifDefined } from "lit-html/directives/if-defined";
 import "../../../elements/forms/HorizontalFormElement";
@@ -11,25 +11,22 @@ import "../../../elements/forms/FormGroup";
 import { first, randomString } from "../../../utils";
 
 @customElement("ak-provider-oauth2-form")
-export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
+export class OAuth2ProviderFormPage extends ModelForm<OAuth2Provider, number> {
 
-    set providerUUID(value: number) {
-        new ProvidersApi(DEFAULT_CONFIG).providersOauth2Read({
-            id: value,
+    loadInstance(pk: number): Promise<OAuth2Provider> {
+        return new ProvidersApi(DEFAULT_CONFIG).providersOauth2Read({
+            id: pk,
         }).then(provider => {
-            this.provider = provider;
             this.showClientSecret = provider.clientType === OAuth2ProviderClientTypeEnum.Confidential;
+            return provider;
         });
     }
 
-    @property({attribute: false})
-    provider?: OAuth2Provider;
-
     @property({type: Boolean})
     showClientSecret = true;
 
     getSuccessMessage(): string {
-        if (this.provider) {
+        if (this.instance) {
             return t`Successfully updated provider.`;
         } else {
             return t`Successfully created provider.`;
@@ -37,9 +34,9 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
     }
 
     send = (data: OAuth2Provider): Promise<OAuth2Provider> => {
-        if (this.provider) {
+        if (this.instance) {
             return new ProvidersApi(DEFAULT_CONFIG).providersOauth2Update({
-                id: this.provider.pk || 0,
+                id: this.instance.pk || 0,
                 data: data
             });
         } else {
@@ -55,7 +52,7 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
                 label=${t`Name`}
                 ?required=${true}
                 name="name">
-                <input type="text" value="${ifDefined(this.provider?.name)}" class="pf-c-form-control" required>
+                <input type="text" value="${ifDefined(this.instance?.name)}" class="pf-c-form-control" required>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal
                 label=${t`Authorization flow`}
@@ -67,7 +64,7 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
                         designation: FlowDesignationEnum.Authorization,
                     }).then(flows => {
                         return flows.results.map(flow => {
-                            return html`<option value=${ifDefined(flow.pk)} ?selected=${this.provider?.authorizationFlow === flow.pk}>${flow.name} (${flow.slug})</option>`;
+                            return html`<option value=${ifDefined(flow.pk)} ?selected=${this.instance?.authorizationFlow === flow.pk}>${flow.name} (${flow.slug})</option>`;
                         });
                     }), html`<option>${t`Loading...`}</option>`)}
                 </select>
@@ -91,10 +88,10 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
                                 this.showClientSecret = true;
                             }
                         }}>
-                            <option value=${OAuth2ProviderClientTypeEnum.Confidential} ?selected=${this.provider?.clientType === OAuth2ProviderClientTypeEnum.Confidential}>
+                            <option value=${OAuth2ProviderClientTypeEnum.Confidential} ?selected=${this.instance?.clientType === OAuth2ProviderClientTypeEnum.Confidential}>
                                 ${t`Confidential`}
                             </option>
-                            <option value=${OAuth2ProviderClientTypeEnum.Public} ?selected=${this.provider?.clientType === OAuth2ProviderClientTypeEnum.Public}>
+                            <option value=${OAuth2ProviderClientTypeEnum.Public} ?selected=${this.instance?.clientType === OAuth2ProviderClientTypeEnum.Public}>
                                 ${t`Public`}
                             </option>
                         </select>
@@ -104,19 +101,19 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
                         label=${t`Client ID`}
                         ?required=${true}
                         name="clientId">
-                        <input type="text" value="${first(this.provider?.clientId, randomString(40))}" class="pf-c-form-control" required>
+                        <input type="text" value="${first(this.instance?.clientId, randomString(40))}" class="pf-c-form-control" required>
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
                         ?hidden=${!this.showClientSecret}
                         label=${t`Client Secret`}
                         name="clientSecret">
-                        <input type="text" value="${first(this.provider?.clientSecret, randomString(128))}" class="pf-c-form-control">
+                        <input type="text" value="${first(this.instance?.clientSecret, randomString(128))}" class="pf-c-form-control">
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
                         label=${t`Redirect URIs/Origins`}
                         ?required=${true}
                         name="redirectUris">
-                        <textarea class="pf-c-form-control" required>${this.provider?.redirectUris}</textarea>
+                        <textarea class="pf-c-form-control" required>${this.instance?.redirectUris}</textarea>
                         <p class="pf-c-form__helper-text">
                             ${t`Valid redirect URLs after a successful authorization flow. Also specify any origins here for Implicit flows.`}
                         </p>
@@ -133,7 +130,7 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
                         label=${t`Access code validity`}
                         ?required=${true}
                         name="accessCodeValidity">
-                        <input type="text" value="${first(this.provider?.accessCodeValidity, "minutes=1")}" class="pf-c-form-control" required>
+                        <input type="text" value="${first(this.instance?.accessCodeValidity, "minutes=1")}" class="pf-c-form-control" required>
                         <p class="pf-c-form__helper-text">${t`Configure how long access codes are valid for.`}</p>
                         <p class="pf-c-form__helper-text">${t`(Format: hours=-1;minutes=-2;seconds=-3).`}</p>
                     </ak-form-element-horizontal>
@@ -141,7 +138,7 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
                         label=${t`Token validity`}
                         ?required=${true}
                         name="tokenValidity">
-                        <input type="text" value="${first(this.provider?.tokenValidity, "minutes=10")}" class="pf-c-form-control" required>
+                        <input type="text" value="${first(this.instance?.tokenValidity, "minutes=10")}" class="pf-c-form-control" required>
                         <p class="pf-c-form__helper-text">${t`Configure how long refresh tokens and their id_tokens are valid for.`}</p>
                         <p class="pf-c-form__helper-text">${t`(Format: hours=-1;minutes=-2;seconds=-3).`}</p>
                     </ak-form-element-horizontal>
@@ -150,10 +147,10 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
                         ?required=${true}
                         name="jwtAlg">
                         <select class="pf-c-form-control">
-                            <option value=${OAuth2ProviderJwtAlgEnum.Rs256} ?selected=${this.provider?.jwtAlg === OAuth2ProviderJwtAlgEnum.Rs256}>
+                            <option value=${OAuth2ProviderJwtAlgEnum.Rs256} ?selected=${this.instance?.jwtAlg === OAuth2ProviderJwtAlgEnum.Rs256}>
                                 ${t`RS256 (Asymmetric Encryption)`}
                             </option>
-                            <option value=${OAuth2ProviderJwtAlgEnum.Hs256} ?selected=${this.provider?.jwtAlg === OAuth2ProviderJwtAlgEnum.Hs256}>
+                            <option value=${OAuth2ProviderJwtAlgEnum.Hs256} ?selected=${this.instance?.jwtAlg === OAuth2ProviderJwtAlgEnum.Hs256}>
                                 ${t`HS256 (Symmetric Encryption)`}
                             </option>
                         </select>
@@ -168,10 +165,10 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
                             }).then(scopes => {
                                 return scopes.results.map(scope => {
                                     let selected = false;
-                                    if (!this.provider?.propertyMappings) {
+                                    if (!this.instance?.propertyMappings) {
                                         selected = scope.managed?.startsWith("goauthentik.io/providers/oauth2/scope-") || false;
                                     } else {
-                                        selected = Array.from(this.provider?.propertyMappings).some(su => {
+                                        selected = Array.from(this.instance?.propertyMappings).some(su => {
                                             return su == scope.pk;
                                         });
                                     }
@@ -186,13 +183,13 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
                         label=${t`RSA Key`}
                         name="rsaKey">
                         <select class="pf-c-form-control">
-                            <option value="" ?selected=${this.provider?.rsaKey === undefined}>---------</option>
+                            <option value="" ?selected=${this.instance?.rsaKey === undefined}>---------</option>
                             ${until(new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsList({
                                 ordering: "pk",
                                 hasKey: "true",
                             }).then(keys => {
                                 return keys.results.map(key => {
-                                    let selected = this.provider?.rsaKey === key.pk;
+                                    let selected = this.instance?.rsaKey === key.pk;
                                     if (keys.results.length === 1) {
                                         selected = true;
                                     }
@@ -207,16 +204,16 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
                         ?required=${true}
                         name="subMode">
                         <select class="pf-c-form-control">
-                            <option value="${OAuth2ProviderSubModeEnum.HashedUserId}" ?selected=${this.provider?.subMode === OAuth2ProviderSubModeEnum.HashedUserId}>
+                            <option value="${OAuth2ProviderSubModeEnum.HashedUserId}" ?selected=${this.instance?.subMode === OAuth2ProviderSubModeEnum.HashedUserId}>
                                 ${t`Based on the Hashed User ID`}
                             </option>
-                            <option value="${OAuth2ProviderSubModeEnum.UserUsername}" ?selected=${this.provider?.subMode === OAuth2ProviderSubModeEnum.UserUsername}>
+                            <option value="${OAuth2ProviderSubModeEnum.UserUsername}" ?selected=${this.instance?.subMode === OAuth2ProviderSubModeEnum.UserUsername}>
                                 ${t`Based on the username`}
                             </option>
-                            <option value="${OAuth2ProviderSubModeEnum.UserEmail}" ?selected=${this.provider?.subMode === OAuth2ProviderSubModeEnum.UserEmail}>
+                            <option value="${OAuth2ProviderSubModeEnum.UserEmail}" ?selected=${this.instance?.subMode === OAuth2ProviderSubModeEnum.UserEmail}>
                                 ${t`Based on the User's Email. This is recommended over the UPN method.`}
                             </option>
-                            <option value="${OAuth2ProviderSubModeEnum.UserUpn}" ?selected=${this.provider?.subMode === OAuth2ProviderSubModeEnum.UserUpn}>
+                            <option value="${OAuth2ProviderSubModeEnum.UserUpn}" ?selected=${this.instance?.subMode === OAuth2ProviderSubModeEnum.UserUpn}>
                                 ${t`Based on the User's UPN, only works if user has a 'upn' attribute set. Use this method only if you have different UPN and Mail domains.`}
                             </option>
                         </select>
@@ -226,7 +223,7 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal name="includeClaimsInIdToken">
                         <div class="pf-c-check">
-                            <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.provider?.includeClaimsInIdToken, true)}>
+                            <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.includeClaimsInIdToken, true)}>
                             <label class="pf-c-check__label">
                                 ${t`Include claims in id_token`}
                             </label>
@@ -238,10 +235,10 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
                         ?required=${true}
                         name="issuerMode">
                         <select class="pf-c-form-control">
-                            <option value="${OAuth2ProviderIssuerModeEnum.PerProvider}" ?selected=${this.provider?.issuerMode === OAuth2ProviderIssuerModeEnum.PerProvider}>
+                            <option value="${OAuth2ProviderIssuerModeEnum.PerProvider}" ?selected=${this.instance?.issuerMode === OAuth2ProviderIssuerModeEnum.PerProvider}>
                                 ${t`Each provider has a different issuer, based on the application slug.`}
                             </option>
-                            <option value="${OAuth2ProviderIssuerModeEnum.Global}" ?selected=${this.provider?.issuerMode === OAuth2ProviderIssuerModeEnum.Global}>
+                            <option value="${OAuth2ProviderIssuerModeEnum.Global}" ?selected=${this.instance?.issuerMode === OAuth2ProviderIssuerModeEnum.Global}>
                                 ${t`Same identifier is used for all providers`}
                             </option>
                         </select>
diff --git a/web/src/pages/providers/oauth2/OAuth2ProviderViewPage.ts b/web/src/pages/providers/oauth2/OAuth2ProviderViewPage.ts
index 9779129df..8fdb63ba5 100644
--- a/web/src/pages/providers/oauth2/OAuth2ProviderViewPage.ts
+++ b/web/src/pages/providers/oauth2/OAuth2ProviderViewPage.ts
@@ -127,7 +127,7 @@ export class OAuth2ProviderViewPage extends LitElement {
                                         </span>
                                         <ak-provider-oauth2-form
                                             slot="form"
-                                            .providerUUID=${this.provider.pk || 0}>
+                                            .instancePk=${this.provider.pk || 0}>
                                         </ak-provider-oauth2-form>
                                         <button slot="trigger" class="pf-c-button pf-m-primary">
                                             ${t`Edit`}
diff --git a/web/src/pages/providers/proxy/ProxyProviderForm.ts b/web/src/pages/providers/proxy/ProxyProviderForm.ts
index 25622a5a5..80af18752 100644
--- a/web/src/pages/providers/proxy/ProxyProviderForm.ts
+++ b/web/src/pages/providers/proxy/ProxyProviderForm.ts
@@ -3,7 +3,7 @@ import { t } from "@lingui/macro";
 import { customElement, property } from "lit-element";
 import { html, TemplateResult } from "lit-html";
 import { DEFAULT_CONFIG } from "../../../api/Config";
-import { Form } from "../../../elements/forms/Form";
+import { ModelForm } from "../../../elements/forms/ModelForm";
 import { until } from "lit-html/directives/until";
 import { ifDefined } from "lit-html/directives/if-defined";
 import "../../../elements/forms/HorizontalFormElement";
@@ -11,21 +11,18 @@ import "../../../elements/forms/FormGroup";
 import { first } from "../../../utils";
 
 @customElement("ak-provider-proxy-form")
-export class ProxyProviderFormPage extends Form<ProxyProvider> {
+export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
 
-    set providerUUID(value: number) {
-        new ProvidersApi(DEFAULT_CONFIG).providersProxyRead({
-            id: value,
+    loadInstance(pk: number): Promise<ProxyProvider> {
+        return new ProvidersApi(DEFAULT_CONFIG).providersProxyRead({
+            id: pk,
         }).then(provider => {
-            this.provider = provider;
             this.showHttpBasic = first(provider.basicAuthEnabled, true);
             this.showInternalServer = first(!provider.forwardAuthMode, true);
+            return provider;
         });
     }
 
-    @property({attribute: false})
-    provider?: ProxyProvider;
-
     @property({type: Boolean})
     showHttpBasic = true;
 
@@ -33,7 +30,7 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
     showInternalServer = true;
 
     getSuccessMessage(): string {
-        if (this.provider) {
+        if (this.instance) {
             return t`Successfully updated provider.`;
         } else {
             return t`Successfully created provider.`;
@@ -41,9 +38,9 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
     }
 
     send = (data: ProxyProvider): Promise<ProxyProvider> => {
-        if (this.provider) {
+        if (this.instance) {
             return new ProvidersApi(DEFAULT_CONFIG).providersProxyUpdate({
-                id: this.provider.pk || 0,
+                id: this.instance.pk || 0,
                 data: data
             });
         } else {
@@ -60,13 +57,13 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
         return html`<ak-form-element-horizontal
                 label=${t`HTTP-Basic Username Key`}
                 name="basicAuthUserAttribute">
-                <input type="text" value="${ifDefined(this.provider?.basicAuthUserAttribute)}" class="pf-c-form-control">
+                <input type="text" value="${ifDefined(this.instance?.basicAuthUserAttribute)}" class="pf-c-form-control">
                 <p class="pf-c-form__helper-text">${t`User/Group Attribute used for the user part of the HTTP-Basic Header. If not set, the user's Email address is used.`}</p>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal
                 label=${t`HTTP-Basic Password Key`}
                 name="basicAuthPasswordAttribute">
-                <input type="text" value="${ifDefined(this.provider?.basicAuthPasswordAttribute)}" class="pf-c-form-control">
+                <input type="text" value="${ifDefined(this.instance?.basicAuthPasswordAttribute)}" class="pf-c-form-control">
                 <p class="pf-c-form__helper-text">${t`User/Group Attribute used for the password part of the HTTP-Basic Header.`}</p>
             </ak-form-element-horizontal>`;
     }
@@ -79,12 +76,12 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
                     label=${t`Internal host`}
                     ?required=${true}
                     name="internalHost">
-                    <input type="text" value="${ifDefined(this.provider?.internalHost)}" class="pf-c-form-control" required>
+                    <input type="text" value="${ifDefined(this.instance?.internalHost)}" class="pf-c-form-control" required>
                     <p class="pf-c-form__helper-text">${t`Upstream host that the requests are forwarded to.`}</p>
                 </ak-form-element-horizontal>
                 <ak-form-element-horizontal name="internalHostSslValidation">
                     <div class="pf-c-check">
-                        <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.provider?.internalHostSslValidation, true)}>
+                        <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.internalHostSslValidation, true)}>
                         <label class="pf-c-check__label">
                             ${t`Internal host SSL Validation`}
                         </label>
@@ -99,7 +96,7 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
                 label=${t`Name`}
                 ?required=${true}
                 name="name">
-                <input type="text" value="${ifDefined(this.provider?.name)}" class="pf-c-form-control" required>
+                <input type="text" value="${ifDefined(this.instance?.name)}" class="pf-c-form-control" required>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal
                 label=${t`Authorization flow`}
@@ -111,7 +108,7 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
                         designation: FlowDesignationEnum.Authorization,
                     }).then(flows => {
                         return flows.results.map(flow => {
-                            return html`<option value=${ifDefined(flow.pk)} ?selected=${this.provider?.authorizationFlow === flow.pk}>${flow.name} (${flow.slug})</option>`;
+                            return html`<option value=${ifDefined(flow.pk)} ?selected=${this.instance?.authorizationFlow === flow.pk}>${flow.name} (${flow.slug})</option>`;
                         });
                     }), html`<option>${t`Loading...`}</option>`)}
                 </select>
@@ -127,12 +124,12 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
                         label=${t`External host`}
                         ?required=${true}
                         name="externalHost">
-                        <input type="text" value="${ifDefined(this.provider?.externalHost)}" class="pf-c-form-control" required>
+                        <input type="text" value="${ifDefined(this.instance?.externalHost)}" class="pf-c-form-control" required>
                         <p class="pf-c-form__helper-text">${t`The external URL you'll access the outpost at.`}</p>
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal name="forwardAuthMode">
                         <div class="pf-c-check">
-                            <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.provider?.forwardAuthMode, false)} @change=${(ev: Event) => {
+                            <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.forwardAuthMode, false)} @change=${(ev: Event) => {
                                 const el = ev.target as HTMLInputElement;
                                 this.showInternalServer = !el.checked;
                             }}>
@@ -162,7 +159,7 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
                                 hasKey: "true",
                             }).then(keys => {
                                 return keys.results.map(key => {
-                                    return html`<option value=${ifDefined(key.pk)} ?selected=${this.provider?.certificate === key.pk}>${key.name}</option>`;
+                                    return html`<option value=${ifDefined(key.pk)} ?selected=${this.instance?.certificate === key.pk}>${key.name}</option>`;
                                 });
                             }), html`<option>${t`Loading...`}</option>`)}
                         </select>
@@ -171,13 +168,13 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
                     <ak-form-element-horizontal
                         label=${t`Skip path regex`}
                         name="skipPathRegex">
-                        <textarea class="pf-c-form-control">${this.provider?.skipPathRegex}</textarea>
+                        <textarea class="pf-c-form-control">${this.instance?.skipPathRegex}</textarea>
                         <p class="pf-c-form__helper-text">${t`Regular expressions for which authentication is not required. Each new line is interpreted as a new Regular Expression.`}</p>
                     </ak-form-element-horizontal>
 
                     <ak-form-element-horizontal name="basicAuthEnabled">
                         <div class="pf-c-check">
-                            <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.provider?.basicAuthEnabled, false)} @change=${(ev: Event) => {
+                            <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.basicAuthEnabled, false)} @change=${(ev: Event) => {
                                 const el = ev.target as HTMLInputElement;
                                 this.showHttpBasic = el.checked;
                             }}>
diff --git a/web/src/pages/providers/proxy/ProxyProviderViewPage.ts b/web/src/pages/providers/proxy/ProxyProviderViewPage.ts
index 05cafd475..16305ab74 100644
--- a/web/src/pages/providers/proxy/ProxyProviderViewPage.ts
+++ b/web/src/pages/providers/proxy/ProxyProviderViewPage.ts
@@ -127,7 +127,7 @@ export class ProxyProviderViewPage extends LitElement {
                                         </span>
                                         <ak-provider-proxy-form
                                             slot="form"
-                                            .providerUUID=${this.provider.pk || 0}>
+                                            .instancePk=${this.provider.pk || 0}>
                                         </ak-provider-proxy-form>
                                         <button slot="trigger" class="pf-c-button pf-m-primary">
                                             ${t`Edit`}
diff --git a/web/src/pages/providers/saml/SAMLProviderForm.ts b/web/src/pages/providers/saml/SAMLProviderForm.ts
index 8fc643dff..e059a4071 100644
--- a/web/src/pages/providers/saml/SAMLProviderForm.ts
+++ b/web/src/pages/providers/saml/SAMLProviderForm.ts
@@ -3,28 +3,24 @@ import { t } from "@lingui/macro";
 import { customElement, property } from "lit-element";
 import { html, TemplateResult } from "lit-html";
 import { DEFAULT_CONFIG } from "../../../api/Config";
-import { Form } from "../../../elements/forms/Form";
+import { ModelForm } from "../../../elements/forms/ModelForm";
 import { until } from "lit-html/directives/until";
 import { ifDefined } from "lit-html/directives/if-defined";
 import "../../../elements/forms/HorizontalFormElement";
 import "../../../elements/forms/FormGroup";
 
 @customElement("ak-provider-saml-form")
-export class SAMLProviderFormPage extends Form<SAMLProvider> {
+export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
 
-    set providerUUID(value: number) {
-        new ProvidersApi(DEFAULT_CONFIG).providersSamlRead({
-            id: value,
-        }).then(provider => {
-            this.provider = provider;
+    loadInstance(pk: number): Promise<SAMLProvider> {
+        console.log("reading saml provider")
+        return new ProvidersApi(DEFAULT_CONFIG).providersSamlRead({
+            id: pk,
         });
     }
 
-    @property({attribute: false})
-    provider?: SAMLProvider;
-
     getSuccessMessage(): string {
-        if (this.provider) {
+        if (this.instance) {
             return t`Successfully updated provider.`;
         } else {
             return t`Successfully created provider.`;
@@ -32,9 +28,9 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
     }
 
     send = (data: SAMLProvider): Promise<SAMLProvider> => {
-        if (this.provider) {
+        if (this.instance) {
             return new ProvidersApi(DEFAULT_CONFIG).providersSamlUpdate({
-                id: this.provider.pk || 0,
+                id: this.instance.pk || 0,
                 data: data
             });
         } else {
@@ -50,7 +46,7 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
                 label=${t`Name`}
                 ?required=${true}
                 name="name">
-                <input type="text" value="${ifDefined(this.provider?.name)}" class="pf-c-form-control" required>
+                <input type="text" value="${ifDefined(this.instance?.name)}" class="pf-c-form-control" required>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal
                 label=${t`Authorization flow`}
@@ -62,7 +58,7 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
                         designation: FlowDesignationEnum.Authorization,
                     }).then(flows => {
                         return flows.results.map(flow => {
-                            return html`<option value=${ifDefined(flow.pk)} ?selected=${this.provider?.authorizationFlow === flow.pk}>${flow.name} (${flow.slug})</option>`;
+                            return html`<option value=${ifDefined(flow.pk)} ?selected=${this.instance?.authorizationFlow === flow.pk}>${flow.name} (${flow.slug})</option>`;
                         });
                     }), html`<option>${t`Loading...`}</option>`)}
                 </select>
@@ -78,23 +74,23 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
                         label=${t`ACS URL`}
                         ?required=${true}
                         name="acsUrl">
-                        <input type="text" value="${ifDefined(this.provider?.acsUrl)}" class="pf-c-form-control" required>
+                        <input type="text" value="${ifDefined(this.instance?.acsUrl)}" class="pf-c-form-control" required>
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
                         label=${t`Issuer`}
                         ?required=${true}
                         name="issuer">
-                        <input type="text" value="${this.provider?.issuer || "authentik"}" class="pf-c-form-control" required>
+                        <input type="text" value="${this.instance?.issuer || "authentik"}" class="pf-c-form-control" required>
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
                         label=${t`Service Provider Binding`}
                         ?required=${true}
                         name="spBinding">
                         <select class="pf-c-form-control">
-                            <option value=${SAMLProviderSpBindingEnum.Redirect} ?selected=${this.provider?.spBinding === SAMLProviderSpBindingEnum.Redirect}>
+                            <option value=${SAMLProviderSpBindingEnum.Redirect} ?selected=${this.instance?.spBinding === SAMLProviderSpBindingEnum.Redirect}>
                                 ${t`Redirect`}
                             </option>
-                            <option value=${SAMLProviderSpBindingEnum.Post} ?selected=${this.provider?.spBinding === SAMLProviderSpBindingEnum.Post}>
+                            <option value=${SAMLProviderSpBindingEnum.Post} ?selected=${this.instance?.spBinding === SAMLProviderSpBindingEnum.Post}>
                                 ${t`Post`}
                             </option>
                         </select>
@@ -103,7 +99,7 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
                     <ak-form-element-horizontal
                         label=${t`Audience`}
                         name="audience">
-                        <input type="text" value="${ifDefined(this.provider?.audience)}" class="pf-c-form-control">
+                        <input type="text" value="${ifDefined(this.instance?.audience)}" class="pf-c-form-control">
                     </ak-form-element-horizontal>
                 </div>
             </ak-form-group>
@@ -117,13 +113,13 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
                         label=${t`Signing Certificate`}
                         name="signingKp">
                         <select class="pf-c-form-control">
-                            <option value="" ?selected=${this.provider?.signingKp === undefined}>---------</option>
+                            <option value="" ?selected=${this.instance?.signingKp === undefined}>---------</option>
                             ${until(new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsList({
                                 ordering: "pk",
                                 hasKey: "true",
                             }).then(keys => {
                                 return keys.results.map(key => {
-                                    return html`<option value=${ifDefined(key.pk)} ?selected=${this.provider?.signingKp === key.pk}>${key.name}</option>`;
+                                    return html`<option value=${ifDefined(key.pk)} ?selected=${this.instance?.signingKp === key.pk}>${key.name}</option>`;
                                 });
                             }), html`<option>${t`Loading...`}</option>`)}
                         </select>
@@ -133,12 +129,12 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
                         label=${t`Verification Certificate`}
                         name="verificationKp">
                         <select class="pf-c-form-control">
-                            <option value="" ?selected=${this.provider?.verificationKp === undefined}>---------</option>
+                            <option value="" ?selected=${this.instance?.verificationKp === undefined}>---------</option>
                             ${until(new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsList({
                                 ordering: "pk",
                             }).then(keys => {
                                 return keys.results.map(key => {
-                                    return html`<option value=${ifDefined(key.pk)} ?selected=${this.provider?.verificationKp === key.pk}>${key.name}</option>`;
+                                    return html`<option value=${ifDefined(key.pk)} ?selected=${this.instance?.verificationKp === key.pk}>${key.name}</option>`;
                                 });
                             }), html`<option>${t`Loading...`}</option>`)}
                         </select>
@@ -155,10 +151,10 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
                             }).then(mappings => {
                                 return mappings.results.map(mapping => {
                                     let selected = false;
-                                    if (!this.provider?.propertyMappings) {
+                                    if (!this.instance?.propertyMappings) {
                                         selected = mapping.managed?.startsWith("goauthentik.io/providers/saml") || false;
                                     } else {
-                                        selected = Array.from(this.provider?.propertyMappings).some(su => {
+                                        selected = Array.from(this.instance?.propertyMappings).some(su => {
                                             return su == mapping.pk;
                                         });
                                     }
@@ -172,12 +168,12 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
                         label=${t`NameID Property Mapping`}
                         name="nameIdMapping">
                         <select class="pf-c-form-control">
-                            <option value="" ?selected=${this.provider?.nameIdMapping === undefined}>---------</option>
+                            <option value="" ?selected=${this.instance?.nameIdMapping === undefined}>---------</option>
                             ${until(new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsSamlList({
                                 ordering: "saml_name"
                             }).then(mappings => {
                                 return mappings.results.map(mapping => {
-                                    return html`<option value=${ifDefined(mapping.pk)} ?selected=${this.provider?.nameIdMapping === mapping.pk}>${mapping.name}</option>`;
+                                    return html`<option value=${ifDefined(mapping.pk)} ?selected=${this.instance?.nameIdMapping === mapping.pk}>${mapping.name}</option>`;
                                 });
                             }), html`<option>${t`Loading...`}</option>`)}
                         </select>
@@ -188,7 +184,7 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
                         label=${t`Assertion valid not before`}
                         ?required=${true}
                         name="assertionValidNotBefore">
-                        <input type="text" value="${this.provider?.assertionValidNotBefore || "minutes=-5"}" class="pf-c-form-control" required>
+                        <input type="text" value="${this.instance?.assertionValidNotBefore || "minutes=-5"}" class="pf-c-form-control" required>
                         <p class="pf-c-form__helper-text">${t`Configure the maximum allowed time drift for an asseration.`}</p>
                         <p class="pf-c-form__helper-text">${t`(Format: hours=-1;minutes=-2;seconds=-3).`}</p>
                     </ak-form-element-horizontal>
@@ -196,14 +192,14 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
                         label=${t`Assertion valid not on or after`}
                         ?required=${true}
                         name="assertionValidNotOnOrAfter">
-                        <input type="text" value="${this.provider?.assertionValidNotOnOrAfter || "minutes=5"}" class="pf-c-form-control" required>
+                        <input type="text" value="${this.instance?.assertionValidNotOnOrAfter || "minutes=5"}" class="pf-c-form-control" required>
                         <p class="pf-c-form__helper-text">${t`Assertion not valid on or after current time + this value (Format: hours=1;minutes=2;seconds=3).`}</p>
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
                         label=${t`Session valid not on or after`}
                         ?required=${true}
                         name="sessionValidNotOnOrAfter">
-                        <input type="text" value="${this.provider?.sessionValidNotOnOrAfter || "minutes=86400"}" class="pf-c-form-control" required>
+                        <input type="text" value="${this.instance?.sessionValidNotOnOrAfter || "minutes=86400"}" class="pf-c-form-control" required>
                         <p class="pf-c-form__helper-text">${t`Session not valid on or after current time + this value (Format: hours=1;minutes=2;seconds=3).`}</p>
                     </ak-form-element-horizontal>
 
@@ -212,16 +208,16 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
                         ?required=${true}
                         name="digestAlgorithm">
                         <select class="pf-c-form-control">
-                            <option value=${SAMLProviderDigestAlgorithmEnum._200009Xmldsigsha1} ?selected=${this.provider?.digestAlgorithm === SAMLProviderDigestAlgorithmEnum._200009Xmldsigsha1}>
+                            <option value=${SAMLProviderDigestAlgorithmEnum._200009Xmldsigsha1} ?selected=${this.instance?.digestAlgorithm === SAMLProviderDigestAlgorithmEnum._200009Xmldsigsha1}>
                                 ${t`SHA1`}
                             </option>
-                            <option value=${SAMLProviderDigestAlgorithmEnum._200104Xmlencsha256} ?selected=${this.provider?.digestAlgorithm === SAMLProviderDigestAlgorithmEnum._200104Xmlencsha256 || this.provider?.digestAlgorithm === undefined}>
+                            <option value=${SAMLProviderDigestAlgorithmEnum._200104Xmlencsha256} ?selected=${this.instance?.digestAlgorithm === SAMLProviderDigestAlgorithmEnum._200104Xmlencsha256 || this.instance?.digestAlgorithm === undefined}>
                                 ${t`SHA256`}
                             </option>
-                            <option value=${SAMLProviderDigestAlgorithmEnum._200104XmldsigMoresha384} ?selected=${this.provider?.digestAlgorithm === SAMLProviderDigestAlgorithmEnum._200104XmldsigMoresha384}>
+                            <option value=${SAMLProviderDigestAlgorithmEnum._200104XmldsigMoresha384} ?selected=${this.instance?.digestAlgorithm === SAMLProviderDigestAlgorithmEnum._200104XmldsigMoresha384}>
                                 ${t`SHA384`}
                             </option>
-                            <option value=${SAMLProviderDigestAlgorithmEnum._200104Xmlencsha512} ?selected=${this.provider?.digestAlgorithm === SAMLProviderDigestAlgorithmEnum._200104Xmlencsha512}>
+                            <option value=${SAMLProviderDigestAlgorithmEnum._200104Xmlencsha512} ?selected=${this.instance?.digestAlgorithm === SAMLProviderDigestAlgorithmEnum._200104Xmlencsha512}>
                                 ${t`SHA512`}
                             </option>
                         </select>
@@ -231,19 +227,19 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
                         ?required=${true}
                         name="signatureAlgorithm">
                         <select class="pf-c-form-control">
-                            <option value=${SAMLProviderSignatureAlgorithmEnum._200009XmldsigrsaSha1} ?selected=${this.provider?.signatureAlgorithm === SAMLProviderSignatureAlgorithmEnum._200009XmldsigrsaSha1}>
+                            <option value=${SAMLProviderSignatureAlgorithmEnum._200009XmldsigrsaSha1} ?selected=${this.instance?.signatureAlgorithm === SAMLProviderSignatureAlgorithmEnum._200009XmldsigrsaSha1}>
                                 ${t`RSA-SHA1`}
                             </option>
-                            <option value=${SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha256} ?selected=${this.provider?.signatureAlgorithm === SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha256 || this.provider?.signatureAlgorithm === undefined}>
+                            <option value=${SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha256} ?selected=${this.instance?.signatureAlgorithm === SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha256 || this.instance?.signatureAlgorithm === undefined}>
                                 ${t`RSA-SHA256`}
                             </option>
-                            <option value=${SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha384} ?selected=${this.provider?.signatureAlgorithm === SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha384}>
+                            <option value=${SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha384} ?selected=${this.instance?.signatureAlgorithm === SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha384}>
                                 ${t`RSA-SHA384`}
                             </option>
-                            <option value=${SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha512} ?selected=${this.provider?.signatureAlgorithm === SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha512}>
+                            <option value=${SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha512} ?selected=${this.instance?.signatureAlgorithm === SAMLProviderSignatureAlgorithmEnum._200104XmldsigMorersaSha512}>
                                 ${t`RSA-SHA512`}
                             </option>
-                            <option value=${SAMLProviderSignatureAlgorithmEnum._200009XmldsigdsaSha1} ?selected=${this.provider?.signatureAlgorithm === SAMLProviderSignatureAlgorithmEnum._200009XmldsigdsaSha1}>
+                            <option value=${SAMLProviderSignatureAlgorithmEnum._200009XmldsigdsaSha1} ?selected=${this.instance?.signatureAlgorithm === SAMLProviderSignatureAlgorithmEnum._200009XmldsigdsaSha1}>
                                 ${t`DSA-SHA1`}
                             </option>
                         </select>
diff --git a/web/src/pages/providers/saml/SAMLProviderViewPage.ts b/web/src/pages/providers/saml/SAMLProviderViewPage.ts
index 62f5ed8bc..1ddc270d4 100644
--- a/web/src/pages/providers/saml/SAMLProviderViewPage.ts
+++ b/web/src/pages/providers/saml/SAMLProviderViewPage.ts
@@ -120,7 +120,7 @@ export class SAMLProviderViewPage extends LitElement {
                                         </span>
                                         <ak-provider-saml-form
                                             slot="form"
-                                            .providerUUID=${this.provider.pk || 0}>
+                                            .instancePk=${this.provider.pk || 0}>
                                         </ak-provider-saml-form>
                                         <button slot="trigger" class="pf-c-button pf-m-primary">
                                             ${t`Edit`}
diff --git a/web/src/pages/sources/SourcesListPage.ts b/web/src/pages/sources/SourcesListPage.ts
index e00d7443d..a2c4d6121 100644
--- a/web/src/pages/sources/SourcesListPage.ts
+++ b/web/src/pages/sources/SourcesListPage.ts
@@ -75,7 +75,7 @@ export class SourceListPage extends TablePage<Source> {
                 <ak-proxy-form
                     slot="form"
                     .args=${{
-                        "sourceSlug": item.slug
+                        "instancePk": item.slug
                     }}
                     type=${ifDefined(item.component)}>
                 </ak-proxy-form>
diff --git a/web/src/pages/sources/ldap/LDAPSourceForm.ts b/web/src/pages/sources/ldap/LDAPSourceForm.ts
index 844a74d98..8d1da3d3a 100644
--- a/web/src/pages/sources/ldap/LDAPSourceForm.ts
+++ b/web/src/pages/sources/ldap/LDAPSourceForm.ts
@@ -1,31 +1,26 @@
 import { LDAPSource, SourcesApi, PropertymappingsApi } from "authentik-api";
 import { t } from "@lingui/macro";
-import { customElement, property } from "lit-element";
+import { customElement } from "lit-element";
 import { html, TemplateResult } from "lit-html";
 import { DEFAULT_CONFIG } from "../../../api/Config";
-import { Form } from "../../../elements/forms/Form";
 import "../../../elements/forms/FormGroup";
 import "../../../elements/forms/HorizontalFormElement";
 import { ifDefined } from "lit-html/directives/if-defined";
 import { until } from "lit-html/directives/until";
 import { first } from "../../../utils";
+import { ModelForm } from "../../../elements/forms/ModelForm";
 
 @customElement("ak-source-ldap-form")
-export class LDAPSourceForm extends Form<LDAPSource> {
+export class LDAPSourceForm extends ModelForm<LDAPSource, string> {
 
-    set sourceSlug(value: string) {
-        new SourcesApi(DEFAULT_CONFIG).sourcesLdapRead({
-            slug: value,
-        }).then(source => {
-            this.source = source;
+    loadInstance(pk: string): Promise<LDAPSource> {
+        return new SourcesApi(DEFAULT_CONFIG).sourcesLdapRead({
+            slug: pk,
         });
     }
 
-    @property({attribute: false})
-    source?: LDAPSource;
-
     getSuccessMessage(): string {
-        if (this.source) {
+        if (this.instance) {
             return t`Successfully updated source.`;
         } else {
             return t`Successfully created source.`;
@@ -33,9 +28,9 @@ export class LDAPSourceForm extends Form<LDAPSource> {
     }
 
     send = (data: LDAPSource): Promise<LDAPSource> => {
-        if (this.source) {
+        if (this.instance) {
             return new SourcesApi(DEFAULT_CONFIG).sourcesLdapPartialUpdate({
-                slug: this.source.slug,
+                slug: this.instance.slug,
                 data: data
             });
         } else {
@@ -51,17 +46,17 @@ export class LDAPSourceForm extends Form<LDAPSource> {
                 label=${t`Name`}
                 ?required=${true}
                 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
                 label=${t`Slug`}
                 ?required=${true}
                 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 name="enabled">
                 <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">
                         ${t`Enabled`}
                     </label>
@@ -69,7 +64,7 @@ export class LDAPSourceForm extends Form<LDAPSource> {
             </ak-form-element-horizontal>
             <ak-form-element-horizontal name="syncUsers">
                 <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">
                         ${t`Sync users`}
                     </label>
@@ -77,7 +72,7 @@ export class LDAPSourceForm extends Form<LDAPSource> {
             </ak-form-element-horizontal>
             <ak-form-element-horizontal name="syncUsersPassword">
                 <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">
                         ${t`User password writeback`}
                     </label>
@@ -86,7 +81,7 @@ export class LDAPSourceForm extends Form<LDAPSource> {
             </ak-form-element-horizontal>
             <ak-form-element-horizontal name="syncGroups">
                 <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">
                         ${t`Sync groups`}
                     </label>
@@ -101,11 +96,11 @@ export class LDAPSourceForm extends Form<LDAPSource> {
                         label=${t`Server URI`}
                         ?required=${true}
                         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 name="startTls">
                         <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">
                                 ${t`Enable StartTLS`}
                             </label>
@@ -115,20 +110,20 @@ export class LDAPSourceForm extends Form<LDAPSource> {
                         label=${t`Bind CN`}
                         ?required=${true}
                         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
                         label=${t`Bind Password`}
                         ?required=${true}
-                        ?writeOnly=${this.source !== undefined}
+                        ?writeOnly=${this.instance !== undefined}
                         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
                         label=${t`Base DN`}
                         ?required=${true}
                         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>
                 </div>
             </ak-form-group>
@@ -147,10 +142,10 @@ export class LDAPSourceForm extends Form<LDAPSource> {
                             }).then(mappings => {
                                 return mappings.results.map(mapping => {
                                     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;
                                     } else {
-                                        selected = Array.from(this.source?.propertyMappings).some(su => {
+                                        selected = Array.from(this.instance?.propertyMappings).some(su => {
                                             return su == mapping.pk;
                                         });
                                     }
@@ -171,10 +166,10 @@ export class LDAPSourceForm extends Form<LDAPSource> {
                             }).then(mappings => {
                                 return mappings.results.map(mapping => {
                                     let selected = false;
-                                    if (!this.source?.propertyMappingsGroup) {
+                                    if (!this.instance?.propertyMappingsGroup) {
                                         selected = mapping.managed === "goauthentik.io/sources/ldap/default-name";
                                     } else {
-                                        selected = Array.from(this.source?.propertyMappingsGroup).some(su => {
+                                        selected = Array.from(this.instance?.propertyMappingsGroup).some(su => {
                                             return su == mapping.pk;
                                         });
                                     }
@@ -188,41 +183,41 @@ export class LDAPSourceForm extends Form<LDAPSource> {
                     <ak-form-element-horizontal
                         label=${t`Addition User DN`}
                         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>
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
                         label=${t`Addition Group DN`}
                         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>
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
                         label=${t`User object filter`}
                         ?required=${true}
                         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>
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
                         label=${t`Group object filter`}
                         ?required=${true}
                         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>
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
                         label=${t`Group membership field`}
                         ?required=${true}
                         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>
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
                         label=${t`Object uniqueness field`}
                         ?required=${true}
                         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>
                     </ak-form-element-horizontal>
                 </div>
diff --git a/web/src/pages/sources/ldap/LDAPSourceViewPage.ts b/web/src/pages/sources/ldap/LDAPSourceViewPage.ts
index 97f27cefa..11db0d025 100644
--- a/web/src/pages/sources/ldap/LDAPSourceViewPage.ts
+++ b/web/src/pages/sources/ldap/LDAPSourceViewPage.ts
@@ -103,7 +103,7 @@ export class LDAPSourceViewPage extends LitElement {
                                         </span>
                                         <ak-source-ldap-form
                                             slot="form"
-                                            .sourceSlug=${this.source.slug}>
+                                            .instancePk=${this.source.slug}>
                                         </ak-source-ldap-form>
                                         <button slot="trigger" class="pf-c-button pf-m-primary">
                                             ${t`Edit`}
diff --git a/web/src/pages/sources/oauth/OAuthSourceForm.ts b/web/src/pages/sources/oauth/OAuthSourceForm.ts
index 959607af1..d72ad0632 100644
--- a/web/src/pages/sources/oauth/OAuthSourceForm.ts
+++ b/web/src/pages/sources/oauth/OAuthSourceForm.ts
@@ -3,32 +3,29 @@ import { t } from "@lingui/macro";
 import { customElement, property } from "lit-element";
 import { html, TemplateResult } from "lit-html";
 import { DEFAULT_CONFIG } from "../../../api/Config";
-import { Form } from "../../../elements/forms/Form";
 import "../../../elements/forms/FormGroup";
 import "../../../elements/forms/HorizontalFormElement";
 import { ifDefined } from "lit-html/directives/if-defined";
 import { until } from "lit-html/directives/until";
 import { first } from "../../../utils";
 import { AppURLManager } from "../../../api/legacy";
+import { ModelForm } from "../../../elements/forms/ModelForm";
 
 @customElement("ak-source-oauth-form")
-export class OAuthSourceForm extends Form<OAuthSource> {
+export class OAuthSourceForm extends ModelForm<OAuthSource, string> {
 
-    set sourceSlug(value: string) {
-        new SourcesApi(DEFAULT_CONFIG).sourcesOauthRead({
-            slug: value,
+    loadInstance(pk: string): Promise<OAuthSource> {
+        return new SourcesApi(DEFAULT_CONFIG).sourcesOauthRead({
+            slug: pk,
         }).then(source => {
-            this.source = source;
             this.showUrlOptions = first(source.type?.urlsCustomizable, false);
+            return source;
         });
     }
 
     @property()
     modelName?: string;
 
-    @property({attribute: false})
-    source?: OAuthSource;
-
     @property({type: Boolean})
     showUrlOptions = false;
 
@@ -36,7 +33,7 @@ export class OAuthSourceForm extends Form<OAuthSource> {
     showRequestTokenURL = false;
 
     getSuccessMessage(): string {
-        if (this.source) {
+        if (this.instance) {
             return t`Successfully updated source.`;
         } else {
             return t`Successfully created source.`;
@@ -44,9 +41,9 @@ export class OAuthSourceForm extends Form<OAuthSource> {
     }
 
     send = (data: OAuthSource): Promise<OAuthSource> => {
-        if (this.source) {
+        if (this.instance) {
             return new SourcesApi(DEFAULT_CONFIG).sourcesOauthUpdate({
-                slug: this.source.slug,
+                slug: this.instance.slug,
                 data: data
             });
         } else {
@@ -70,27 +67,27 @@ export class OAuthSourceForm extends Form<OAuthSource> {
                         label=${t`Authorization URL`}
                         ?required=${true}
                         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>
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
                         label=${t`Access token URL`}
                         ?required=${true}
                         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>
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
                         label=${t`Profile URL`}
                         ?required=${true}
                         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>
                     </ak-form-element-horizontal>
                     ${this.showRequestTokenURL ? html`<ak-form-element-horizontal
                         label=${t`Request token URL`}
                         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>
                     </ak-form-element-horizontal>
                     ` : html``}
@@ -112,13 +109,13 @@ export class OAuthSourceForm extends Form<OAuthSource> {
                 label=${t`Name`}
                 ?required=${true}
                 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
                 label=${t`Slug`}
                 ?required=${true}
                 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 label = this.shadowRoot?.querySelector<HTMLSpanElement>("#callback-url");
                     if (!label) return;
@@ -126,12 +123,12 @@ export class OAuthSourceForm extends Form<OAuthSource> {
                 }}>
                 <p class="pf-c-form__helper-text">
                     ${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>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal name="enabled">
                 <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">
                         ${t`Enabled`}
                     </label>
@@ -142,19 +139,19 @@ export class OAuthSourceForm extends Form<OAuthSource> {
                 ?required=${true}
                 name="userMatchingMode">
                 <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`}
                     </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`}
                     </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.`}
                     </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.`}
                     </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.`}
                     </option>
                 </select>
@@ -169,14 +166,14 @@ export class OAuthSourceForm extends Form<OAuthSource> {
                         label=${t`Consumer key`}
                         ?required=${true}
                         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
                         label=${t`Consumer secret`}
                         ?required=${true}
-                        ?writeOnly=${this.source !== undefined}
+                        ?writeOnly=${this.instance !== undefined}
                         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
                         label=${t`Provider type`}
@@ -194,15 +191,15 @@ export class OAuthSourceForm extends Form<OAuthSource> {
                             } else {
                                 this.showRequestTokenURL = false;
                             }
-                            if (!this.source) {
-                                this.source = {} as OAuthSource;
+                            if (!this.instance) {
+                                this.instance = {} as OAuthSource;
                             }
-                            this.source.providerType = selected.value;
+                            this.instance.providerType = selected.value;
                         }}>
                             ${until(new SourcesApi(DEFAULT_CONFIG).sourcesOauthSourceTypes().then(types => {
                                 return types.map(type => {
-                                    let selected = this.source?.providerType === type.slug;
-                                    if (!this.source?.pk) {
+                                    let selected = this.instance?.providerType === type.slug;
+                                    if (!this.instance?.pk) {
                                         if (this.modelName?.replace("oauthsource", "") === type.slug) {
                                             selected = true;
                                         }
@@ -236,8 +233,8 @@ export class OAuthSourceForm extends Form<OAuthSource> {
                                 designation: FlowDesignationEnum.Authentication,
                             }).then(flows => {
                                 return flows.results.map(flow => {
-                                    let selected = this.source?.authenticationFlow === flow.pk;
-                                    if (!this.source?.pk && !this.source?.authenticationFlow && flow.slug === "default-source-authentication") {
+                                    let selected = this.instance?.authenticationFlow === flow.pk;
+                                    if (!this.instance?.pk && !this.instance?.authenticationFlow && flow.slug === "default-source-authentication") {
                                         selected = true;
                                     }
                                     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,
                             }).then(flows => {
                                 return flows.results.map(flow => {
-                                    let selected = this.source?.enrollmentFlow === flow.pk;
-                                    if (!this.source?.pk && !this.source?.enrollmentFlow && flow.slug === "default-source-enrollment") {
+                                    let selected = this.instance?.enrollmentFlow === flow.pk;
+                                    if (!this.instance?.pk && !this.instance?.enrollmentFlow && flow.slug === "default-source-enrollment") {
                                         selected = true;
                                     }
                                     return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`;
diff --git a/web/src/pages/sources/oauth/OAuthSourceViewPage.ts b/web/src/pages/sources/oauth/OAuthSourceViewPage.ts
index 97c07362c..b4f9bb498 100644
--- a/web/src/pages/sources/oauth/OAuthSourceViewPage.ts
+++ b/web/src/pages/sources/oauth/OAuthSourceViewPage.ts
@@ -122,7 +122,7 @@ export class OAuthSourceViewPage extends LitElement {
                                         </span>
                                         <ak-source-oauth-form
                                             slot="form"
-                                            .sourceSlug=${this.source.slug}>
+                                            .instancePk=${this.source.slug}>
                                         </ak-source-oauth-form>
                                         <button slot="trigger" class="pf-c-button pf-m-primary">
                                             ${t`Edit`}
diff --git a/web/src/pages/sources/plex/PlexSourceForm.ts b/web/src/pages/sources/plex/PlexSourceForm.ts
index b4aa4db31..a95fb5631 100644
--- a/web/src/pages/sources/plex/PlexSourceForm.ts
+++ b/web/src/pages/sources/plex/PlexSourceForm.ts
@@ -10,26 +10,22 @@ import { ifDefined } from "lit-html/directives/if-defined";
 import { until } from "lit-html/directives/until";
 import { first, randomString } from "../../../utils";
 import { PlexAPIClient, PlexResource, popupCenterScreen} from "../../../flows/sources/plex/API";
+import { ModelForm } from "../../../elements/forms/ModelForm";
 
 
 @customElement("ak-source-plex-form")
-export class PlexSourceForm extends Form<PlexSource> {
+export class PlexSourceForm extends ModelForm<PlexSource, string> {
 
-    set sourceSlug(value: string) {
-        new SourcesApi(DEFAULT_CONFIG).sourcesPlexRead({
-            slug: value,
+    loadInstance(pk: string): Promise<PlexSource> {
+        return new SourcesApi(DEFAULT_CONFIG).sourcesPlexRead({
+            slug: pk,
         }).then(source => {
-            this.source = source;
             this.plexToken = source.plexToken;
             this.loadServers();
+            return source;
         });
     }
 
-    @property({attribute: false})
-    source: PlexSource = {
-        clientId: randomString(40)
-    } as PlexSource;
-
     @property()
     plexToken?: string;
 
@@ -37,7 +33,7 @@ export class PlexSourceForm extends Form<PlexSource> {
     plexResources?: PlexResource[];
 
     getSuccessMessage(): string {
-        if (this.source) {
+        if (this.instance) {
             return t`Successfully updated source.`;
         } else {
             return t`Successfully created source.`;
@@ -46,9 +42,9 @@ export class PlexSourceForm extends Form<PlexSource> {
 
     send = (data: PlexSource): Promise<PlexSource> => {
         data.plexToken = this.plexToken;
-        if (this.source.slug) {
+        if (this.instance?.slug) {
             return new SourcesApi(DEFAULT_CONFIG).sourcesPlexUpdate({
-                slug: this.source.slug,
+                slug: this.instance.slug,
                 data: data
             });
         } else {
@@ -59,9 +55,9 @@ export class PlexSourceForm extends Form<PlexSource> {
     };
 
     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);
-        PlexAPIClient.pinPoll(this.source?.clientId || "", authInfo.pin.id).then(token => {
+        PlexAPIClient.pinPoll(this.instance?.clientId || "", authInfo.pin.id).then(token => {
             authWindow?.close();
             this.plexToken = token;
             this.loadServers();
@@ -81,17 +77,17 @@ export class PlexSourceForm extends Form<PlexSource> {
                 label=${t`Name`}
                 ?required=${true}
                 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
                 label=${t`Slug`}
                 ?required=${true}
                 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 name="enabled">
                 <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">
                         ${t`Enabled`}
                     </label>
@@ -102,19 +98,19 @@ export class PlexSourceForm extends Form<PlexSource> {
                 ?required=${true}
                 name="userMatchingMode">
                 <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`}
                     </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`}
                     </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.`}
                     </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.`}
                     </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.`}
                     </option>
                 </select>
@@ -129,11 +125,11 @@ export class PlexSourceForm extends Form<PlexSource> {
                         label=${t`Client ID`}
                         ?required=${true}
                         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 name="allowFriends">
                         <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">
                                 ${t`Allow friends to authenticate via Plex, even if you don't share any servers`}
                             </label>
@@ -145,7 +141,7 @@ export class PlexSourceForm extends Form<PlexSource> {
                         name="allowedServers">
                         <select class="pf-c-form-control" multiple>
                             ${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 html`<option value=${r.clientIdentifier} ?selected=${selected}>${r.name}</option>`;
@@ -178,8 +174,8 @@ export class PlexSourceForm extends Form<PlexSource> {
                                 designation: FlowDesignationEnum.Authentication,
                             }).then(flows => {
                                 return flows.results.map(flow => {
-                                    let selected = this.source?.authenticationFlow === flow.pk;
-                                    if (!this.source?.pk && !this.source?.authenticationFlow && flow.slug === "default-source-authentication") {
+                                    let selected = this.instance?.authenticationFlow === flow.pk;
+                                    if (!this.instance?.pk && !this.instance?.authenticationFlow && flow.slug === "default-source-authentication") {
                                         selected = true;
                                     }
                                     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,
                             }).then(flows => {
                                 return flows.results.map(flow => {
-                                    let selected = this.source?.enrollmentFlow === flow.pk;
-                                    if (!this.source?.pk && !this.source?.enrollmentFlow && flow.slug === "default-source-enrollment") {
+                                    let selected = this.instance?.enrollmentFlow === flow.pk;
+                                    if (!this.instance?.pk && !this.instance?.enrollmentFlow && flow.slug === "default-source-enrollment") {
                                         selected = true;
                                     }
                                     return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`;
diff --git a/web/src/pages/sources/plex/PlexSourceViewPage.ts b/web/src/pages/sources/plex/PlexSourceViewPage.ts
index 2640cd11d..556c610e3 100644
--- a/web/src/pages/sources/plex/PlexSourceViewPage.ts
+++ b/web/src/pages/sources/plex/PlexSourceViewPage.ts
@@ -82,7 +82,7 @@ export class PlexSourceViewPage extends LitElement {
                                         </span>
                                         <ak-source-plex-form
                                             slot="form"
-                                            .sourceSlug=${this.source.slug}>
+                                            .instancePk=${this.source.slug}>
                                         </ak-source-plex-form>
                                         <button slot="trigger" class="pf-c-button pf-m-primary">
                                             ${t`Edit`}
diff --git a/web/src/pages/sources/saml/SAMLSourceForm.ts b/web/src/pages/sources/saml/SAMLSourceForm.ts
index 2fc1dfc28..d45f9b246 100644
--- a/web/src/pages/sources/saml/SAMLSourceForm.ts
+++ b/web/src/pages/sources/saml/SAMLSourceForm.ts
@@ -9,23 +9,19 @@ import "../../../elements/forms/HorizontalFormElement";
 import { ifDefined } from "lit-html/directives/if-defined";
 import { until } from "lit-html/directives/until";
 import { first } from "../../../utils";
+import { ModelForm } from "../../../elements/forms/ModelForm";
 
 @customElement("ak-source-saml-form")
-export class SAMLSourceForm extends Form<SAMLSource> {
+export class SAMLSourceForm extends ModelForm<SAMLSource, string> {
 
-    set sourceSlug(value: string) {
-        new SourcesApi(DEFAULT_CONFIG).sourcesSamlRead({
-            slug: value,
-        }).then(source => {
-            this.source = source;
+    loadInstance(pk: string): Promise<SAMLSource> {
+        return new SourcesApi(DEFAULT_CONFIG).sourcesSamlRead({
+            slug: pk,
         });
     }
 
-    @property({attribute: false})
-    source?: SAMLSource;
-
     getSuccessMessage(): string {
-        if (this.source) {
+        if (this.instance) {
             return t`Successfully updated source.`;
         } else {
             return t`Successfully created source.`;
@@ -33,9 +29,9 @@ export class SAMLSourceForm extends Form<SAMLSource> {
     }
 
     send = (data: SAMLSource): Promise<SAMLSource> => {
-        if (this.source) {
+        if (this.instance) {
             return new SourcesApi(DEFAULT_CONFIG).sourcesSamlUpdate({
-                slug: this.source.slug,
+                slug: this.instance.slug,
                 data: data
             });
         } else {
@@ -51,17 +47,17 @@ export class SAMLSourceForm extends Form<SAMLSource> {
                 label=${t`Name`}
                 ?required=${true}
                 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
                 label=${t`Slug`}
                 ?required=${true}
                 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 name="enabled">
                 <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">
                         ${t`Enabled`}
                     </label>
@@ -77,19 +73,19 @@ export class SAMLSourceForm extends Form<SAMLSource> {
                         label=${t`SSO URL`}
                         ?required=${true}
                         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>
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
                         label=${t`SLO URL`}
                         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>
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
                         label=${t`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>
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
@@ -97,13 +93,13 @@ export class SAMLSourceForm extends Form<SAMLSource> {
                         ?required=${true}
                         name="bindingType">
                         <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`}
                             </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)`}
                             </option>
-                            <option value=${SAMLSourceBindingTypeEnum.Post} ?selected=${this.source?.bindingType === SAMLSourceBindingTypeEnum.Post}>
+                            <option value=${SAMLSourceBindingTypeEnum.Post} ?selected=${this.instance?.bindingType === SAMLSourceBindingTypeEnum.Post}>
                                 ${t`Post binding`}
                             </option>
                         </select>
@@ -112,12 +108,12 @@ export class SAMLSourceForm extends Form<SAMLSource> {
                         label=${t`Signing keypair`}
                         name="signingKp">
                         <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({
                                 ordering: "pk",
                             }).then(keys => {
                                 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>`)}
                         </select>
@@ -132,7 +128,7 @@ export class SAMLSourceForm extends Form<SAMLSource> {
                 <div slot="body" class="pf-c-form">
                     <ak-form-element-horizontal name="allowIdpInitiated">
                         <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">
                                 ${t` Allow IDP-initiated logins`}
                             </label>
@@ -144,19 +140,19 @@ export class SAMLSourceForm extends Form<SAMLSource> {
                         ?required=${true}
                         name="nameIdPolicy">
                         <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`}
                             </option>
-                            <option value=${SAMLSourceNameIdPolicyEnum._11nameidFormatemailAddress} ?selected=${this.source?.nameIdPolicy === SAMLSourceNameIdPolicyEnum._11nameidFormatemailAddress}>
+                            <option value=${SAMLSourceNameIdPolicyEnum._11nameidFormatemailAddress} ?selected=${this.instance?.nameIdPolicy === SAMLSourceNameIdPolicyEnum._11nameidFormatemailAddress}>
                                 ${t`Email address`}
                             </option>
-                            <option value=${SAMLSourceNameIdPolicyEnum._20nameidFormatWindowsDomainQualifiedName} ?selected=${this.source?.nameIdPolicy === SAMLSourceNameIdPolicyEnum._20nameidFormatWindowsDomainQualifiedName}>
+                            <option value=${SAMLSourceNameIdPolicyEnum._20nameidFormatWindowsDomainQualifiedName} ?selected=${this.instance?.nameIdPolicy === SAMLSourceNameIdPolicyEnum._20nameidFormatWindowsDomainQualifiedName}>
                                 ${t`Windows`}
                             </option>
-                            <option value=${SAMLSourceNameIdPolicyEnum._20nameidFormatX509SubjectName} ?selected=${this.source?.nameIdPolicy === SAMLSourceNameIdPolicyEnum._20nameidFormatX509SubjectName}>
+                            <option value=${SAMLSourceNameIdPolicyEnum._20nameidFormatX509SubjectName} ?selected=${this.instance?.nameIdPolicy === SAMLSourceNameIdPolicyEnum._20nameidFormatX509SubjectName}>
                                 ${t`X509 Subject`}
                             </option>
-                            <option value=${SAMLSourceNameIdPolicyEnum._20nameidFormattransient} ?selected=${this.source?.nameIdPolicy === SAMLSourceNameIdPolicyEnum._20nameidFormattransient}>
+                            <option value=${SAMLSourceNameIdPolicyEnum._20nameidFormattransient} ?selected=${this.instance?.nameIdPolicy === SAMLSourceNameIdPolicyEnum._20nameidFormattransient}>
                                 ${t`Transient`}
                             </option>
                         </select>
@@ -165,7 +161,7 @@ export class SAMLSourceForm extends Form<SAMLSource> {
                         label=${t`Delete temporary users after`}
                         ?required=${true}
                         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>
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
@@ -173,16 +169,16 @@ export class SAMLSourceForm extends Form<SAMLSource> {
                         ?required=${true}
                         name="digestAlgorithm">
                         <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`}
                             </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`}
                             </option>
-                            <option value=${SAMLSourceDigestAlgorithmEnum._200104XmldsigMoresha384} ?selected=${this.source?.digestAlgorithm === SAMLSourceDigestAlgorithmEnum._200104XmldsigMoresha384}>
+                            <option value=${SAMLSourceDigestAlgorithmEnum._200104XmldsigMoresha384} ?selected=${this.instance?.digestAlgorithm === SAMLSourceDigestAlgorithmEnum._200104XmldsigMoresha384}>
                                 ${t`SHA384`}
                             </option>
-                            <option value=${SAMLSourceDigestAlgorithmEnum._200104Xmlencsha512} ?selected=${this.source?.digestAlgorithm === SAMLSourceDigestAlgorithmEnum._200104Xmlencsha512}>
+                            <option value=${SAMLSourceDigestAlgorithmEnum._200104Xmlencsha512} ?selected=${this.instance?.digestAlgorithm === SAMLSourceDigestAlgorithmEnum._200104Xmlencsha512}>
                                 ${t`SHA512`}
                             </option>
                         </select>
@@ -192,19 +188,19 @@ export class SAMLSourceForm extends Form<SAMLSource> {
                         ?required=${true}
                         name="signatureAlgorithm">
                         <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`}
                             </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`}
                             </option>
-                            <option value=${SAMLSourceSignatureAlgorithmEnum._200104XmldsigMorersaSha384} ?selected=${this.source?.signatureAlgorithm === SAMLSourceSignatureAlgorithmEnum._200104XmldsigMorersaSha384}>
+                            <option value=${SAMLSourceSignatureAlgorithmEnum._200104XmldsigMorersaSha384} ?selected=${this.instance?.signatureAlgorithm === SAMLSourceSignatureAlgorithmEnum._200104XmldsigMorersaSha384}>
                                 ${t`RSA-SHA384`}
                             </option>
-                            <option value=${SAMLSourceSignatureAlgorithmEnum._200104XmldsigMorersaSha512} ?selected=${this.source?.signatureAlgorithm === SAMLSourceSignatureAlgorithmEnum._200104XmldsigMorersaSha512}>
+                            <option value=${SAMLSourceSignatureAlgorithmEnum._200104XmldsigMorersaSha512} ?selected=${this.instance?.signatureAlgorithm === SAMLSourceSignatureAlgorithmEnum._200104XmldsigMorersaSha512}>
                                 ${t`RSA-SHA512`}
                             </option>
-                            <option value=${SAMLSourceSignatureAlgorithmEnum._200009XmldsigdsaSha1} ?selected=${this.source?.signatureAlgorithm === SAMLSourceSignatureAlgorithmEnum._200009XmldsigdsaSha1}>
+                            <option value=${SAMLSourceSignatureAlgorithmEnum._200009XmldsigdsaSha1} ?selected=${this.instance?.signatureAlgorithm === SAMLSourceSignatureAlgorithmEnum._200009XmldsigdsaSha1}>
                                 ${t`DSA-SHA1`}
                             </option>
                         </select>
@@ -226,8 +222,8 @@ export class SAMLSourceForm extends Form<SAMLSource> {
                                 designation: FlowDesignationEnum.StageConfiguration,
                             }).then(flows => {
                                 return flows.results.map(flow => {
-                                    let selected = this.source?.preAuthenticationFlow === flow.pk;
-                                    if (!this.source?.pk && !this.source?.preAuthenticationFlow && flow.slug === "default-source-pre-authentication") {
+                                    let selected = this.instance?.preAuthenticationFlow === flow.pk;
+                                    if (!this.instance?.pk && !this.instance?.preAuthenticationFlow && flow.slug === "default-source-pre-authentication") {
                                         selected = true;
                                     }
                                     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,
                             }).then(flows => {
                                 return flows.results.map(flow => {
-                                    let selected = this.source?.authenticationFlow === flow.pk;
-                                    if (!this.source?.pk && !this.source?.authenticationFlow && flow.slug === "default-source-authentication") {
+                                    let selected = this.instance?.authenticationFlow === flow.pk;
+                                    if (!this.instance?.pk && !this.instance?.authenticationFlow && flow.slug === "default-source-authentication") {
                                         selected = true;
                                     }
                                     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,
                             }).then(flows => {
                                 return flows.results.map(flow => {
-                                    let selected = this.source?.enrollmentFlow === flow.pk;
-                                    if (!this.source?.pk && !this.source?.enrollmentFlow && flow.slug === "default-source-enrollment") {
+                                    let selected = this.instance?.enrollmentFlow === flow.pk;
+                                    if (!this.instance?.pk && !this.instance?.enrollmentFlow && flow.slug === "default-source-enrollment") {
                                         selected = true;
                                     }
                                     return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`;
diff --git a/web/src/pages/sources/saml/SAMLSourceViewPage.ts b/web/src/pages/sources/saml/SAMLSourceViewPage.ts
index 730a183ea..2449f2c65 100644
--- a/web/src/pages/sources/saml/SAMLSourceViewPage.ts
+++ b/web/src/pages/sources/saml/SAMLSourceViewPage.ts
@@ -109,7 +109,7 @@ export class SAMLSourceViewPage extends LitElement {
                                         </span>
                                         <ak-source-saml-form
                                             slot="form"
-                                            .sourceSlug=${this.source.slug}>
+                                            .instancePk=${this.source.slug}>
                                         </ak-source-saml-form>
                                         <button slot="trigger" class="pf-c-button pf-m-primary">
                                             ${t`Edit`}