web/admin: add basic wizards for providers

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/elements/wizard/FormWizardStep.ts

@@ -0,0 +1,36 @@
+import { t } from "@lingui/macro";
+
+import { TemplateResult } from "lit";
+
+import { Form } from "../forms/Form";
+import { WizardStep } from "./WizardStep";
+
+export class FormWizardStep extends WizardStep {
+    _valid = true;
+
+    isValid(): boolean {
+        return this._valid;
+    }
+    nextCallback = async () => {
+        const form = this.host.shadowRoot?.querySelector<Form<unknown>>(
+            ".pf-c-wizard__main-body > *",
+        );
+        if (!form) {
+            return Promise.reject(t`No form found`);
+        }
+        const formPromise = form.submit(new Event("submit"));
+        if (!formPromise) {
+            return Promise.reject(t`Form didn't return a promise for submitting`);
+        }
+        return formPromise
+            .then(() => {
+                return true;
+            })
+            .catch(() => {
+                return false;
+            });
+    };
+    renderNavList(): TemplateResult {
+        throw new Error("Method not implemented.");
+    }
+}

web/src/elements/wizard/Wizard.ts

@@ -0,0 +1,147 @@
+import { t } from "@lingui/macro";
+
+import { customElement } from "@lit/reactive-element/decorators/custom-element.js";
+import { property } from "@lit/reactive-element/decorators/property.js";
+import { CSSResult, TemplateResult, html } from "lit";
+import { cache } from "lit/directives/cache.js";
+
+import PFWizard from "@patternfly/patternfly/components/Wizard/wizard.css";
+
+import { ModalButton } from "../buttons/ModalButton";
+import { WizardStep } from "./WizardStep";
+import { WizardStepContainer } from "./WizardStepContainer";
+
+@customElement("ak-wizard")
+export class Wizard extends ModalButton implements WizardStepContainer {
+    @property()
+    header?: string;
+
+    @property()
+    description?: string;
+
+    static get styles(): CSSResult[] {
+        return super.styles.concat(PFWizard);
+    }
+
+    @property({ attribute: false })
+    steps: WizardStep[] = [];
+
+    set currentStep(value: WizardStep) {
+        this._currentStep = value;
+        this._currentStep.host = this;
+        this._currentStep.activeCallback();
+    }
+
+    get currentStep(): WizardStep {
+        return this._currentStep;
+    }
+
+    @property({ attribute: false })
+    _currentStep!: WizardStep;
+
+    finalHandler?: () => Promise<void>;
+
+    setSteps(...steps: WizardStep[]): void {
+        this.steps = steps;
+        this.requestUpdate();
+    }
+
+    renderModalInner(): TemplateResult {
+        if (!this.currentStep) {
+            this.currentStep = this.steps[0];
+        }
+        const currentIndex = this.steps.indexOf(this.currentStep);
+        return html`<div class="pf-c-wizard">
+            <div class="pf-c-wizard__header">
+                <button
+                    class="pf-c-button pf-m-plain pf-c-wizard__close"
+                    type="button"
+                    aria-label="${t`Close`}"
+                >
+                    <i class="fas fa-times" aria-hidden="true"></i>
+                </button>
+                <h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">${this.header}</h1>
+                <p class="pf-c-wizard__description">${this.description}</p>
+            </div>
+            <div class="pf-c-wizard__outer-wrap">
+                <div class="pf-c-wizard__inner-wrap">
+                    <nav class="pf-c-wizard__nav">
+                        <ol class="pf-c-wizard__nav-list">
+                            ${this.steps.map((step, idx) => {
+                                const currentIdx = this.steps.indexOf(this.currentStep);
+                                return html`
+                                    <li class="pf-c-wizard__nav-item">
+                                        <button
+                                            class="pf-c-wizard__nav-link ${idx === currentIdx
+                                                ? "pf-m-current"
+                                                : ""}"
+                                            ?disabled=${this.steps.indexOf(this.currentStep) < idx}
+                                            @click=${() => {
+                                                this.currentStep = step;
+                                            }}
+                                        >
+                                            ${step.renderNavList()}
+                                        </button>
+                                    </li>
+                                `;
+                            })}
+                        </ol>
+                    </nav>
+                    <main class="pf-c-wizard__main">
+                        <div class="pf-c-wizard__main-body">
+                            ${cache(this.currentStep.render())}
+                        </div>
+                    </main>
+                </div>
+                <footer class="pf-c-wizard__footer">
+                    <button
+                        class="pf-c-button pf-m-primary"
+                        type="submit"
+                        ?disabled=${!this._currentStep.isValid()}
+                        @click=${async () => {
+                            const cb = await this.currentStep.nextCallback();
+                            if (!cb) {
+                                return;
+                            }
+                            if (currentIndex === this.steps.length - 1) {
+                                if (this.finalHandler) {
+                                    await this.finalHandler();
+                                }
+                                this.open = false;
+                            } else {
+                                this.currentStep = this.steps[currentIndex + 1];
+                            }
+                        }}
+                    >
+                        ${currentIndex === this.steps.length - 1 ? t`Finish` : t`Next`}
+                    </button>
+                    ${this.steps.indexOf(this.currentStep) > 0
+                        ? html`
+                              <button
+                                  class="pf-c-button pf-m-secondary"
+                                  type="button"
+                                  @click=${() => {
+                                      this.currentStep = this.steps[currentIndex - 1];
+                                  }}
+                              >
+                                  ${t`Back`}
+                              </button>
+                          `
+                        : html``}
+                    <div class="pf-c-wizard__footer-cancel">
+                        <button
+                            class="pf-c-button pf-m-link"
+                            type="button"
+                            @click=${() => {
+                                this.open = false;
+                                this.currentStep = this.steps[0];
+                            }}
+                        >
+                            ${t`Cancel`}
+                        </button>
+                    </div>
+                </footer>
+            </div>
+        </div>`;
+    }
+}

web/src/elements/wizard/WizardStep.ts

@@ -0,0 +1,24 @@
+import { TemplateResult, html } from "lit";
+
+import { WizardStepContainer } from "./WizardStepContainer";
+
+export abstract class WizardStep {
+    host!: WizardStepContainer;
+
+    isValid(): boolean {
+        return false;
+    }
+
+    activeCallback: () => Promise<void> = () => {
+        return Promise.resolve();
+    };
+    nextCallback: () => Promise<boolean> = async () => {
+        return true;
+    };
+
+    abstract renderNavList(): TemplateResult;
+
+    render(): TemplateResult {
+        return html``;
+    }
+}

web/src/elements/wizard/WizardStepContainer.ts

@@ -0,0 +1,10 @@
+import { LitElement } from "lit";
+
+import { WizardStep } from "./WizardStep";
+
+export interface WizardStepContainer extends LitElement {
+    steps: WizardStep[];
+    currentStep?: WizardStep;
+
+    setSteps(...steps: WizardStep[]): void;
+}

web/src/locales/de.po

@@ -231,6 +231,30 @@ msgstr "Aktiv"
 msgid "Add"
 msgstr "Hinzufügen"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid ""
+"Add a provider which does not support any other method. Requests will be routed\n"
+"through the authentik proxy, which authenticates all requests."
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "Add a provider which support LDAP."
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid ""
+"Add a provider which supports OAuth, OIDC or \"Login with GitHub\n"
+"Enterprise\"."
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "Add a provider which supports SAML 2.0, by importing it's metadata."
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "Add a provider which supports SAML 2.0."
+msgstr ""
+
 #: src/pages/sources/ldap/LDAPSourceForm.ts
 msgid "Addition Group DN"
 msgstr "Zusatz Gruppen-DN"
@@ -563,6 +587,10 @@ msgstr "Automatische Erkennung (basierend auf Ihrem Browser)"
 msgid "Avatar image"
 msgstr "Profilbild"
 
+#: src/elements/wizard/Wizard.ts
+msgid "Back"
+msgstr ""
+
 #: src/pages/stages/password/PasswordStageForm.ts
 msgid "Backends"
 msgstr "Backends"
@@ -715,6 +743,7 @@ msgstr "Kann das Format 'unix://' haben, wenn eine Verbindung zu einem lokalen D
 #: src/elements/forms/DeleteBulkForm.ts
 #: src/elements/forms/DeleteForm.ts
 #: src/elements/forms/ModalForm.ts
+#: src/elements/wizard/Wizard.ts
 #: src/pages/groups/MemberSelectModal.ts
 #: src/pages/users/GroupSelectModal.ts
 #: src/pages/users/UserActiveForm.ts
@@ -925,6 +954,7 @@ msgid "Client type"
 msgstr "Clienttyp"
 
 #: src/elements/notifications/NotificationDrawer.ts
+#: src/elements/wizard/Wizard.ts
 #: src/pages/outposts/OutpostDeploymentModal.ts
 #: src/pages/users/RelatedUserList.ts
 #: src/pages/users/UserListPage.ts
@@ -1170,7 +1200,6 @@ msgstr "Wiederherstellungslink kopieren"
 #: src/pages/property-mappings/PropertyMappingListPage.ts
 #: src/pages/property-mappings/PropertyMappingListPage.ts
 #: src/pages/providers/ProviderListPage.ts
-#: src/pages/providers/ProviderListPage.ts
 #: src/pages/providers/RelatedApplicationButton.ts
 #: src/pages/providers/RelatedApplicationButton.ts
 #: src/pages/sources/SourcesListPage.ts
