web/admin: set valid correctly when opened and radio is already selected (#4821)

closes #4813

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

SECURITY.md

@@ -8,6 +8,7 @@ Authentik takes security very seriously. We follow the rules of [responsible dis
 | --------- | ------------------ |
 | 2022.12.x | :white_check_mark: |
 | 2023.1.x  | :white_check_mark: |
+| 2023.2.x  | :white_check_mark: |
 
 ## Reporting a Vulnerability
 

web/src/admin/outposts/ServiceConnectionWizard.ts

@@ -31,6 +31,17 @@ export class InitialServiceConnectionWizardPage extends WizardPage {
     }
     sidebarLabel = () => t`Select type`;
 
+    activeCallback: () => Promise<void> = async () => {
+        this.host.isValid = false;
+        this.shadowRoot
+            ?.querySelectorAll<HTMLInputElement>("input[type=radio]")
+            .forEach((radio) => {
+                if (radio.checked) {
+                    this.host.isValid = true;
+                }
+            });
+    };
+
     render(): TemplateResult {
         return html`<form class="pf-c-form pf-m-horizontal">
             ${this.connectionTypes.map((type) => {

web/src/admin/policies/PolicyWizard.ts

@@ -37,6 +37,17 @@ export class InitialPolicyWizardPage extends WizardPage {
     }
     sidebarLabel = () => t`Select type`;
 
+    activeCallback: () => Promise<void> = async () => {
+        this.host.isValid = false;
+        this.shadowRoot
+            ?.querySelectorAll<HTMLInputElement>("input[type=radio]")
+            .forEach((radio) => {
+                if (radio.checked) {
+                    this.host.isValid = true;
+                }
+            });
+    };
+
     render(): TemplateResult {
         return html`<form class="pf-c-form pf-m-horizontal">
             ${this.policyTypes.map((type) => {

web/src/admin/property-mappings/PropertyMappingWizard.ts

@@ -34,6 +34,17 @@ export class InitialPropertyMappingWizardPage extends WizardPage {
     }
     sidebarLabel = () => t`Select type`;
 
+    activeCallback: () => Promise<void> = async () => {
+        this.host.isValid = false;
+        this.shadowRoot
+            ?.querySelectorAll<HTMLInputElement>("input[type=radio]")
+            .forEach((radio) => {
+                if (radio.checked) {
+                    this.host.isValid = true;
+                }
+            });
+    };
+
     render(): TemplateResult {
         return html`<form class="pf-c-form pf-m-horizontal">
             ${this.mappingTypes.map((type) => {

web/src/admin/providers/ProviderWizard.ts

@@ -36,6 +36,17 @@ export class InitialProviderWizardPage extends WizardPage {
     }
     sidebarLabel = () => t`Select type`;
 
+    activeCallback: () => Promise<void> = async () => {
+        this.host.isValid = false;
+        this.shadowRoot
+            ?.querySelectorAll<HTMLInputElement>("input[type=radio]")
+            .forEach((radio) => {
+                if (radio.checked) {
+                    this.host.isValid = true;
+                }
+            });
+    };
+
     renderHint(): TemplateResult {
         return html`<div class="pf-c-hint">
                 <div class="pf-c-hint__title">${t`Try the new application wizard`}</div>
@@ -56,7 +67,7 @@ export class InitialProviderWizardPage extends WizardPage {
     }
 
     render(): TemplateResult {
-        return html` <form class="pf-c-form pf-m-horizontal">
+        return html`<form class="pf-c-form pf-m-horizontal">
             ${this.providerTypes.map((type) => {
                 return html`<div class="pf-c-radio">
                     <input

web/src/admin/sources/SourceWizard.ts

@@ -33,6 +33,17 @@ export class InitialSourceWizardPage extends WizardPage {
     }
     sidebarLabel = () => t`Select type`;
 
+    activeCallback: () => Promise<void> = async () => {
+        this.host.isValid = false;
+        this.shadowRoot
+            ?.querySelectorAll<HTMLInputElement>("input[type=radio]")
+            .forEach((radio) => {
+                if (radio.checked) {
+                    this.host.isValid = true;
+                }
+            });
+    };
+
     render(): TemplateResult {
         return html`<form class="pf-c-form pf-m-horizontal">
             ${this.sourceTypes.map((type) => {

web/src/admin/stages/StageWizard.ts

@@ -50,6 +50,17 @@ export class InitialStageWizardPage extends WizardPage {
         return [PFBase, PFForm, PFButton, AKGlobal, PFRadio];
     }
 
+    activeCallback: () => Promise<void> = async () => {
+        this.host.isValid = false;
+        this.shadowRoot
+            ?.querySelectorAll<HTMLInputElement>("input[type=radio]")
+            .forEach((radio) => {
+                if (radio.checked) {
+                    this.host.isValid = true;
+                }
+            });
+    };
+
     render(): TemplateResult {
         return html`<form class="pf-c-form pf-m-horizontal">
             ${this.stageTypes.map((type) => {