From 4d11d82c6e5879556ab5de6e5d4ee53866e64d92 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Tue, 11 May 2021 11:55:25 +0200
Subject: [PATCH] web/admin: migrate more forms

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 .../pages/crypto/CertificateKeyPairForm.ts    | 26 ++++++-----
 .../crypto/CertificateKeyPairListPage.ts      |  2 +-
 web/src/pages/events/RuleForm.ts              | 30 +++++++------
 web/src/pages/events/RuleListPage.ts          |  2 +-
 web/src/pages/events/TransportForm.ts         | 32 ++++++++------
 web/src/pages/events/TransportListPage.ts     |  2 +-
 web/src/pages/flows/BoundStagesList.ts        |  2 +-
 web/src/pages/flows/FlowForm.ts               | 44 ++++++++++---------
 web/src/pages/flows/FlowListPage.ts           |  2 +-
 web/src/pages/flows/StageBindingForm.ts       | 34 +++++++-------
 10 files changed, 98 insertions(+), 78 deletions(-)

diff --git a/web/src/pages/crypto/CertificateKeyPairForm.ts b/web/src/pages/crypto/CertificateKeyPairForm.ts
index fa2b36980..e466c268d 100644
--- a/web/src/pages/crypto/CertificateKeyPairForm.ts
+++ b/web/src/pages/crypto/CertificateKeyPairForm.ts
@@ -7,15 +7,19 @@ 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-crypto-certificate-form")
-export class CertificateKeyPairForm extends Form<CertificateKeyPair> {
+export class CertificateKeyPairForm extends ModelForm<CertificateKeyPair, string> {
 
-    @property({attribute: false})
-    keyPair?: CertificateKeyPair;
+    loadInstance(pk: string): Promise<CertificateKeyPair> {
+        return new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsRead({
+            kpUuid: pk,
+        });
+    }
 
     getSuccessMessage(): string {
-        if (this.keyPair) {
+        if (this.instance) {
             return t`Successfully updated certificate-key pair.`;
         } else {
             return t`Successfully created certificate-key pair.`;
@@ -23,9 +27,9 @@ export class CertificateKeyPairForm extends Form<CertificateKeyPair> {
     }
 
     send = (data: CertificateKeyPair): Promise<CertificateKeyPair> => {
-        if (this.keyPair) {
+        if (this.instance) {
             return new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsPartialUpdate({
-                kpUuid: this.keyPair.pk || "",
+                kpUuid: this.instance.pk || "",
                 data: data
             });
         } else {
@@ -41,21 +45,21 @@ export class CertificateKeyPairForm extends Form<CertificateKeyPair> {
                 label=${t`Name`}
                 name="name"
                 ?required=${true}>
-                <input type="text" value="${ifDefined(this.keyPair?.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`Certificate`}
                 name="certificateData"
-                ?writeOnly=${this.keyPair !== undefined}
+                ?writeOnly=${this.instance !== undefined}
                 ?required=${true}>
-                <textarea class="pf-c-form-control" required>${ifDefined(this.keyPair?.certificateData)}</textarea>
+                <textarea class="pf-c-form-control" required>${ifDefined(this.instance?.certificateData)}</textarea>
                 <p class="pf-c-form__helper-text">${t`PEM-encoded Certificate data.`}</p>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal
                 name="keyData"
-                ?writeOnly=${this.keyPair !== undefined}
+                ?writeOnly=${this.instance !== undefined}
                 label=${t`Private Key`}>
-                <textarea class="pf-c-form-control" >${ifDefined(this.keyPair?.keyData)}</textarea>
+                <textarea class="pf-c-form-control" >${ifDefined(this.instance?.keyData)}</textarea>
                 <p class="pf-c-form__helper-text">${t`Optional Private Key. If this is set, you can use this keypair for encryption.`}</p>
             </ak-form-element-horizontal>
         </form>`;
diff --git a/web/src/pages/crypto/CertificateKeyPairListPage.ts b/web/src/pages/crypto/CertificateKeyPairListPage.ts
index 5add00041..06e39bdac 100644
--- a/web/src/pages/crypto/CertificateKeyPairListPage.ts
+++ b/web/src/pages/crypto/CertificateKeyPairListPage.ts
@@ -70,7 +70,7 @@ export class CertificateKeyPairListPage extends TablePage<CertificateKeyPair> {
                 <span slot="header">
                     ${t`Update Certificate-Key Pair`}
                 </span>
-                <ak-crypto-certificate-form slot="form" .keyPair=${item}>
+                <ak-crypto-certificate-form slot="form" .instancePk=${item.pk}>
                 </ak-crypto-certificate-form>
                 <button slot="trigger" class="pf-c-button pf-m-secondary">
                     ${t`Edit`}
diff --git a/web/src/pages/events/RuleForm.ts b/web/src/pages/events/RuleForm.ts
index 16a1c4cb5..660dcbd2c 100644
--- a/web/src/pages/events/RuleForm.ts
+++ b/web/src/pages/events/RuleForm.ts
@@ -7,15 +7,19 @@ import { Form } from "../../elements/forms/Form";
 import { ifDefined } from "lit-html/directives/if-defined";
 import "../../elements/forms/HorizontalFormElement";
 import { until } from "lit-html/directives/until";
+import { ModelForm } from "../../elements/forms/ModelForm";
 
 @customElement("ak-event-rule-form")
-export class RuleForm extends Form<NotificationRule> {
+export class RuleForm extends ModelForm<NotificationRule, string> {
 
-    @property({attribute: false})
-    rule?: NotificationRule;
+    loadInstance(pk: string): Promise<NotificationRule> {
+        return new EventsApi(DEFAULT_CONFIG).eventsRulesRead({
+            pbmUuid: pk,
+        });
+    }
 
     getSuccessMessage(): string {
-        if (this.rule) {
+        if (this.instance) {
             return t`Successfully updated rule.`;
         } else {
             return t`Successfully created rule.`;
@@ -23,9 +27,9 @@ export class RuleForm extends Form<NotificationRule> {
     }
 
     send = (data: NotificationRule): Promise<NotificationRule> => {
-        if (this.rule) {
+        if (this.instance) {
             return new EventsApi(DEFAULT_CONFIG).eventsRulesUpdate({
-                pbmUuid: this.rule.pk || "",
+                pbmUuid: this.instance.pk || "",
                 data: data
             });
         } else {
@@ -37,13 +41,13 @@ export class RuleForm extends Form<NotificationRule> {
 
     renderSeverity(): TemplateResult {
         return html`
-            <option value=${NotificationRuleSeverityEnum.Alert} ?selected=${this.rule?.severity === NotificationRuleSeverityEnum.Alert}>
+            <option value=${NotificationRuleSeverityEnum.Alert} ?selected=${this.instance?.severity === NotificationRuleSeverityEnum.Alert}>
                 ${t`Alert`}
             </option>
-            <option value=${NotificationRuleSeverityEnum.Warning} ?selected=${this.rule?.severity === NotificationRuleSeverityEnum.Warning}>
+            <option value=${NotificationRuleSeverityEnum.Warning} ?selected=${this.instance?.severity === NotificationRuleSeverityEnum.Warning}>
                 ${t`Warning`}
             </option>
-            <option value=${NotificationRuleSeverityEnum.Notice} ?selected=${this.rule?.severity === NotificationRuleSeverityEnum.Notice}>
+            <option value=${NotificationRuleSeverityEnum.Notice} ?selected=${this.instance?.severity === NotificationRuleSeverityEnum.Notice}>
                 ${t`Notice`}
             </option>
         `;
@@ -55,16 +59,16 @@ export class RuleForm extends Form<NotificationRule> {
                 label=${t`Name`}
                 ?required=${true}
                 name="name">
-                <input type="text" value="${ifDefined(this.rule?.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`Group`}
                 name="group">
                 <select class="pf-c-form-control">
-                    <option value="" ?selected=${this.rule?.group === undefined}>---------</option>
+                    <option value="" ?selected=${this.instance?.group === undefined}>---------</option>
                     ${until(new CoreApi(DEFAULT_CONFIG).coreGroupsList({}).then(groups => {
                         return groups.results.map(group => {
-                            return html`<option value=${ifDefined(group.pk)} ?selected=${this.rule?.group?.groupUuid === group.pk}>${group.name}</option>`;
+                            return html`<option value=${ifDefined(group.pk)} ?selected=${this.instance?.group?.groupUuid === group.pk}>${group.name}</option>`;
                         });
                     }), html`<option>${t`Loading...`}</option>`)}
                 </select>
@@ -76,7 +80,7 @@ export class RuleForm extends Form<NotificationRule> {
                 <select name="users" class="pf-c-form-control" multiple>
                     ${until(new EventsApi(DEFAULT_CONFIG).eventsTransportsList({}).then(transports => {
                         return transports.results.map(transport => {
-                            const selected = Array.from(this.rule?.transports || []).some(su => {
+                            const selected = Array.from(this.instance?.transports || []).some(su => {
                                 return su.uuid == transport.pk;
                             });
                             return html`<option value=${ifDefined(transport.pk)} ?selected=${selected}>${transport.name}</option>`;
diff --git a/web/src/pages/events/RuleListPage.ts b/web/src/pages/events/RuleListPage.ts
index 1d7fb74e2..7ffcd4d30 100644
--- a/web/src/pages/events/RuleListPage.ts
+++ b/web/src/pages/events/RuleListPage.ts
@@ -64,7 +64,7 @@ export class RuleListPage extends TablePage<NotificationRule> {
                 <span slot="header">
                     ${t`Update Notification Rule`}
                 </span>
-                <ak-event-rule-form slot="form" .rule=${item}>
+                <ak-event-rule-form slot="form" .instancePk=${item.pk}>
                 </ak-event-rule-form>
                 <button slot="trigger" class="pf-c-button pf-m-secondary">
                     ${t`Edit`}
diff --git a/web/src/pages/events/TransportForm.ts b/web/src/pages/events/TransportForm.ts
index a919f9ffa..d908e4646 100644
--- a/web/src/pages/events/TransportForm.ts
+++ b/web/src/pages/events/TransportForm.ts
@@ -7,18 +7,22 @@ import { Form } from "../../elements/forms/Form";
 import { ifDefined } from "lit-html/directives/if-defined";
 import "../../elements/forms/HorizontalFormElement";
 import { first } from "../../utils";
+import { ModelForm } from "../../elements/forms/ModelForm";
 
 @customElement("ak-event-transport-form")
-export class TransportForm extends Form<NotificationTransport> {
+export class TransportForm extends ModelForm<NotificationTransport, string> {
 
-    @property({attribute: false})
-    transport?: NotificationTransport;
+    loadInstance(pk: string): Promise<NotificationTransport> {
+        return new EventsApi(DEFAULT_CONFIG).eventsTransportsRead({
+            uuid: pk,
+        });
+    }
 
     @property({type: Boolean})
     showWebhook = false;
 
     getSuccessMessage(): string {
-        if (this.transport) {
+        if (this.instance) {
             return t`Successfully updated transport.`;
         } else {
             return t`Successfully created transport.`;
@@ -26,9 +30,9 @@ export class TransportForm extends Form<NotificationTransport> {
     }
 
     send = (data: NotificationTransport): Promise<NotificationTransport> => {
-        if (this.transport) {
+        if (this.instance) {
             return new EventsApi(DEFAULT_CONFIG).eventsTransportsUpdate({
-                uuid: this.transport.pk || "",
+                uuid: this.instance.pk || "",
                 data: data
             });
         } else {
@@ -40,21 +44,21 @@ export class TransportForm extends Form<NotificationTransport> {
 
     renderTransportModes(): TemplateResult {
         return html`
-            <option value=${NotificationTransportModeEnum.Email} ?selected=${this.transport?.mode === NotificationTransportModeEnum.Email}>
+            <option value=${NotificationTransportModeEnum.Email} ?selected=${this.instance?.mode === NotificationTransportModeEnum.Email}>
                 ${t`Email`}
             </option>
-            <option value=${NotificationTransportModeEnum.Webhook} ?selected=${this.transport?.mode === NotificationTransportModeEnum.Webhook}>
+            <option value=${NotificationTransportModeEnum.Webhook} ?selected=${this.instance?.mode === NotificationTransportModeEnum.Webhook}>
                 ${t`Webhook (generic)`}
             </option>
-            <option value=${NotificationTransportModeEnum.WebhookSlack} ?selected=${this.transport?.mode === NotificationTransportModeEnum.WebhookSlack}>
+            <option value=${NotificationTransportModeEnum.WebhookSlack} ?selected=${this.instance?.mode === NotificationTransportModeEnum.WebhookSlack}>
                 ${t`Webhook (Slack/Discord)`}
             </option>
         `;
     }
 
     firstUpdated(): void {
-        if (this.transport) {
-            this.onModeChange(this.transport.mode);
+        if (this.instance) {
+            this.onModeChange(this.instance.mode);
         }
     }
 
@@ -72,7 +76,7 @@ export class TransportForm extends Form<NotificationTransport> {
                 label=${t`Name`}
                 ?required=${true}
                 name="name">
-                <input type="text" value="${ifDefined(this.transport?.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`Mode`}
@@ -89,11 +93,11 @@ export class TransportForm extends Form<NotificationTransport> {
                 ?hidden=${!this.showWebhook}
                 label=${t`Webhook URL`}
                 name="webhookUrl">
-                <input type="text" value="${ifDefined(this.transport?.webhookUrl)}" class="pf-c-form-control">
+                <input type="text" value="${ifDefined(this.instance?.webhookUrl)}" class="pf-c-form-control">
             </ak-form-element-horizontal>
             <ak-form-element-horizontal name="sendOnce">
                 <div class="pf-c-check">
-                    <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.transport?.sendOnce, false)}>
+                    <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.sendOnce, false)}>
                     <label class="pf-c-check__label">
                         ${t`Send once`}
                     </label>
diff --git a/web/src/pages/events/TransportListPage.ts b/web/src/pages/events/TransportListPage.ts
index 3bb67d29b..cf3ab4a16 100644
--- a/web/src/pages/events/TransportListPage.ts
+++ b/web/src/pages/events/TransportListPage.ts
@@ -68,7 +68,7 @@ export class TransportListPage extends TablePage<NotificationTransport> {
                 <span slot="header">
                     ${t`Update Notification Transport`}
                 </span>
-                <ak-event-transport-form slot="form" .transport=${item}>
+                <ak-event-transport-form slot="form" .instancePk=${item.pk}>
                 </ak-event-transport-form>
                 <button slot="trigger" class="pf-c-button pf-m-secondary">
                     ${t`Edit`}
diff --git a/web/src/pages/flows/BoundStagesList.ts b/web/src/pages/flows/BoundStagesList.ts
index f54a8b9c0..f1a1d9615 100644
--- a/web/src/pages/flows/BoundStagesList.ts
+++ b/web/src/pages/flows/BoundStagesList.ts
@@ -73,7 +73,7 @@ export class BoundStagesList extends Table<FlowStageBinding> {
                 <span slot="header">
                     ${t`Update Stage binding`}
                 </span>
-                <ak-stage-binding-form slot="form" .fsb=${item}>
+                <ak-stage-binding-form slot="form" .instancePk=${item.pk}>
                 </ak-stage-binding-form>
                 <button slot="trigger" class="pf-c-button pf-m-secondary">
                     ${t`Edit Binding`}
diff --git a/web/src/pages/flows/FlowForm.ts b/web/src/pages/flows/FlowForm.ts
index ef60875cf..39a427226 100644
--- a/web/src/pages/flows/FlowForm.ts
+++ b/web/src/pages/flows/FlowForm.ts
@@ -6,15 +6,19 @@ 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 { ModelForm } from "../../elements/forms/ModelForm";
 
 @customElement("ak-flow-form")
-export class FlowForm extends Form<Flow> {
+export class FlowForm extends ModelForm<Flow, string> {
 
-    @property({attribute: false})
-    flow?: Flow;
+    loadInstance(pk: string): Promise<Flow> {
+        return new FlowsApi(DEFAULT_CONFIG).flowsInstancesRead({
+            slug: pk,
+        });
+    }
 
     getSuccessMessage(): string {
-        if (this.flow) {
+        if (this.instance) {
             return t`Successfully updated flow.`;
         } else {
             return t`Successfully created flow.`;
@@ -23,9 +27,9 @@ export class FlowForm extends Form<Flow> {
 
     send = (data: Flow): Promise<void | Flow> => {
         let writeOp: Promise<Flow>;
-        if (this.flow) {
+        if (this.instance) {
             writeOp = new FlowsApi(DEFAULT_CONFIG).flowsInstancesUpdate({
-                slug: this.flow.slug,
+                slug: this.instance.slug,
                 data: data
             });
         } else {
@@ -47,25 +51,25 @@ export class FlowForm extends Form<Flow> {
 
     renderDesignations(): TemplateResult {
         return html`
-            <option value=${FlowDesignationEnum.Authentication} ?selected=${this.flow?.designation === FlowDesignationEnum.Authentication}>
+            <option value=${FlowDesignationEnum.Authentication} ?selected=${this.instance?.designation === FlowDesignationEnum.Authentication}>
                 ${t`Authentication`}
             </option>
-            <option value=${FlowDesignationEnum.Authorization} ?selected=${this.flow?.designation === FlowDesignationEnum.Authorization}>
+            <option value=${FlowDesignationEnum.Authorization} ?selected=${this.instance?.designation === FlowDesignationEnum.Authorization}>
                 ${t`Authorization`}
             </option>
-            <option value=${FlowDesignationEnum.Enrollment} ?selected=${this.flow?.designation === FlowDesignationEnum.Enrollment}>
+            <option value=${FlowDesignationEnum.Enrollment} ?selected=${this.instance?.designation === FlowDesignationEnum.Enrollment}>
                 ${t`Enrollment`}
             </option>
-            <option value=${FlowDesignationEnum.Invalidation} ?selected=${this.flow?.designation === FlowDesignationEnum.Invalidation}>
+            <option value=${FlowDesignationEnum.Invalidation} ?selected=${this.instance?.designation === FlowDesignationEnum.Invalidation}>
                 ${t`Invalidation`}
             </option>
-            <option value=${FlowDesignationEnum.Recovery} ?selected=${this.flow?.designation === FlowDesignationEnum.Recovery}>
+            <option value=${FlowDesignationEnum.Recovery} ?selected=${this.instance?.designation === FlowDesignationEnum.Recovery}>
                 ${t`Recovery`}
             </option>
-            <option value=${FlowDesignationEnum.StageConfiguration} ?selected=${this.flow?.designation === FlowDesignationEnum.StageConfiguration}>
+            <option value=${FlowDesignationEnum.StageConfiguration} ?selected=${this.instance?.designation === FlowDesignationEnum.StageConfiguration}>
                 ${t`Stage Configuration`}
             </option>
-            <option value=${FlowDesignationEnum.Unenrollment} ?selected=${this.flow?.designation === FlowDesignationEnum.Unenrollment}>
+            <option value=${FlowDesignationEnum.Unenrollment} ?selected=${this.instance?.designation === FlowDesignationEnum.Unenrollment}>
                 ${t`Unenrollment`}
             </option>
         `;
@@ -77,20 +81,20 @@ export class FlowForm extends Form<Flow> {
                 label=${t`Name`}
                 ?required=${true}
                 name="name">
-                <input type="text" value="${ifDefined(this.flow?.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`Title`}
                 ?required=${true}
                 name="title">
-                <input type="text" value="${ifDefined(this.flow?.title)}" class="pf-c-form-control" required>
+                <input type="text" value="${ifDefined(this.instance?.title)}" class="pf-c-form-control" required>
                 <p class="pf-c-form__helper-text">${t`Shown as the Title in Flow pages.`}</p>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal
                 label=${t`Slug`}
                 ?required=${true}
                 name="slug">
-                <input type="text" value="${ifDefined(this.flow?.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`Visible in the URL.`}</p>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal
@@ -98,10 +102,10 @@ export class FlowForm extends Form<Flow> {
                 ?required=${true}
                 name="policyEngineMode">
                 <select class="pf-c-form-control">
-                    <option value=${FlowPolicyEngineModeEnum.Any} ?selected=${this.flow?.policyEngineMode === FlowPolicyEngineModeEnum.Any}>
+                    <option value=${FlowPolicyEngineModeEnum.Any} ?selected=${this.instance?.policyEngineMode === FlowPolicyEngineModeEnum.Any}>
                         ${t`ANY, any policy must match to grant access.`}
                     </option>
-                    <option value=${FlowPolicyEngineModeEnum.All} ?selected=${this.flow?.policyEngineMode === FlowPolicyEngineModeEnum.All}>
+                    <option value=${FlowPolicyEngineModeEnum.All} ?selected=${this.instance?.policyEngineMode === FlowPolicyEngineModeEnum.All}>
                         ${t`ALL, all policies must match to grant access.`}
                     </option>
                 </select>
@@ -111,7 +115,7 @@ export class FlowForm extends Form<Flow> {
                 ?required=${true}
                 name="designation">
                 <select class="pf-c-form-control">
-                    <option value="" ?selected=${this.flow?.designation === undefined}>---------</option>
+                    <option value="" ?selected=${this.instance?.designation === undefined}>---------</option>
                     ${this.renderDesignations()}
                 </select>
                 <p class="pf-c-form__helper-text">${t`Decides what this Flow is used for. For example, the Authentication flow is redirect to when an un-authenticated user visits authentik.`}</p>
@@ -119,7 +123,7 @@ export class FlowForm extends Form<Flow> {
             <ak-form-element-horizontal
                 label=${t`Background`}
                 name="background">
-                <input type="file" value="${ifDefined(this.flow?.background)}" class="pf-c-form-control">
+                <input type="file" value="${ifDefined(this.instance?.background)}" class="pf-c-form-control">
                 <p class="pf-c-form__helper-text">${t`Background shown during execution.`}</p>
             </ak-form-element-horizontal>
         </form>`;
diff --git a/web/src/pages/flows/FlowListPage.ts b/web/src/pages/flows/FlowListPage.ts
index b335a6d99..89e9d041d 100644
--- a/web/src/pages/flows/FlowListPage.ts
+++ b/web/src/pages/flows/FlowListPage.ts
@@ -68,7 +68,7 @@ export class FlowListPage extends TablePage<Flow> {
                 <span slot="header">
                     ${t`Update Flow`}
                 </span>
-                <ak-flow-form slot="form" .flow=${item}>
+                <ak-flow-form slot="form" .instancePk=${item.pk}>
                 </ak-flow-form>
                 <button slot="trigger" class="pf-c-button pf-m-secondary">
                     ${t`Edit`}
diff --git a/web/src/pages/flows/StageBindingForm.ts b/web/src/pages/flows/StageBindingForm.ts
index 8e1d517f7..c95407868 100644
--- a/web/src/pages/flows/StageBindingForm.ts
+++ b/web/src/pages/flows/StageBindingForm.ts
@@ -8,18 +8,22 @@ import { until } from "lit-html/directives/until";
 import { ifDefined } from "lit-html/directives/if-defined";
 import "../../elements/forms/HorizontalFormElement";
 import { first, groupBy } from "../../utils";
+import { ModelForm } from "../../elements/forms/ModelForm";
 
 @customElement("ak-stage-binding-form")
-export class StageBindingForm extends Form<FlowStageBinding> {
+export class StageBindingForm extends ModelForm<FlowStageBinding, string> {
 
-    @property({attribute: false})
-    fsb?: FlowStageBinding;
+    loadInstance(pk: string): Promise<FlowStageBinding> {
+        return new FlowsApi(DEFAULT_CONFIG).flowsBindingsRead({
+            fsbUuid: pk,
+        });
+    }
 
     @property()
     targetPk?: string;
 
     getSuccessMessage(): string {
-        if (this.fsb) {
+        if (this.instance) {
             return t`Successfully updated binding.`;
         } else {
             return t`Successfully created binding.`;
@@ -27,9 +31,9 @@ export class StageBindingForm extends Form<FlowStageBinding> {
     }
 
     send = (data: FlowStageBinding): Promise<FlowStageBinding> => {
-        if (this.fsb) {
+        if (this.instance) {
             return new FlowsApi(DEFAULT_CONFIG).flowsBindingsUpdate({
-                fsbUuid: this.fsb.pk || "",
+                fsbUuid: this.instance.pk || "",
                 data: data
             });
         } else {
@@ -45,7 +49,7 @@ export class StageBindingForm extends Form<FlowStageBinding> {
             ${groupBy<Stage>(stages, (s => s.verboseName || "")).map(([group, stages]) => {
                 return html`<optgroup label=${group}>
                     ${stages.map(stage => {
-                        const selected = (this.fsb?.stage === stage.pk);
+                        const selected = (this.instance?.stage === stage.pk);
                         return html`<option ?selected=${selected} value=${ifDefined(stage.pk)}>${stage.name}</option>`;
                     })}
                 </optgroup>`;
@@ -54,8 +58,8 @@ export class StageBindingForm extends Form<FlowStageBinding> {
     }
 
     getOrder(): Promise<number> {
-        if (this.fsb) {
-            return Promise.resolve(this.fsb.order);
+        if (this.instance) {
+            return Promise.resolve(this.instance.order);
         }
         return new FlowsApi(DEFAULT_CONFIG).flowsBindingsList({
             target: this.targetPk || "",
@@ -69,9 +73,9 @@ export class StageBindingForm extends Form<FlowStageBinding> {
     }
 
     renderTarget(): TemplateResult {
-        if (this.fsb?.target || this.targetPk) {
+        if (this.instance?.target || this.targetPk) {
             return html`
-            <input required name="target" type="hidden" value=${ifDefined(this.fsb?.target || this.targetPk)}>
+            <input required name="target" type="hidden" value=${ifDefined(this.instance?.target || this.targetPk)}>
             `;
         }
         return html`<ak-form-element-horizontal
@@ -114,7 +118,7 @@ export class StageBindingForm extends Form<FlowStageBinding> {
             </ak-form-element-horizontal>
             <ak-form-element-horizontal name="evaluateOnPlan">
                 <div class="pf-c-check">
-                    <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.fsb?.evaluateOnPlan, true)}>
+                    <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.evaluateOnPlan, true)}>
                     <label class="pf-c-check__label">
                         ${t`Evaluate on plan`}
                     </label>
@@ -125,7 +129,7 @@ export class StageBindingForm extends Form<FlowStageBinding> {
             </ak-form-element-horizontal>
             <ak-form-element-horizontal name="reEvaluatePolicies">
                 <div class="pf-c-check">
-                    <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.fsb?.reEvaluatePolicies, false)}>
+                    <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.reEvaluatePolicies, false)}>
                     <label class="pf-c-check__label">
                         ${t`Re-evaluate policies`}
                     </label>
@@ -137,10 +141,10 @@ export class StageBindingForm extends Form<FlowStageBinding> {
                 ?required=${true}
                 name="policyEngineMode">
                 <select class="pf-c-form-control">
-                    <option value=${FlowStageBindingPolicyEngineModeEnum.Any} ?selected=${this.fsb?.policyEngineMode === FlowStageBindingPolicyEngineModeEnum.Any}>
+                    <option value=${FlowStageBindingPolicyEngineModeEnum.Any} ?selected=${this.instance?.policyEngineMode === FlowStageBindingPolicyEngineModeEnum.Any}>
                         ${t`ANY, any policy must match to include this stage access.`}
                     </option>
-                    <option value=${FlowStageBindingPolicyEngineModeEnum.All} ?selected=${this.fsb?.policyEngineMode === FlowStageBindingPolicyEngineModeEnum.All}>
+                    <option value=${FlowStageBindingPolicyEngineModeEnum.All} ?selected=${this.instance?.policyEngineMode === FlowStageBindingPolicyEngineModeEnum.All}>
                         ${t`ALL, all policies must match to include this stage access.`}
                     </option>
                 </select>