@@ -1291,6 +1320,10 @@ msgstr "Benutzer erstellen"
 msgid "Create a new application"
 msgstr "Erstelle eine neue Anwendung"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "Create a new provider."
+msgstr ""
+
 #: src/pages/users/ServiceAccountForm.ts
 msgid "Create group"
 msgstr "Gruppe erstellen"
@@ -1309,7 +1342,6 @@ msgstr "Benutzer als inaktiv anlegen"
 #: src/pages/policies/BoundPoliciesList.ts
 #: src/pages/policies/PolicyListPage.ts
 #: src/pages/property-mappings/PropertyMappingListPage.ts
-#: src/pages/providers/ProviderListPage.ts
 #: src/pages/sources/SourcesListPage.ts
 #: src/pages/stages/StageListPage.ts
 msgid "Create {0}"
@@ -2031,6 +2063,10 @@ msgstr "Felder"
 msgid "Fields a user can identify themselves with. If no fields are selected, the user will only be able to use sources."
 msgstr "Felder, mit denen sich ein Benutzer identifizieren kann. Wenn keine Felder ausgewählt sind, kann der Benutzer nur Quellen verwenden."
 
+#: src/elements/wizard/Wizard.ts
+msgid "Finish"
+msgstr ""
+
 #: src/pages/flows/FlowImportForm.ts
 msgid "Flow"
 msgstr "Ablauf"
@@ -2138,6 +2174,8 @@ msgid "Forgot username or password?"
 msgstr "Anmeldename oder Passwort vergessen?"
 
 #: src/elements/forms/ModalForm.ts
+#: src/elements/wizard/FormWizardStep.ts
+#: src/elements/wizard/FormWizardStep.ts
 msgid "Form didn't return a promise for submitting"
 msgstr "Das Formular hat kein Wert zum Absenden zurückgegeben"
 
@@ -2598,6 +2636,7 @@ msgid "Kubeconfig"
 msgstr "Kubeconfig"
 
 #: src/pages/outposts/OutpostListPage.ts
+#: src/pages/providers/ProviderWizard.ts
 msgid "LDAP"
 msgstr "LDAP"
 
@@ -2617,6 +2656,10 @@ msgstr "LDAP DN, unter dem Bind-Requests und Suchanfragen gestellt werden könne
 msgid "LDAP Sync status"
 msgstr "LDAP-Synchronisierungsstatus"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "LDAP details"
+msgstr ""
+
 #: src/pages/stages/prompt/PromptForm.ts
 #: src/pages/stages/prompt/PromptListPage.ts
 msgid "Label"
@@ -3090,6 +3133,10 @@ msgstr "Ergebnis verneinen"
 msgid "Negates the outcome of the binding. Messages are unaffected."
 msgstr "Negiert das Ergebnis der Bindung. Nachrichten sind nicht betroffen."
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "New provider"
+msgstr ""
+
 #: src/pages/events/EventInfo.ts
 msgid "New version available!"
 msgstr "Neue Version verfügbar!"
@@ -3098,6 +3145,10 @@ msgstr "Neue Version verfügbar!"
 msgid "Newly created users are added to this group, if a group is selected."
 msgstr "Neu erstellte Benutzer werden dieser Gruppe hinzugefügt, wenn eine Gruppe ausgewählt ist."
 
+#: src/elements/wizard/Wizard.ts
+msgid "Next"
+msgstr ""
+
 #: src/flows/FlowInspector.ts
 msgid "Next stage"
 msgstr "Nächste Phase"
@@ -3159,6 +3210,8 @@ msgid "No additional setup is required."
 msgstr "Keine weitere Einrichtung benötigt."
 
 #: src/elements/forms/ModalForm.ts
+#: src/elements/wizard/FormWizardStep.ts
+#: src/elements/wizard/FormWizardStep.ts
 msgid "No form found"
 msgstr "Kein Formular gefunden"
 
@@ -3301,6 +3354,14 @@ msgstr "Nummer, von der die SMS gesendet wird"
 msgid "OAuth Refresh Codes"
 msgstr "OAuth-Aktualisierungscodes"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "OAuth details"
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "OAuth/OIDC"
+msgstr ""
+
 #: src/pages/admin-overview/cards/SystemStatusCard.ts
 msgid "OK"
 msgstr "OK"
@@ -3756,11 +3817,16 @@ msgstr "Anbieter"
 
 #: src/pages/outposts/OutpostForm.ts
 #: src/pages/outposts/OutpostListPage.ts
+#: src/pages/providers/ProviderWizard.ts
 #: src/pages/providers/proxy/ProxyProviderForm.ts
 #: src/pages/providers/proxy/ProxyProviderViewPage.ts
 msgid "Proxy"
 msgstr "Proxy"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "Proxy details"
+msgstr ""
+
 #: src/pages/providers/oauth2/OAuth2ProviderForm.ts
 msgid "Public"
 msgstr "Öffentlich"
@@ -4014,6 +4080,14 @@ msgstr "Widerrufen?"
 msgid "Run sync again"
 msgstr "Synchronisation erneut ausführen"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "SAML"
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "SAML (metadata import)"
+msgstr ""
+
 #: src/pages/property-mappings/PropertyMappingSAMLForm.ts
 msgid "SAML Attribute Name"
 msgstr "SAML-Attributsname"
@@ -4022,6 +4096,14 @@ msgstr "SAML-Attributsname"
 msgid "SAML Metadata"
 msgstr "SAML-Metadaten"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "SAML details"
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "SAML details (import from metadata)"
+msgstr ""
+
 #: src/pages/providers/saml/SAMLProviderForm.ts
 #: src/pages/sources/saml/SAMLSourceForm.ts
 msgid "SHA1"
@@ -4189,6 +4271,10 @@ msgstr "Wählen Sie eine der folgenden Quellen aus, um sich anzumelden."
 msgid "Select sources should be shown for users to authenticate with. This only affects web-based sources, not LDAP."
 msgstr "Es sollten ausgewählte Quellen angezeigt werden, mit denen sich Benutzer authentifizieren können. Dies betrifft nur webbasierte Quellen, nicht LDAP."
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "Select type"
+msgstr ""
+
 #: src/pages/groups/MemberSelectModal.ts
 msgid "Select users to add"
 msgstr "Wählen Sie die hinzuzufügenden Benutzer aus"

web/src/locales/en.po

@@ -216,6 +216,34 @@ msgstr "Active"
 msgid "Add"
 msgstr "Add"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid ""
+"Add a provider which does not support any other method. Requests will be routed\n"
+"through the authentik proxy, which authenticates all requests."
+msgstr ""
+"Add a provider which does not support any other method. Requests will be routed\n"
+"through the authentik proxy, which authenticates all requests."
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "Add a provider which support LDAP."
+msgstr "Add a provider which support LDAP."
+
+#: src/pages/providers/ProviderWizard.ts
+msgid ""
+"Add a provider which supports OAuth, OIDC or \"Login with GitHub\n"
+"Enterprise\"."
+msgstr ""
+"Add a provider which supports OAuth, OIDC or \"Login with GitHub\n"
+"Enterprise\"."
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "Add a provider which supports SAML 2.0, by importing it's metadata."
+msgstr "Add a provider which supports SAML 2.0, by importing it's metadata."
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "Add a provider which supports SAML 2.0."
+msgstr "Add a provider which supports SAML 2.0."
+
 #: src/pages/sources/ldap/LDAPSourceForm.ts
 msgid "Addition Group DN"
 msgstr "Addition Group DN"
@@ -552,6 +580,10 @@ msgstr "Auto-detect (based on your browser)"
 msgid "Avatar image"
 msgstr "Avatar image"
 
+#: src/elements/wizard/Wizard.ts
+msgid "Back"
+msgstr "Back"
+
 #: src/pages/stages/password/PasswordStageForm.ts
 msgid "Backends"
 msgstr "Backends"
@@ -709,6 +741,7 @@ msgstr "Can be in the format of 'unix://' when connecting to a local docker daem
 #: src/elements/forms/DeleteBulkForm.ts
 #: src/elements/forms/DeleteForm.ts
 #: src/elements/forms/ModalForm.ts
+#: src/elements/wizard/Wizard.ts
 #: src/pages/groups/MemberSelectModal.ts
 #: src/pages/users/GroupSelectModal.ts
 #: src/pages/users/UserActiveForm.ts
@@ -921,6 +954,7 @@ msgid "Client type"
 msgstr "Client type"
 
 #: src/elements/notifications/NotificationDrawer.ts
+#: src/elements/wizard/Wizard.ts
 #: src/pages/outposts/OutpostDeploymentModal.ts
 #: src/pages/users/RelatedUserList.ts
 #: src/pages/users/UserListPage.ts
@@ -1174,7 +1208,6 @@ msgstr "Copy recovery link"
 #: src/pages/property-mappings/PropertyMappingListPage.ts
 #: src/pages/property-mappings/PropertyMappingListPage.ts
 #: src/pages/providers/ProviderListPage.ts
-#: src/pages/providers/ProviderListPage.ts
 #: src/pages/providers/RelatedApplicationButton.ts
 #: src/pages/providers/RelatedApplicationButton.ts
 #: src/pages/sources/SourcesListPage.ts
