web/admin: use shadowroot for codemirror, remove styles

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

web/package-lock.json

@@ -4029,6 +4029,11 @@
             "integrity": "sha512-wNcy4NvjMYL8gogWWYAO7ZFWFfHcbdbE57tZO8e4cbpj8tfUcwrwqSl3ad8HxpYWCdXcJUCeKKZS62Av1affwQ==",
             "dev": true
         },
+        "yaml": {
+            "version": "1.10.2",
+            "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+            "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="
+        },
         "yargs": {
             "version": "15.4.1",
             "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",

web/package.json

@@ -33,7 +33,8 @@
         "rollup-plugin-cssimport": "^1.0.2",
         "rollup-plugin-external-globals": "^0.6.1",
         "tslib": "^2.1.0",
-        "webcomponent-qr-code": "^1.0.5"
+        "webcomponent-qr-code": "^1.0.5",
+        "yaml": "^1.10.2"
     },
     "devDependencies": {
         "@rollup/plugin-typescript": "^8.2.1",

web/src/elements/CodeMirror.ts

@@ -1,4 +1,5 @@
-import { customElement, LitElement, property } from "lit-element";
+import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
 
 import CodeMirror from "codemirror";
 import "codemirror/addon/display/autorefresh";
@@ -6,6 +7,9 @@ import "codemirror/mode/xml/xml.js";
 import "codemirror/mode/yaml/yaml.js";
 import "codemirror/mode/javascript/javascript.js";
 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";
 
 @customElement("ak-codemirror")
 export class CodeMirrorTextarea extends LitElement {
@@ -15,14 +19,20 @@ export class CodeMirrorTextarea extends LitElement {
     @property()
     mode = "yaml";
 
+    @property()
+    name?: string;
+
+    @property()
+    value?: string;
+
     editor?: CodeMirror.EditorFromTextArea;
 
-    createRenderRoot() : ShadowRoot | Element {
+    static get styles(): CSSResult[] {
-        return this;
+        return [PFForm, CodeMirrorStyle, CodeMirrorTheme];
     }
 
     firstUpdated(): void {
-        const textarea = this.querySelector("textarea");
+        const textarea = this.shadowRoot?.querySelector("textarea");
         if (!textarea) {
             return;
         }
@@ -37,4 +47,8 @@ export class CodeMirrorTextarea extends LitElement {
             this.editor?.save();
         });
     }
+
+    render(): TemplateResult {
+        return html`<textarea class="pf-c-form-control" name=${ifDefined(this.name)}>${this.value || ""}</textarea>`;
+    }
 }

web/src/elements/buttons/ModalButton.ts

@@ -12,8 +12,6 @@ import PFStack from "@patternfly/patternfly/layouts/Stack/stack.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import AKGlobal from "../../authentik.css";
-import CodeMirrorStyle from "codemirror/lib/codemirror.css";
-import CodeMirrorTheme from "codemirror/theme/monokai.css";
 
 import { convertToSlug } from "../../utils";
 import { SpinnerButton } from "./SpinnerButton";
@@ -33,7 +31,7 @@ export class ModalButton extends LitElement {
     modal = "<slot name='modal'></slot>";
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFButton, PFModalBox, PFForm, PFFormControl, PFBullseye, PFBackdrop, PFPage, PFStack, PFCard, PFContent, AKGlobal, CodeMirrorStyle, CodeMirrorTheme].concat(
+        return [PFBase, PFButton, PFModalBox, PFForm, PFFormControl, PFBullseye, PFBackdrop, PFPage, PFStack, PFCard, PFContent, AKGlobal].concat(
             css`
                 :host {
                     text-align: left;

web/src/elements/forms/HorizontalFormElement.ts

@@ -19,16 +19,16 @@ export class HorizontalFormElement extends LitElement {
     }
 
     @property()
-    label: string = "";
+    label = "";
 
     @property({ type: Boolean })
     required = false;
 
     @property()
-    errorMessage: string = "";
+    errorMessage = "";
 
-    @property()
+    @property({ type: Boolean })
-    invalid: boolean = false;
+    invalid = false;
 
     updated(): void {
         this.querySelectorAll<HTMLInputElement>("input[autofocus]").forEach(input => {

web/src/elements/policies/BoundPoliciesList.ts

@@ -14,6 +14,9 @@ import { PAGE_SIZE } from "../../constants";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import { AdminURLManager } from "../../api/legacy";
 
+import "../../elements/forms/ModalForm";
+import "../../pages/groups/GroupForm";
+
 @customElement("ak-bound-policies-list")
 export class BoundPoliciesList extends Table<PolicyBinding> {
     @property()
@@ -59,12 +62,19 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
                 <div slot="modal"></div>
             </ak-modal-button>`;
         } else if (item.group) {
-            return html`<ak-modal-button href="${AdminURLManager.groups(`${item.group?.groupUuid}/update/`)}">
+            return html`<ak-forms-modal>
-                <ak-spinner-button slot="trigger" class="pf-m-secondary">
+                <span slot="submit">
+                    ${gettext("Update")}
+                </span>
+                <span slot="header">
+                    ${gettext("Update Group")}
+                </span>
+                <ak-group-form slot="form" .group=${item.group}>
+                </ak-group-form>
+                <button slot="trigger" class="pf-c-button pf-m-primary">
                     ${gettext("Edit Group")}
-                </ak-spinner-button>
+                </button>
-                <div slot="modal"></div>
+            </ak-forms-modal>`;
-            </ak-modal-button>`;
         } else if (item.user) {
             return html`<ak-modal-button href="${AdminURLManager.policies(`${item.user?.id}/update/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-secondary">

web/src/pages/generic/SiteShell.ts

@@ -16,8 +16,6 @@ import PFStack from "@patternfly/patternfly/layouts/Stack/stack.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import AKGlobal from "../../authentik.css";
-import CodeMirrorStyle from "codemirror/lib/codemirror.css";
-import CodeMirrorTheme from "codemirror/theme/monokai.css";
 import { EVENT_REFRESH } from "../../constants";
 import { MessageLevel } from "../../elements/messages/Message";
 
@@ -38,7 +36,7 @@ export class SiteShell extends LitElement {
     body = "";
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFButton, PFModalBox, PFForm, PFFormControl, PFBullseye, PFBackdrop, PFPage, PFStack, PFCard, PFContent, AKGlobal, CodeMirrorStyle, CodeMirrorTheme].concat(
+        return [PFBase, PFButton, PFModalBox, PFForm, PFFormControl, PFBullseye, PFBackdrop, PFPage, PFStack, PFCard, PFContent, AKGlobal].concat(
             css`
                 :host,
                 ::slotted(*) {

web/src/pages/groups/GroupForm.ts

@@ -7,6 +7,8 @@ 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";
 
 @customElement("ak-group-form")
 export class GroupForm extends Form<Group> {
@@ -66,6 +68,10 @@ export class GroupForm extends Form<Group> {
                 </select>
                 <p class="pf-c-form__helper-text">${gettext("Hold control/command to select multiple items.")}</p>
             </ak-form-element-horizontal>
+            <ak-form-element-horizontal label=${gettext("Attributes")}>
+                <ak-codemirror mode="yaml" name="attributes" value="${YAML.stringify(this.group?.attributes)}">
+                </ak-codemirror>
+            </ak-form-element-horizontal>
         </form>`;
     }
 

web/src/pages/providers/SAMLProviderViewPage.ts

@@ -12,8 +12,6 @@ import PFFlex from "@patternfly/patternfly/utilities/Flex/flex.css";
 import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
 import AKGlobal from "../../authentik.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
-import CodeMirrorStyle from "codemirror/lib/codemirror.css";
-import CodeMirrorTheme from "codemirror/theme/monokai.css";
 
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
@@ -26,6 +24,7 @@ import { ProvidersApi, SAMLProvider } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import { AdminURLManager, AppURLManager } from "../../api/legacy";
 import { EVENT_REFRESH } from "../../constants";
+import { ifDefined } from "lit-html/directives/if-defined";
 
 @customElement("ak-provider-saml-view")
 export class SAMLProviderViewPage extends Page {
@@ -55,7 +54,7 @@ export class SAMLProviderViewPage extends Page {
     provider?: SAMLProvider;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFPage, PFFlex, PFDisplay, PFGallery, PFContent, PFCard, PFDescriptionList, PFSizing,CodeMirrorStyle, CodeMirrorTheme,  AKGlobal];
+        return [PFBase, PFPage, PFFlex, PFDisplay, PFGallery, PFContent, PFCard, PFDescriptionList, PFSizing, AKGlobal];
     }
 
     constructor() {
@@ -153,7 +152,7 @@ export class SAMLProviderViewPage extends Page {
                                         new ProvidersApi(DEFAULT_CONFIG).providersSamlMetadata({
                                             id: this.provider.pk || 0,
                                         }).then(m => {
-                                            return html`<ak-codemirror mode="xml"><textarea class="pf-c-form-control" readonly>${m.metadata}</textarea></ak-codemirror>`;
+                                            return html`<ak-codemirror mode="xml" ?readOnly=${true} value="${ifDefined(m.metadata)}"></ak-codemirror>`;
                                         })
                                     )}
                                 </div>

web/src/pages/sources/SAMLSourceViewPage.ts

@@ -12,8 +12,6 @@ import PFFlex from "@patternfly/patternfly/utilities/Flex/flex.css";
 import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
 import AKGlobal from "../../authentik.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
-import CodeMirrorStyle from "codemirror/lib/codemirror.css";
-import CodeMirrorTheme from "codemirror/theme/monokai.css";
 
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
@@ -25,6 +23,7 @@ import { SAMLSource, SourcesApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import { AdminURLManager, AppURLManager } from "../../api/legacy";
 import { EVENT_REFRESH } from "../../constants";
+import { ifDefined } from "lit-html/directives/if-defined";
 
 @customElement("ak-source-saml-view")
 export class SAMLSourceViewPage extends Page {
@@ -51,7 +50,7 @@ export class SAMLSourceViewPage extends Page {
     source?: SAMLSource;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFPage, PFFlex, PFDisplay, PFGallery, PFContent, PFCard, PFDescriptionList, PFSizing, CodeMirrorStyle, CodeMirrorTheme, AKGlobal];
+        return [PFBase, PFPage, PFFlex, PFDisplay, PFGallery, PFContent, PFCard, PFDescriptionList, PFSizing, AKGlobal];
     }
 
     constructor() {
@@ -138,7 +137,7 @@ export class SAMLSourceViewPage extends Page {
                                     ${until(new SourcesApi(DEFAULT_CONFIG).sourcesSamlMetadata({
                                             slug: this.source.slug,
                                         }).then(m => {
-                                            return html`<ak-codemirror mode="xml"><textarea class="pf-c-form-control" readonly>${m.metadata}</textarea></ak-codemirror>`;
+                                            return html`<ak-codemirror mode="xml" ?readOnly=${true} value="${ifDefined(m.metadata)}"></ak-codemirror>`;
                                         })
                                     )}
                                 </div>