web: migrate dropdowns to wizards (#2633)

* web/admin: add basic wizards for providers Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * web: add dark mode for wizard Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * web/admin: migrate policies to wizard Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * start source Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * policies: sanitze_dict when returning log messages during tests Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * Revert "web/admin: migrate policies to wizard" This reverts commit d8b7f62d3e. Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> # Conflicts: # web/src/locales/zh-Hans.po # web/src/locales/zh-Hant.po # web/src/locales/zh_TW.po * web: rewrite wizard to be element based Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * further cleanup Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * update sources Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * web: migrate property mappings Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * migrate stages Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * migrate misc dropdowns Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * migrate outpost integrations Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
2022-04-02 19:48:17 +02:00
parent 7a93614e4b
commit 508cec2fd5
36 changed files with 4872 additions and 2903 deletions
--- a/web/src/pages/sources/SourceWizard.ts
+++ b/web/src/pages/sources/SourceWizard.ts
@ -0,0 +1,107 @@
+import { t } from "@lingui/macro";
+
+import { customElement } from "@lit/reactive-element/decorators/custom-element.js";
+import { CSSResult, LitElement, TemplateResult, html } from "lit";
+import { property } from "lit/decorators.js";
+
+import AKGlobal from "../../authentik.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFRadio from "@patternfly/patternfly/components/Radio/radio.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+
+import { SourcesApi, TypeCreate } from "@goauthentik/api";
+
+import { DEFAULT_CONFIG } from "../../api/Config";
+import "../../elements/forms/ProxyForm";
+import "../../elements/wizard/FormWizardPage";
+import "../../elements/wizard/Wizard";
+import { WizardPage } from "../../elements/wizard/WizardPage";
+import "./ldap/LDAPSourceForm";
+import "./oauth/OAuthSourceForm";
+import "./plex/PlexSourceForm";
+import "./saml/SAMLSourceForm";
+
+@customElement("ak-source-wizard-initial")
+export class InitialSourceWizardPage extends WizardPage {
+    @property({ attribute: false })
+    sourceTypes: TypeCreate[] = [];
+
+    static get styles(): CSSResult[] {
+        return [PFBase, PFButton, AKGlobal, PFRadio];
+    }
+
+    render(): TemplateResult {
+        return html`
+            ${this.sourceTypes.map((type) => {
+                return html`<div class="pf-c-radio">
+                    <input
+                        class="pf-c-radio__input"
+                        type="radio"
+                        name="type"
+                        id=${`${type.component}-${type.modelName}`}
+                        @change=${() => {
+                            this.host.setSteps(
+                                "initial",
+                                `type-${type.component}-${type.modelName}`,
+                            );
+                            this._isValid = true;
+                        }}
+                    />
+                    <label class="pf-c-radio__label" for=${`${type.component}-${type.modelName}`}
+                        >${type.name}</label
+                    >
+                    <span class="pf-c-radio__description">${type.description}</span>
+                </div>`;
+            })}
+        `;
+    }
+}
+
+@customElement("ak-source-wizard")
+export class SourceWizard extends LitElement {
+    static get styles(): CSSResult[] {
+        return [PFBase, PFButton, AKGlobal, PFRadio];
+    }
+
+    @property({ attribute: false })
+    sourceTypes: TypeCreate[] = [];
+
+    firstUpdated(): void {
+        new SourcesApi(DEFAULT_CONFIG).sourcesAllTypesList().then((types) => {
+            this.sourceTypes = types;
+        });
+    }
+
+    render(): TemplateResult {
+        return html`
+            <ak-wizard
+                .steps=${["initial"]}
+                header=${t`New source`}
+                description=${t`Create a new source.`}
+            >
+                <ak-source-wizard-initial
+                    slot="initial"
+                    .sidebarLabel=${() => t`Select type`}
+                    .sourceTypes=${this.sourceTypes}
+                >
+                </ak-source-wizard-initial>
+                ${this.sourceTypes.map((type) => {
+                    return html`
+                        <ak-wizard-page-form
+                            slot=${`type-${type.component}-${type.modelName}`}
+                            .sidebarLabel=${() => t`Create ${type.name}`}
+                        >
+                            <ak-proxy-form
+                                .args=${{
+                                    modelName: type.modelName,
+                                }}
+                                type=${type.component}
+                            ></ak-proxy-form>
+                        </ak-wizard-page-form>
+                    `;
+                })}
+                <button slot="trigger" class="pf-c-button pf-m-primary">${t`Create`}</button>
+            </ak-wizard>
+        `;
+    }
+}