@@ -1295,6 +1328,10 @@ msgstr "Create User"
 msgid "Create a new application"
 msgstr "Create a new application"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "Create a new provider."
+msgstr "Create a new provider."
+
 #: src/pages/users/ServiceAccountForm.ts
 msgid "Create group"
 msgstr "Create group"
@@ -1313,7 +1350,6 @@ msgstr "Create users as inactive"
 #: src/pages/policies/BoundPoliciesList.ts
 #: src/pages/policies/PolicyListPage.ts
 #: src/pages/property-mappings/PropertyMappingListPage.ts
-#: src/pages/providers/ProviderListPage.ts
 #: src/pages/sources/SourcesListPage.ts
 #: src/pages/stages/StageListPage.ts
 msgid "Create {0}"
@@ -2061,6 +2097,10 @@ msgstr "Fields"
 msgid "Fields a user can identify themselves with. If no fields are selected, the user will only be able to use sources."
 msgstr "Fields a user can identify themselves with. If no fields are selected, the user will only be able to use sources."
 
+#: src/elements/wizard/Wizard.ts
+msgid "Finish"
+msgstr "Finish"
+
 #: src/pages/flows/FlowImportForm.ts
 msgid "Flow"
 msgstr "Flow"
@@ -2168,6 +2208,8 @@ msgid "Forgot username or password?"
 msgstr "Forgot username or password?"
 
 #: src/elements/forms/ModalForm.ts
+#: src/elements/wizard/FormWizardStep.ts
+#: src/elements/wizard/FormWizardStep.ts
 msgid "Form didn't return a promise for submitting"
 msgstr "Form didn't return a promise for submitting"
 
@@ -2641,6 +2683,7 @@ msgid "Kubeconfig"
 msgstr "Kubeconfig"
 
 #: src/pages/outposts/OutpostListPage.ts
+#: src/pages/providers/ProviderWizard.ts
 msgid "LDAP"
 msgstr "LDAP"
 
@@ -2660,6 +2703,10 @@ msgstr "LDAP DN under which bind requests and search requests can be made."
 msgid "LDAP Sync status"
 msgstr "LDAP Sync status"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "LDAP details"
+msgstr "LDAP details"
+
 #: src/pages/stages/prompt/PromptForm.ts
 #: src/pages/stages/prompt/PromptListPage.ts
 msgid "Label"
@@ -3135,6 +3182,10 @@ msgstr "Negate result"
 msgid "Negates the outcome of the binding. Messages are unaffected."
 msgstr "Negates the outcome of the binding. Messages are unaffected."
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "New provider"
+msgstr "New provider"
+
 #: src/pages/events/EventInfo.ts
 msgid "New version available!"
 msgstr "New version available!"
@@ -3143,6 +3194,10 @@ msgstr "New version available!"
 msgid "Newly created users are added to this group, if a group is selected."
 msgstr "Newly created users are added to this group, if a group is selected."
 
+#: src/elements/wizard/Wizard.ts
+msgid "Next"
+msgstr "Next"
+
 #: src/flows/FlowInspector.ts
 msgid "Next stage"
 msgstr "Next stage"
@@ -3204,6 +3259,8 @@ msgid "No additional setup is required."
 msgstr "No additional setup is required."
 
 #: src/elements/forms/ModalForm.ts
+#: src/elements/wizard/FormWizardStep.ts
+#: src/elements/wizard/FormWizardStep.ts
 msgid "No form found"
 msgstr "No form found"
 
@@ -3351,6 +3408,14 @@ msgstr "Number the SMS will be sent from."
 msgid "OAuth Refresh Codes"
 msgstr "OAuth Refresh Codes"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "OAuth details"
+msgstr "OAuth details"
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "OAuth/OIDC"
+msgstr "OAuth/OIDC"
+
 #: src/pages/admin-overview/cards/SystemStatusCard.ts
 msgid "OK"
 msgstr "OK"
@@ -3816,11 +3881,16 @@ msgstr "Providers"
 
 #: src/pages/outposts/OutpostForm.ts
 #: src/pages/outposts/OutpostListPage.ts
+#: src/pages/providers/ProviderWizard.ts
 #: src/pages/providers/proxy/ProxyProviderForm.ts
 #: src/pages/providers/proxy/ProxyProviderViewPage.ts
 msgid "Proxy"
 msgstr "Proxy"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "Proxy details"
+msgstr "Proxy details"
+
 #: src/pages/providers/oauth2/OAuth2ProviderForm.ts
 msgid "Public"
 msgstr "Public"
@@ -4084,6 +4154,14 @@ msgstr "Revoked?"
 msgid "Run sync again"
 msgstr "Run sync again"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "SAML"
+msgstr "SAML"
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "SAML (metadata import)"
+msgstr "SAML (metadata import)"
+
 #: src/pages/property-mappings/PropertyMappingSAMLForm.ts
 msgid "SAML Attribute Name"
 msgstr "SAML Attribute Name"
@@ -4092,6 +4170,14 @@ msgstr "SAML Attribute Name"
 msgid "SAML Metadata"
 msgstr "SAML Metadata"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "SAML details"
+msgstr "SAML details"
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "SAML details (import from metadata)"
+msgstr "SAML details (import from metadata)"
+
 #: src/pages/providers/saml/SAMLProviderForm.ts
 #: src/pages/sources/saml/SAMLSourceForm.ts
 msgid "SHA1"
@@ -4261,6 +4347,10 @@ msgstr "Select one of the sources below to login."
 msgid "Select sources should be shown for users to authenticate with. This only affects web-based sources, not LDAP."
 msgstr "Select sources should be shown for users to authenticate with. This only affects web-based sources, not LDAP."
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "Select type"
+msgstr "Select type"
+
 #: src/pages/groups/MemberSelectModal.ts
 msgid "Select users to add"
 msgstr "Select users to add"

web/src/locales/es.po

@@ -218,6 +218,30 @@ msgstr "Activo"
 msgid "Add"
 msgstr "Añadir"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid ""
+"Add a provider which does not support any other method. Requests will be routed\n"
+"through the authentik proxy, which authenticates all requests."
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "Add a provider which support LDAP."
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid ""
+"Add a provider which supports OAuth, OIDC or \"Login with GitHub\n"
+"Enterprise\"."
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "Add a provider which supports SAML 2.0, by importing it's metadata."
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "Add a provider which supports SAML 2.0."
+msgstr ""
+
 #: src/pages/sources/ldap/LDAPSourceForm.ts
 msgid "Addition Group DN"
 msgstr "DN de grupo de adición"
@@ -550,6 +574,10 @@ msgstr "Detección automática (según su navegador)"
 msgid "Avatar image"
 msgstr "Imagen de avatar"
 
+#: src/elements/wizard/Wizard.ts
+msgid "Back"
+msgstr ""
+
 #: src/pages/stages/password/PasswordStageForm.ts
 msgid "Backends"
 msgstr "Backends"
@@ -705,6 +733,7 @@ msgstr "Puede tener el formato de 'unix: //' cuando se conecta a un daemon de do
 #: src/elements/forms/DeleteBulkForm.ts
 #: src/elements/forms/DeleteForm.ts
 #: src/elements/forms/ModalForm.ts
+#: src/elements/wizard/Wizard.ts
 #: src/pages/groups/MemberSelectModal.ts
 #: src/pages/users/GroupSelectModal.ts
 #: src/pages/users/UserActiveForm.ts
@@ -915,6 +944,7 @@ msgid "Client type"
 msgstr "Tipo de cliente"
 
 #: src/elements/notifications/NotificationDrawer.ts
+#: src/elements/wizard/Wizard.ts
 #: src/pages/outposts/OutpostDeploymentModal.ts
 #: src/pages/users/RelatedUserList.ts
 #: src/pages/users/UserListPage.ts
@@ -1161,7 +1191,6 @@ msgstr "Enlace de recuperación de copia"
 #: src/pages/property-mappings/PropertyMappingListPage.ts
 #: src/pages/property-mappings/PropertyMappingListPage.ts
 #: src/pages/providers/ProviderListPage.ts
-#: src/pages/providers/ProviderListPage.ts
 #: src/pages/providers/RelatedApplicationButton.ts
 #: src/pages/providers/RelatedApplicationButton.ts
 #: src/pages/sources/SourcesListPage.ts
@@ -1282,6 +1311,10 @@ msgstr "Crear usuario"
 msgid "Create a new application"
 msgstr "Crea una nueva aplicación"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "Create a new provider."
+msgstr ""
+
 #: src/pages/users/ServiceAccountForm.ts
 msgid "Create group"
 msgstr "Crear grupo"
@@ -1300,7 +1333,6 @@ msgstr "Crear usuarios como inactivos"
 #: src/pages/policies/BoundPoliciesList.ts
 #: src/pages/policies/PolicyListPage.ts
 #: src/pages/property-mappings/PropertyMappingListPage.ts
-#: src/pages/providers/ProviderListPage.ts
 #: src/pages/sources/SourcesListPage.ts
 #: src/pages/stages/StageListPage.ts
 msgid "Create {0}"
@@ -2022,6 +2054,10 @@ msgstr "Campos"
 msgid "Fields a user can identify themselves with. If no fields are selected, the user will only be able to use sources."
 msgstr "Campos con los que un usuario puede identificarse. Si no se seleccionan campos, el usuario solo podrá usar fuentes."
 
