web: application wizard

Found where the hook for form validity should go.  Excellent!  Now I just need to incorporate
that basic validation into the business logic and we're good to go.
This commit is contained in:
Ken Sternberg 2023-08-10 12:51:39 -07:00
parent 03d9360995
commit 7fae17dac3
2 changed files with 8 additions and 1 deletions

View File

@ -2,7 +2,7 @@ import { AKElement } from "@goauthentik/elements/Base";
import { CustomEmitterElement } from "@goauthentik/elements/utils/eventEmitter"; import { CustomEmitterElement } from "@goauthentik/elements/utils/eventEmitter";
import { consume } from "@lit-labs/context"; import { consume } from "@lit-labs/context";
import { state } from "@lit/reactive-element/decorators/state.js"; import { query, state } from "@lit/reactive-element/decorators.js";
import { styles as AwadStyles } from "./ApplicationWizardCss"; import { styles as AwadStyles } from "./ApplicationWizardCss";
import type { WizardState } from "./ak-application-wizard-context"; import type { WizardState } from "./ak-application-wizard-context";
@ -13,12 +13,18 @@ export class ApplicationWizardPageBase extends CustomEmitterElement(AKElement) {
return AwadStyles; return AwadStyles;
} }
@query("form")
form!: HTMLFormElement;
// @ts-expect-error // @ts-expect-error
@consume({ context: applicationWizardContext, subscribe: true }) @consume({ context: applicationWizardContext, subscribe: true })
@state() @state()
public wizard!: WizardState; public wizard!: WizardState;
dispatchWizardUpdate(update: Partial<WizardState>) { dispatchWizardUpdate(update: Partial<WizardState>) {
// TODO: Incorporate this into the message heading upward: "the current step is valid."
console.log(this.form.reportValidity());
this.dispatchCustomEvent("ak-application-wizard-update", { this.dispatchCustomEvent("ak-application-wizard-update", {
...this.wizard, ...this.wizard,
...update, ...update,

View File

@ -84,6 +84,7 @@ export class ApplicationWizard extends CustomListenerElement(AKElement) {
this.steps = newSteps; this.steps = newSteps;
} }
console.log(newWizardState);
this.wizardState = newWizardState; this.wizardState = newWizardState;
} }