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

Revert "web: Safari fixes merge branch (#14181)" (#14211)

Browse Source
This commit is contained in:
Marc 'risson' Schmitt
2025-04-24 20:00:29 +02:00
committed by GitHub
parent cf160f800d
commit 337956672f
31 changed files with 832 additions and 1424 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -46,6 +46,7 @@ import {
FlowsApi,
ResponseError,
ShellChallenge,
UiThemeEnum,
} from "@goauthentik/api";
@customElement("ak-flow-executor")
@ -199,6 +200,10 @@ export class FlowExecutor extends Interface implements StageHost {
});
}
async getTheme(): Promise<UiThemeEnum> {
return globalAK()?.brand.uiTheme || UiThemeEnum.Automatic;
}
async submit(
payload?: FlowChallengeResponseRequest,
options?: SubmitOptions,

24
web/src/flow/components/ak-brand-footer.ts
View File

@ -1,4 +1,4 @@
import { BrandedHTMLPolicy, sanitizeHTML } from "@goauthentik/common/purify";
import { purify } from "@goauthentik/common/purify";
import { AKElement } from "@goauthentik/elements/Base.js";
import { msg } from "@lit/localize";
@ -21,6 +21,8 @@ const styles = css`
}
`;
const poweredBy: FooterLink = { name: msg("Powered by authentik"), href: null };
@customElement("ak-brand-links")
export class BrandLinks extends AKElement {
static get styles() {
@ -31,21 +33,13 @@ export class BrandLinks extends AKElement {
links: FooterLink[] = [];
render() {
const links = [...(this.links ?? [])];
const links = [...(this.links ?? []), poweredBy];
return html` <ul class="pf-c-list pf-m-inline">
${map(links, (link) => {
const children = sanitizeHTML(BrandedHTMLPolicy, link.name);
if (link.href) {
return html`<li><a href="${link.href}">${children}</a></li>`;
}
return html`<li>
<span> ${children} </span>
</li>`;
})}
<li><span>${msg("Powered by authentik")}</span></li>
${map(links, (link) =>
link.href
? purify(html`<li><a href="${link.href}">${link.name}</a></li>`)
: html`<li><span>${link.name}</span></li>`,
)}
</ul>`;
}
}

91
web/src/flow/stages/captcha/CaptchaStage.ts
View File

@ -1,16 +1,15 @@
/// <reference types="@hcaptcha/types"/>
/// <reference types="turnstile-types"/>
import { renderStaticHTMLUnsafe } from "@goauthentik/common/purify";
///<reference types="@hcaptcha/types"/>
import { renderStatic } from "@goauthentik/common/purify";
import "@goauthentik/elements/EmptyState";
import { akEmptyState } from "@goauthentik/elements/EmptyState";
import { bound } from "@goauthentik/elements/decorators/bound";
import "@goauthentik/elements/forms/FormElement";
import { createIFrameHTMLWrapper } from "@goauthentik/elements/utils/iframe";
import { ListenerController } from "@goauthentik/elements/utils/listenerController.js";
import { randomId } from "@goauthentik/elements/utils/randomId";
import "@goauthentik/flow/FormStatic";
import { BaseStage } from "@goauthentik/flow/stages/base";
import { P, match } from "ts-pattern";
import type * as _ from "turnstile-types";
import { msg } from "@lit/localize";
import { CSSResult, PropertyValues, TemplateResult, css, html, nothing } from "lit";
@ -57,36 +56,40 @@ type CaptchaHandler = {
// a resize. Because the Captcha is itself in an iframe, the reported height is often off by some
// margin, so adding 2rem of height to our container adds padding and prevents scroll bars or hidden
// rendering.
function iframeTemplate(children: TemplateResult, challengeURL: string): TemplateResult {
return html` ${children}
<script>
new ResizeObserver((entries) => {
const height =
document.body.offsetHeight +
parseFloat(getComputedStyle(document.body).fontSize) * 2;
window.parent.postMessage({
message: "resize",
source: "goauthentik.io",
context: "flow-executor",
size: { height },
});
}).observe(document.querySelector(".ak-captcha-container"));
</script>
<script src=${challengeURL}></script>
<script>
function callback(token) {
window.parent.postMessage({
message: "captcha",
source: "goauthentik.io",
context: "flow-executor",
token,
});
}
</script>`;
}
const iframeTemplate = (captchaElement: TemplateResult, challengeUrl: string) =>
html`<!doctype html>
<head>
<html>
<body style="display:flex;flex-direction:row;justify-content:center;">
${captchaElement}
<script>
new ResizeObserver((entries) => {
const height =
document.body.offsetHeight +
parseFloat(getComputedStyle(document.body).fontSize) * 2;
window.parent.postMessage({
message: "resize",
source: "goauthentik.io",
context: "flow-executor",
size: { height },
});
}).observe(document.querySelector(".ak-captcha-container"));
</script>
<script src=${challengeUrl}></script>
<script>
function callback(token) {
window.parent.postMessage({
message: "captcha",
source: "goauthentik.io",
context: "flow-executor",
token: token,
});
}
</script>
</body>
</html>
</head>`;
@customElement("ak-stage-captcha")
export class CaptchaStage extends BaseStage<CaptchaChallenge, CaptchaChallengeResponseRequest> {
@ -302,25 +305,11 @@ export class CaptchaStage extends BaseStage<CaptchaChallenge, CaptchaChallengeRe
}
async renderFrame(captchaElement: TemplateResult) {
const { contentDocument } = this.captchaFrame || {};
if (!contentDocument) {
console.debug(
"authentik/stages/captcha: unable to render captcha frame, no contentDocument",
);
return;
}
contentDocument.open();
contentDocument.write(
createIFrameHTMLWrapper(
renderStaticHTMLUnsafe(iframeTemplate(captchaElement, this.challenge.jsUrl)),
),
this.captchaFrame.contentWindow?.document.open();
this.captchaFrame.contentWindow?.document.write(
await renderStatic(iframeTemplate(captchaElement, this.challenge.jsUrl)),
);
contentDocument.close();
this.captchaFrame.contentWindow?.document.close();
}
renderBody() {