+#: src/elements/wizard/Wizard.ts
+msgid "Finish"
+msgstr ""
+
 #: src/pages/flows/FlowImportForm.ts
 msgid "Flow"
 msgstr "Flujo"
@@ -2129,6 +2165,8 @@ msgid "Forgot username or password?"
 msgstr "¿Olvidó su nombre de usuario"
 
 #: src/elements/forms/ModalForm.ts
+#: src/elements/wizard/FormWizardStep.ts
+#: src/elements/wizard/FormWizardStep.ts
 msgid "Form didn't return a promise for submitting"
 msgstr "El formulario no devolvió una promesa para enviarla"
 
@@ -2591,6 +2629,7 @@ msgid "Kubeconfig"
 msgstr "Configuración de Kube"
 
 #: src/pages/outposts/OutpostListPage.ts
+#: src/pages/providers/ProviderWizard.ts
 msgid "LDAP"
 msgstr "LDAP"
 
@@ -2610,6 +2649,10 @@ msgstr "DN de LDAP con el que se pueden realizar solicitudes de enlace y solicit
 msgid "LDAP Sync status"
 msgstr "Estado de sincronización de LDAP"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "LDAP details"
+msgstr ""
+
 #: src/pages/stages/prompt/PromptForm.ts
 #: src/pages/stages/prompt/PromptListPage.ts
 msgid "Label"
@@ -3083,6 +3126,10 @@ msgstr "Negar el resultado"
 msgid "Negates the outcome of the binding. Messages are unaffected."
 msgstr "Niega el resultado de la unión. Los mensajes no se ven afectados."
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "New provider"
+msgstr ""
+
 #: src/pages/events/EventInfo.ts
 msgid "New version available!"
 msgstr "¡Nueva versión disponible!"
@@ -3091,6 +3138,10 @@ msgstr "¡Nueva versión disponible!"
 msgid "Newly created users are added to this group, if a group is selected."
 msgstr "Los usuarios recién creados se agregan a este grupo, si se selecciona un grupo."
 
+#: src/elements/wizard/Wizard.ts
+msgid "Next"
+msgstr ""
+
 #: src/flows/FlowInspector.ts
 msgid "Next stage"
 msgstr "Próxima etapa"
@@ -3152,6 +3203,8 @@ msgid "No additional setup is required."
 msgstr "No se requiere ninguna configuración adicional."
 
 #: src/elements/forms/ModalForm.ts
+#: src/elements/wizard/FormWizardStep.ts
+#: src/elements/wizard/FormWizardStep.ts
 msgid "No form found"
 msgstr "No se encontró ningún formulario"
 
@@ -3294,6 +3347,14 @@ msgstr "Número desde el que se enviará el SMS."
 msgid "OAuth Refresh Codes"
 msgstr "Códigos de actualización de OAuth"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "OAuth details"
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "OAuth/OIDC"
+msgstr ""
+
 #: src/pages/admin-overview/cards/SystemStatusCard.ts
 msgid "OK"
 msgstr "DE ACUERDO"
@@ -3749,11 +3810,16 @@ msgstr "Proveedores"
 
 #: src/pages/outposts/OutpostForm.ts
 #: src/pages/outposts/OutpostListPage.ts
+#: src/pages/providers/ProviderWizard.ts
 #: src/pages/providers/proxy/ProxyProviderForm.ts
 #: src/pages/providers/proxy/ProxyProviderViewPage.ts
 msgid "Proxy"
 msgstr "Proxy"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "Proxy details"
+msgstr ""
+
 #: src/pages/providers/oauth2/OAuth2ProviderForm.ts
 msgid "Public"
 msgstr "Público"
@@ -4007,6 +4073,14 @@ msgstr "¿Revocado?"
 msgid "Run sync again"
 msgstr "Vuelve a ejecutar la sincronización"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "SAML"
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "SAML (metadata import)"
+msgstr ""
+
 #: src/pages/property-mappings/PropertyMappingSAMLForm.ts
 msgid "SAML Attribute Name"
 msgstr "Nombre de atributo SAML"
@@ -4015,6 +4089,14 @@ msgstr "Nombre de atributo SAML"
 msgid "SAML Metadata"
 msgstr "Metadatos SAML"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "SAML details"
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "SAML details (import from metadata)"
+msgstr ""
+
 #: src/pages/providers/saml/SAMLProviderForm.ts
 #: src/pages/sources/saml/SAMLSourceForm.ts
 msgid "SHA1"
@@ -4182,6 +4264,10 @@ msgstr "Seleccione una de las fuentes a continuación para iniciar sesión."
 msgid "Select sources should be shown for users to authenticate with. This only affects web-based sources, not LDAP."
 msgstr "Se deben mostrar las fuentes seleccionadas para que los usuarios se autentiquen con ellas. Esto solo afecta a las fuentes basadas en web, no a LDAP."
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "Select type"
+msgstr ""
+
 #: src/pages/groups/MemberSelectModal.ts
 msgid "Select users to add"
 msgstr "Seleccione los usuarios que desea añadir"

web/src/locales/fr_FR.po

@@ -221,6 +221,30 @@ msgstr "Actif"
 msgid "Add"
 msgstr "Ajouter"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid ""
+"Add a provider which does not support any other method. Requests will be routed\n"
+"through the authentik proxy, which authenticates all requests."
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "Add a provider which support LDAP."
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid ""
+"Add a provider which supports OAuth, OIDC or \"Login with GitHub\n"
+"Enterprise\"."
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "Add a provider which supports SAML 2.0, by importing it's metadata."
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "Add a provider which supports SAML 2.0."
+msgstr ""
+
 #: src/pages/sources/ldap/LDAPSourceForm.ts
 msgid "Addition Group DN"
 msgstr "Préfixe DN groupes"
@@ -556,6 +580,10 @@ msgstr ""
 msgid "Avatar image"
 msgstr "Image d'avatar"
 
+#: src/elements/wizard/Wizard.ts
+msgid "Back"
+msgstr ""
+
 #: src/pages/stages/password/PasswordStageForm.ts
 msgid "Backends"
 msgstr "Backends"
@@ -712,6 +740,7 @@ msgstr ""
 #: src/elements/forms/DeleteBulkForm.ts
 #: src/elements/forms/DeleteForm.ts
 #: src/elements/forms/ModalForm.ts
+#: src/elements/wizard/Wizard.ts
 #: src/pages/groups/MemberSelectModal.ts
 #: src/pages/users/GroupSelectModal.ts
 #: src/pages/users/UserActiveForm.ts
@@ -923,6 +952,7 @@ msgid "Client type"
 msgstr "Type du client"
 
 #: src/elements/notifications/NotificationDrawer.ts
+#: src/elements/wizard/Wizard.ts
 #: src/pages/outposts/OutpostDeploymentModal.ts
 #: src/pages/users/RelatedUserList.ts
 #: src/pages/users/UserListPage.ts
@@ -1173,7 +1203,6 @@ msgstr "Copier le lien de récupération"
 #: src/pages/property-mappings/PropertyMappingListPage.ts
 #: src/pages/property-mappings/PropertyMappingListPage.ts
 #: src/pages/providers/ProviderListPage.ts
-#: src/pages/providers/ProviderListPage.ts
 #: src/pages/providers/RelatedApplicationButton.ts
 #: src/pages/providers/RelatedApplicationButton.ts
 #: src/pages/sources/SourcesListPage.ts
@@ -1294,6 +1323,10 @@ msgstr "Créer un utilisateu"
 msgid "Create a new application"
 msgstr ""
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "Create a new provider."
+msgstr ""
+
 #: src/pages/users/ServiceAccountForm.ts
 msgid "Create group"
 msgstr "Créer un groupe"
@@ -1312,7 +1345,6 @@ msgstr "Créer des utilisateurs inactifs"
 #: src/pages/policies/BoundPoliciesList.ts
 #: src/pages/policies/PolicyListPage.ts
 #: src/pages/property-mappings/PropertyMappingListPage.ts
-#: src/pages/providers/ProviderListPage.ts
 #: src/pages/sources/SourcesListPage.ts
 #: src/pages/stages/StageListPage.ts
 msgid "Create {0}"
@@ -2047,6 +2079,10 @@ msgstr "Champs"
 msgid "Fields a user can identify themselves with. If no fields are selected, the user will only be able to use sources."
 msgstr "Champs avec lesquels un utilisateur peut s'identifier. Si aucun champ n'est sélectionné, l'utilisateur ne pourra utiliser que des sources."
 
+#: src/elements/wizard/Wizard.ts
+msgid "Finish"
+msgstr ""
+
 #: src/pages/flows/FlowImportForm.ts
 msgid "Flow"
 msgstr "Flux"
@@ -2154,6 +2190,8 @@ msgid "Forgot username or password?"
 msgstr "Mot de passe ou nom d'utilisateur oublié ?"
 
 #: src/elements/forms/ModalForm.ts
+#: src/elements/wizard/FormWizardStep.ts
+#: src/elements/wizard/FormWizardStep.ts
 msgid "Form didn't return a promise for submitting"
 msgstr "Le formulaire n'a pas retourné de promesse de soumission"
 
@@ -2622,6 +2660,7 @@ msgid "Kubeconfig"
 msgstr "Kubeconfig"
 
 #: src/pages/outposts/OutpostListPage.ts
