web/user: rework user source connection UI

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

authentik/core/types.py

@@ -29,3 +29,4 @@ class UserSettingSerializer(PassiveSerializer):
     component = CharField()
     title = CharField()
     configure_url = CharField(required=False)
+    icon_url = CharField()

authentik/sources/oauth/models.py

@@ -75,14 +75,17 @@ class OAuthSource(Source):
         )
 
     def ui_user_settings(self) -> Optional[UserSettingSerializer]:
+        provider_type = self.type
+        provider = provider_type()
         return UserSettingSerializer(
             data={
-                "title": f"OAuth {self.name}",
+                "title": self.name,
                 "component": "ak-user-settings-source-oauth",
                 "configure_url": reverse(
                     "authentik_sources_oauth:oauth-client-login",
                     kwargs={"source_slug": self.slug},
                 ),
+                "icon_url": provider.icon_url(),
             }
         )
 

authentik/sources/plex/models.py

@@ -80,9 +80,10 @@ class PlexSource(Source):
     def ui_user_settings(self) -> Optional[UserSettingSerializer]:
         return UserSettingSerializer(
             data={
-                "title": f"Plex {self.name}",
+                "title": self.name,
                 "component": "ak-user-settings-source-plex",
                 "configure_url": self.client_id,
+                "icon_url": static("authentik/sources/plex.svg"),
             }
         )
 

schema.yml

@@ -31275,8 +31275,11 @@ components:
           type: string
         configure_url:
           type: string
+        icon_url:
+          type: string
       required:
       - component
+      - icon_url
       - object_uid
       - title
     UserSourceConnection:

web/src/authentik.css

@@ -339,9 +339,16 @@ html > form > input {
         ) !important;
     }
     /* data list */
+    .pf-c-data-list {
+        border-top-color: var(--ak-dark-background-lighter);
+    }
     .pf-c-data-list__item {
-        --pf-c-data-list__item--BackgroundColor: var(--ak-dark-background-light);
+        --pf-c-data-list__item--BackgroundColor: transparent;
         --pf-c-data-list__item--BorderBottomColor: var(--ak-dark-background-lighter);
         color: var(--ak-dark-foreground);
     }
 }
+
+.pf-c-data-list__item {
+    background-color: transparent;
+}

web/src/locales/en.po

@@ -988,14 +988,18 @@ msgstr "Connect"
 msgid "Connect to the LDAP Server on port 389:"
 msgstr "Connect to the LDAP Server on port 389:"
 
+#: src/user/user-settings/sources/SourceSettings.ts
+msgid "Connect your user account to the services listed below, to allow you to login using the service instead of traditional credentials."
+msgstr "Connect your user account to the services listed below, to allow you to login using the service instead of traditional credentials."
+
 #: src/user/user-settings/UserSettingsPage.ts
 msgid "Connected services"
 msgstr "Connected services"
 
 #: src/user/user-settings/sources/SourceSettingsOAuth.ts
 #: src/user/user-settings/sources/SourceSettingsPlex.ts
-msgid "Connected."
+#~ msgid "Connected."
-msgstr "Connected."
+#~ msgstr "Connected."
 
 #: src/common/ws.ts
 msgid "Connection error, reconnecting..."
@@ -3138,8 +3142,8 @@ msgstr "Not configured action"
 
 #: src/user/user-settings/sources/SourceSettingsOAuth.ts
 #: src/user/user-settings/sources/SourceSettingsPlex.ts
-msgid "Not connected."
+#~ msgid "Not connected."
-msgstr "Not connected."
+#~ msgstr "Not connected."
 
 #: src/elements/router/Router404.ts
 msgid "Not found"
@@ -4329,8 +4333,8 @@ msgstr "Source linked"
 
 #: src/user/user-settings/sources/SourceSettingsOAuth.ts
 #: src/user/user-settings/sources/SourceSettingsPlex.ts
-msgid "Source {0}"
+#~ msgid "Source {0}"
-msgstr "Source {0}"
+#~ msgstr "Source {0}"
 
 #: src/pages/sources/SourcesListPage.ts
 msgid "Source(s)"

web/src/locales/fr_FR.po

