From 25c82d80f56f3fbfff25722ebfc9814589a26fc6 Mon Sep 17 00:00:00 2001 From: Jens Langhammer Date: Sun, 21 Mar 2021 17:36:51 +0100 Subject: [PATCH] flows: use full ShadowDom for flowContainer Signed-off-by: Jens Langhammer --- authentik/core/templates/base/skeleton.html | 2 +- authentik/flows/templates/flows/shell.html | 8 +-- web/rollup.config.js | 2 +- web/src/authentik.css | 5 -- web/src/elements/messages/MessageContainer.ts | 9 ++- web/src/flows/FlowExecutor.ts | 65 +++++++++++++++++-- .../identification/IdentificationStage.ts | 2 +- 7 files changed, 73 insertions(+), 20 deletions(-) diff --git a/authentik/core/templates/base/skeleton.html b/authentik/core/templates/base/skeleton.html index c5b0adc98..e22bd2565 100644 --- a/authentik/core/templates/base/skeleton.html +++ b/authentik/core/templates/base/skeleton.html @@ -11,7 +11,7 @@ {% block title %}{% trans title|default:config.authentik.branding.title %}{% endblock %} - + {% block head %} diff --git a/authentik/flows/templates/flows/shell.html b/authentik/flows/templates/flows/shell.html index 0619493f5..6f7b52720 100644 --- a/authentik/flows/templates/flows/shell.html +++ b/authentik/flows/templates/flows/shell.html @@ -1,7 +1,6 @@ -{% extends 'login/base_full.html' %} +{% extends "base/skeleton.html" %} {% load static %} -{% load i18n %} {% block head %} {{ block.super }} @@ -14,7 +13,6 @@ {% endblock %} -{% block main_container %} - +{% block body %} + {% endblock %} diff --git a/web/rollup.config.js b/web/rollup.config.js index cac99e889..56ff67374 100644 --- a/web/rollup.config.js +++ b/web/rollup.config.js @@ -10,7 +10,7 @@ import externalGlobals from "rollup-plugin-external-globals"; const resources = [ { src: "node_modules/rapidoc/dist/rapidoc-min.js", dest: "dist/" }, - { src: "node_modules/@patternfly/patternfly/patternfly.min.css", dest: "dist/" }, + { src: "node_modules/@patternfly/patternfly/patternfly-base.css", dest: "dist/" }, { src: "src/authentik.css", dest: "dist/" }, { src: "node_modules/@patternfly/patternfly/assets/*", dest: "dist/assets/" }, diff --git a/web/src/authentik.css b/web/src/authentik.css index 298b2d03a..68d48904f 100644 --- a/web/src/authentik.css +++ b/web/src/authentik.css @@ -62,11 +62,6 @@ html > input { background-position: center; } -/* Fix spacing between messages */ -ak-message { - display: block; -} - .pf-m-success { color: var(--pf-global--success-color--100); } diff --git a/web/src/elements/messages/MessageContainer.ts b/web/src/elements/messages/MessageContainer.ts index fe7f1275e..0588f13a8 100644 --- a/web/src/elements/messages/MessageContainer.ts +++ b/web/src/elements/messages/MessageContainer.ts @@ -1,5 +1,5 @@ import { gettext } from "django"; -import { LitElement, html, customElement, TemplateResult, property, CSSResult } from "lit-element"; +import { LitElement, html, customElement, TemplateResult, property, CSSResult, css } from "lit-element"; import "./Message"; import { APIMessage } from "./Message"; import PFAlertGroup from "@patternfly/patternfly/components/AlertGroup/alert-group.css"; @@ -24,7 +24,12 @@ export class MessageContainer extends LitElement { retryDelay = 200; static get styles(): CSSResult[] { - return [PFBase, PFAlertGroup]; + return [PFBase, PFAlertGroup, css` + /* Fix spacing between messages */ + ak-message { + display: block; + } + `]; } constructor() { diff --git a/web/src/flows/FlowExecutor.ts b/web/src/flows/FlowExecutor.ts index 12183496c..87e5e8cd2 100644 --- a/web/src/flows/FlowExecutor.ts +++ b/web/src/flows/FlowExecutor.ts @@ -4,6 +4,9 @@ import { LitElement, html, customElement, property, TemplateResult, CSSResult, c import PFLogin from "@patternfly/patternfly/components/Login/login.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css"; import PFTitle from "@patternfly/patternfly/components/Title/title.css"; +import PFBackgroundImage from "@patternfly/patternfly/components/BackgroundImage/background-image.css"; +import PFList from "@patternfly/patternfly/components/List/list.css"; +import AKGlobal from "../authentik.css"; import { unsafeHTML } from "lit-html/directives/unsafe-html"; import "./stages/authenticator_static/AuthenticatorStaticStage"; @@ -31,13 +34,15 @@ import { WebAuthnAuthenticatorRegisterChallenge } from "./stages/authenticator_w import { CaptchaChallenge } from "./stages/captcha/CaptchaStage"; import { SpinnerSize } from "../elements/Spinner"; import { StageHost } from "./stages/base"; -import { Challenge, ChallengeTypeEnum, FlowsApi } from "authentik-api"; +import { Challenge, ChallengeTypeEnum, Config, FlowsApi, RootApi } from "authentik-api"; import { DEFAULT_CONFIG } from "../api/Config"; +import { ifDefined } from "lit-html/directives/if-defined"; +import { until } from "lit-html/directives/until"; @customElement("ak-flow-executor") export class FlowExecutor extends LitElement implements StageHost { - @property() - flowSlug = ""; + + flowSlug: string; @property({attribute: false}) challenge?: Challenge; @@ -45,8 +50,11 @@ export class FlowExecutor extends LitElement implements StageHost { @property({type: Boolean}) loading = false; + @property({ attribute: false }) + config?: Config; + static get styles(): CSSResult[] { - return [PFBase, PFLogin, PFTitle].concat(css` + return [PFBase, PFLogin, PFTitle, PFList, PFBackgroundImage, AKGlobal].concat(css` .ak-loading { display: flex; height: 100%; @@ -75,6 +83,7 @@ export class FlowExecutor extends LitElement implements StageHost { this.addEventListener("ak-flow-submit", () => { this.submit(); }); + this.flowSlug = window.location.pathname.split("/")[2]; } submit(formData?: T): Promise { @@ -94,6 +103,9 @@ export class FlowExecutor extends LitElement implements StageHost { } firstUpdated(): void { + new RootApi(DEFAULT_CONFIG).rootConfigList().then((config) => { + this.config = config; + }); this.loading = true; new FlowsApi(DEFAULT_CONFIG).flowsExecutorGetRaw({ flowSlug: this.flowSlug @@ -176,7 +188,7 @@ export class FlowExecutor extends LitElement implements StageHost { return html``; } - render(): TemplateResult { + renderChallengeWrapper(): TemplateResult { if (!this.challenge) { return this.renderLoading(); } @@ -185,4 +197,47 @@ export class FlowExecutor extends LitElement implements StageHost { ${this.renderChallenge()} `; } + + render(): TemplateResult { + return html`
+ + + + + + + + + + + +
+ + `; + } + } diff --git a/web/src/flows/stages/identification/IdentificationStage.ts b/web/src/flows/stages/identification/IdentificationStage.ts index e47fe9442..a7425230e 100644 --- a/web/src/flows/stages/identification/IdentificationStage.ts +++ b/web/src/flows/stages/identification/IdentificationStage.ts @@ -51,7 +51,7 @@ export class IdentificationStage extends BaseStage { /* login page's icons */ .pf-c-login__main-footer-links-item-link img { fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill); - width: 100%; + width: 100px; max-width: var(--pf-c-login__main-footer-links-item-link-svg--Width); height: 100%; max-height: var(--pf-c-login__main-footer-links-item-link-svg--Height);