+#: src/pages/providers/ProviderWizard.ts
 msgid "LDAP"
 msgstr ""
 
@@ -2641,6 +2680,10 @@ msgstr "DN LDAP avec lequel les connexions et recherches sont effectuées."
 msgid "LDAP Sync status"
 msgstr "Statut de synchro LDAP"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "LDAP details"
+msgstr ""
+
 #: src/pages/stages/prompt/PromptForm.ts
 #: src/pages/stages/prompt/PromptListPage.ts
 msgid "Label"
@@ -3114,6 +3157,10 @@ msgstr "Inverser le résultat"
 msgid "Negates the outcome of the binding. Messages are unaffected."
 msgstr "Inverse le résultat de la liaison. Les messages ne sont pas affectés."
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "New provider"
+msgstr ""
+
 #: src/pages/events/EventInfo.ts
 msgid "New version available!"
 msgstr "Une nouvelle version est disponible !"
@@ -3122,6 +3169,10 @@ msgstr "Une nouvelle version est disponible !"
 msgid "Newly created users are added to this group, if a group is selected."
 msgstr "Les utilisateurs nouvellement créés sont ajoutés à ce groupe, si un groupe est sélectionné."
 
+#: src/elements/wizard/Wizard.ts
+msgid "Next"
+msgstr ""
+
 #: src/flows/FlowInspector.ts
 msgid "Next stage"
 msgstr "Étape suivante"
@@ -3183,6 +3234,8 @@ msgid "No additional setup is required."
 msgstr ""
 
 #: src/elements/forms/ModalForm.ts
+#: src/elements/wizard/FormWizardStep.ts
+#: src/elements/wizard/FormWizardStep.ts
 msgid "No form found"
 msgstr "Aucun formulaire trouvé"
 
@@ -3328,6 +3381,14 @@ msgstr ""
 msgid "OAuth Refresh Codes"
 msgstr "Code de rafraîchissement OAuth"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "OAuth details"
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "OAuth/OIDC"
+msgstr ""
+
 #: src/pages/admin-overview/cards/SystemStatusCard.ts
 msgid "OK"
 msgstr ""
@@ -3785,11 +3846,16 @@ msgstr "Fournisseurs"
 
 #: src/pages/outposts/OutpostForm.ts
 #: src/pages/outposts/OutpostListPage.ts
+#: src/pages/providers/ProviderWizard.ts
 #: src/pages/providers/proxy/ProxyProviderForm.ts
 #: src/pages/providers/proxy/ProxyProviderViewPage.ts
 msgid "Proxy"
 msgstr "Proxy"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "Proxy details"
+msgstr ""
+
 #: src/pages/providers/oauth2/OAuth2ProviderForm.ts
 msgid "Public"
 msgstr "Public"
@@ -4055,6 +4121,14 @@ msgstr "Révoqué ?"
 msgid "Run sync again"
 msgstr "Relancer la synchro"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "SAML"
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "SAML (metadata import)"
+msgstr ""
+
 #: src/pages/property-mappings/PropertyMappingSAMLForm.ts
 msgid "SAML Attribute Name"
 msgstr "Nom d'attribut SAML"
@@ -4063,6 +4137,14 @@ msgstr "Nom d'attribut SAML"
 msgid "SAML Metadata"
 msgstr ""
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "SAML details"
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "SAML details (import from metadata)"
+msgstr ""
+
 #: src/pages/providers/saml/SAMLProviderForm.ts
 #: src/pages/sources/saml/SAMLSourceForm.ts
 msgid "SHA1"
@@ -4231,6 +4313,10 @@ msgstr "Sélectionnez l'une des sources ci-dessous pour se connecter."
 msgid "Select sources should be shown for users to authenticate with. This only affects web-based sources, not LDAP."
 msgstr "Sélectionnez les sources à afficher aux utilisateurs pour s'authentifier. Cela affecte uniquement les sources web, pas LDAP."
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "Select type"
+msgstr ""
+
 #: src/pages/groups/MemberSelectModal.ts
 msgid "Select users to add"
 msgstr "Sélectionnez les utilisateurs à ajouter"

web/src/locales/pl.po

@@ -218,6 +218,30 @@ msgstr "Aktywny"
 msgid "Add"
 msgstr "Dodaj"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid ""
+"Add a provider which does not support any other method. Requests will be routed\n"
+"through the authentik proxy, which authenticates all requests."
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "Add a provider which support LDAP."
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid ""
+"Add a provider which supports OAuth, OIDC or \"Login with GitHub\n"
+"Enterprise\"."
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "Add a provider which supports SAML 2.0, by importing it's metadata."
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "Add a provider which supports SAML 2.0."
+msgstr ""
+
 #: src/pages/sources/ldap/LDAPSourceForm.ts
 msgid "Addition Group DN"
 msgstr "DN grupy dodawania"
@@ -550,6 +574,10 @@ msgstr "Automatycznie wykryj (na podstawie Twojej przeglądarki)"
 msgid "Avatar image"
 msgstr "Obraz awatara"
 
+#: src/elements/wizard/Wizard.ts
+msgid "Back"
+msgstr ""
+
 #: src/pages/stages/password/PasswordStageForm.ts
 msgid "Backends"
 msgstr "back-end"
@@ -702,6 +730,7 @@ msgstr "Może mieć format „unix://” podczas łączenia się z lokalnym demo
 #: src/elements/forms/DeleteBulkForm.ts
 #: src/elements/forms/DeleteForm.ts
 #: src/elements/forms/ModalForm.ts
+#: src/elements/wizard/Wizard.ts
 #: src/pages/groups/MemberSelectModal.ts
 #: src/pages/users/GroupSelectModal.ts
 #: src/pages/users/UserActiveForm.ts
@@ -912,6 +941,7 @@ msgid "Client type"
 msgstr "Client type"
 
 #: src/elements/notifications/NotificationDrawer.ts
+#: src/elements/wizard/Wizard.ts
 #: src/pages/outposts/OutpostDeploymentModal.ts
 #: src/pages/users/RelatedUserList.ts
 #: src/pages/users/UserListPage.ts
@@ -1158,7 +1188,6 @@ msgstr "Skopiuj link odzyskiwania"
 #: src/pages/property-mappings/PropertyMappingListPage.ts
 #: src/pages/property-mappings/PropertyMappingListPage.ts
 #: src/pages/providers/ProviderListPage.ts
-#: src/pages/providers/ProviderListPage.ts
 #: src/pages/providers/RelatedApplicationButton.ts
 #: src/pages/providers/RelatedApplicationButton.ts
 #: src/pages/sources/SourcesListPage.ts
@@ -1279,6 +1308,10 @@ msgstr "Utwórz użytkownika"
 msgid "Create a new application"
 msgstr "Utwórz nową aplikację"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "Create a new provider."
+msgstr ""
+
 #: src/pages/users/ServiceAccountForm.ts
 msgid "Create group"
 msgstr "Utwórz grupę"
@@ -1297,7 +1330,6 @@ msgstr "Utwórz użytkowników jako nieaktywnych"
 #: src/pages/policies/BoundPoliciesList.ts
 #: src/pages/policies/PolicyListPage.ts
 #: src/pages/property-mappings/PropertyMappingListPage.ts
-#: src/pages/providers/ProviderListPage.ts
 #: src/pages/sources/SourcesListPage.ts
 #: src/pages/stages/StageListPage.ts
 msgid "Create {0}"
@@ -2019,6 +2051,10 @@ msgstr "Pola"
 msgid "Fields a user can identify themselves with. If no fields are selected, the user will only be able to use sources."
 msgstr "Pola, z którymi użytkownik może się identyfikować. Jeśli żadne pola nie zostaną wybrane, użytkownik będzie mógł korzystać tylko ze źródeł."
 
+#: src/elements/wizard/Wizard.ts
+msgid "Finish"
+msgstr ""
+
 #: src/pages/flows/FlowImportForm.ts
 msgid "Flow"
 msgstr "Przepływ"
@@ -2126,6 +2162,8 @@ msgid "Forgot username or password?"
 msgstr "Zapomniałeś nazwy użytkownika lub hasła?"
 
 #: src/elements/forms/ModalForm.ts
+#: src/elements/wizard/FormWizardStep.ts
+#: src/elements/wizard/FormWizardStep.ts
 msgid "Form didn't return a promise for submitting"
 msgstr "Formularz nie zwrócił obietnicy do przesłania"
 
@@ -2588,6 +2626,7 @@ msgid "Kubeconfig"
 msgstr "Kubeconfig"
 
 #: src/pages/outposts/OutpostListPage.ts
+#: src/pages/providers/ProviderWizard.ts
 msgid "LDAP"
 msgstr "LDAP"
 
@@ -2607,6 +2646,10 @@ msgstr "LDAP DN, w ramach którego można tworzyć żądania powiązania i żąd
 msgid "LDAP Sync status"
 msgstr "Stan synchronizacji LDAP"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "LDAP details"
+msgstr ""
+
 #: src/pages/stages/prompt/PromptForm.ts
 #: src/pages/stages/prompt/PromptListPage.ts
 msgid "Label"
