diff --git a/web/src/admin/applications/wizard/ak-application-wizard.ts b/web/src/admin/applications/wizard/ak-application-wizard.ts index 94ffa741d..a6e74b608 100644 --- a/web/src/admin/applications/wizard/ak-application-wizard.ts +++ b/web/src/admin/applications/wizard/ak-application-wizard.ts @@ -1,6 +1,7 @@ import { type AkWizardMain } from "@goauthentik/app/components/ak-wizard-main/ak-wizard-main"; import { merge } from "@goauthentik/common/merge"; import "@goauthentik/components/ak-wizard-main"; +import { CloseWizard } from "@goauthentik/components/ak-wizard-main/commonWizardButtons"; import { AKElement } from "@goauthentik/elements/Base"; import { CustomListenerElement } from "@goauthentik/elements/utils/eventEmitter"; @@ -15,8 +16,14 @@ import PFRadio from "@patternfly/patternfly/components/Radio/radio.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css"; import applicationWizardContext from "./ak-application-wizard-context-name"; -import { steps } from "./steps"; -import { OneOfProvider, WizardState, WizardStateEvent } from "./types"; +import { newSteps } from "./steps"; +import { OneOfProvider, WizardState, WizardStateUpdate } from "./types"; + +const freshWizardState = () => ({ + providerModel: "", + app: {}, + provider: {}, +}); @customElement("ak-application-wizard") export class ApplicationWizard extends CustomListenerElement(AKElement) { @@ -25,11 +32,7 @@ export class ApplicationWizard extends CustomListenerElement(AKElement) { } @state() - wizardState: WizardState = { - providerModel: "", - app: {}, - provider: {}, - }; + wizardState: WizardState = freshWizardState(); /** * Providing a context at the root element @@ -40,7 +43,7 @@ export class ApplicationWizard extends CustomListenerElement(AKElement) { }); @state() - steps = steps; + steps = newSteps(); @property() prompt = msg("Create"); @@ -49,15 +52,15 @@ export class ApplicationWizard extends CustomListenerElement(AKElement) { wizardRef: Ref = createRef(); - get step() { - return this.wizardRef.value?.currentStep ?? -1; - } - constructor() { super(); this.handleUpdate = this.handleUpdate.bind(this); } + get step() { + return this.wizardRef.value?.currentStep ?? -1; + } + connectedCallback() { super.connectedCallback(); new ContextRoot().attach(this.parentElement!); @@ -88,11 +91,25 @@ export class ApplicationWizard extends CustomListenerElement(AKElement) { throw new Error("Could not find Authentication Method page?"); } method.disabled = false; + return true; } // And this is where all the special cases go... - handleUpdate(event: CustomEvent) { + handleUpdate(event: CustomEvent) { + if (event.detail.status === "submitted") { + const submitStep = this.steps.find(({ id }) => id === "submit"); + if (!submitStep) { + throw new Error("Could not find submit step?"); + } + submitStep.buttons = [CloseWizard]; + this.steps = [...this.steps]; + return; + } + const update = event.detail.update; + if (!update) { + return; + } if (this.maybeProviderSwap(update.providerModel)) { this.steps = [...this.steps]; @@ -100,7 +117,7 @@ export class ApplicationWizard extends CustomListenerElement(AKElement) { if (event.detail.status === "valid" && this.steps[this.step + 1]) { this.steps[this.step + 1].disabled = false; - this.steps = [...this.steps]; + this.steps = [...this.steps]; } this.wizardState = merge(this.wizardState, update) as WizardState; diff --git a/web/src/admin/applications/wizard/commit/ak-application-wizard-commit-application.ts b/web/src/admin/applications/wizard/commit/ak-application-wizard-commit-application.ts index 95e7798a1..28c2e3363 100644 --- a/web/src/admin/applications/wizard/commit/ak-application-wizard-commit-application.ts +++ b/web/src/admin/applications/wizard/commit/ak-application-wizard-commit-application.ts @@ -26,6 +26,7 @@ import type { ModelRequest } from "@goauthentik/api"; import BasePanel from "../BasePanel"; import providerModelsList from "../auth-method-choice/ak-application-wizard-authentication-method-choice.choices"; +import { type WizardStateUpdate } from "../types"; function cleanApplication(app: Partial): ApplicationRequest { return { @@ -100,6 +101,7 @@ export class ApplicationWizardCommitApplication extends BasePanel { const network = new CoreApi(DEFAULT_CONFIG).coreTransactionalApplicationsUpdate({ transactionApplicationRequest: data, }); + Promise.allSettled([network, timeout]).then(([network_resolution]) => { if (network_resolution.status === "rejected") { this.commitState = errorState; @@ -112,9 +114,9 @@ export class ApplicationWizardCommitApplication extends BasePanel { this.errors = network_resolution.value.logs; return; } - this.response = network_resolution.value; this.dispatchCustomEvent(EVENT_REFRESH); + this.dispatchWizardUpdate({ status: "submitted"}); this.commitState = doneState; } }); diff --git a/web/src/admin/applications/wizard/steps.ts b/web/src/admin/applications/wizard/steps.ts index 125383bec..410a2b00a 100644 --- a/web/src/admin/applications/wizard/steps.ts +++ b/web/src/admin/applications/wizard/steps.ts @@ -14,11 +14,11 @@ import "./commit/ak-application-wizard-commit-application"; import "./methods/ak-application-wizard-authentication-method"; type NamedStep = WizardStep & { - id: string, - valid: boolean, + id: string; + valid: boolean; }; -export const steps: NamedStep[] = [ +export const newSteps = (): NamedStep[] => [ { id: "application", label: "Application Details", diff --git a/web/src/admin/applications/wizard/types.ts b/web/src/admin/applications/wizard/types.ts index 0f3403367..fd516bfe8 100644 --- a/web/src/admin/applications/wizard/types.ts +++ b/web/src/admin/applications/wizard/types.ts @@ -25,6 +25,6 @@ export interface WizardState { type StatusType = "invalid" | "valid" | "submitted" | "failed"; export type WizardStateUpdate = { - update: Partial, + update?: Partial, status?: StatusType, }; diff --git a/web/src/components/ak-wizard-main/ak-wizard-main.ts b/web/src/components/ak-wizard-main/ak-wizard-main.ts index 63529f010..526aa7a86 100644 --- a/web/src/components/ak-wizard-main/ak-wizard-main.ts +++ b/web/src/components/ak-wizard-main/ak-wizard-main.ts @@ -154,11 +154,6 @@ export class AkWizardMain extends CustomListenerElement(AKElement) { return; } case "next": { - console.log(this.nextStep, - this.steps[this.nextStep], - !this.steps[this.nextStep].disabled, - this.validated); - if ( this.nextStep && this.steps[this.nextStep] && @@ -170,6 +165,7 @@ export class AkWizardMain extends CustomListenerElement(AKElement) { return; } case "close": { + this.currentStep = 0; this.frame.open = false; } }