web/admin: application wizard (part 1) (#2745)

* initial Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * remove log Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * start oauth Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * use form for all type wizard pages Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * more oauth Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * basic wizard actions Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * make resets work Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * add hint in provider wizard Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * render correct icon in empty state in table page Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * improve empty state Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * more Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * add more pages Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * fix Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * add group PK to service account creation response Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * use wizard-level isValid prop Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * re-add old buttons Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
2022-06-26 00:46:40 +02:00
parent a8c04f96d2
commit 504338ea66
36 changed files with 1275 additions and 147 deletions
--- a/web/src/pages/applications/wizard/InitialApplicationWizardPage.ts
+++ b/web/src/pages/applications/wizard/InitialApplicationWizardPage.ts
@ -0,0 +1,73 @@
+import { t } from "@lingui/macro";
+
+import { customElement } from "@lit/reactive-element/decorators/custom-element.js";
+import { TemplateResult, html } from "lit";
+
+import { ApplicationRequest, CoreApi, Provider } from "@goauthentik/api";
+
+import { DEFAULT_CONFIG } from "../../../api/Config";
+import { KeyUnknown } from "../../../elements/forms/Form";
+import "../../../elements/forms/FormGroup";
+import "../../../elements/forms/HorizontalFormElement";
+import { WizardFormPage } from "../../../elements/wizard/WizardFormPage";
+import { convertToSlug } from "../../../utils";
+
+@customElement("ak-application-wizard-initial")
+export class InitialApplicationWizardPage extends WizardFormPage {
+    sidebarLabel = () => t`Application details`;
+
+    nextDataCallback = async (data: KeyUnknown): Promise<boolean> => {
+        const name = data.name as string;
+        let slug = convertToSlug(name || "");
+        // Check if an application with the generated slug already exists
+        const apps = await new CoreApi(DEFAULT_CONFIG).coreApplicationsList({
+            search: slug,
+        });
+        if (apps.results.filter((app) => app.slug == slug)) {
+            slug += "-1";
+        }
+        this.host.state["slug"] = slug;
+        this.host.state["name"] = name;
+        this.host.addActionBefore(t`Create application`, async (): Promise<boolean> => {
+            const req: ApplicationRequest = {
+                name: name || "",
+                slug: slug,
+                metaPublisher: data.metaPublisher as string,
+                metaDescription: data.metaDescription as string,
+            };
+            if ("provider" in this.host.state) {
+                req.provider = (this.host.state["provider"] as Provider).pk;
+            }
+            if ("link" in this.host.state) {
+                req.metaLaunchUrl = this.host.state["link"] as string;
+            }
+            this.host.state["app"] = await new CoreApi(DEFAULT_CONFIG).coreApplicationsCreate({
+                applicationRequest: req,
+            });
+            return true;
+        });
+        return true;
+    };
+
+    renderForm(): TemplateResult {
+        return html`
+            <form class="pf-c-form pf-m-horizontal">
+                <ak-form-element-horizontal label=${t`Name`} ?required=${true} name="name">
+                    <input type="text" value="" class="pf-c-form-control" required />
+                    <p class="pf-c-form__helper-text">${t`Application's display Name.`}</p>
+                </ak-form-element-horizontal>
+                <ak-form-group ?expanded=${true}>
+                    <span slot="header"> ${t`Additional UI settings`} </span>
+                    <div slot="body" class="pf-c-form">
+                        <ak-form-element-horizontal label=${t`Description`} name="metaDescription">
+                            <textarea class="pf-c-form-control"></textarea>
+                        </ak-form-element-horizontal>
+                        <ak-form-element-horizontal label=${t`Publisher`} name="metaPublisher">
+                            <input type="text" value="" class="pf-c-form-control" />
+                        </ak-form-element-horizontal>
+                    </div>
+                </ak-form-group>
+            </form>
+        `;
+    }
+}