web/admin: User wizard label adjust and deactivate navigation when wizard is finished

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 {

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

web/src/elements/wizard/TypeCreateWizardPage.ts

@@ -80,6 +80,10 @@ export class TypeCreateWizardPage extends WithLicenseSummary(WizardPage) {
             [part*="type-create"]:not(:first-child) {
                 margin-block-start: var(--pf-global--spacer--md);
             }
+
+            :host([layout="list"]) {
+                justify-content: center;
+            }
         `,
     ];
 

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,14 +504,20 @@ 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({
                             "pf-c-wizard__nav-link": true,
                             "pf-m-current": idx === activeStepIndex,
                         })}
                         type="button"
-                        ?disabled=${activeStepIndex < idx}
+                        ?disabled=${disabled}
                         @click=${() => {
                             this.activeStepElement = stepEl;
                         }}

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

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