@@ -3080,6 +3123,10 @@ msgstr "Neguj wynik"
 msgid "Negates the outcome of the binding. Messages are unaffected."
 msgstr "Neguje wynik wiązania. Wiadomości pozostają nienaruszone."
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "New provider"
+msgstr ""
+
 #: src/pages/events/EventInfo.ts
 msgid "New version available!"
 msgstr "Nowa wersja dostępna!"
@@ -3088,6 +3135,10 @@ msgstr "Nowa wersja dostępna!"
 msgid "Newly created users are added to this group, if a group is selected."
 msgstr "Nowo utworzeni użytkownicy są dodawani do tej grupy, jeśli grupa jest zaznaczona."
 
+#: src/elements/wizard/Wizard.ts
+msgid "Next"
+msgstr ""
+
 #: src/flows/FlowInspector.ts
 msgid "Next stage"
 msgstr "Następny etap"
@@ -3149,6 +3200,8 @@ msgid "No additional setup is required."
 msgstr "Nie jest wymagana żadna dodatkowa konfiguracja."
 
 #: src/elements/forms/ModalForm.ts
+#: src/elements/wizard/FormWizardStep.ts
+#: src/elements/wizard/FormWizardStep.ts
 msgid "No form found"
 msgstr "Nie znaleziono formularza"
 
@@ -3291,6 +3344,14 @@ msgstr "Numer, z którego zostanie wysłana wiadomość SMS."
 msgid "OAuth Refresh Codes"
 msgstr "Kody odświeżania OAuth"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "OAuth details"
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "OAuth/OIDC"
+msgstr ""
+
 #: src/pages/admin-overview/cards/SystemStatusCard.ts
 msgid "OK"
 msgstr "OK"
@@ -3746,11 +3807,16 @@ msgstr "Dostawcy"
 
 #: src/pages/outposts/OutpostForm.ts
 #: src/pages/outposts/OutpostListPage.ts
+#: src/pages/providers/ProviderWizard.ts
 #: src/pages/providers/proxy/ProxyProviderForm.ts
 #: src/pages/providers/proxy/ProxyProviderViewPage.ts
 msgid "Proxy"
 msgstr "Proxy"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "Proxy details"
+msgstr ""
+
 #: src/pages/providers/oauth2/OAuth2ProviderForm.ts
 msgid "Public"
 msgstr "Publiczny"
@@ -4004,6 +4070,14 @@ msgstr "Unieważniono?"
 msgid "Run sync again"
 msgstr "Uruchom ponownie synchronizację"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "SAML"
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "SAML (metadata import)"
+msgstr ""
+
 #: src/pages/property-mappings/PropertyMappingSAMLForm.ts
 msgid "SAML Attribute Name"
 msgstr "Nazwa atrybutu SAML"
@@ -4012,6 +4086,14 @@ msgstr "Nazwa atrybutu SAML"
 msgid "SAML Metadata"
 msgstr "Metadane SAML"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "SAML details"
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "SAML details (import from metadata)"
+msgstr ""
+
 #: src/pages/providers/saml/SAMLProviderForm.ts
 #: src/pages/sources/saml/SAMLSourceForm.ts
 msgid "SHA1"
@@ -4179,6 +4261,10 @@ msgstr "Wybierz jedno z poniższych źródeł, aby się zalogować."
 msgid "Select sources should be shown for users to authenticate with. This only affects web-based sources, not LDAP."
 msgstr "Powinny być wyświetlane wybrane źródła, za pomocą których użytkownicy mogą się uwierzytelniać. Dotyczy to tylko źródeł internetowych, a nie LDAP."
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "Select type"
+msgstr ""
+
 #: src/pages/groups/MemberSelectModal.ts
 msgid "Select users to add"
 msgstr "Wybierz użytkowników do dodania"

web/src/locales/pseudo-LOCALE.po

@@ -216,6 +216,30 @@ msgstr ""
 msgid "Add"
 msgstr ""
 
+#: src/pages/providers/ProviderWizard.ts
+msgid ""
+"Add a provider which does not support any other method. Requests will be routed\n"
+"through the authentik proxy, which authenticates all requests."
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "Add a provider which support LDAP."
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid ""
+"Add a provider which supports OAuth, OIDC or \"Login with GitHub\n"
+"Enterprise\"."
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "Add a provider which supports SAML 2.0, by importing it's metadata."
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "Add a provider which supports SAML 2.0."
+msgstr ""
+
 #: src/pages/sources/ldap/LDAPSourceForm.ts
 msgid "Addition Group DN"
 msgstr ""
@@ -548,6 +572,10 @@ msgstr ""
 msgid "Avatar image"
 msgstr ""
 
+#: src/elements/wizard/Wizard.ts
+msgid "Back"
+msgstr ""
+
 #: src/pages/stages/password/PasswordStageForm.ts
 msgid "Backends"
 msgstr ""
@@ -705,6 +733,7 @@ msgstr ""
 #: src/elements/forms/DeleteBulkForm.ts
 #: src/elements/forms/DeleteForm.ts
 #: src/elements/forms/ModalForm.ts
+#: src/elements/wizard/Wizard.ts
 #: src/pages/groups/MemberSelectModal.ts
 #: src/pages/users/GroupSelectModal.ts
 #: src/pages/users/UserActiveForm.ts
@@ -915,6 +944,7 @@ msgid "Client type"
 msgstr ""
 
 #: src/elements/notifications/NotificationDrawer.ts
+#: src/elements/wizard/Wizard.ts
 #: src/pages/outposts/OutpostDeploymentModal.ts
 #: src/pages/users/RelatedUserList.ts
 #: src/pages/users/UserListPage.ts
@@ -1168,7 +1198,6 @@ msgstr ""
 #: src/pages/property-mappings/PropertyMappingListPage.ts
 #: src/pages/property-mappings/PropertyMappingListPage.ts
 #: src/pages/providers/ProviderListPage.ts
-#: src/pages/providers/ProviderListPage.ts
 #: src/pages/providers/RelatedApplicationButton.ts
 #: src/pages/providers/RelatedApplicationButton.ts
 #: src/pages/sources/SourcesListPage.ts
@@ -1289,6 +1318,10 @@ msgstr ""
 msgid "Create a new application"
 msgstr ""
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "Create a new provider."
+msgstr ""
+
 #: src/pages/users/ServiceAccountForm.ts
 msgid "Create group"
 msgstr ""
@@ -1307,7 +1340,6 @@ msgstr ""
 #: src/pages/policies/BoundPoliciesList.ts
 #: src/pages/policies/PolicyListPage.ts
 #: src/pages/property-mappings/PropertyMappingListPage.ts
-#: src/pages/providers/ProviderListPage.ts
 #: src/pages/sources/SourcesListPage.ts
 #: src/pages/stages/StageListPage.ts
 msgid "Create {0}"
@@ -2053,6 +2085,10 @@ msgstr ""
 msgid "Fields a user can identify themselves with. If no fields are selected, the user will only be able to use sources."
 msgstr ""
 
+#: src/elements/wizard/Wizard.ts
+msgid "Finish"
+msgstr ""
+
 #: src/pages/flows/FlowImportForm.ts
 msgid "Flow"
 msgstr ""
@@ -2160,6 +2196,8 @@ msgid "Forgot username or password?"
 msgstr ""
 
 #: src/elements/forms/ModalForm.ts
+#: src/elements/wizard/FormWizardStep.ts
+#: src/elements/wizard/FormWizardStep.ts
 msgid "Form didn't return a promise for submitting"
 msgstr ""
 
@@ -2631,6 +2669,7 @@ msgid "Kubeconfig"
 msgstr ""
 
 #: src/pages/outposts/OutpostListPage.ts
+#: src/pages/providers/ProviderWizard.ts
 msgid "LDAP"
 msgstr ""
 
@@ -2650,6 +2689,10 @@ msgstr ""
 msgid "LDAP Sync status"
 msgstr ""
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "LDAP details"
+msgstr ""
+
 #: src/pages/stages/prompt/PromptForm.ts
 #: src/pages/stages/prompt/PromptListPage.ts
 msgid "Label"
@@ -3125,6 +3168,10 @@ msgstr ""
 msgid "Negates the outcome of the binding. Messages are unaffected."
 msgstr ""
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "New provider"
+msgstr ""
+
 #: src/pages/events/EventInfo.ts
 msgid "New version available!"
 msgstr ""
@@ -3133,6 +3180,10 @@ msgstr ""
 msgid "Newly created users are added to this group, if a group is selected."
 msgstr ""
 
+#: src/elements/wizard/Wizard.ts
+msgid "Next"
+msgstr ""
+
 #: src/flows/FlowInspector.ts
 msgid "Next stage"
 msgstr ""
@@ -3194,6 +3245,8 @@ msgid "No additional setup is required."
 msgstr ""
 
 #: src/elements/forms/ModalForm.ts
+#: src/elements/wizard/FormWizardStep.ts
+#: src/elements/wizard/FormWizardStep.ts
 msgid "No form found"
 msgstr ""
 
@@ -3341,6 +3394,14 @@ msgstr ""
 msgid "OAuth Refresh Codes"
 msgstr ""
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "OAuth details"
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "OAuth/OIDC"
+msgstr ""
+
 #: src/pages/admin-overview/cards/SystemStatusCard.ts
 msgid "OK"
 msgstr ""
@@ -3806,11 +3867,16 @@ msgstr ""
 
 #: src/pages/outposts/OutpostForm.ts
 #: src/pages/outposts/OutpostListPage.ts
