From fc16e3d120282a853398950b4be86b1af753eee2 Mon Sep 17 00:00:00 2001 From: Teffen Ellis Date: Tue, 7 Oct 2025 05:49:38 +0200 Subject: [PATCH 1/3] web: Flesh out minimal mobile layout. --- web/src/common/styles/authentik.css | 24 ++++++++++++++++-------- web/src/flow/FlowExecutor.ts | 5 +++++ web/src/flow/FormStatic.ts | 1 + web/src/flow/components/ak-flow-card.ts | 6 ++++++ 4 files changed, 28 insertions(+), 8 deletions(-) diff --git a/web/src/common/styles/authentik.css b/web/src/common/styles/authentik.css index 9686f3d486da..87bb86f450d3 100644 --- a/web/src/common/styles/authentik.css +++ b/web/src/common/styles/authentik.css @@ -311,25 +311,33 @@ ak-tabs[vertical] { display: block; position: relative; width: 100%; + flex: 1 1 auto; + place-content: center; +} + +@media (max-width: 1199px) { + .pf-c-login__container { + display: flex; + flex-direction: column; + } } .ak-login-container { - height: calc(100vh - var(--pf-global--spacer--lg) - var(--pf-global--spacer--lg)); - width: 35rem; + max-width: 35rem; + width: 100%; display: flex; flex-direction: column; - justify-content: space-between; -} - -.pf-c-login__header { - flex-grow: 1; } .pf-c-login__footer { - flex-grow: 2; + flex: 0 0 auto; display: flex; justify-content: end; flex-direction: column; + + @media (max-width: 768px) { + color: var(--pf-global--Color--300); + } } .pf-c-login__footer ul.pf-c-list.pf-m-inline { diff --git a/web/src/flow/FlowExecutor.ts b/web/src/flow/FlowExecutor.ts index 0f03dd545735..bc9fbf9232c8 100644 --- a/web/src/flow/FlowExecutor.ts +++ b/web/src/flow/FlowExecutor.ts @@ -73,7 +73,12 @@ export class FlowExecutor --pf-c-background-image--BackgroundImage--sm: var(--ak-flow-background); --pf-c-background-image--BackgroundImage--sm-2x: var(--ak-flow-background); --pf-c-background-image--BackgroundImage--lg: var(--ak-flow-background); + + @media (max-width: 768px) { + background: var(--pf-c-login__main--BackgroundColor) !important; + } } + .ak-hidden { display: none; } diff --git a/web/src/flow/FormStatic.ts b/web/src/flow/FormStatic.ts index ea69467358f1..ec185d13b071 100644 --- a/web/src/flow/FormStatic.ts +++ b/web/src/flow/FormStatic.ts @@ -25,6 +25,7 @@ export class FormStatic extends AKElement { display: flex; align-items: center; justify-content: space-between; + flex-flow: wrap; gap: var(--pf-global--spacer--sm); } diff --git a/web/src/flow/components/ak-flow-card.ts b/web/src/flow/components/ak-flow-card.ts index 3a4fe4434496..171b2cb762fe 100644 --- a/web/src/flow/components/ak-flow-card.ts +++ b/web/src/flow/components/ak-flow-card.ts @@ -45,6 +45,12 @@ export class FlowCard extends AKElement { padding: 0; margin-top: 1em; } + + .pf-c-login__main-body { + --pf-c-login__main-body--md--PaddingLeft: var(--pf-global--spacer--md); + --pf-c-login__main-body--md--PaddingRight: var(--pf-global--spacer--md); + } + .pf-c-login__main-body:last-child { padding-bottom: calc(var(--pf-c-login__main-header--PaddingTop) * 1.2); } From 64553abef2077bbea7733c520e60a3ff0dcb2d55 Mon Sep 17 00:00:00 2001 From: Teffen Ellis Date: Tue, 7 Oct 2025 16:05:02 +0200 Subject: [PATCH 2/3] web: Clean up contrast. --- web/src/common/styles/authentik.css | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/web/src/common/styles/authentik.css b/web/src/common/styles/authentik.css index 87bb86f450d3..dd5b424393aa 100644 --- a/web/src/common/styles/authentik.css +++ b/web/src/common/styles/authentik.css @@ -21,6 +21,9 @@ --ak-dark-background-light-ish: #212427; --ak-dark-background-lighter: #2b2e33; + --ak-flow-background-color-contrast: var(--pf-global--Color--100); + --ak-flow-footer-color: var(--pf-global--Color--light-100); + /* PatternFly likes to override global variables for some reason */ --ak-global--Color--100: var(--pf-global--Color--100); @@ -330,13 +333,16 @@ ak-tabs[vertical] { } .pf-c-login__footer { + color: var(--ak-flow-footer-color); flex: 0 0 auto; display: flex; justify-content: end; flex-direction: column; +} - @media (max-width: 768px) { - color: var(--pf-global--Color--300); +@media (max-width: 768px) { + :root { + --ak-flow-footer-color: var(--ak-flow-background-color-contrast); } } @@ -552,6 +558,11 @@ fieldset { } } +.pf-c-login.sidebar_left, +.pf-c-login.sidebar_right { + --ak-flow-footer-color: var(--ak-flow-background-color-contrast); +} + .pf-c-data-list { padding-inline-start: 0; } From 62a091745fb45b29aaa87171eb0db38d7bb36505 Mon Sep 17 00:00:00 2001 From: Teffen Ellis Date: Tue, 7 Oct 2025 16:42:54 +0200 Subject: [PATCH 3/3] web: Tidy classes. Add part selectors. --- web/src/common/global.ts | 10 +++- web/src/common/styles/authentik.css | 6 +-- web/src/flow/FlowExecutor.ts | 80 ++++++++++++++--------------- 3 files changed, 51 insertions(+), 45 deletions(-) diff --git a/web/src/common/global.ts b/web/src/common/global.ts index b88037fd02a9..bbe1b283b654 100644 --- a/web/src/common/global.ts +++ b/web/src/common/global.ts @@ -1,10 +1,16 @@ -import { Config, ConfigFromJSON, CurrentBrand, CurrentBrandFromJSON } from "@goauthentik/api"; +import { + Config, + ConfigFromJSON, + CurrentBrand, + CurrentBrandFromJSON, + FlowLayoutEnum, +} from "@goauthentik/api"; export interface GlobalAuthentik { _converted?: boolean; locale?: string; flow?: { - layout: string; + layout: FlowLayoutEnum; }; config: Config; brand: CurrentBrand; diff --git a/web/src/common/styles/authentik.css b/web/src/common/styles/authentik.css index dd5b424393aa..fcb447b28e57 100644 --- a/web/src/common/styles/authentik.css +++ b/web/src/common/styles/authentik.css @@ -553,13 +553,13 @@ fieldset { } @media (min-height: 60rem) { - .pf-c-login.stacked .pf-c-login__main { + .pf-c-login[data-layout="stacked"] .pf-c-login__main { margin-top: 13rem; } } -.pf-c-login.sidebar_left, -.pf-c-login.sidebar_right { +.pf-c-login[data-layout="sidebar_left"], +.pf-c-login[data-layout="sidebar_right"] { --ak-flow-footer-color: var(--ak-flow-background-color-contrast); } diff --git a/web/src/flow/FlowExecutor.ts b/web/src/flow/FlowExecutor.ts index bc9fbf9232c8..85f9c4dd69c9 100644 --- a/web/src/flow/FlowExecutor.ts +++ b/web/src/flow/FlowExecutor.ts @@ -48,6 +48,15 @@ import PFLogin from "@patternfly/patternfly/components/Login/login.css"; import PFTitle from "@patternfly/patternfly/components/Title/title.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css"; +const FlowLayoutClasses = { + [FlowLayoutEnum.ContentLeft]: "pf-c-login__container", + [FlowLayoutEnum.ContentRight]: "pf-c-login__container content-right", + [FlowLayoutEnum.SidebarLeft]: "ak-login-container", + [FlowLayoutEnum.SidebarRight]: "ak-login-container", + [FlowLayoutEnum.Stacked]: "ak-login-container", + [FlowLayoutEnum.UnknownDefaultOpenApi]: "ak-login-container", +} as const satisfies Record; + @customElement("ak-flow-executor") export class FlowExecutor extends WithCapabilitiesConfig(WithBrandConfig(Interface)) @@ -90,7 +99,7 @@ export class FlowExecutor } /* layouts */ @media (min-height: 60rem) { - .pf-c-login.stacked .pf-c-login__main { + .pf-c-login[data-layout="stacked"] .pf-c-login__main { margin-top: 13rem; } } @@ -100,33 +109,33 @@ export class FlowExecutor "footer main" ". main"; } - .pf-c-login.sidebar_left { + .pf-c-login[data-layout="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 { + .pf-c-login[data-layout="sidebar_left"] .ak-login-container, + .pf-c-login[data-layout="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 { + .pf-c-login[data-layout="sidebar_left"] .pf-c-list, + .pf-c-login[data-layout="sidebar_right"] .pf-c-list { color: #000; } - .pf-c-login.sidebar_right { + .pf-c-login[data-layout="sidebar_right"] { justify-content: flex-end; padding-top: 0; padding-bottom: 0; } - :host([theme="dark"]) .pf-c-login.sidebar_left .ak-login-container, - :host([theme="dark"]) .pf-c-login.sidebar_right .ak-login-container { + :host([theme="dark"]) .pf-c-login[data-layout="sidebar_left"] .ak-login-container, + :host([theme="dark"]) .pf-c-login[data-layout="sidebar_right"] .ak-login-container { background-color: var(--ak-dark-background); } - :host([theme="dark"]) .pf-c-login.sidebar_left .pf-c-list, - :host([theme="dark"]) .pf-c-login.sidebar_right .pf-c-list { + :host([theme="dark"]) .pf-c-login[data-layout="sidebar_left"] .pf-c-list, + :host([theme="dark"]) .pf-c-login[data-layout="sidebar_right"] .pf-c-list { color: var(--ak-dark-foreground); } .pf-c-brand { @@ -357,26 +366,10 @@ export class FlowExecutor //#region Render - getLayout(): string { - const prefilledFlow = globalAK()?.flow?.layout || FlowLayoutEnum.Stacked; - if (this.challenge) { - return this.challenge?.flowInfo?.layout || prefilledFlow; - } - return prefilledFlow; - } - - getLayoutClass(): string { - const layout = this.getLayout(); - - switch (layout) { - case FlowLayoutEnum.ContentLeft: - return "pf-c-login__container"; - case FlowLayoutEnum.ContentRight: - return "pf-c-login__container content-right"; - case FlowLayoutEnum.Stacked: - default: - return "ak-login-container"; - } + get layout(): FlowLayoutEnum { + return ( + this.challenge?.flowInfo?.layout || globalAK()?.flow?.layout || FlowLayoutEnum.Stacked + ); } async renderChallenge(): Promise { @@ -560,18 +553,24 @@ export class FlowExecutor } render(): TemplateResult { - return html` -
-
-
-
-
-
-