@@ -987,14 +987,18 @@ msgstr "Connecter"
 msgid "Connect to the LDAP Server on port 389:"
 msgstr ""
 
+#: src/user/user-settings/sources/SourceSettings.ts
+msgid "Connect your user account to the services listed below, to allow you to login using the service instead of traditional credentials."
+msgstr ""
+
 #: src/user/user-settings/UserSettingsPage.ts
 msgid "Connected services"
 msgstr "Services connectés"
 
 #: src/user/user-settings/sources/SourceSettingsOAuth.ts
 #: src/user/user-settings/sources/SourceSettingsPlex.ts
-msgid "Connected."
+#~ msgid "Connected."
-msgstr "Connecté."
+#~ msgstr "Connecté."
 
 #: src/common/ws.ts
 msgid "Connection error, reconnecting..."
@@ -3117,8 +3121,8 @@ msgstr "Action non configurée"
 
 #: src/user/user-settings/sources/SourceSettingsOAuth.ts
 #: src/user/user-settings/sources/SourceSettingsPlex.ts
-msgid "Not connected."
+#~ msgid "Not connected."
-msgstr "Déconnecté."
+#~ msgstr "Déconnecté."
 
 #: src/elements/router/Router404.ts
 msgid "Not found"
@@ -4292,8 +4296,8 @@ msgstr "Source liée"
 
 #: src/user/user-settings/sources/SourceSettingsOAuth.ts
 #: src/user/user-settings/sources/SourceSettingsPlex.ts
-msgid "Source {0}"
+#~ msgid "Source {0}"
-msgstr "Source {0}"
+#~ msgstr "Source {0}"
 
 #: src/pages/sources/SourcesListPage.ts
 msgid "Source(s)"

web/src/locales/pseudo-LOCALE.po

@@ -982,14 +982,18 @@ msgstr ""
 msgid "Connect to the LDAP Server on port 389:"
 msgstr ""
 
+#: src/user/user-settings/sources/SourceSettings.ts
+msgid "Connect your user account to the services listed below, to allow you to login using the service instead of traditional credentials."
+msgstr ""
+
 #: src/user/user-settings/UserSettingsPage.ts
 msgid "Connected services"
 msgstr ""
 
 #: src/user/user-settings/sources/SourceSettingsOAuth.ts
 #: src/user/user-settings/sources/SourceSettingsPlex.ts
-msgid "Connected."
+#~ msgid "Connected."
-msgstr ""
+#~ msgstr ""
 
 #: src/common/ws.ts
 msgid "Connection error, reconnecting..."
@@ -3128,8 +3132,8 @@ msgstr ""
 
 #: src/user/user-settings/sources/SourceSettingsOAuth.ts
 #: src/user/user-settings/sources/SourceSettingsPlex.ts
-msgid "Not connected."
+#~ msgid "Not connected."
-msgstr ""
+#~ msgstr ""
 
 #: src/elements/router/Router404.ts
 msgid "Not found"
@@ -4319,8 +4323,8 @@ msgstr ""
 
 #: src/user/user-settings/sources/SourceSettingsOAuth.ts
 #: src/user/user-settings/sources/SourceSettingsPlex.ts
-msgid "Source {0}"
+#~ msgid "Source {0}"
-msgstr ""
+#~ msgstr ""
 
 #: src/pages/sources/SourcesListPage.ts
 msgid "Source(s)"

web/src/locales/tr.po

@@ -978,14 +978,18 @@ msgstr "Bağlan"
 msgid "Connect to the LDAP Server on port 389:"
 msgstr "Bağlantı noktası 389 LDAP sunucusuna bağlanın:"
 
+#: src/user/user-settings/sources/SourceSettings.ts
+msgid "Connect your user account to the services listed below, to allow you to login using the service instead of traditional credentials."
+msgstr ""
+
 #: src/user/user-settings/UserSettingsPage.ts
 msgid "Connected services"
 msgstr "Bağlı hizmetler"
 
 #: src/user/user-settings/sources/SourceSettingsOAuth.ts
 #: src/user/user-settings/sources/SourceSettingsPlex.ts