+#: src/pages/providers/ProviderWizard.ts
 #: src/pages/providers/proxy/ProxyProviderForm.ts
 #: src/pages/providers/proxy/ProxyProviderViewPage.ts
 msgid "Proxy"
 msgstr ""
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "Proxy details"
+msgstr ""
+
 #: src/pages/providers/oauth2/OAuth2ProviderForm.ts
 msgid "Public"
 msgstr ""
@@ -4074,6 +4140,14 @@ msgstr ""
 msgid "Run sync again"
 msgstr ""
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "SAML"
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "SAML (metadata import)"
+msgstr ""
+
 #: src/pages/property-mappings/PropertyMappingSAMLForm.ts
 msgid "SAML Attribute Name"
 msgstr ""
@@ -4082,6 +4156,14 @@ msgstr ""
 msgid "SAML Metadata"
 msgstr ""
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "SAML details"
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "SAML details (import from metadata)"
+msgstr ""
+
 #: src/pages/providers/saml/SAMLProviderForm.ts
 #: src/pages/sources/saml/SAMLSourceForm.ts
 msgid "SHA1"
@@ -4251,6 +4333,10 @@ msgstr ""
 msgid "Select sources should be shown for users to authenticate with. This only affects web-based sources, not LDAP."
 msgstr ""
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "Select type"
+msgstr ""
+
 #: src/pages/groups/MemberSelectModal.ts
 msgid "Select users to add"
 msgstr ""

web/src/locales/tr.po

@@ -218,6 +218,30 @@ msgstr "Etkin"
 msgid "Add"
 msgstr "Ekle"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid ""
+"Add a provider which does not support any other method. Requests will be routed\n"
+"through the authentik proxy, which authenticates all requests."
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "Add a provider which support LDAP."
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid ""
+"Add a provider which supports OAuth, OIDC or \"Login with GitHub\n"
+"Enterprise\"."
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "Add a provider which supports SAML 2.0, by importing it's metadata."
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "Add a provider which supports SAML 2.0."
+msgstr ""
+
 #: src/pages/sources/ldap/LDAPSourceForm.ts
 msgid "Addition Group DN"
 msgstr "Toplama Grubu DN"
@@ -550,6 +574,10 @@ msgstr "Otomatik algıla (tarayıcınıza göre)"
 msgid "Avatar image"
 msgstr "Avatar resmi"
 
+#: src/elements/wizard/Wizard.ts
+msgid "Back"
+msgstr ""
+
 #: src/pages/stages/password/PasswordStageForm.ts
 msgid "Backends"
 msgstr "Arka uçlar"
@@ -705,6 +733,7 @@ msgstr "SSH üzerinden bağlanmak için 'ssh: //' veya uzak bir sisteme bağlan
 #: src/elements/forms/DeleteBulkForm.ts
 #: src/elements/forms/DeleteForm.ts
 #: src/elements/forms/ModalForm.ts
+#: src/elements/wizard/Wizard.ts
 #: src/pages/groups/MemberSelectModal.ts
 #: src/pages/users/GroupSelectModal.ts
 #: src/pages/users/UserActiveForm.ts
@@ -915,6 +944,7 @@ msgid "Client type"
 msgstr "İstemci türü"
 
 #: src/elements/notifications/NotificationDrawer.ts
+#: src/elements/wizard/Wizard.ts
 #: src/pages/outposts/OutpostDeploymentModal.ts
 #: src/pages/users/RelatedUserList.ts
 #: src/pages/users/UserListPage.ts
@@ -1161,7 +1191,6 @@ msgstr "Kurtarma bağlantısı kopyalama"
 #: src/pages/property-mappings/PropertyMappingListPage.ts
 #: src/pages/property-mappings/PropertyMappingListPage.ts
 #: src/pages/providers/ProviderListPage.ts
-#: src/pages/providers/ProviderListPage.ts
 #: src/pages/providers/RelatedApplicationButton.ts
 #: src/pages/providers/RelatedApplicationButton.ts
 #: src/pages/sources/SourcesListPage.ts
@@ -1282,6 +1311,10 @@ msgstr "Kullanıcı Oluştur"
 msgid "Create a new application"
 msgstr "Yeni bir uygulama oluştur"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "Create a new provider."
+msgstr ""
+
 #: src/pages/users/ServiceAccountForm.ts
 msgid "Create group"
 msgstr "Grup oluştur"
@@ -1300,7 +1333,6 @@ msgstr "Kullanıcıları etkin olmayan olarak oluşturma"
 #: src/pages/policies/BoundPoliciesList.ts
 #: src/pages/policies/PolicyListPage.ts
 #: src/pages/property-mappings/PropertyMappingListPage.ts
-#: src/pages/providers/ProviderListPage.ts
 #: src/pages/sources/SourcesListPage.ts
 #: src/pages/stages/StageListPage.ts
 msgid "Create {0}"
@@ -2022,6 +2054,10 @@ msgstr "Alanlar"
 msgid "Fields a user can identify themselves with. If no fields are selected, the user will only be able to use sources."
 msgstr "Kullanıcının kendilerini tanımlayabileceği alanlar. Herhangi bir alan seçilmezse, kullanıcı yalnızca kaynakları kullanabilir."
 
+#: src/elements/wizard/Wizard.ts
+msgid "Finish"
+msgstr ""
+
 #: src/pages/flows/FlowImportForm.ts
 msgid "Flow"
 msgstr "Akış"
@@ -2129,6 +2165,8 @@ msgid "Forgot username or password?"
 msgstr "Kullanıcı adı veya parolayı mı unuttunuz?"
 
 #: src/elements/forms/ModalForm.ts
+#: src/elements/wizard/FormWizardStep.ts
+#: src/elements/wizard/FormWizardStep.ts
 msgid "Form didn't return a promise for submitting"
 msgstr "Form göndermek için bir söz vermedi"
 
@@ -2592,6 +2630,7 @@ msgid "Kubeconfig"
 msgstr "Kubeconfig"
 
 #: src/pages/outposts/OutpostListPage.ts
+#: src/pages/providers/ProviderWizard.ts
 msgid "LDAP"
 msgstr "LDAP"
 
@@ -2611,6 +2650,10 @@ msgstr "Bağlama istekleri ve arama istekleri altında yapılabilen LDAP DN."
 msgid "LDAP Sync status"
 msgstr "LDAP Eşitleme durumu"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "LDAP details"
+msgstr ""
+
 #: src/pages/stages/prompt/PromptForm.ts
 #: src/pages/stages/prompt/PromptListPage.ts
 msgid "Label"
@@ -3084,6 +3127,10 @@ msgstr "Negate sonucu"
 msgid "Negates the outcome of the binding. Messages are unaffected."
 msgstr "Bağlamanın sonucunu susturur. Mesajlar etkilenmez."
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "New provider"
+msgstr ""
+
 #: src/pages/events/EventInfo.ts
 msgid "New version available!"
 msgstr "Yeni sürüm mevcut!"
@@ -3092,6 +3139,10 @@ msgstr "Yeni sürüm mevcut!"
 msgid "Newly created users are added to this group, if a group is selected."
 msgstr "Bir grup seçiliyse, yeni oluşturulan kullanıcılar bu gruba eklenir."
 
+#: src/elements/wizard/Wizard.ts
+msgid "Next"
+msgstr ""
+
 #: src/flows/FlowInspector.ts
 msgid "Next stage"
 msgstr "Sonraki aşama"
@@ -3153,6 +3204,8 @@ msgid "No additional setup is required."
 msgstr "Ek kurulum gerekmez."
 
 #: src/elements/forms/ModalForm.ts
+#: src/elements/wizard/FormWizardStep.ts
+#: src/elements/wizard/FormWizardStep.ts
 msgid "No form found"
 msgstr "Form bulunamadı"
 
@@ -3296,6 +3349,14 @@ msgstr "Numara SMS gönderilecektir."
 msgid "OAuth Refresh Codes"
 msgstr "OAuth Yenile Kodları"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "OAuth details"
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "OAuth/OIDC"
+msgstr ""
+
 #: src/pages/admin-overview/cards/SystemStatusCard.ts
 msgid "OK"
 msgstr "OK"
@@ -3751,11 +3812,16 @@ msgstr "Sağlayıcılar"
 
 #: src/pages/outposts/OutpostForm.ts
 #: src/pages/outposts/OutpostListPage.ts
+#: src/pages/providers/ProviderWizard.ts
 #: src/pages/providers/proxy/ProxyProviderForm.ts
 #: src/pages/providers/proxy/ProxyProviderViewPage.ts
 msgid "Proxy"
 msgstr "Vekil Sunucu"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "Proxy details"
+msgstr ""
+
 #: src/pages/providers/oauth2/OAuth2ProviderForm.ts
 msgid "Public"
 msgstr "Kamu"
@@ -4009,6 +4075,14 @@ msgstr "İptal mi edildi?"
 msgid "Run sync again"
 msgstr "Eşzamanlamayı tekrar çalıştır"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "SAML"
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "SAML (metadata import)"
+msgstr ""
+
 #: src/pages/property-mappings/PropertyMappingSAMLForm.ts
 msgid "SAML Attribute Name"
 msgstr "SAML Öznitelik Adı"
