trustchain-oc1-orchestral
/
authentik
Archived
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/admin: use shadowroot for codemirror, remove styles 

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-03-29 12:16:32 +02:00
parent e7c6ff9499
commit d71d45b958
10 changed files with 58 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/package-lock.json generated
View File

@ -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",

3
web/package.json
View File

@ -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",

22
web/src/elements/CodeMirror.ts
View File

@ -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`<textarea class="pf-c-form-control" name=${ifDefined(this.name)}>${this.value || ""}</textarea>`;
}
}

4
web/src/elements/buttons/ModalButton.ts
View File

@ -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;

8
web/src/elements/forms/HorizontalFormElement.ts
View File

@ -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<HTMLInputElement>("input[autofocus]").forEach(input => {

20
web/src/elements/policies/BoundPoliciesList.ts
View File

@ -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/`)}">
<ak-spinner-button slot="trigger" class="pf-m-secondary">
return html`<ak-forms-modal>
<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>
<div slot="modal"></div>
</ak-modal-button>`;
</button>
</ak-forms-modal>`;
} 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">

4
web/src/pages/generic/SiteShell.ts
View File

@ -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(*) {

6
web/src/pages/groups/GroupForm.ts
View File

@ -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>`;
}

7
web/src/pages/providers/SAMLProviderViewPage.ts
View File

@ -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>

7
web/src/pages/sources/SAMLSourceViewPage.ts
View File

@ -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>