-msgid "Connected."
+#~ msgid "Connected."
-msgstr "Bağlantılı."
+#~ msgstr "Bağlantılı."
 
 #: src/common/ws.ts
 msgid "Connection error, reconnecting..."
@@ -3091,8 +3095,8 @@ msgstr "Yapılandırılmış eylem"
 
 #: src/user/user-settings/sources/SourceSettingsOAuth.ts
 #: src/user/user-settings/sources/SourceSettingsPlex.ts
-msgid "Not connected."
+#~ msgid "Not connected."
-msgstr "Bağlantılı değil."
+#~ msgstr "Bağlantılı değil."
 
 #: src/elements/router/Router404.ts
 msgid "Not found"
@@ -4253,8 +4257,8 @@ msgstr "Kaynak bağlantılı"
 
 #: src/user/user-settings/sources/SourceSettingsOAuth.ts
 #: src/user/user-settings/sources/SourceSettingsPlex.ts
-msgid "Source {0}"
+#~ msgid "Source {0}"
-msgstr "Kaynak {0}"
+#~ msgstr "Kaynak {0}"
 
 #: src/pages/sources/SourcesListPage.ts
 msgid "Source(s)"

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

@@ -3,7 +3,6 @@ import { property } from "lit/decorators.js";
 
 import AKGlobal from "../../authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
-import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
@@ -16,6 +15,6 @@ export abstract class BaseUserSettings extends LitElement {
     configureUrl?: string;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFCard, PFButton, PFForm, PFFormControl, AKGlobal];
+        return [PFBase, PFButton, PFForm, PFFormControl, AKGlobal];
     }
 }

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

@@ -1,10 +1,12 @@
 import { t } from "@lingui/macro";
 
-import { CSSResult, LitElement, TemplateResult, html } from "lit";
+import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { until } from "lit/directives/until.js";
 
-import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
+import AKGlobal from "../../../authentik.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import PFDataList from "@patternfly/patternfly/components/DataList/data-list.css";
 
 import { SourcesApi, UserSetting } from "@goauthentik/api";
 
@@ -20,7 +22,27 @@ export class UserSourceSettingsPage extends LitElement {
     sourceSettings?: Promise<UserSetting[]>;
 
     static get styles(): CSSResult[] {
-        return [PFGrid];
+        return [
+            PFDataList,
+            PFContent,
+            AKGlobal,
+            css`
+                .pf-c-data-list__cell {
+                    display: flex;
+                    align-items: center;
+                }
+                .pf-c-data-list__cell img {
+                    max-width: 48px;
+                    width: 48px;
+                    margin-right: 16px;
+                }
+                @media (prefers-color-scheme: dark) {
+                    .pf-c-data-list__cell img {
+                        filter: invert(1);
+                    }
+                }
+            `,
+        ];
     }
 
     constructor() {
@@ -38,6 +60,7 @@ export class UserSourceSettingsPage extends LitElement {
         switch (source.component) {
             case "ak-user-settings-source-oauth":
                 return html`<ak-user-settings-source-oauth
+                    class="pf-c-data-list__item-row"
                     objectId=${source.objectUid}
                     title=${source.title}
                     .configureUrl=${source.configureUrl}
@@ -45,6 +68,7 @@ export class UserSourceSettingsPage extends LitElement {
                 </ak-user-settings-source-oauth>`;
             case "ak-user-settings-source-plex":
                 return html`<ak-user-settings-source-plex
+                    class="pf-c-data-list__item-row"
                     objectId=${source.objectUid}
                     title=${source.title}
                     .configureUrl=${source.configureUrl}
@@ -56,7 +80,12 @@ export class UserSourceSettingsPage extends LitElement {
     }
 
     render(): TemplateResult {
-        return html`<div class="pf-l-grid pf-m-gutter">
+        return html` <div class="pf-c-content">
+                <p>
+                    ${t`Connect your user account to the services listed below, to allow you to login using the service instead of traditional credentials.`}
+                </p>
+            </div>
+            <ul class="pf-c-data-list" role="list">
                 ${until(
                     this.sourceSettings?.then((source) => {
                         if (source.length < 1) {
@@ -65,13 +94,22 @@ export class UserSourceSettingsPage extends LitElement {
                             ></ak-empty-state>`;
                         }
                         return source.map((stage) => {
-                        return html`<div class="pf-l-grid__item pf-m-6-col pf-m-4-col-on-xl">
+                            return html`<li class="pf-c-data-list__item">
+                                <div class="pf-c-data-list__item-content">
+                                    <div class="pf-c-data-list__cell">
+                                        <img src="${stage.iconUrl}" />
+                                        ${stage.title}
+                                    </div>
+                                    <div class="pf-c-data-list__cell">
                                         ${this.renderSourceSettings(stage)}
-                        </div>`;
+                                    </div>
+                                </div>
+                            </li>`;
                         });
                     }),
-                html`<ak-empty-state ?loading="${true}" header=${t`Loading`}> </ak-empty-state>`,
+                    html`<ak-empty-state ?loading="${true}" header=${t`Loading`}>
+                    </ak-empty-state>`,
                 )}
