web/admin: show connected services on user view page, fix styling

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
goauthentik · Feb 5, 2024 · 8fa65b3 · 8fa65b3
1 parent 087d5aa
commit 8fa65b3
Show file tree

Hide file tree

Showing 22 changed files with 178 additions and 117 deletions.
diff --git a/web/src/admin/users/UserViewPage.ts b/web/src/admin/users/UserViewPage.ts
@@ -13,6 +13,7 @@ import { getRelativeTime } from "@goauthentik/app/common/utils";
 import "@goauthentik/app/elements/oauth/UserAccessTokenList";
 import "@goauthentik/app/elements/oauth/UserRefreshTokenList";
 import "@goauthentik/app/elements/rbac/ObjectPermissionsPage";
+import "@goauthentik/app/elements/user/sources/SourceSettings";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EVENT_REFRESH } from "@goauthentik/common/constants";
 import { userTypeToLabel } from "@goauthentik/common/labels";
@@ -318,6 +319,16 @@ export class UserViewPage extends WithCapabilitiesConfig(AKElement) {
                         </div>
                     </div>
                 </section>
+                <section
+                    slot="page-source-connections"
+                    data-tab-title="${msg("Connected services")}"
+                    class="pf-c-page__main-section pf-m-no-padding-mobile"
+                >
+                    <div class="pf-c-card">
+                        <ak-user-settings-source userId=${user.pk} .canConnect=${false}>
+                        </ak-user-settings-source>
+                    </div>
+                </section>
             </ak-tabs>
         `;
     }

diff --git a/web/src/common/styles/authentik.css b/web/src/common/styles/authentik.css
@@ -150,3 +150,7 @@ html > form > input {
         margin-top: 13rem;
     }
 }
+
+.pf-c-data-list {
+    padding-inline-start: 0;
+}
diff --git a/web/src/common/styles/theme-dark.css b/web/src/common/styles/theme-dark.css
@@ -292,6 +292,7 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 }
 /* data list */
 .pf-c-data-list {
+    padding-inline-start: 0;
     border-top-color: var(--ak-dark-background-lighter);
 }
 .pf-c-data-list__item {

diff --git a/...rc/user/user-settings/BaseUserSettings.ts → ...elements/user/sources/BaseUserSettings.ts b/...rc/user/user-settings/BaseUserSettings.ts → ...elements/user/sources/BaseUserSettings.ts
diff --git a/...r/user-settings/sources/SourceSettings.ts → ...c/elements/user/sources/SourceSettings.ts b/...r/user-settings/sources/SourceSettings.ts → ...c/elements/user/sources/SourceSettings.ts
@@ -1,18 +1,16 @@
 import { renderSourceIcon } from "@goauthentik/app/admin/sources/utils";
+import "@goauthentik/app/elements/user/sources/SourceSettingsOAuth";
+import "@goauthentik/app/elements/user/sources/SourceSettingsPlex";
+import "@goauthentik/app/elements/user/sources/SourceSettingsSAML";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EVENT_REFRESH } from "@goauthentik/common/constants";
-import { me } from "@goauthentik/common/users";
 import { AKElement } from "@goauthentik/elements/Base";
 import "@goauthentik/elements/EmptyState";
-import "@goauthentik/user/user-settings/sources/SourceSettingsOAuth";
-import "@goauthentik/user/user-settings/sources/SourceSettingsPlex";
-import "@goauthentik/user/user-settings/sources/SourceSettingsSAML";
 
 import { msg, str } from "@lit/localize";
 import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFDataList from "@patternfly/patternfly/components/DataList/data-list.css";
 
 import { PaginatedUserSourceConnectionList, SourcesApi, UserSetting } from "@goauthentik/api";
@@ -25,10 +23,15 @@ export class UserSourceSettingsPage extends AKElement {
     @property({ attribute: false })
     connections?: PaginatedUserSourceConnectionList;
 
+    @property({ type: Number })
+    userId?: number;
+
+    @property({ type: Boolean })
+    canConnect = true;
+
     static get styles(): CSSResult[] {
         return [
             PFDataList,
-            PFContent,
             css`
                 .pf-c-data-list__cell {
                     display: flex;
@@ -57,10 +60,9 @@ export class UserSourceSettingsPage extends AKElement {
     }
 
     async firstUpdated(): Promise<void> {
-        const user = await me();
         this.sourceSettings = await new SourcesApi(DEFAULT_CONFIG).sourcesAllUserSettingsList();
         this.connections = await new SourcesApi(DEFAULT_CONFIG).sourcesUserConnectionsAllList({
-            user: user.user.pk,
+            user: this.userId,
         });
     }
 
@@ -79,29 +81,26 @@ export class UserSourceSettingsPage extends AKElement {
         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}
                     connectionPk=${connectionPk}
-                    .configureUrl=${source.configureUrl}
+                    .configureUrl=${this.canConnect ? source.configureUrl : undefined}
                 >
                 </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}
                     connectionPk=${connectionPk}
-                    .configureUrl=${source.configureUrl}
+                    .configureUrl=${this.canConnect ? source.configureUrl : undefined}
                 >
                 </ak-user-settings-source-plex>`;
             case "ak-user-settings-source-saml":
                 return html`<ak-user-settings-source-saml
-                    class="pf-c-data-list__item-row"
                     objectId=${source.objectUid}
                     title=${source.title}
                     connectionPk=${connectionPk}
-                    .configureUrl=${source.configureUrl}
+                    .configureUrl=${this.canConnect ? source.configureUrl : undefined}
                 >
                 </ak-user-settings-source-saml>`;
             default:
@@ -112,23 +111,17 @@ export class UserSourceSettingsPage extends AKElement {
     }
 
     render(): TemplateResult {
-        return html` <div class="pf-c-content">
-                <p>
-                    ${msg(
-                        "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">
-                ${this.sourceSettings
-                    ? html`
-                          ${this.sourceSettings.length < 1
-                              ? html`<ak-empty-state
-                                    header=${msg("No services available.")}
-                                ></ak-empty-state>`
-                              : html`
-                                    ${this.sourceSettings.map((source) => {
-                                        return html`<li class="pf-c-data-list__item">
+        return html` <ul class="pf-c-data-list" role="list">
+            ${this.sourceSettings
+                ? html`
+                      ${this.sourceSettings.length < 1
+                          ? html`<ak-empty-state
+                                header=${msg("No services available.")}
+                            ></ak-empty-state>`
+                          : html`
+                                ${this.sourceSettings.map((source) => {
+                                    return html`<li class="pf-c-data-list__item">
+                                        <div class="pf-c-data-list__item-row">
                                             <div class="pf-c-data-list__item-content">
                                                 <div class="pf-c-data-list__cell">
                                                     ${renderSourceIcon(
@@ -141,12 +134,13 @@ export class UserSourceSettingsPage extends AKElement {
                                                     ${this.renderSourceSettings(source)}
                                                 </div>
                                             </div>
-                                        </li>`;
-                                    })}
-                                `}
-                      `
-                    : html`<ak-empty-state ?loading="${true}" header=${msg("Loading")}>
-                      </ak-empty-state>`}
-            </ul>`;
+                                        </div>
+                                    </li>`;
+                                })}
+                            `}
+                  `
+                : html`<ak-empty-state ?loading="${true}" header=${msg("Loading")}>
+                  </ak-empty-state>`}
+        </ul>`;
     }
 }
diff --git a/...r-settings/sources/SourceSettingsOAuth.ts → ...ments/user/sources/SourceSettingsOAuth.ts b/...r-settings/sources/SourceSettingsOAuth.ts → ...ments/user/sources/SourceSettingsOAuth.ts
@@ -1,14 +1,13 @@
+import { BaseUserSettings } from "@goauthentik/app/elements/user/sources/BaseUserSettings";
 import { AndNext, DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EVENT_REFRESH } from "@goauthentik/common/constants";
 import { MessageLevel } from "@goauthentik/common/messages";
 import "@goauthentik/elements/Spinner";
 import { showMessage } from "@goauthentik/elements/messages/MessageContainer";
-import { BaseUserSettings } from "@goauthentik/user/user-settings/BaseUserSettings";
 
 import { msg, str } from "@lit/localize";
 import { TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
 
 import { SourcesApi } from "@goauthentik/api";
 
@@ -57,13 +56,16 @@ export class SourceSettingsOAuth extends BaseUserSettings {
                 ${msg("Disconnect")}
             </button>`;
         }
-        return html`<a
-            class="pf-c-button pf-m-primary"
-            href="${ifDefined(this.configureUrl)}${AndNext(
-                `/if/user/#/settings;${JSON.stringify({ page: "page-sources" })}`,
-            )}"
-        >
-            ${msg("Connect")}
-        </a>`;
+        if (this.configureUrl) {
+            return html`<a
+                class="pf-c-button pf-m-primary"
+                href="${this.configureUrl}${AndNext(
+                    `/if/user/#/settings;${JSON.stringify({ page: "page-sources" })}`,
+                )}"
+            >
+                ${msg("Connect")}
+            </a>`;
+        }
+        return html`${msg("-")}`;
     }
 }
diff --git a/...er-settings/sources/SourceSettingsPlex.ts → ...ements/user/sources/SourceSettingsPlex.ts b/...er-settings/sources/SourceSettingsPlex.ts → ...ements/user/sources/SourceSettingsPlex.ts
@@ -1,10 +1,10 @@
+import { BaseUserSettings } from "@goauthentik/app/elements/user/sources/BaseUserSettings";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EVENT_REFRESH } from "@goauthentik/common/constants";
 import { PlexAPIClient, popupCenterScreen } from "@goauthentik/common/helpers/plex";
 import { MessageLevel } from "@goauthentik/common/messages";
 import "@goauthentik/elements/Spinner";
 import { showMessage } from "@goauthentik/elements/messages/MessageContainer";
-import { BaseUserSettings } from "@goauthentik/user/user-settings/BaseUserSettings";
 
 import { msg, str } from "@lit/localize";
 import { TemplateResult, html } from "lit";
@@ -77,8 +77,11 @@ export class SourceSettingsPlex extends BaseUserSettings {
                 ${msg("Disconnect")}
             </button>`;
         }
