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.

web/src/admin/applications/wizard/ApplicationWizardPageBase.ts

@@ -2,7 +2,7 @@ import { AKElement } from "@goauthentik/elements/Base";
 import { CustomEmitterElement } from "@goauthentik/elements/utils/eventEmitter";
 
 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 type { WizardState } from "./ak-application-wizard-context";
@@ -13,12 +13,18 @@ export class ApplicationWizardPageBase extends CustomEmitterElement(AKElement) {
         return AwadStyles;
     }
 
+    @query("form")
+    form!: HTMLFormElement;
+
     // @ts-expect-error
     @consume({ context: applicationWizardContext, subscribe: true })
     @state()
     public wizard!: 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.wizard,
             ...update,

web/src/admin/applications/wizard/ak-application-wizard.ts

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