From d516bcd64eaa2f8372c9da4ee36bf179627279e8 Mon Sep 17 00:00:00 2001
From: "Jens L." <jens@goauthentik.io>
Date: Sat, 9 May 2026 20:22:59 +0200
Subject: [PATCH] web/admin: User wizard label adjust and deactivate navigation
 when wizard is finished (#22133)

* elements/wizard: deactivate side nav buttons if wizard is done

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* adjust labels for service account

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* Fix wizards to use consistent height.

* remove justify

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>
---
 web/src/admin/users/ak-user-wizard.ts         |  8 +++++-
 web/src/components/ak-wizard/WizardStep.ts    |  3 +-
 web/src/elements/wizard/Wizard.ts             | 25 +++++------------
 .../authentik/components/Modal/modal.css      |  2 +-
 .../authentik/components/Wizard/wizard.css    | 28 +++++++++++++++----
 5 files changed, 40 insertions(+), 26 deletions(-)

diff --git a/web/src/admin/users/ak-user-wizard.ts b/web/src/admin/users/ak-user-wizard.ts
index 0d62239d64e7..3d02a58052c2 100644
--- a/web/src/admin/users/ak-user-wizard.ts
+++ b/web/src/admin/users/ak-user-wizard.ts
@@ -11,6 +11,8 @@ import { CreateWizard } from "#elements/wizard/CreateWizard";
 import { TypeCreateWizardPageLayouts } from "#elements/wizard/TypeCreateWizardPage";
 import { WizardPage } from "#elements/wizard/WizardPage";
 
+import { ButtonKindLabelRecord } from "#components/ak-wizard/shared";
+
 import { UserForm } from "#admin/users/UserForm";
 
 import { TypeCreate, UserServiceAccountResponse, UserTypeEnum } from "@goauthentik/api";
@@ -57,7 +59,7 @@ export interface UserWizardState {
 export class ServiceAccountResultPage extends WizardPage<UserWizardState> {
     public static styles: CSSResult[] = [PFForm, PFFormControl];
 
-    public override headline = msg("Review Credentials");
+    public override headline = msg("View Credentials");
 
     @state()
     protected result: UserServiceAccountResponse | null = null;
@@ -75,6 +77,10 @@ export class ServiceAccountResultPage extends WizardPage<UserWizardState> {
         this.host.cancelable = false;
     };
 
+    public formatNextLabel(): SlottedTemplateResult | null {
+        return ButtonKindLabelRecord.close;
+    }
+
     public override nextCallback = async (): Promise<boolean> => true;
 
     protected override render(): SlottedTemplateResult {
diff --git a/web/src/components/ak-wizard/WizardStep.ts b/web/src/components/ak-wizard/WizardStep.ts
index 559956747b50..7c631eb0edbb 100644
--- a/web/src/components/ak-wizard/WizardStep.ts
+++ b/web/src/components/ak-wizard/WizardStep.ts
@@ -58,9 +58,10 @@ export abstract class WizardStep extends AKElement {
 
             .pf-c-wizard__main-body {
                 display: flex;
-                flex-flow: row wrap;
+                flex-flow: column;
 
                 & > * {
+                    width: 100%;
                     flex: 1 1 auto;
                 }
             }
diff --git a/web/src/elements/wizard/Wizard.ts b/web/src/elements/wizard/Wizard.ts
index e92cab28eda7..d04f68bcdbbe 100644
--- a/web/src/elements/wizard/Wizard.ts
+++ b/web/src/elements/wizard/Wizard.ts
@@ -62,23 +62,6 @@ export class AKWizard<S = Record<string, unknown>> extends AKElement {
                 display: block;
                 height: min(var(--ak-c-dialog--AspectRatioHeight), var(--ak-c-dialog--MaxHeight));
             }
-
-            .pf-c-wizard__main {
-                overscroll-behavior: contain;
-                display: flex;
-                flex-flow: column;
-            }
-
-            .pf-c-wizard__main,
-            .pf-c-wizard__main-body {
-                transform: translate3d(0, 0, 0);
-                will-change: transform;
-            }
-
-            .pf-c-wizard__main-body {
-                display: flex;
-                flex: 1 1 auto;
-            }
         `,
     ];
 
@@ -521,6 +504,12 @@ export class AKWizard<S = Record<string, unknown>> extends AKElement {
                     return html`<p>Unexpected missing step: ${step}</p>`;
                 }
 
+                // By default, disable steps ahead of the current step
+                let disabled = activeStepIndex < idx;
+                // If this wizard is at the end, disable navigation back
+                if (activeStepIndex === this.steps.length - 1 && idx !== activeStepIndex) {
+                    disabled = true;
+                }
                 return html`<li role="presentation" class="pf-c-wizard__nav-item">
                     <button
                         class=${classMap({
@@ -528,7 +517,7 @@ export class AKWizard<S = Record<string, unknown>> extends AKElement {
                             "pf-m-current": idx === activeStepIndex,
                         })}
                         type="button"
-                        ?disabled=${activeStepIndex < idx}
+                        ?disabled=${disabled}
                         @click=${() => {
                             this.activeStepElement = stepEl;
                         }}
diff --git a/web/src/styles/authentik/components/Modal/modal.css b/web/src/styles/authentik/components/Modal/modal.css
index 72e4e5b5de74..feff1253bdc2 100644
--- a/web/src/styles/authentik/components/Modal/modal.css
+++ b/web/src/styles/authentik/components/Modal/modal.css
@@ -8,7 +8,7 @@
 
     --pf-c-modal-box__header--PaddingTop: var(--ak-c-modal-box__header--BlockSpacer);
 
-    --ak-c-modal-box__footer--BlockSpacer: clamp(0.25em, var(--pf-global--spacer--xl), 3cqb);
+    --ak-c-modal-box__footer--BlockSpacer: clamp(0.25em, var(--pf-global--spacer--xl), 2cqb);
     --pf-c-modal-box__footer--PaddingTop: var(--ak-c-modal-box__footer--BlockSpacer);
     --pf-c-modal-box__footer--PaddingBottom: var(--ak-c-modal-box__footer--BlockSpacer);
 }
diff --git a/web/src/styles/authentik/components/Wizard/wizard.css b/web/src/styles/authentik/components/Wizard/wizard.css
index cb2da2971f83..499ec4378981 100644
--- a/web/src/styles/authentik/components/Wizard/wizard.css
+++ b/web/src/styles/authentik/components/Wizard/wizard.css
@@ -10,26 +10,44 @@
     --pf-c-wizard__close--Right: var(--ak-c-wizard__header--InlineSpacer);
     --pf-c-wizard__close--Top: var(--ak-c-wizard__header--BlockSpacer);
 
-    --ak-c-wizard__footer--BlockSpacer: clamp(0.25em, var(--pf-global--spacer--xl), 3cqb);
+    --ak-c-wizard__footer--BlockSpacer: clamp(0.25em, var(--pf-global--spacer--xl), 2cqb);
     --pf-c-wizard__footer--PaddingTop: var(--ak-c-wizard__footer--BlockSpacer);
     --pf-c-wizard__footer--PaddingBottom: var(--ak-c-wizard__footer--BlockSpacer);
     --pf-c-wizard__footer--child--MarginBottom: 0;
 }
 
+.pf-c-wizard__main {
+    overscroll-behavior: contain;
+    display: flex;
+    flex-flow: column;
+    height: min(var(--ak-c-dialog--MaxHeight), 100cqi);
+}
+
 .pf-c-wizard__main-body {
     --ak-c-fieldset--BorderColor: var(--pf-global--BackgroundColor--150);
 
+    display: flex;
+    flex: 1 1 auto;
     gap: var(--pf-global--spacer--lg);
 
-    fieldset {
-        .pf-c-description-list {
-            margin-inline: var(--pf-global--spacer--sm);
-        }
+    .ak-c-fieldset .pf-c-description-list {
+        margin-inline: var(--pf-global--spacer--sm);
+    }
+
+    & > .pf-c-form {
+        place-content: start;
     }
 }
 
+.pf-c-wizard__main,
+.pf-c-wizard__main-body {
+    transform: translate3d(0, 0, 0);
+    will-change: transform;
+}
+
 .pf-c-wizard__main-title {
     width: 100%;
+    flex: 0 0 auto;
     font-family: var(--pf-global--FontFamily--heading--sans-serif);
     font-size: var(--pf-global--FontSize--md);
     font-weight: var(--pf-global--FontWeight--bold);