-        </div>`;
+            </ul>`;
     }
 }

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

@@ -16,13 +16,6 @@ export class SourceSettingsOAuth extends BaseUserSettings {
     title!: string;
 
     render(): TemplateResult {
-        return html`<div class="pf-c-card">
-            <div class="pf-c-card__title">${t`Source ${this.title}`}</div>
-            <div class="pf-c-card__body">${this.renderInner()}</div>
-        </div>`;
-    }
-
-    renderInner(): TemplateResult {
         return html`${until(
             new SourcesApi(DEFAULT_CONFIG)
                 .sourcesUserConnectionsOauthList({
@@ -30,8 +23,7 @@ export class SourceSettingsOAuth extends BaseUserSettings {
                 })
                 .then((connection) => {
                     if (connection.results.length > 0) {
-                        return html`<p>${t`Connected.`}</p>
+                        return html` <button
-                            <button
                             class="pf-c-button pf-m-danger"
                             @click=${() => {
                                 return new SourcesApi(
@@ -44,8 +36,7 @@ export class SourceSettingsOAuth extends BaseUserSettings {
                             ${t`Disconnect`}
                         </button>`;
                     }
-                    return html`<p>${t`Not connected.`}</p>
+                    return html` <a
-                        <a
                         class="pf-c-button pf-m-primary"
                         href="${ifDefined(this.configureUrl)}${AndNext(
                             "/if/user/#/settings;page-sources",

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

@@ -16,13 +16,6 @@ export class SourceSettingsPlex extends BaseUserSettings {
     @property()
     title!: string;
 
-    render(): TemplateResult {
-        return html`<div class="pf-c-card">
-            <div class="pf-c-card__title">${t`Source ${this.title}`}</div>
-            <div class="pf-c-card__body">${this.renderInner()}</div>
-        </div>`;
-    }
-
     async doPlex(): Promise<void> {
         const authInfo = await PlexAPIClient.getPin(this.configureUrl || "");
         const authWindow = popupCenterScreen(authInfo.authUrl, "plex auth", 550, 700);
@@ -43,7 +36,7 @@ export class SourceSettingsPlex extends BaseUserSettings {
         );
     }
 
-    renderInner(): TemplateResult {
+    render(): TemplateResult {
         return html`${until(
             new SourcesApi(DEFAULT_CONFIG)
                 .sourcesUserConnectionsPlexList({
@@ -51,8 +44,7 @@ export class SourceSettingsPlex extends BaseUserSettings {
                 })
                 .then((connection) => {
                     if (connection.results.length > 0) {
-                        return html`<p>${t`Connected.`}</p>
+                        return html` <button
-                            <button
                             class="pf-c-button pf-m-danger"
                             @click=${() => {
                                 return new SourcesApi(
@@ -65,8 +57,7 @@ export class SourceSettingsPlex extends BaseUserSettings {
                             ${t`Disconnect`}
                         </button>`;
                     }
-                    return html`<p>${t`Not connected.`}</p>
+                    return html` <button @click=${this.doPlex} class="pf-c-button pf-m-primary">
-                        <button @click=${this.doPlex} class="pf-c-button pf-m-primary">
                         ${t`Connect`}
                     </button>`;
                 }),