@@ -4017,6 +4091,14 @@ msgstr "SAML Öznitelik Adı"
 msgid "SAML Metadata"
 msgstr "SAML Meta Verileri"
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "SAML details"
+msgstr ""
+
+#: src/pages/providers/ProviderWizard.ts
+msgid "SAML details (import from metadata)"
+msgstr ""
+
 #: src/pages/providers/saml/SAMLProviderForm.ts
 #: src/pages/sources/saml/SAMLSourceForm.ts
 msgid "SHA1"
@@ -4184,6 +4266,10 @@ msgstr "Giriş yapmak için aşağıdaki kaynaklardan birini seçin."
 msgid "Select sources should be shown for users to authenticate with. This only affects web-based sources, not LDAP."
 msgstr "Kullanıcıların kimlik doğrulaması için belirli kaynaklar gösterilmelidir. Bu, LDAP'yi değil, yalnızca web tabanlı kaynakları etkiler."
 
+#: src/pages/providers/ProviderWizard.ts
+msgid "Select type"
+msgstr ""
+
 #: src/pages/groups/MemberSelectModal.ts
 msgid "Select users to add"
 msgstr "Eklenecek kullanıcıları seçin"

web/src/pages/providers/ProviderListPage.ts

@@ -3,7 +3,6 @@ import { t } from "@lingui/macro";
 import { TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { until } from "lit/directives/until.js";
 
 import { Provider, ProvidersApi } from "@goauthentik/api";
 
@@ -17,11 +16,7 @@ import "../../elements/forms/ModalForm";
 import "../../elements/forms/ProxyForm";
 import { TableColumn } from "../../elements/table/Table";
 import { TablePage } from "../../elements/table/TablePage";
-import "./ldap/LDAPProviderForm";
+import "./ProviderWizard";
-import "./oauth2/OAuth2ProviderForm";
-import "./proxy/ProxyProviderForm";
-import "./saml/SAMLProviderForm";
-import "./saml/SAMLProviderImportForm";
 
 @customElement("ak-provider-list")
 export class ProviderListPage extends TablePage<Provider> {
@@ -114,33 +109,9 @@ export class ProviderListPage extends TablePage<Provider> {
     }
 
     renderToolbar(): TemplateResult {
-        return html` <ak-dropdown class="pf-c-dropdown">
+        return html`<ak-provider-wizard>
-                <button class="pf-m-primary pf-c-dropdown__toggle" type="button">
+                <button slot="trigger" class="pf-c-button pf-m-primary">${t`Create`}</button>
-                    <span class="pf-c-dropdown__toggle-text">${t`Create`}</span>
+            </ak-provider-wizard>
-                    <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
-                </button>
-                <ul class="pf-c-dropdown__menu" hidden>
-                    ${until(
-                        new ProvidersApi(DEFAULT_CONFIG).providersAllTypesList().then((types) => {
-                            return types.map((type) => {
-                                return html`<li>
-                                    <ak-forms-modal>
-                                        <span slot="submit"> ${t`Create`} </span>
-                                        <span slot="header"> ${t`Create ${type.name}`} </span>
-                                        <ak-proxy-form slot="form" type=${type.component}>
-                                        </ak-proxy-form>
-                                        <button slot="trigger" class="pf-c-dropdown__menu-item">
-                                            ${type.name}<br />
-                                            <small>${type.description}</small>
-                                        </button>
-                                    </ak-forms-modal>
-                                </li>`;
-                            });
-                        }),
-                        html`<ak-spinner></ak-spinner>`,
-                    )}
-                </ul>
-            </ak-dropdown>
             ${super.renderToolbar()}`;
     }
 }

web/src/pages/providers/ProviderWizard.ts

@@ -0,0 +1,169 @@
+import { t } from "@lingui/macro";
+
+import { customElement } from "@lit/reactive-element/decorators/custom-element.js";
+import { CSSResult, TemplateResult, html } from "lit";
+
+import PFRadio from "@patternfly/patternfly/components/Radio/radio.css";
+
+import { FormWizardStep } from "../../elements/wizard/FormWizardStep";
+import { Wizard } from "../../elements/wizard/Wizard";
+import { WizardStep } from "../../elements/wizard/WizardStep";
+import "./ldap/LDAPProviderForm";
+import "./oauth2/OAuth2ProviderForm";
+import "./proxy/ProxyProviderForm";
+import "./saml/SAMLProviderForm";
+import "./saml/SAMLProviderImportForm";
+
+export class ProviderInitialStep extends WizardStep {
+    selected = false;
+
+    isValid(): boolean {
+        return this.selected;
+    }
+
+    renderNavList(): TemplateResult {
+        return html`${t`Select type`}`;
+    }
+
+    render(): TemplateResult {
+        return html`<div class="pf-c-radio">
+                <input
+                    class="pf-c-radio__input"
+                    type="radio"
+                    name="type"
+                    id="oauth"
+                    @change=${() => {
+                        this.host.setSteps(this, new ProviderOAuthDetailStep());
+                        this.selected = true;
+                    }}
+                />
+                <label class="pf-c-radio__label" for="oauth">${t`OAuth/OIDC`}</label>
+                <span class="pf-c-radio__description"
+                    >${t`Add a provider which supports OAuth, OIDC or "Login with GitHub
+                Enterprise".`}</span
+                >
+            </div>
+            <div class="pf-c-radio">
+                <input
+                    class="pf-c-radio__input"
+                    type="radio"
+                    name="type"
+                    id="saml"
+                    @change=${() => {
+                        this.host.setSteps(this, new ProviderSAMLDetailStep());
+                        this.selected = true;
+                    }}
+                />
+                <label class="pf-c-radio__label" for="saml">${t`SAML`}</label>
+                <span class="pf-c-radio__description"
+                    >${t`Add a provider which supports SAML 2.0.`}</span
+                >
+            </div>
+            <div class="pf-c-radio">
+                <input
+                    class="pf-c-radio__input"
+                    type="radio"
+                    name="type"
+                    id="saml-import"
+                    @change=${() => {
+                        this.host.setSteps(this, new ProviderSAMLImportDetailStep());
+                        this.selected = true;
+                    }}
+                />
+                <label class="pf-c-radio__label" for="saml">${t`SAML (metadata import)`}</label>
+                <span class="pf-c-radio__description"
+                    >${t`Add a provider which supports SAML 2.0, by importing it's metadata.`}</span
+                >
+            </div>
+            <div class="pf-c-radio">
+                <input
+                    class="pf-c-radio__input"
+                    type="radio"
+                    name="type"
+                    id="ldap"
+                    @change=${() => {
+                        this.host.setSteps(this, new ProviderLDAPDetailStep());
+                        this.selected = true;
+                    }}
+                />
+                <label class="pf-c-radio__label" for="ldap">${t`LDAP`}</label>
+                <span class="pf-c-radio__description"
+                    >${t`Add a provider which support LDAP.`}</span
+                >
+            </div>
+            <div class="pf-c-radio">
+                <input
+                    class="pf-c-radio__input"
+                    type="radio"
+                    name="type"
+                    id="proxy"
+                    @change=${() => {
+                        this.host.setSteps(this, new ProviderProxyDetailStep());
+                        this.selected = true;
+                    }}
+                />
+                <label class="pf-c-radio__label" for="proxy">${t`Proxy`}</label>
+                <span class="pf-c-radio__description"
+                    >${t`Add a provider which does not support any other method. Requests will be routed
+                through the authentik proxy, which authenticates all requests.`}</span
+                >
+            </div>`;
+    }
+}
+
+class ProviderOAuthDetailStep extends FormWizardStep {
+    renderNavList(): TemplateResult {
+        return html`${t`OAuth details`}`;
+    }
+    render(): TemplateResult {
+        return html`<ak-provider-oauth2-form></ak-provider-oauth2-form>`;
+    }
+}
+
+class ProviderSAMLDetailStep extends FormWizardStep {
+    renderNavList(): TemplateResult {
+        return html`${t`SAML details`}`;
+    }
+    render(): TemplateResult {
+        return html`<ak-provider-saml-form></ak-provider-saml-form>`;
+    }
+}
+
+class ProviderSAMLImportDetailStep extends FormWizardStep {
+    renderNavList(): TemplateResult {
+        return html`${t`SAML details (import from metadata)`}`;
+    }
+    render(): TemplateResult {
+        return html`<ak-provider-saml-import-form></ak-provider-saml-import-form>`;
+    }
+}
+
+class ProviderLDAPDetailStep extends FormWizardStep {
+    renderNavList(): TemplateResult {
+        return html`${t`LDAP details`}`;
+    }
+    render(): TemplateResult {
+        return html`<ak-provider-ldap-form></ak-provider-ldap-form>`;
+    }
+}
+
+class ProviderProxyDetailStep extends FormWizardStep {
+    renderNavList(): TemplateResult {
+        return html`${t`Proxy details`}`;
+    }
+    render(): TemplateResult {
+        return html`<ak-provider-proxy-form></ak-provider-proxy-form>`;
+    }
+}
+
+@customElement("ak-provider-wizard")
+export class ProviderWizard extends Wizard {
+    header = t`New provider`;
+    description = t`Create a new provider.`;
+
+    steps = [new ProviderInitialStep()];
+
+    static get styles(): CSSResult[] {
+        return super.styles.concat(PFRadio);
+    }
+}