diff --git a/web/src/admin/applications/wizard/ak-application-wizard.ts b/web/src/admin/applications/wizard/ak-application-wizard.ts index a6e74b608..e844e0be2 100644 --- a/web/src/admin/applications/wizard/ak-application-wizard.ts +++ b/web/src/admin/applications/wizard/ak-application-wizard.ts @@ -55,6 +55,7 @@ export class ApplicationWizard extends CustomListenerElement(AKElement) { constructor() { super(); this.handleUpdate = this.handleUpdate.bind(this); + this.handleClosed = this.handleClosed.bind(this); } get step() { @@ -65,10 +66,12 @@ export class ApplicationWizard extends CustomListenerElement(AKElement) { super.connectedCallback(); new ContextRoot().attach(this.parentElement!); this.addCustomListener("ak-application-wizard-update", this.handleUpdate); + this.addCustomListener("ak-wizard-closed", this.handleClosed); } disconnectedCallback() { this.removeCustomListener("ak-application-wizard-update", this.handleUpdate); + this.removeCustomListener("ak-wizard-closed", this.handleClosed); super.disconnectedCallback(); } @@ -124,6 +127,12 @@ export class ApplicationWizard extends CustomListenerElement(AKElement) { this.wizardStateProvider.setValue(this.wizardState); } + handleClosed() { + this.steps = newSteps(); + this.wizardState = freshWizardState(); + this.wizardStateProvider.setValue(this.wizardState); + } + render() { return html` ): ApplicationRequest { return { @@ -116,7 +115,7 @@ export class ApplicationWizardCommitApplication extends BasePanel { } this.response = network_resolution.value; this.dispatchCustomEvent(EVENT_REFRESH); - this.dispatchWizardUpdate({ status: "submitted"}); + this.dispatchWizardUpdate({ status: "submitted" }); this.commitState = doneState; } }); diff --git a/web/src/admin/applications/wizard/methods/BaseProviderPanel.ts b/web/src/admin/applications/wizard/methods/BaseProviderPanel.ts index 22ad94413..ce60213e1 100644 --- a/web/src/admin/applications/wizard/methods/BaseProviderPanel.ts +++ b/web/src/admin/applications/wizard/methods/BaseProviderPanel.ts @@ -14,15 +14,10 @@ export class ApplicationWizardProviderPageBase extends BasePanel { [target.name]: value, }, }, - status: this.form.checkValidity() ? "valid" : "invalid" + status: this.form.checkValidity() ? "valid" : "invalid", }); } - shouldUpdate(changed: Map) { - console.log("CHANGED:", JSON.stringify(Array.from(changed.entries()), null, 2)); - return true; - } - validator() { return this.form.reportValidity(); } diff --git a/web/src/admin/applications/wizard/types.ts b/web/src/admin/applications/wizard/types.ts index fd516bfe8..696def61a 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, - status?: StatusType, + update?: Partial; + status?: StatusType; }; diff --git a/web/src/components/ak-wizard-main/ak-wizard-frame.ts b/web/src/components/ak-wizard-main/ak-wizard-frame.ts index 6c27c7e1f..c950631d5 100644 --- a/web/src/components/ak-wizard-main/ak-wizard-frame.ts +++ b/web/src/components/ak-wizard-main/ak-wizard-frame.ts @@ -71,13 +71,11 @@ export class AkWizardFrame extends CustomEmitterElement(ModalButton) { } renderModalInner() { - // prettier-ignore return html`
${this.renderHeader()}
- ${this.renderNavigation()} - ${this.renderMainSection()} + ${this.renderNavigation()} ${this.renderMainSection()}
${this.renderFooter()}
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 526aa7a86..9db54cf43 100644 --- a/web/src/components/ak-wizard-main/ak-wizard-main.ts +++ b/web/src/components/ak-wizard-main/ak-wizard-main.ts @@ -1,5 +1,5 @@ import { AKElement } from "@goauthentik/elements/Base"; -import { CustomListenerElement } from "@goauthentik/elements/utils/eventEmitter"; +import { CustomEmitterElement, CustomListenerElement } from "@goauthentik/elements/utils/eventEmitter"; import { html } from "lit"; import { customElement, property, query, state } from "lit/decorators.js"; @@ -45,7 +45,7 @@ const hasValidator = (v: any): v is Required> => */ @customElement("ak-wizard-main") -export class AkWizardMain extends CustomListenerElement(AKElement) { +export class AkWizardMain extends CustomEmitterElement(CustomListenerElement(AKElement)) { static get styles() { return [PFBase, PFButton, PFRadio]; } @@ -167,6 +167,7 @@ export class AkWizardMain extends CustomListenerElement(AKElement) { case "close": { this.currentStep = 0; this.frame.open = false; + this.dispatchCustomEvent('ak-wizard-closed'); } } } diff --git a/web/src/components/ak-wizard-main/commonWizardButtons.ts b/web/src/components/ak-wizard-main/commonWizardButtons.ts index 402c20178..7bd302754 100644 --- a/web/src/components/ak-wizard-main/commonWizardButtons.ts +++ b/web/src/components/ak-wizard-main/commonWizardButtons.ts @@ -1,4 +1,5 @@ import { msg } from "@lit/localize"; + import { WizardButton } from "./types"; export const NextStep: WizardButton = [msg("Next"), "next"]; @@ -10,4 +11,3 @@ export const SubmitStep: WizardButton = [msg("Submit"), "next"]; export const CancelWizard: WizardButton = [msg("Cancel"), "close"]; export const CloseWizard: WizardButton = [msg("Close"), "close"]; - diff --git a/web/src/components/ak-wizard-main/stories/ak-demo-wizard.ts b/web/src/components/ak-wizard-main/stories/ak-demo-wizard.ts index d4551e9a3..d28b38d53 100644 --- a/web/src/components/ak-wizard-main/stories/ak-demo-wizard.ts +++ b/web/src/components/ak-wizard-main/stories/ak-demo-wizard.ts @@ -36,8 +36,8 @@ export class AkDemoWizard extends AKElement { diff --git a/web/src/components/ak-wizard-main/types.ts b/web/src/components/ak-wizard-main/types.ts index 8645580fd..6d09ba9fd 100644 --- a/web/src/components/ak-wizard-main/types.ts +++ b/web/src/components/ak-wizard-main/types.ts @@ -2,15 +2,13 @@ import { TemplateResult } from "lit"; export type WizardNavCommand = "next" | "back" | "close" | ["goto", number]; - // The label of the button, the command the button should execute, and if the button // should be marked "disabled." export type WizardButton = [string, WizardNavCommand, boolean?]; - export interface WizardStep { // The name of the step, as shown in the navigation. - label: string; + label: string; // A function which returns the html for rendering the actual content of the step, its form and // such. diff --git a/web/src/elements/buttons/ModalButton.ts b/web/src/elements/buttons/ModalButton.ts index 9a2b4fd0d..dfc594e2c 100644 --- a/web/src/elements/buttons/ModalButton.ts +++ b/web/src/elements/buttons/ModalButton.ts @@ -1,7 +1,7 @@ import { AKElement } from "@goauthentik/elements/Base"; import { PFSize } from "@goauthentik/elements/Spinner"; -import { CSSResult, TemplateResult, css, html } from "lit"; +import { CSSResult, TemplateResult, css, html, nothing } from "lit"; import { customElement, property } from "lit/decorators.js"; import PFBackdrop from "@patternfly/patternfly/components/Backdrop/backdrop.css"; @@ -100,7 +100,7 @@ export class ModalButton extends AKElement { }); } - renderModalInner(): TemplateResult { + renderModalInner(): TemplateResult | typeof nothing { return html``; } @@ -136,6 +136,6 @@ export class ModalButton extends AKElement { render(): TemplateResult { return html` this.onClick()}> - ${this.open ? this.renderModal() : ""}`; + ${this.open ? this.renderModal() : nothing}`; } }