web: Minimal mobile flow

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;

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);
 
@@ -311,27 +314,38 @@ 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;
+    color: var(--ak-flow-footer-color);
+    flex: 0 0 auto;
     display: flex;
     justify-content: end;
     flex-direction: column;
 }
 
+@media (max-width: 768px) {
+    :root {
+        --ak-flow-footer-color: var(--ak-flow-background-color-contrast);
+    }
+}
+
 .pf-c-login__footer ul.pf-c-list.pf-m-inline {
     justify-content: center;
     padding: 2rem 0;
@@ -539,11 +553,16 @@ 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[data-layout="sidebar_left"],
+.pf-c-login[data-layout="sidebar_right"] {
+    --ak-flow-footer-color: var(--ak-flow-background-color-contrast);
+}
+
 .pf-c-data-list {
     padding-inline-start: 0;
 }

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<FlowLayoutEnum, string>;
+
 @customElement("ak-flow-executor")
 export class FlowExecutor
     extends WithCapabilitiesConfig(WithBrandConfig(Interface))
@@ -73,7 +82,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;
             }
@@ -85,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;
                 }
             }
@@ -95,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 {
@@ -352,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<TemplateResult> {
@@ -555,18 +553,24 @@ export class FlowExecutor
     }
 
     render(): TemplateResult {
-        return html` <ak-locale-context>
-            <div class="pf-c-background-image"></div>
-            <div class="pf-c-page__drawer">
-                <div class="pf-c-drawer ${this.inspectorOpen ? "pf-m-expanded" : "pf-m-collapsed"}">
-                    <div class="pf-c-drawer__main">
-                        <div class="pf-c-drawer__content">
-                            <div class="pf-c-drawer__body">
-                                <div class="pf-c-login ${this.getLayout()}">
-                                    <div class="${this.getLayoutClass()}">
+        const { layout } = this;
+
+        return html`<ak-locale-context>
+            <div class="pf-c-background-image" part="background-image"></div>
+            <div class="pf-c-page__drawer" part="page-drawer">
+                <div
+                    class="pf-c-drawer ${this.inspectorOpen ? "pf-m-expanded" : "pf-m-collapsed"}"
+                    part="drawer"
+                >
+                    <div class="pf-c-drawer__main" part="drawer-main">
+                        <div class="pf-c-drawer__content" part="drawer-content">
+                            <div class="pf-c-drawer__body" part="drawer-body">
+                                <div class="pf-c-login" data-layout=${layout} part="flow">
+                                    <div class=${FlowLayoutClasses[layout]} part="flow-container">
                                         <main
                                             class="pf-c-login__main"
                                             aria-label=${msg("Authentication form")}
+                                            part="flow-main"
                                         >
                                             ${this.loading && this.challenge
                                                 ? html`<ak-loading-overlay></ak-loading-overlay>`
@@ -583,6 +587,7 @@ export class FlowExecutor
                                             ${until(this.renderChallenge())}
                                         </main>
                                         <ak-brand-links
+                                            part="brand-links"
                                             role="contentinfo"
                                             aria-label=${msg("Site footer")}
                                             class="pf-c-login__footer"

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

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