From d71d45b958b3240bda25187a11dd114945b2cfa1 Mon Sep 17 00:00:00 2001 From: Jens Langhammer Date: Mon, 29 Mar 2021 12:16:32 +0200 Subject: [PATCH] web/admin: use shadowroot for codemirror, remove styles Signed-off-by: Jens Langhammer --- web/package-lock.json | 5 +++++ web/package.json | 3 ++- web/src/elements/CodeMirror.ts | 22 +++++++++++++++---- web/src/elements/buttons/ModalButton.ts | 4 +--- .../elements/forms/HorizontalFormElement.ts | 8 +++---- .../elements/policies/BoundPoliciesList.ts | 20 ++++++++++++----- web/src/pages/generic/SiteShell.ts | 4 +--- web/src/pages/groups/GroupForm.ts | 6 +++++ .../pages/providers/SAMLProviderViewPage.ts | 7 +++--- web/src/pages/sources/SAMLSourceViewPage.ts | 7 +++--- 10 files changed, 58 insertions(+), 28 deletions(-) diff --git a/web/package-lock.json b/web/package-lock.json index be1559cb1..bf25591ea 100644 --- a/web/package-lock.json +++ b/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", diff --git a/web/package.json b/web/package.json index 8add33fd6..83a22d1a1 100644 --- a/web/package.json +++ b/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", diff --git a/web/src/elements/CodeMirror.ts b/web/src/elements/CodeMirror.ts index f7af8524e..897b730be 100644 --- a/web/src/elements/CodeMirror.ts +++ b/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 { - return this; + static get styles(): CSSResult[] { + 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``; + } } diff --git a/web/src/elements/buttons/ModalButton.ts b/web/src/elements/buttons/ModalButton.ts index a9e6703b2..a19029d88 100644 --- a/web/src/elements/buttons/ModalButton.ts +++ b/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 = ""; 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; diff --git a/web/src/elements/forms/HorizontalFormElement.ts b/web/src/elements/forms/HorizontalFormElement.ts index a38e4e3f5..b51033469 100644 --- a/web/src/elements/forms/HorizontalFormElement.ts +++ b/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() - invalid: boolean = false; + @property({ type: Boolean }) + invalid = false; updated(): void { this.querySelectorAll("input[autofocus]").forEach(input => { diff --git a/web/src/elements/policies/BoundPoliciesList.ts b/web/src/elements/policies/BoundPoliciesList.ts index b145cf660..0b35f2953 100644 --- a/web/src/elements/policies/BoundPoliciesList.ts +++ b/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 { @property() @@ -59,12 +62,19 @@ export class BoundPoliciesList extends Table {
`; } else if (item.group) { - return html` - + return html` + + ${gettext("Update")} + + + ${gettext("Update Group")} + + + + + `; } else if (item.user) { return html` diff --git a/web/src/pages/generic/SiteShell.ts b/web/src/pages/generic/SiteShell.ts index 1ec767f7e..34ab7eaf2 100644 --- a/web/src/pages/generic/SiteShell.ts +++ b/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(*) { diff --git a/web/src/pages/groups/GroupForm.ts b/web/src/pages/groups/GroupForm.ts index 69f87619f..aa3c1adf6 100644 --- a/web/src/pages/groups/GroupForm.ts +++ b/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 { @@ -66,6 +68,10 @@ export class GroupForm extends Form {

${gettext("Hold control/command to select multiple items.")}

+ + + + `; } diff --git a/web/src/pages/providers/SAMLProviderViewPage.ts b/web/src/pages/providers/SAMLProviderViewPage.ts index 13d70f960..e6c992792 100644 --- a/web/src/pages/providers/SAMLProviderViewPage.ts +++ b/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``; + return html``; }) )} diff --git a/web/src/pages/sources/SAMLSourceViewPage.ts b/web/src/pages/sources/SAMLSourceViewPage.ts index 7e4ca6dfa..d3e87052c 100644 --- a/web/src/pages/sources/SAMLSourceViewPage.ts +++ b/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``; + return html``; }) )}