web/user: new end-user interface (#1404)

* web/user: migrate to top navbar

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

* web/user: prepare config from server

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

* re-sort

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

* remove old interface

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

* update issue template

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

* use notification badge

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

* web/user: re-add go-to-admin button

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

* *: fix remaining redirects directly to admin

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

* make settings better

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

* api: ensure sources and stages are sorted

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

* web/user: add sessions and consent

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

* providers/oauth2: add post wrapper to stage

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

* website/docs: add new interface to release notes

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

web/src/user/user-settings/BaseUserSettings.ts

@@ -2,7 +2,7 @@ import { CSSResult, LitElement, property } from "lit-element";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
-import AKGlobal from "../../../authentik.css";
+import AKGlobal from "../../authentik.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
 

web/src/user/user-settings/UserSelfForm.ts

@@ -77,7 +77,7 @@ export class UserSelfForm extends ModelForm<UserSelf, number> {
                             }}
                             class="pf-c-button pf-m-primary"
                         >
-                            ${t`Update`}
+                            ${t`Save`}
                         </button>
                         ${until(
                             tenant().then((tenant) => {

web/src/user/user-settings/UserSettingsPage.ts

@@ -1,5 +1,5 @@
 import { t } from "@lingui/macro";
-import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
+import { CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
 
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
@@ -13,22 +13,15 @@ import AKGlobal from "../../authentik.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 { SourcesApi, StagesApi, UserSetting } from "@goauthentik/api";
-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 "../../elements/PageHeader";
+import "../../elements/user/SessionList";
+import "../../elements/user/UserConsentList";
 import "./tokens/UserTokenList";
 import "./UserSelfForm";
-import "./settings/UserSettingsAuthenticatorDuo";
-import "./settings/UserSettingsAuthenticatorStatic";
-import "./settings/UserSettingsAuthenticatorTOTP";
-import "./settings/UserSettingsAuthenticatorWebAuthn";
-import "./settings/UserSettingsPassword";
-import "./settings/SourceSettingsOAuth";
-import "./settings/SourceSettingsPlex";
-import { EVENT_REFRESH } from "../../constants";
+import "./sources/SourceSettings";
+import "./stages/StageSettings";
+import { until } from "lit-html/directives/until";
+import { me } from "../../api/Users";
 
 @customElement("ak-user-settings")
 export class UserSettingsPage extends LitElement {
@@ -49,91 +42,10 @@ export class UserSettingsPage extends LitElement {
         ];
     }
 
-    @property({ attribute: false })
-    userSettings?: Promise<UserSetting[]>;
-
-    @property({ attribute: false })
-    sourceSettings?: Promise<UserSetting[]>;
-
-    constructor() {
-        super();
-        this.addEventListener(EVENT_REFRESH, () => {
-            this.firstUpdated();
-        });
-    }
-
-    firstUpdated(): void {
-        this.userSettings = new StagesApi(DEFAULT_CONFIG).stagesAllUserSettingsList();
-        this.sourceSettings = new SourcesApi(DEFAULT_CONFIG).sourcesAllUserSettingsList();
-    }
-
-    renderStageSettings(stage: UserSetting): TemplateResult {
-        switch (stage.component) {
-            case "ak-user-settings-authenticator-webauthn":
-                return html`<ak-user-settings-authenticator-webauthn
-                    objectId=${stage.objectUid}
-                    .configureUrl=${stage.configureUrl}
-                >
-                </ak-user-settings-authenticator-webauthn>`;
-            case "ak-user-settings-password":
-                return html`<ak-user-settings-password
-                    objectId=${stage.objectUid}
-                    .configureUrl=${stage.configureUrl}
-                >
-                </ak-user-settings-password>`;
-            case "ak-user-settings-authenticator-totp":
-                return html`<ak-user-settings-authenticator-totp
-                    objectId=${stage.objectUid}
-                    .configureUrl=${stage.configureUrl}
-                >
-                </ak-user-settings-authenticator-totp>`;
-            case "ak-user-settings-authenticator-static":
-                return html`<ak-user-settings-authenticator-static
-                    objectId=${stage.objectUid}
-                    .configureUrl=${stage.configureUrl}
-                >
-                </ak-user-settings-authenticator-static>`;
-            case "ak-user-settings-authenticator-duo":
-                return html`<ak-user-settings-authenticator-duo
-                    objectId=${stage.objectUid}
-                    .configureUrl=${stage.configureUrl}
-                >
-                </ak-user-settings-authenticator-duo>`;
-            default:
-                return html`<p>${t`Error: unsupported stage settings: ${stage.component}`}</p>`;
-        }
-    }
-
-    renderSourceSettings(source: UserSetting): TemplateResult {
-        switch (source.component) {
-            case "ak-user-settings-source-oauth":
-                return html`<ak-user-settings-source-oauth
-                    objectId=${source.objectUid}
-                    title=${source.title}
-                    .configureUrl=${source.configureUrl}
-                >
-                </ak-user-settings-source-oauth>`;
-            case "ak-user-settings-source-plex":
-                return html`<ak-user-settings-source-plex
-                    objectId=${source.objectUid}
-                    title=${source.title}
-                >
-                </ak-user-settings-source-plex>`;
-            default:
-                return html`<p>${t`Error: unsupported source settings: ${source.component}`}</p>`;
-        }
-    }
-
     render(): TemplateResult {
         return html`<div class="pf-c-page">
             <main role="main" class="pf-c-page__main" tabindex="-1">
-                <ak-page-header
-                    icon="pf-icon pf-icon-user"
-                    header=${t`User Settings`}
-                    description=${t`Configure settings relevant to your user profile.`}
-                >
-                </ak-page-header>
-                <ak-tabs ?vertical="${true}" style="height: 100%;">
+                <ak-tabs ?vertical="${true}">
                     <section
                         slot="page-details"
                         data-tab-title="${t`User details`}"
@@ -146,6 +58,46 @@ export class UserSettingsPage extends LitElement {
                             </div>
                         </div>
                     </section>
+                    <section
+                        slot="page-sessions"
+                        data-tab-title="${t`Sessions`}"
+                        class="pf-c-page__main-section pf-m-no-padding-mobile"
+                    >
+                        ${until(
+                            me().then((u) => {
+                                return html`<ak-user-session-list
+                                    targetUser=${u.user.username}
+                                ></ak-user-session-list>`;
+                            }),
+                        )}
+                    </section>
+                    <section
+                        slot="page-consents"
+                        data-tab-title="${t`Consent`}"
+                        class="pf-c-page__main-section pf-m-no-padding-mobile"
+                    >
+                        ${until(
+                            me().then((u) => {
+                                return html`<ak-user-consent-list
+                                    userId=${u.user.pk}
+                                ></ak-user-consent-list>`;
+                            }),
+                        )}
+                    </section>
+                    <section
+                        slot="page-stages"
+                        data-tab-title="${t`Password, 2FA, etc`}"
+                        class="pf-c-page__main-section pf-m-no-padding-mobile"
+                    >
+                        <ak-user-settings-stage></ak-user-settings-stage>
+                    </section>
+                    <section
+                        slot="page-sources"
+                        data-tab-title="${t`Connected services`}"
+                        class="pf-c-page__main-section pf-m-no-padding-mobile"
+                    >
+                        <ak-user-settings-source></ak-user-settings-source>
+                    </section>
                     <section
                         slot="page-tokens"
                         data-tab-title="${t`Tokens and App passwords`}"
@@ -153,32 +105,6 @@ export class UserSettingsPage extends LitElement {
                     >
                         <ak-user-token-list></ak-user-token-list>
                     </section>
-                    ${until(
-                        this.userSettings?.then((stages) => {
-                            return stages.map((stage) => {
-                                return html`<section
-                                    slot="page-${stage.objectUid}"
-                                    data-tab-title="${ifDefined(stage.title)}"
-                                    class="pf-c-page__main-section pf-m-no-padding-mobile"
-                                >
-                                    ${this.renderStageSettings(stage)}
-                                </section>`;
-                            });
-                        }),
-                    )}
-                    ${until(
-                        this.sourceSettings?.then((source) => {
-                            return source.map((stage) => {
-                                return html`<section
-                                    slot="page-${stage.objectUid}"
-                                    data-tab-title="${ifDefined(stage.title)}"
-                                    class="pf-c-page__main-section pf-m-no-padding-mobile"
-                                >
-                                    ${this.renderSourceSettings(stage)}
-                                </section>`;
-                            });
-                        }),
-                    )}
                 </ak-tabs>
             </main>
         </div>`;

web/src/user/user-settings/sources/SourceSettings.ts

@@ -0,0 +1,67 @@
+import { SourcesApi, UserSetting } from "@goauthentik/api";
+import { t } from "@lingui/macro";
+import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
+import { until } from "lit-html/directives/until";
+import { DEFAULT_CONFIG } from "../../../api/Config";
+import { EVENT_REFRESH } from "../../../constants";
+import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
+
+import "../../../elements/EmptyState";
+import "./SourceSettingsOAuth";
+import "./SourceSettingsPlex";
+
+@customElement("ak-user-settings-source")
+export class UserSourceSettingsPage extends LitElement {
+    @property({ attribute: false })
+    sourceSettings?: Promise<UserSetting[]>;
+
+    static get styles(): CSSResult[] {
+        return [PFGrid];
+    }
+
+    constructor() {
+        super();
+        this.addEventListener(EVENT_REFRESH, () => {
+            this.firstUpdated();
+        });
+    }
+
+    firstUpdated(): void {
+        this.sourceSettings = new SourcesApi(DEFAULT_CONFIG).sourcesAllUserSettingsList();
+    }
+
+    renderSourceSettings(source: UserSetting): TemplateResult {
+        switch (source.component) {
+            case "ak-user-settings-source-oauth":
+                return html`<ak-user-settings-source-oauth
+                    objectId=${source.objectUid}
+                    title=${source.title}
+                    .configureUrl=${source.configureUrl}
+                >
+                </ak-user-settings-source-oauth>`;
+            case "ak-user-settings-source-plex":
+                return html`<ak-user-settings-source-plex
+                    objectId=${source.objectUid}
+                    title=${source.title}
+                >
+                </ak-user-settings-source-plex>`;
+            default:
+                return html`<p>${t`Error: unsupported source settings: ${source.component}`}</p>`;
+        }
+    }
+
+    render(): TemplateResult {
+        return html`<div class="pf-l-grid pf-m-gutter">
+            ${until(
+                this.sourceSettings?.then((source) => {
+                    return source.map((stage) => {
+                        return html`<div class="pf-l-grid__item pf-m-6-col pf-m-4-col-on-xl">
+                            ${this.renderSourceSettings(stage)}
+                        </div>`;
+                    });
+                }),
+                html`<ak-empty-state ?loading="${true}" header=${t`Loading`}> </ak-empty-state>`,
+            )}
+        </div>`;
+    }
+}

web/src/user/user-settings/sources/SourceSettingsOAuth.ts

@@ -1,5 +1,5 @@
 import { customElement, html, property, TemplateResult } from "lit-element";
-import { BaseUserSettings } from "./BaseUserSettings";
+import { BaseUserSettings } from "../BaseUserSettings";
 import { SourcesApi } from "@goauthentik/api";
 import { until } from "lit-html/directives/until";
 import { DEFAULT_CONFIG } from "../../../api/Config";

web/src/user/user-settings/sources/SourceSettingsPlex.ts

@@ -1,5 +1,5 @@
 import { customElement, html, property, TemplateResult } from "lit-element";
-import { BaseUserSettings } from "./BaseUserSettings";
+import { BaseUserSettings } from "../BaseUserSettings";
 import { SourcesApi } from "@goauthentik/api";
 import { until } from "lit-html/directives/until";
 import { DEFAULT_CONFIG } from "../../../api/Config";

web/src/user/user-settings/stages/StageSettings.ts

@@ -0,0 +1,87 @@
+import { StagesApi, UserSetting } from "@goauthentik/api";
+import { t } from "@lingui/macro";
+import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
+import { until } from "lit-html/directives/until";
+import { DEFAULT_CONFIG } from "../../../api/Config";
+import { EVENT_REFRESH } from "../../../constants";
+import PFStack from "@patternfly/patternfly/layouts/Stack/stack.css";
+
+import "../../../elements/EmptyState";
+import "./UserSettingsAuthenticatorDuo";
+import "./UserSettingsAuthenticatorStatic";
+import "./UserSettingsAuthenticatorTOTP";
+import "./UserSettingsAuthenticatorWebAuthn";
+import "./UserSettingsPassword";
+
+@customElement("ak-user-settings-stage")
+export class UserStageSettingsPage extends LitElement {
+    @property({ attribute: false })
+    userSettings?: Promise<UserSetting[]>;
+
+    static get styles(): CSSResult[] {
+        return [PFStack];
+    }
+
+    constructor() {
+        super();
+        this.addEventListener(EVENT_REFRESH, () => {
+            this.firstUpdated();
+        });
+    }
+
+    firstUpdated(): void {
+        this.userSettings = new StagesApi(DEFAULT_CONFIG).stagesAllUserSettingsList();
+    }
+
+    renderStageSettings(stage: UserSetting): TemplateResult {
+        switch (stage.component) {
+            case "ak-user-settings-authenticator-webauthn":
+                return html`<ak-user-settings-authenticator-webauthn
+                    objectId=${stage.objectUid}
+                    .configureUrl=${stage.configureUrl}
+                >
+                </ak-user-settings-authenticator-webauthn>`;
+            case "ak-user-settings-password":
+                return html`<ak-user-settings-password
+                    objectId=${stage.objectUid}
+                    .configureUrl=${stage.configureUrl}
+                >
+                </ak-user-settings-password>`;
+            case "ak-user-settings-authenticator-totp":
+                return html`<ak-user-settings-authenticator-totp
+                    objectId=${stage.objectUid}
+                    .configureUrl=${stage.configureUrl}
+                >
+                </ak-user-settings-authenticator-totp>`;
+            case "ak-user-settings-authenticator-static":
+                return html`<ak-user-settings-authenticator-static
+                    objectId=${stage.objectUid}
+                    .configureUrl=${stage.configureUrl}
+                >
+                </ak-user-settings-authenticator-static>`;
+            case "ak-user-settings-authenticator-duo":
+                return html`<ak-user-settings-authenticator-duo
+                    objectId=${stage.objectUid}
+                    .configureUrl=${stage.configureUrl}
+                >
+                </ak-user-settings-authenticator-duo>`;
+            default:
+                return html`<p>${t`Error: unsupported stage settings: ${stage.component}`}</p>`;
+        }
+    }
+
+    render(): TemplateResult {
+        return html`<div class="pf-l-stack pf-m-gutter">
+            ${until(
+                this.userSettings?.then((stages) => {
+                    return stages.map((stage) => {
+                        return html`<div class="pf-l-stack__item">
+                            ${this.renderStageSettings(stage)}
+                        </div>`;
+                    });
+                }),
+                html`<ak-empty-state ?loading="${true}" header=${t`Loading`}></ak-empty-state>`,
+            )}
+        </div>`;
+    }
+}

web/src/user/user-settings/stages/UserSettingsAuthenticatorDuo.ts

@@ -3,7 +3,7 @@ import { t } from "@lingui/macro";
 import { customElement, html, TemplateResult } from "lit-element";
 import { until } from "lit-html/directives/until";
 import { DEFAULT_CONFIG } from "../../../api/Config";
-import { BaseUserSettings } from "./BaseUserSettings";
+import { BaseUserSettings } from "../BaseUserSettings";
 import { EVENT_REFRESH } from "../../../constants";
 
 @customElement("ak-user-settings-authenticator-duo")

web/src/user/user-settings/stages/UserSettingsAuthenticatorStatic.ts

@@ -4,7 +4,7 @@ import { CSSResult, customElement, html, TemplateResult } from "lit-element";
 import { until } from "lit-html/directives/until";
 import { DEFAULT_CONFIG } from "../../../api/Config";
 import { STATIC_TOKEN_STYLE } from "../../../flows/stages/authenticator_static/AuthenticatorStaticStage";
-import { BaseUserSettings } from "./BaseUserSettings";
+import { BaseUserSettings } from "../BaseUserSettings";
 import { EVENT_REFRESH } from "../../../constants";
 
 @customElement("ak-user-settings-authenticator-static")

web/src/user/user-settings/stages/UserSettingsAuthenticatorTOTP.ts

@@ -3,7 +3,7 @@ import { t } from "@lingui/macro";
 import { customElement, html, TemplateResult } from "lit-element";
 import { until } from "lit-html/directives/until";
 import { DEFAULT_CONFIG } from "../../../api/Config";
-import { BaseUserSettings } from "./BaseUserSettings";
+import { BaseUserSettings } from "../BaseUserSettings";
 import { EVENT_REFRESH } from "../../../constants";
 
 @customElement("ak-user-settings-authenticator-totp")

web/src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts

@@ -3,7 +3,7 @@ import { t } from "@lingui/macro";
 import { AuthenticatorsApi, WebAuthnDevice } from "@goauthentik/api";
 import { until } from "lit-html/directives/until";
 import { DEFAULT_CONFIG } from "../../../api/Config";
-import { BaseUserSettings } from "./BaseUserSettings";
+import { BaseUserSettings } from "../BaseUserSettings";
 import PFDataList from "@patternfly/patternfly/components/DataList/data-list.css";
 import "../../../elements/buttons/ModalButton";
 import "../../../elements/buttons/SpinnerButton";

web/src/user/user-settings/stages/UserSettingsPassword.ts

@@ -1,6 +1,6 @@
 import { customElement, html, TemplateResult } from "lit-element";
 import { t } from "@lingui/macro";
-import { BaseUserSettings } from "./BaseUserSettings";
+import { BaseUserSettings } from "../BaseUserSettings";
 import { ifDefined } from "lit-html/directives/if-defined";
 
 @customElement("ak-user-settings-password")

web/src/user/user-settings/tokens/UserTokenList.ts

@@ -77,7 +77,7 @@ export class UserTokenList extends Table<Token> {
                             </dt>
                             <dd class="pf-c-description-list__description">
                                 <div class="pf-c-description-list__text">
-                                    ${item.user?.username}
+                                    ${item.userObj?.username}
                                 </div>
                             </dd>
                         </div>