web: fix saving for CodeMirror not returning an object

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

authentik/core/api/propertymappings.py

@@ -116,9 +116,7 @@ class PropertyMappingViewSet(
         if not users.exists():
             raise PermissionDenied()
 
-        response_data = {
-            "successful": True
-        }
+        response_data = {"successful": True}
         try:
             result = mapping.evaluate(
                 users.first(),

web/src/elements/CodeMirror.ts

@@ -10,6 +10,7 @@ import "codemirror/mode/python/python.js";
 import CodeMirrorStyle from "codemirror/lib/codemirror.css";
 import CodeMirrorTheme from "codemirror/theme/monokai.css";
 import { ifDefined } from "lit-html/directives/if-defined";
+import YAML from "yaml";
 
 @customElement("ak-codemirror")
 export class CodeMirrorTextarea extends LitElement {
@@ -22,11 +23,37 @@ export class CodeMirrorTextarea extends LitElement {
     @property()
     name?: string;
 
-    @property()
-    value?: string;
-
     editor?: CodeMirror.EditorFromTextArea;
 
+    private _value?: string;
+
+    @property()
+    set value(v: string) {
+        this._value = v.toString();
+    }
+
+    get value(): string {
+        switch (this.mode.toLowerCase()) {
+            case "yaml":
+                return YAML.parse(this.getInnerValue());
+            case "javascript":
+                return JSON.parse(this.getInnerValue());
+            default:
+                return this.getInnerValue();
+        }
+    }
+
+    private getInnerValue(): string {
+        if (!this.shadowRoot) {
+            return "";
+        }
+        const ta = this.shadowRoot?.querySelector("textarea");
+        if (!ta) {
+            return "";
+        }
+        return ta.value;
+    }
+
     static get styles(): CSSResult[] {
         return [PFForm, CodeMirrorStyle, CodeMirrorTheme];
     }
@@ -49,6 +76,6 @@ export class CodeMirrorTextarea extends LitElement {
     }
 
     render(): TemplateResult {
-        return html`<textarea class="pf-c-form-control" name=${ifDefined(this.name)}>${this.value || ""}</textarea>`;
+        return html`<textarea class="pf-c-form-control" name=${ifDefined(this.name)}>${this._value || ""}</textarea>`;
     }
 }

web/src/elements/forms/Form.ts

@@ -78,10 +78,9 @@ export class Form<T> extends LitElement {
     }
 
     serializeForm(form: IronFormElement): T {
-        const elements = form._getSubmittableElements();
+        const elements: HTMLInputElement[] = form._getSubmittableElements();
         const json: { [key: string]: unknown } = {};
-        for (let i = 0; i < elements.length; i++) {
-            const element = elements[i] as HTMLInputElement;
+        elements.forEach(element => {
             const values = form._serializeElementValues(element);
             if (element.tagName.toLowerCase() === "select" && "multiple" in element.attributes) {
                 json[element.name] = values;
@@ -90,7 +89,7 @@ export class Form<T> extends LitElement {
                     form._addSerializedElement(json, element.name, values[v]);
                 }
             }
-        }
+        });
         return json as unknown as T;
     }
 

web/src/pages/property-mappings/PropertyMappingTestForm.ts

@@ -34,7 +34,7 @@ export class PolicyTestForm extends Form<PolicyTest> {
         return html`<ak-form-element-horizontal
                 label=${gettext("Result")}>
             ${this.result?.successful ?
-                html`<ak-codemirror mode="javascript" ?readOnly=${true} value="${this.result?.result}">
+                html`<ak-codemirror mode="javascript" ?readOnly=${true} value="${ifDefined(this.result?.result)}">
                 </ak-codemirror>`:
                 html`
                     <div class="pf-c-form__group-label">