-        return html`<button @click=${this.doPlex} class="pf-c-button pf-m-primary">
-            ${msg("Connect")}
-        </button>`;
+        if (this.configureUrl) {
+            return html`<button @click=${this.doPlex} class="pf-c-button pf-m-primary">
+                ${msg("Connect")}
+            </button>`;
+        }
+        return html`${msg("-")}`;
     }
 }
diff --git a/...er-settings/sources/SourceSettingsSAML.ts → ...ements/user/sources/SourceSettingsSAML.ts b/...er-settings/sources/SourceSettingsSAML.ts → ...ements/user/sources/SourceSettingsSAML.ts
@@ -1,14 +1,13 @@
+import { BaseUserSettings } from "@goauthentik/app/elements/user/sources/BaseUserSettings";
 import { AndNext, DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EVENT_REFRESH } from "@goauthentik/common/constants";
 import { MessageLevel } from "@goauthentik/common/messages";
 import "@goauthentik/elements/Spinner";
 import { showMessage } from "@goauthentik/elements/messages/MessageContainer";
-import { BaseUserSettings } from "@goauthentik/user/user-settings/BaseUserSettings";
 
 import { msg, str } from "@lit/localize";
 import { TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
 
 import { SourcesApi } from "@goauthentik/api";
 
@@ -57,13 +56,16 @@ export class SourceSettingsSAML extends BaseUserSettings {
                 ${msg("Disconnect")}
             </button>`;
         }
-        return html`<a
-            class="pf-c-button pf-m-primary"
-            href="${ifDefined(this.configureUrl)}${AndNext(
-                `/if/user/#/settings;${JSON.stringify({ page: "page-sources" })}`,
-            )}"
-        >
-            ${msg("Connect")}
-        </a>`;
+        if (this.configureUrl) {
+            return html`<a
+                class="pf-c-button pf-m-primary"
+                href="${this.configureUrl}${AndNext(
+                    `/if/user/#/settings;${JSON.stringify({ page: "page-sources" })}`,
+                )}"
+            >
+                ${msg("Connect")}
+            </a>`;
+        }
+        return html`${msg("-")}`;
     }
 }
diff --git a/web/src/user/user-settings/UserSettingsPage.ts b/web/src/user/user-settings/UserSettingsPage.ts
@@ -1,3 +1,4 @@
+import "@goauthentik/app/elements/user/sources/SourceSettings";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EVENT_REFRESH } from "@goauthentik/common/constants";
 import { AKElement, rootInterface } from "@goauthentik/elements/Base";
@@ -8,7 +9,6 @@ import { UserInterface } from "@goauthentik/user/UserInterface";
 import "@goauthentik/user/user-settings/details/UserPassword";
 import "@goauthentik/user/user-settings/details/UserSettingsFlowExecutor";
 import "@goauthentik/user/user-settings/mfa/MFADevicesPage";
-import "@goauthentik/user/user-settings/sources/SourceSettings";
 import "@goauthentik/user/user-settings/tokens/UserTokenList";
 
 import { localized, msg } from "@lit/localize";
@@ -156,9 +156,14 @@ export class UserSettingsPage extends AKElement {
                         class="pf-c-page__main-section pf-m-no-padding-mobile"
                     >
                         <div class="pf-c-card">
-                            <div class="pf-c-card__body">
-                                <ak-user-settings-source></ak-user-settings-source>
+                            <div class="pf-c-card__title">
+                                ${msg(
+                                    "Connect your user account to the services listed below, to allow you to login using the service instead of traditional credentials.",
+                                )}
                             </div>
+                            <ak-user-settings-source
+                                userId=${ifDefined(rootInterface<UserInterface>()?.me?.user.pk)}
+                            ></ak-user-settings-source>
                         </div>
                     </section>
                     <section

diff --git a/web/xliff/de.xlf b/web/xliff/de.xlf
@@ -6390,6 +6390,9 @@ Bindings to groups/users are checked against the user of the event.</source>
 </trans-unit>
 <trans-unit id="sbd065743a0c599e3">
   <source>Preview for user</source>
+</trans-unit>
+<trans-unit id="se16b4d412ad1aba9">
+  <source>Brand name</source>
 </trans-unit>
     </body>
   </file>

diff --git a/web/xliff/en.xlf b/web/xliff/en.xlf
@@ -6660,6 +6660,9 @@ Bindings to groups/users are checked against the user of the event.</source>
 </trans-unit>
 <trans-unit id="sbd065743a0c599e3">
   <source>Preview for user</source>
+</trans-unit>
+<trans-unit id="se16b4d412ad1aba9">
+  <source>Brand name</source>
 </trans-unit>
     </body>
   </file>

diff --git a/web/xliff/es.xlf b/web/xliff/es.xlf
@@ -6306,6 +6306,9 @@ Bindings to groups/users are checked against the user of the event.</source>
 </trans-unit>
 <trans-unit id="sbd065743a0c599e3">
   <source>Preview for user</source>
+</trans-unit>
+<trans-unit id="se16b4d412ad1aba9">
+  <source>Brand name</source>
 </trans-unit>
     </body>
   </file>