web/user: rework user source connection UI
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
@ -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];
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,22 +80,36 @@ export class UserSourceSettingsPage extends LitElement {
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
return html`<div class="pf-l-grid pf-m-gutter">
|
||||
${until(
|
||||
this.sourceSettings?.then((source) => {
|
||||
if (source.length < 1) {
|
||||
return html`<ak-empty-state
|
||||
header=${t`No services available.`}
|
||||
></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">
|
||||
${this.renderSourceSettings(stage)}
|
||||
</div>`;
|
||||
});
|
||||
}),
|
||||
html`<ak-empty-state ?loading="${true}" header=${t`Loading`}> </ak-empty-state>`,
|
||||
)}
|
||||
</div>`;
|
||||
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) {
|
||||
return html`<ak-empty-state
|
||||
header=${t`No services available.`}
|
||||
></ak-empty-state>`;
|
||||
}
|
||||
return source.map((stage) => {
|
||||
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>
|
||||
</li>`;
|
||||
});
|
||||
}),
|
||||
html`<ak-empty-state ?loading="${true}" header=${t`Loading`}>
|
||||
</ak-empty-state>`,
|
||||
)}
|
||||
</ul>`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,29 +23,27 @@ export class SourceSettingsOAuth extends BaseUserSettings {
|
||||
})
|
||||
.then((connection) => {
|
||||
if (connection.results.length > 0) {
|
||||
return html`<p>${t`Connected.`}</p>
|
||||
<button
|
||||
class="pf-c-button pf-m-danger"
|
||||
@click=${() => {
|
||||
return new SourcesApi(
|
||||
DEFAULT_CONFIG,
|
||||
).sourcesUserConnectionsOauthDestroy({
|
||||
id: connection.results[0].pk || 0,
|
||||
});
|
||||
}}
|
||||
>
|
||||
${t`Disconnect`}
|
||||
</button>`;
|
||||
}
|
||||
return html`<p>${t`Not connected.`}</p>
|
||||
<a
|
||||
class="pf-c-button pf-m-primary"
|
||||
href="${ifDefined(this.configureUrl)}${AndNext(
|
||||
"/if/user/#/settings;page-sources",
|
||||
)}"
|
||||
return html` <button
|
||||
class="pf-c-button pf-m-danger"
|
||||
@click=${() => {
|
||||
return new SourcesApi(
|
||||
DEFAULT_CONFIG,
|
||||
).sourcesUserConnectionsOauthDestroy({
|
||||
id: connection.results[0].pk || 0,
|
||||
});
|
||||
}}
|
||||
>
|
||||
${t`Connect`}
|
||||
</a>`;
|
||||
${t`Disconnect`}
|
||||
</button>`;
|
||||
}
|
||||
return html` <a
|
||||
class="pf-c-button pf-m-primary"
|
||||
href="${ifDefined(this.configureUrl)}${AndNext(
|
||||
"/if/user/#/settings;page-sources",
|
||||
)}"
|
||||
>
|
||||
${t`Connect`}
|
||||
</a>`;
|
||||
}),
|
||||
)}`;
|
||||
}
|
||||
|
||||
@ -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,24 +44,22 @@ export class SourceSettingsPlex extends BaseUserSettings {
|
||||
})
|
||||
.then((connection) => {
|
||||
if (connection.results.length > 0) {
|
||||
return html`<p>${t`Connected.`}</p>
|
||||
<button
|
||||
class="pf-c-button pf-m-danger"
|
||||
@click=${() => {
|
||||
return new SourcesApi(
|
||||
DEFAULT_CONFIG,
|
||||
).sourcesUserConnectionsPlexDestroy({
|
||||
id: connection.results[0].pk || 0,
|
||||
});
|
||||
}}
|
||||
>
|
||||
${t`Disconnect`}
|
||||
</button>`;
|
||||
}
|
||||
return html`<p>${t`Not connected.`}</p>
|
||||
<button @click=${this.doPlex} class="pf-c-button pf-m-primary">
|
||||
${t`Connect`}
|
||||
return html` <button
|
||||
class="pf-c-button pf-m-danger"
|
||||
@click=${() => {
|
||||
return new SourcesApi(
|
||||
DEFAULT_CONFIG,
|
||||
).sourcesUserConnectionsPlexDestroy({
|
||||
id: connection.results[0].pk || 0,
|
||||
});
|
||||
}}
|
||||
>
|
||||
${t`Disconnect`}
|
||||
</button>`;
|
||||
}
|
||||
return html` <button @click=${this.doPlex} class="pf-c-button pf-m-primary">
|
||||
${t`Connect`}
|
||||
</button>`;
|
||||
}),
|
||||
)}`;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user