habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web/admin: show connected services on user view page, fix styling (#8416)

Browse Source 
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens L
2024-02-05 16:38:23 +01:00
committed by GitHub
parent 087d5aa7e7
commit f4b336a974
22 changed files with 178 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
web/src/admin/users/UserViewPage.ts
View File

@ -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>
`;
}

4
web/src/common/styles/authentik.css
View File

@ -150,3 +150,7 @@ html > form > input {
margin-top: 13rem;
}
}
.pf-c-data-list {
padding-inline-start: 0;
}

1
web/src/common/styles/theme-dark.css
View File

@ -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 {

0
web/src/user/user-settings/BaseUserSettings.ts → web/src/elements/user/sources/BaseUserSettings.ts
View File

70
web/src/user/user-settings/sources/SourceSettings.ts → web/src/elements/user/sources/SourceSettings.ts
View File

@ -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>`;
}
}

22
web/src/user/user-settings/sources/SourceSettingsOAuth.ts → web/src/elements/user/sources/SourceSettingsOAuth.ts
View File

@ -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("-")}`;
}
}

11
web/src/user/user-settings/sources/SourceSettingsPlex.ts → web/src/elements/user/sources/SourceSettingsPlex.ts
View File

@ -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("-")}`;
}
}

22
web/src/user/user-settings/sources/SourceSettingsSAML.ts → web/src/elements/user/sources/SourceSettingsSAML.ts
View File

@ -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("-")}`;
}
}

11
web/src/user/user-settings/UserSettingsPage.ts
View File

@ -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