flows: use full ShadowDom for flowContainer

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-03-21 17:36:51 +01:00
parent 7e47906475
commit 25c82d80f5
7 changed files with 73 additions and 20 deletions

View file

@ -11,7 +11,7 @@
<title>{% block title %}{% trans title|default:config.authentik.branding.title %}{% endblock %}</title>
<link rel="icon" type="image/png" href="{% static 'dist/assets/icons/icon.png' %}?v={{ ak_version }}">
<link rel="shortcut icon" type="image/png" href="{% static 'dist/assets/icons/icon.png' %}?v={{ ak_version }}">
<link rel="stylesheet" type="text/css" href="{% static 'dist/patternfly.min.css' %}?v={{ ak_version }}">
<link rel="stylesheet" type="text/css" href="{% static 'dist/patternfly-base.css' %}?v={{ ak_version }}">
<link rel="stylesheet" type="text/css" href="{% static 'dist/authentik.css' %}?v={{ ak_version }}">
<script src="{% url 'javascript-catalog' %}?v={{ ak_version }}"></script>
{% block head %}

View file

@ -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 @@
<script src="{% static 'dist/flow.js' %}?v={{ ak_version }}" type="module"></script>
{% endblock %}
{% block main_container %}
<ak-flow-executor class="pf-c-login__main" flowSlug="{{ flow_slug }}">
</ak-flow-executor>
{% block body %}
<ak-flow-executor></ak-flow-executor>
{% endblock %}

View file

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

View file

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

View file

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

View file

@ -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<T>(formData?: T): Promise<void> {
@ -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`<div class="pf-c-background-image">
<svg xmlns="http://www.w3.org/2000/svg" class="pf-c-background-image__filter" width="0" height="0">
<filter id="image_overlay">
<feColorMatrix in="SourceGraphic" type="matrix" values="1.3 0 0 0 0 0 1.3 0 0 0 0 0 1.3 0 0 0 0 0 1 0" />
<feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
<feFuncR type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncR>
<feFuncG type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncG>
<feFuncB type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncB>
<feFuncA type="table" tableValues="0 1"></feFuncA>
</feComponentTransfer>
</filter>
</svg>
</div>
<ak-message-container></ak-message-container>
<div class="pf-c-login">
<div class="ak-login-container">
<header class="pf-c-login__header">
<div class="pf-c-brand ak-brand">
<img src="${ifDefined(this.config?.brandingLogo)}" alt="authentik icon" />
</div>
</header>
<div class="pf-c-login__main">
${this.renderChallengeWrapper()}
</div>
<footer class="pf-c-login__footer">
<p></p>
<ul class="pf-c-list pf-m-inline">
${until(this.config?.uiFooterLinks?.map((link) => {
return html`<li>
<a href="${link.href || ""}">${link.name}</a>
</li>`;
}))}
${this.config?.brandingTitle != "authentik" ? html`
<li><a href="https://goauthentik.io">${gettext("Powered by authentik")}</a></li>
` : html``}
</ul>
</footer>
</div>
</div>`;
}
}

View file

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