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

flows/layouts (#2867)

Browse Source
This commit is contained in:
Jens L
2022-05-16 01:10:23 +02:00
committed by GitHub
parent 699d3ca067
commit 333e58ce2f
30 changed files with 462 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
web/src/flows/FlowExecutor.ts
View File

@ -20,6 +20,7 @@ import {
CurrentTenant,
FlowChallengeResponseRequest,
FlowsApi,
LayoutEnum,
RedirectChallenge,
ShellChallenge,
} from "@goauthentik/api";
@ -38,6 +39,14 @@ import "./stages/captcha/CaptchaStage";
import "./stages/identification/IdentificationStage";
import "./stages/password/PasswordStage";
export interface FlowWindow extends Window {
authentik: {
flow: {
layout: LayoutEnum;
};
};
}
@customElement("ak-flow-executor")
export class FlowExecutor extends LitElement implements StageHost {
flowSlug?: string;
@ -100,6 +109,44 @@ export class FlowExecutor extends LitElement implements StageHost {
.pf-c-drawer__content {
background-color: transparent;
}
/* layouts */
.pf-c-login__container.content-right {
grid-template-areas:
"header main"
"footer main"
". main";
}
.pf-c-login.sidebar_left {
justify-content: flex-start;
padding-top: 0;
padding-bottom: 0;
}
.pf-c-login.sidebar_left .ak-login-container,
.pf-c-login.sidebar_right .ak-login-container {
height: 100vh;
background-color: var(--pf-c-login__main--BackgroundColor);
padding-left: var(--pf-global--spacer--lg);
padding-right: var(--pf-global--spacer--lg);
}
.pf-c-login.sidebar_left .pf-c-list,
.pf-c-login.sidebar_right .pf-c-list {
color: #000;
}
@media (prefers-color-scheme: dark) {
.pf-c-login.sidebar_left .ak-login-container,
.pf-c-login.sidebar_right .ak-login-container {
background-color: var(--ak-dark-background);
}
.pf-c-login.sidebar_left .pf-c-list,
.pf-c-login.sidebar_right .pf-c-list {
color: var(--ak-dark-foreground);
}
}
.pf-c-login.sidebar_right {
justify-content: flex-end;
padding-top: 0;
padding-bottom: 0;
}
`);
}
@ -372,6 +419,27 @@ export class FlowExecutor extends LitElement implements StageHost {
></ak-flow-inspector>`;
}
getLayout(): string {
const prefilledFlow = (window as unknown as FlowWindow).authentik.flow.layout;
if (this.challenge) {
return this.challenge?.flowInfo?.layout || prefilledFlow;
}
return prefilledFlow;
}
getLayoutClass(): string {
const layout = this.getLayout();
switch (layout) {
case LayoutEnum.ContentLeft:
return "pf-c-login__container";
case LayoutEnum.ContentRight:
return "pf-c-login__container content-right";
case LayoutEnum.Stacked:
default:
return "ak-login-container";
}
}
render(): TemplateResult {
return html`<div class="pf-c-background-image">
<svg
@ -409,8 +477,8 @@ export class FlowExecutor extends LitElement implements StageHost {
<div class="pf-c-drawer__main">
<div class="pf-c-drawer__content">
<div class="pf-c-drawer__body">
<div class="pf-c-login">
<div class="ak-login-container">
<div class="pf-c-login ${this.getLayout()}">
<div class="${this.getLayoutClass()}">
<header class="pf-c-login__header">
<div class="pf-c-brand ak-brand">
<img