habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web/flows: fix flow executor background overlay in safari

Browse Source 
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens Langhammer
2023-01-18 20:43:19 +01:00
parent 813f70b806
commit 515a402db7
1 changed files with 37 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
web/src/flow/FlowExecutor.ts
View File

@ -26,7 +26,7 @@ import "@goauthentik/flow/stages/password/PasswordStage";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
import { CSSResult, TemplateResult, css, html } from "lit"; import { CSSResult, TemplateResult, css, html, render } from "lit";
import { customElement, property } from "lit/decorators.js"; import { customElement, property } from "lit/decorators.js";
import { unsafeHTML } from "lit/directives/unsafe-html.js"; import { unsafeHTML } from "lit/directives/unsafe-html.js";
import { until } from "lit/directives/until.js"; import { until } from "lit/directives/until.js";
@ -458,13 +458,13 @@ export class FlowExecutor extends AKElement implements StageHost {
} }
} }
render(): TemplateResult { renderBackgroundOverlay(): TemplateResult {
return html`<div class="pf-c-background-image"> const overlaySVG = html`<svg
<svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="pf-c-background-image__filter" class="pf-c-background-image__filter"
width="0" width="0"
height="0" height="0"
style="display:none;"
> >
<filter id="image_overlay"> <filter id="image_overlay">
<feColorMatrix <feColorMatrix
@ -488,8 +488,13 @@ export class FlowExecutor extends AKElement implements StageHost {
<feFuncA type="table" tableValues="0 1"></feFuncA> <feFuncA type="table" tableValues="0 1"></feFuncA>
</feComponentTransfer> </feComponentTransfer>
</filter> </filter>
</svg> </svg>`;
</div> render(overlaySVG, document.body);
return overlaySVG;
}
render(): TemplateResult {
return html`<div class="pf-c-background-image">${this.renderBackgroundOverlay()}</div>
<div class="pf-c-page__drawer"> <div class="pf-c-page__drawer">
<div class="pf-c-drawer ${this.inspectorOpen ? "pf-m-expanded" : "pf-m-collapsed"}"> <div class="pf-c-drawer ${this.inspectorOpen ? "pf-m-expanded" : "pf-m-collapsed"}">
<div class="pf-c-drawer__main"> <div class="pf-c-drawer__main">