web/user: fix user source settings not updating correctly after deletion
also optimise the amount of API requests sent Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> #3411
This commit is contained in:
Jens Langhammer
parent
d7e8ca1c8f
commit
54eeb7add6
|
|
@ -15,13 +15,16 @@ import AKGlobal from "@goauthentik/web/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";
|
||||
import { PaginatedUserSourceConnectionList, SourcesApi, UserSetting } from "@goauthentik/api";
|
||||
|
||||
@customElement("ak-user-settings-source")
|
||||
export class UserSourceSettingsPage extends LitElement {
|
||||
@property({ attribute: false })
|
||||
sourceSettings?: Promise<UserSetting[]>;
|
||||
|
||||
@property({ attribute: false })
|
||||
connections?: PaginatedUserSourceConnectionList;
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return [
|
||||
PFDataList,
|
||||
|
|
@ -55,15 +58,30 @@ export class UserSourceSettingsPage extends LitElement {
|
|||
|
||||
firstUpdated(): void {
|
||||
this.sourceSettings = new SourcesApi(DEFAULT_CONFIG).sourcesAllUserSettingsList();
|
||||
new SourcesApi(DEFAULT_CONFIG).sourcesUserConnectionsAllList().then((connections) => {
|
||||
this.connections = connections;
|
||||
});
|
||||
}
|
||||
|
||||
renderSourceSettings(source: UserSetting): TemplateResult {
|
||||
let connectionPk = -1;
|
||||
if (this.connections) {
|
||||
const connections = this.connections.results.filter(
|
||||
(con) => con.source.slug === source.objectUid,
|
||||
);
|
||||
if (connections.length > 0) {
|
||||
connectionPk = connections[0].pk;
|
||||
} else {
|
||||
connectionPk = 0;
|
||||
}
|
||||
}
|
||||
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}
|
||||
>
|
||||
</ak-user-settings-source-oauth>`;
|
||||
|
|
@ -72,6 +90,7 @@ export class UserSourceSettingsPage extends LitElement {
|
|||
class="pf-c-data-list__item-row"
|
||||
objectId=${source.objectUid}
|
||||
title=${source.title}
|
||||
connectionPk=${connectionPk}
|
||||
.configureUrl=${source.configureUrl}
|
||||
>
|
||||
</ak-user-settings-source-plex>`;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import { AndNext, DEFAULT_CONFIG } from "@goauthentik/web/api/Config";
|
||||
import { EVENT_REFRESH } from "@goauthentik/web/constants";
|
||||
import "@goauthentik/web/elements/Spinner";
|
||||
import { MessageLevel } from "@goauthentik/web/elements/messages/Message";
|
||||
import { showMessage } from "@goauthentik/web/elements/messages/MessageContainer";
|
||||
import { BaseUserSettings } from "@goauthentik/web/user/user-settings/BaseUserSettings";
|
||||
|
|
@ -8,7 +10,6 @@ import { t } from "@lingui/macro";
|
|||
import { TemplateResult, html } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
import { ifDefined } from "lit/directives/if-defined.js";
|
||||
import { until } from "lit/directives/until.js";
|
||||
|
||||
import { SourcesApi } from "@goauthentik/api";
|
||||
|
||||
|
|
@ -17,47 +18,53 @@ export class SourceSettingsOAuth extends BaseUserSettings {
|
|||
@property()
|
||||
title!: string;
|
||||
|
||||
@property({ type: Number })
|
||||
connectionPk = 0;
|
||||
|
||||
render(): TemplateResult {
|
||||
return html`${until(
|
||||
new SourcesApi(DEFAULT_CONFIG)
|
||||
.sourcesUserConnectionsOauthList({
|
||||
sourceSlug: this.objectId,
|
||||
})
|
||||
.then((connection) => {
|
||||
if (connection.results.length > 0) {
|
||||
return html` <button
|
||||
class="pf-c-button pf-m-danger"
|
||||
@click=${() => {
|
||||
return new SourcesApi(DEFAULT_CONFIG)
|
||||
.sourcesUserConnectionsOauthDestroy({
|
||||
id: connection.results[0].pk || 0,
|
||||
})
|
||||
.then(() => {
|
||||
showMessage({
|
||||
level: MessageLevel.info,
|
||||
message: t`Successfully disconnected source`,
|
||||
});
|
||||
})
|
||||
.catch((exc) => {
|
||||
showMessage({
|
||||
level: MessageLevel.error,
|
||||
message: t`Failed to disconnected source: ${exc}`,
|
||||
});
|
||||
});
|
||||
}}
|
||||
>
|
||||
${t`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" })}`,
|
||||
)}"
|
||||
>
|
||||
${t`Connect`}
|
||||
</a>`;
|
||||
}),
|
||||
)}`;
|
||||
if (this.connectionPk === -1) {
|
||||
return html`<ak-spinner></ak-spinner>`;
|
||||
}
|
||||
if (this.connectionPk > 0) {
|
||||
return html`<button
|
||||
class="pf-c-button pf-m-danger"
|
||||
@click=${() => {
|
||||
return new SourcesApi(DEFAULT_CONFIG)
|
||||
.sourcesUserConnectionsOauthDestroy({
|
||||
id: this.connectionPk,
|
||||
})
|
||||
.then(() => {
|
||||
showMessage({
|
||||
level: MessageLevel.info,
|
||||
message: t`Successfully disconnected source`,
|
||||
});
|
||||
})
|
||||
.catch((exc) => {
|
||||
showMessage({
|
||||
level: MessageLevel.error,
|
||||
message: t`Failed to disconnected source: ${exc}`,
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
this.parentElement?.dispatchEvent(
|
||||
new CustomEvent(EVENT_REFRESH, {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}),
|
||||
);
|
||||
});
|
||||
}}
|
||||
>
|
||||
${t`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" })}`,
|
||||
)}"
|
||||
>
|
||||
${t`Connect`}
|
||||
</a>`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { DEFAULT_CONFIG } from "@goauthentik/web/api/Config";
|
||||
import { PlexAPIClient, popupCenterScreen } from "@goauthentik/web/api/Plex";
|
||||
import { EVENT_REFRESH } from "@goauthentik/web/constants";
|
||||
import "@goauthentik/web/elements/Spinner";
|
||||
import { MessageLevel } from "@goauthentik/web/elements/messages/Message";
|
||||
import { showMessage } from "@goauthentik/web/elements/messages/MessageContainer";
|
||||
import { BaseUserSettings } from "@goauthentik/web/user/user-settings/BaseUserSettings";
|
||||
|
|
@ -9,7 +10,6 @@ import { t } from "@lingui/macro";
|
|||
|
||||
import { TemplateResult, html } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
import { until } from "lit/directives/until.js";
|
||||
|
||||
import { SourcesApi } from "@goauthentik/api";
|
||||
|
||||
|
|
@ -18,6 +18,9 @@ export class SourceSettingsPlex extends BaseUserSettings {
|
|||
@property()
|
||||
title!: string;
|
||||
|
||||
@property({ type: Number })
|
||||
connectionPk = 0;
|
||||
|
||||
async doPlex(): Promise<void> {
|
||||
const authInfo = await PlexAPIClient.getPin(this.configureUrl || "");
|
||||
const authWindow = popupCenterScreen(authInfo.authUrl, "plex auth", 550, 700);
|
||||
|
|
@ -39,41 +42,44 @@ export class SourceSettingsPlex extends BaseUserSettings {
|
|||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
return html`${until(
|
||||
new SourcesApi(DEFAULT_CONFIG)
|
||||
.sourcesUserConnectionsPlexList({
|
||||
sourceSlug: this.objectId,
|
||||
})
|
||||
.then((connection) => {
|
||||
if (connection.results.length > 0) {
|
||||
return html` <button
|
||||
class="pf-c-button pf-m-danger"
|
||||
@click=${() => {
|
||||
return new SourcesApi(DEFAULT_CONFIG)
|
||||
.sourcesUserConnectionsPlexDestroy({
|
||||
id: connection.results[0].pk || 0,
|
||||
})
|
||||
.then(() => {
|
||||
showMessage({
|
||||
level: MessageLevel.info,
|
||||
message: t`Successfully disconnected source`,
|
||||
});
|
||||
})
|
||||
.catch((exc) => {
|
||||
showMessage({
|
||||
level: MessageLevel.error,
|
||||
message: t`Failed to disconnected source: ${exc}`,
|
||||
});
|
||||
});
|
||||
}}
|
||||
>
|
||||
${t`Disconnect`}
|
||||
</button>`;
|
||||
}
|
||||
return html` <button @click=${this.doPlex} class="pf-c-button pf-m-primary">
|
||||
${t`Connect`}
|
||||
</button>`;
|
||||
}),
|
||||
)}`;
|
||||
if (this.connectionPk === -1) {
|
||||
return html`<ak-spinner></ak-spinner>`;
|
||||
}
|
||||
if (this.connectionPk > 0) {
|
||||
return html`<button
|
||||
class="pf-c-button pf-m-danger"
|
||||
@click=${() => {
|
||||
return new SourcesApi(DEFAULT_CONFIG)
|
||||
.sourcesUserConnectionsPlexDestroy({
|
||||
id: this.connectionPk,
|
||||
})
|
||||
.then(() => {
|
||||
showMessage({
|
||||
level: MessageLevel.info,
|
||||
message: t`Successfully disconnected source`,
|
||||
});
|
||||
})
|
||||
.catch((exc) => {
|
||||
showMessage({
|
||||
level: MessageLevel.error,
|
||||
message: t`Failed to disconnected source: ${exc}`,
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
this.parentElement?.dispatchEvent(
|
||||
new CustomEvent(EVENT_REFRESH, {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}),
|
||||
);
|
||||
});
|
||||
}}
|
||||
>
|
||||
${t`Disconnect`}
|
||||
</button>`;
|
||||
}
|
||||
return html`<button @click=${this.doPlex} class="pf-c-button pf-m-primary">
|
||||
${t`Connect`}
|
||||
</button>`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue