web: initial implementation of new forms

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

web/src/api/legacy.ts

@@ -105,6 +105,10 @@ export class AppURLManager {
 
 export class FlowURLManager {
 
+    static defaultUnenrollment(): string {
+        return "-/default/unenrollment/";
+    }
+
     static configure(stageUuid: string, rest: string): string {
         return `-/configure/${stageUuid}/${rest}`;
     }

web/src/authentik.css

@@ -88,6 +88,7 @@ body {
 
 @media (prefers-color-scheme: dark) {
     :root {
+        --ak-accent: #fd4b2d;
         --ak-dark-foreground: #fafafa;
         --ak-dark-foreground-darker: #bebebe;
         --ak-dark-foreground-link: #5a5cb9;
@@ -100,6 +101,12 @@ body {
         --pf-c-page__main-section--m-light--BackgroundColor: var(--ak-dark-background-darker);
         --pf-global--link--Color: var(--ak-dark-foreground-link);
     }
+
+    paper-input {
+        /* --paper-input-container-color: var(--ak-accent); */
+        --paper-input-container-input-color: var(--ak-dark-foreground);
+    }
+
     /* Global page background colour */
     .pf-c-page {
         --pf-c-page--BackgroundColor: var(--ak-dark-background);

web/src/main.ts

@@ -8,7 +8,6 @@ import "./elements/buttons/ModalButton";
 import "./elements/buttons/SpinnerButton";
 import "./elements/CodeMirror";
 
-import "./pages/tokens/UserTokenList";
 import "./pages/generic/SiteShell";
 import "./interfaces/AdminInterface";
 import "./elements/messages/MessageContainer";

web/src/pages/users/UserDetailsPage.ts

@@ -0,0 +1,151 @@
+import { gettext } from "django";
+import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
+import PFCard from "@patternfly/patternfly/components/Card/card.css";
+import AKGlobal from "../../authentik.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import { CoreApi, User } from "authentik-api";
+import { me } from "../../api/Users";
+import "../../elements/forms/FormElement";
+import "../../elements/EmptyState";
+import { FlowURLManager } from "../../api/legacy";
+import "@polymer/paper-input/paper-input";
+import "@polymer/iron-form/iron-form";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { PaperInputElement } from "@polymer/paper-input/paper-input";
+import { showMessage } from "../../elements/messages/MessageContainer";
+
+export interface ErrorResponse {
+    [key: string]: string[];
+}
+
+@customElement("ak-form")
+export class Form extends LitElement {
+
+    @property()
+    successMessage = "";
+
+    @property()
+    send!: (data: Record<string, unknown>) => Promise<unknown>;
+
+    submit(ev: Event): void {
+        ev.preventDefault();
+        const ironForm = this.shadowRoot?.querySelector("iron-form");
+        if (!ironForm) {
+            return;
+        }
+        const data = ironForm.serializeForm();
+        this.send(data).then(() => {
+            showMessage({
+                level_tag: "success",
+                message: this.successMessage
+            });
+        }).catch((ex: Response) => {
+            if (ex.status > 399 && ex.status < 500) {
+                return ex.json();
+            }
+            return ex;
+        }).then((errorMessage?: ErrorResponse) => {
+            if (!errorMessage) return;
+            const elements: PaperInputElement[] = ironForm._getSubmittableElements();
+            elements.forEach((element) => {
+                const elementName = element.name;
+                if (!elementName) return;
+                if (elementName in errorMessage) {
+                    element.errorMessage = errorMessage[elementName].join(", ");
+                    element.invalid = true;
+                }
+            });
+        });
+    }
+
+    render(): TemplateResult {
+        return html`<iron-form
+            @iron-form-presubmit=${(ev: Event) => { this.submit(ev); }}>
+            <slot></slot>
+        </iron-form>`;
+    }
+
+}
+
+@customElement("ak-user-details")
+export class UserDetailsPage extends LitElement {
+
+    static get styles(): CSSResult[] {
+        return [PFBase, PFCard, PFForm, PFFormControl, PFButton, AKGlobal];
+    }
+
+    @property({attribute: false})
+    user?: User;
+
+    firstUpdated(): void {
+        me().then((user) => {
+            this.user = user.user;
+        });
+    }
+
+    render(): TemplateResult {
+        if (!this.user) {
+            return html`<ak-empty-state
+                ?loading="${true}"
+                header=${gettext("Loading")}>
+            </ak-empty-state>`;
+        }
+        return html`<div class="pf-c-card">
+            <div class="pf-c-card__title">
+                ${gettext("Update details")}
+            </div>
+            <div class="pf-c-card__body">
+                <ak-form
+                    successMessage=${gettext("Successfully updated details.")}
+                    .send=${(data: unknown) => {
+                        return new CoreApi(DEFAULT_CONFIG).coreUsersUpdate({
+                            id: this.user?.pk || 0,
+                            data: data as User
+                        });
+                    }}>
+                    <form class="pf-c-form pf-m-horizontal">
+                        <paper-input
+                            name="username"
+                            ?alwaysFloatLabel=${true}
+                            label="${gettext("Username")}"
+                            value=${this.user.username}>
+                        </paper-input>
+                        <p class="pf-c-form__helper-text">${gettext("Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only.")}</p>
+                        <paper-input
+                            name="name"
+                            ?alwaysFloatLabel=${true}
+                            label="${gettext("Name")}"
+                            value=${this.user.name}>
+                        </paper-input>
+                        <p class="pf-c-form__helper-text">${gettext("User's display name.")}</p>
+                        <paper-input
+                            name="email"
+                            ?alwaysFloatLabel=${true}
+                            type="email"
+                            label="${gettext("Email address")}"
+                            value=${this.user.email || ""}>
+                        </paper-input>
+
+                        <div class="pf-c-form__group pf-m-action">
+                            <div class="pf-c-form__horizontal-group">
+                                <div class="pf-c-form__actions">
+                                    <button class="pf-c-button pf-m-primary">
+                                        ${gettext("Update")}
+                                    </button>
+                                    <a class="pf-c-button pf-m-danger"
+                                        href="${FlowURLManager.defaultUnenrollment()}">
+                                        ${gettext("Delete account")}
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </form>
+                </ak-form>
+            </div>
+        </div>`;
+    }
+
+}

web/src/pages/users/UserSettingsPage.ts

@@ -18,8 +18,8 @@ import { DEFAULT_CONFIG } from "../../api/Config";
 import { until } from "lit-html/directives/until";
 import { ifDefined } from "lit-html/directives/if-defined";
 import "../../elements/Tabs";
-import "../tokens/UserTokenList";
-import "../generic/SiteShell";
+import "./UserDetailsPage";
+import "./UserTokenList";
 import "./settings/UserSettingsAuthenticatorTOTP";
 import "./settings/UserSettingsAuthenticatorStatic";
 import "./settings/UserSettingsAuthenticatorWebAuthnDevices";
@@ -48,13 +48,7 @@ export class UserSettingsPage extends LitElement {
                 return html`<ak-user-settings-authenticator-static objectId=${stage.objectUid}>
                 </ak-user-settings-authenticator-static>`;
             default:
-                return html`<div class="pf-u-display-flex pf-u-justify-content-center">
-                    <div class="pf-u-w-75">
-                        <ak-site-shell url="${ifDefined(stage.component)}">
-                            <div slot="body"></div>
-                        </ak-site-shell>
-                    </div>
-                </div>`;
+                return html`<p>${gettext(`Error: unsupported stage settings: ${stage.component}`)}</p>`;
         }
     }
 
@@ -64,13 +58,7 @@ export class UserSettingsPage extends LitElement {
                 return html`<ak-user-settings-source-oauth objectId=${source.objectUid}>
                 </ak-user-settings-source-oauth>`;
             default:
-                return html`<div class="pf-u-display-flex pf-u-justify-content-center">
-                    <div class="pf-u-w-75">
-                        <ak-site-shell url="${ifDefined(source.component)}">
-                            <div slot="body"></div>
-                        </ak-site-shell>
-                    </div>
-                </div>`;
+                return html`<p>${gettext(`Error: unsupported source settings: ${source.component}`)}</p>`;
         }
     }
 
@@ -88,16 +76,10 @@ export class UserSettingsPage extends LitElement {
                 </section>
                 <ak-tabs ?vertical="${true}" style="height: 100%;">
                     <section slot="page-1" data-tab-title="${gettext("User details")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
-                        <div class="pf-u-display-flex pf-u-justify-content-center">
-                            <div class="pf-u-w-75">
-                                <ak-site-shell url="/-/user/details/">
-                                    <div slot="body"></div>
-                                </ak-site-shell>
-                            </div>
-                        </div>
+                        <ak-user-details></ak-user-details>
                     </section>
                     <section slot="page-2" data-tab-title="${gettext("Tokens")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
-                        <ak-token-user-list></ak-token-user-list>
+                        <ak-user-token-list></ak-user-token-list>
                     </section>
                     ${until(new StagesApi(DEFAULT_CONFIG).stagesAllUserSettings({}).then((stages) => {
                         return stages.map((stage) => {

web/src/pages/users/UserTokenList.ts

@@ -12,7 +12,7 @@ import { CoreApi, Token } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import { AdminURLManager } from "../../api/legacy";
 
-@customElement("ak-token-user-list")
+@customElement("ak-user-token-list")
 export class UserTokenList extends Table<Token> {
     searchEnabled(): boolean {
         return true;