trustchain-oc1-orchestral/authentik
Archived
10
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

web/admin: make object view pages more consistent

Browse source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-11-26 19:40:40 +01:00
parent d1e2c018a3
commit 629a0e1a4d
6 changed files with 587 additions and 646 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

340
web/src/pages/providers/proxy/ProxyProviderViewPage.ts
View file

@ -113,183 +113,177 @@ export class ProxyProviderViewPage extends LitElement {
</div>`
: html``}
<div class="pf-l-grid pf-m-gutter">
<div class="pf-l-grid__item pf-m-12-col">
<div class="pf-c-card">
<div class="pf-c-card__body">
<dl class="pf-c-description-list pf-m-3-col-on-lg">
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text">${t`Name`}</span>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${this.provider.name}
</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Assigned to application`}</span
>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
<ak-provider-related-application
.provider=${this.provider}
></ak-provider-related-application>
</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Internal Host`}</span
>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${this.provider.internalHost}
</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`External Host`}</span
>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${this.provider.externalHost}
</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Basic-Auth`}</span
>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${this.provider.basicAuthEnabled
? html`<span class="pf-c-button__icon pf-m-start">
<i
class="fas fa-check-circle"
aria-hidden="true"
></i
>&nbsp; </span
>${t`Yes`}`
: html`<span class="pf-c-button__icon pf-m-start">
<i
class="fas fa-times-circle"
aria-hidden="true"
></i
>&nbsp; </span
>${t`No`}`}
</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text">${t`Mode`}</span>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${ModeToLabel(this.provider.mode || ProxyMode.Proxy)}
</div>
</dd>
</div>
</dl>
</div>
<div class="pf-c-card__footer">
<ak-forms-modal>
<span slot="submit"> ${t`Update`} </span>
<span slot="header"> ${t`Update Proxy Provider`} </span>
<ak-provider-proxy-form
slot="form"
.instancePk=${this.provider.pk || 0}
>
</ak-provider-proxy-form>
<button slot="trigger" class="pf-c-button pf-m-primary">
${t`Edit`}
</button>
</ak-forms-modal>
</div>
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__body">
<dl class="pf-c-description-list pf-m-3-col-on-lg">
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text">${t`Name`}</span>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${this.provider.name}
</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Assigned to application`}</span
>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
<ak-provider-related-application
.provider=${this.provider}
></ak-provider-related-application>
</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Internal Host`}</span
>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${this.provider.internalHost}
</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`External Host`}</span
>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${this.provider.externalHost}
</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Basic-Auth`}</span
>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${this.provider.basicAuthEnabled
? html`<span class="pf-c-button__icon pf-m-start">
<i
class="fas fa-check-circle"
aria-hidden="true"
></i
>&nbsp; </span
>${t`Yes`}`
: html`<span class="pf-c-button__icon pf-m-start">
<i
class="fas fa-times-circle"
aria-hidden="true"
></i
>&nbsp; </span
>${t`No`}`}
</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text">${t`Mode`}</span>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${ModeToLabel(this.provider.mode || ProxyMode.Proxy)}
</div>
</dd>
</div>
</dl>
</div>
<div class="pf-c-card__footer">
<ak-forms-modal>
<span slot="submit"> ${t`Update`} </span>
<span slot="header"> ${t`Update Proxy Provider`} </span>
<ak-provider-proxy-form
slot="form"
.instancePk=${this.provider.pk || 0}
>
</ak-provider-proxy-form>
<button slot="trigger" class="pf-c-button pf-m-primary">
${t`Edit`}
</button>
</ak-forms-modal>
</div>
</div>
<div class="pf-l-grid__item pf-m-12-col">
<div class="pf-c-card">
<div class="pf-c-card__title">${t`Protocol Settings`}</div>
<div class="pf-c-card__body">
<form class="pf-c-form">
<div class="pf-c-form__group">
<label class="pf-c-form__label">
<span class="pf-c-form__label-text"
>${t`Allowed Redirect URIs`}</span
>
</label>
<input
class="pf-c-form-control"
readonly
type="text"
value=${this.provider.redirectUris}
/>
</div>
</form>
</div>
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__title">${t`Protocol Settings`}</div>
<div class="pf-c-card__body">
<form class="pf-c-form">
<div class="pf-c-form__group">
<label class="pf-c-form__label">
<span class="pf-c-form__label-text"
>${t`Allowed Redirect URIs`}</span
>
</label>
<input
class="pf-c-form-control"
readonly
type="text"
value=${this.provider.redirectUris}
/>
</div>
</form>
</div>
</div>
<div class="pf-l-grid__item pf-m-12-col">
<div class="pf-c-card">
<div class="pf-c-card__title">${t`Setup`}</div>
<div class="pf-c-card__body">
<ak-tabs pageIdentifier="proxy-setup">
<section
slot="page-nginx-ingress"
data-tab-title="${t`Nginx (Ingress)`}"
class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
>
${this.renderConfigTemplate(MDNginxIngress.html)}
</section>
<section
slot="page-nginx-proxy-manager"
data-tab-title="${t`Nginx (Proxy Manager)`}"
class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
>
${this.renderConfigTemplate(MDNginxPM.html)}
</section>
<section
slot="page-nginx-standalone"
data-tab-title="${t`Nginx (standalone)`}"
class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
>
${this.renderConfigTemplate(MDNginxStandalone.html)}
</section>
<section
slot="page-traefik-ingress"
data-tab-title="${t`Traefik (Ingress)`}"
class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
>
${this.renderConfigTemplate(MDTraefikIngres.html)}
</section>
<section
slot="page-traefik-compose"
data-tab-title="${t`Traefik (Compose)`}"
class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
>
${this.renderConfigTemplate(MDTraefikCompose.html)}
</section>
<section
slot="page-traefik-standalone"
data-tab-title="${t`Traefik (Standalone)`}"
class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
>
${this.renderConfigTemplate(MDTraefikStandalone.html)}
</section>
</ak-tabs>
</div>
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__title">${t`Setup`}</div>
<div class="pf-c-card__body">
<ak-tabs pageIdentifier="proxy-setup">
<section
slot="page-nginx-ingress"
data-tab-title="${t`Nginx (Ingress)`}"
class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
>
${this.renderConfigTemplate(MDNginxIngress.html)}
</section>
<section
slot="page-nginx-proxy-manager"
data-tab-title="${t`Nginx (Proxy Manager)`}"
class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
>
${this.renderConfigTemplate(MDNginxPM.html)}
</section>
<section
slot="page-nginx-standalone"
data-tab-title="${t`Nginx (standalone)`}"
class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
>
${this.renderConfigTemplate(MDNginxStandalone.html)}
</section>
<section
slot="page-traefik-ingress"
data-tab-title="${t`Traefik (Ingress)`}"
class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
>
${this.renderConfigTemplate(MDTraefikIngres.html)}
</section>
<section
slot="page-traefik-compose"
data-tab-title="${t`Traefik (Compose)`}"
class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
>
${this.renderConfigTemplate(MDTraefikCompose.html)}
</section>
<section
slot="page-traefik-standalone"
data-tab-title="${t`Traefik (Standalone)`}"
class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
>
${this.renderConfigTemplate(MDTraefikStandalone.html)}
</section>
</ak-tabs>
</div>
</div>
</div>`;

4
web/src/pages/providers/saml/SAMLProviderViewPage.ts
View file

@ -107,7 +107,7 @@ export class SAMLProviderViewPage extends LitElement {
</div>`
}
<div class="pf-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-12-col-on-xl">
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__body">
<dl class="pf-c-description-list pf-m-3-col-on-lg">
<div class="pf-c-description-list__group">
@ -178,7 +178,7 @@ export class SAMLProviderViewPage extends LitElement {
</ak-forms-modal>
</div>
</div>
<div class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-12-col-on-xl">
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__title">
${t`Related objects`}
</div>

271
web/src/pages/sources/ldap/LDAPSourceViewPage.ts
View file

@ -11,11 +11,8 @@ import PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
import PFList from "@patternfly/patternfly/components/List/list.css";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
import PFFlex from "@patternfly/patternfly/utilities/Flex/flex.css";
import PFSizing from "@patternfly/patternfly/utilities/Sizing/sizing.css";
import { LDAPSource, SourcesApi, StatusEnum } from "@goauthentik/api";
@ -50,13 +47,10 @@ export class LDAPSourceViewPage extends LitElement {
PFBase,
PFPage,
PFButton,
PFFlex,
PFDisplay,
PFGallery,
PFGrid,
PFContent,
PFCard,
PFDescriptionList,
PFSizing,
PFList,
AKGlobal,
];
@ -80,65 +74,120 @@ export class LDAPSourceViewPage extends LitElement {
data-tab-title="${t`Overview`}"
class="pf-c-page__main-section pf-m-no-padding-mobile"
>
<div class="pf-u-display-flex pf-u-justify-content-center">
<div class="pf-u-w-75">
<div class="pf-c-card">
<div class="pf-c-card__body">
<dl class="pf-c-description-list pf-m-2-col-on-lg">
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Name`}</span
>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${this.source.name}
</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Server URI`}</span
>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${this.source.serverUri}
</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Base DN`}</span
>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
<ul>
<li>${this.source.baseDn}</li>
</ul>
</div>
</dd>
</div>
</dl>
</div>
<div class="pf-c-card__footer">
<ak-forms-modal>
<span slot="submit"> ${t`Update`} </span>
<span slot="header"> ${t`Update LDAP Source`} </span>
<ak-source-ldap-form
slot="form"
.instancePk=${this.source.slug}
>
</ak-source-ldap-form>
<button slot="trigger" class="pf-c-button pf-m-primary">
${t`Edit`}
</button>
</ak-forms-modal>
</div>
<div class="pf-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__body">
<dl class="pf-c-description-list pf-m-2-col-on-lg">
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text">${t`Name`}</span>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${this.source.name}
</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Server URI`}</span
>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${this.source.serverUri}
</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Base DN`}</span
>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
<ul>
<li>${this.source.baseDn}</li>
</ul>
</div>
</dd>
</div>
</dl>
</div>
<div class="pf-c-card__footer">
<ak-forms-modal>
<span slot="submit"> ${t`Update`} </span>
<span slot="header"> ${t`Update LDAP Source`} </span>
<ak-source-ldap-form slot="form" .instancePk=${this.source.slug}>
</ak-source-ldap-form>
<button slot="trigger" class="pf-c-button pf-m-primary">
${t`Edit`}
</button>
</ak-forms-modal>
</div>
</div>
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__title">
<p>${t`Sync status`}</p>
</div>
<div class="pf-c-card__body">
${until(
new SourcesApi(DEFAULT_CONFIG)
.sourcesLdapSyncStatusList({
slug: this.source.slug,
})
.then((tasks) => {
if (tasks.length < 1) {
return html`<p>${t`Not synced yet.`}</p>`;
}
return html`<ul class="pf-c-list">
${tasks.map((task) => {
let header = "";
if (task.status === StatusEnum.Warning) {
header = t`Task finished with warnings`;
} else if (task.status === StatusEnum.Error) {
header = t`Task finished with errors`;
} else {
header = t`Last sync: ${task.taskFinishTimestamp.toLocaleString()}`;
}
return html`<li>
<p>${task.taskName}</p>
<ul class="pf-c-list">
<li>${header}</li>
${task.messages.map((m) => {
return html`<li>${m}</li>`;
})}
</ul>
</li> `;
})}
</ul>`;
}),
"loading",
)}
</div>
<div class="pf-c-card__footer">
<ak-action-button
class="pf-m-primary"
.apiRequest=${() => {
return new SourcesApi(DEFAULT_CONFIG)
.sourcesLdapPartialUpdate({
slug: this.source?.slug || "",
patchedLDAPSourceRequest: this.source,
})
.then(() => {
this.dispatchEvent(
new CustomEvent(EVENT_REFRESH, {
bubbles: true,
composed: true,
}),
);
});
}}
>
${t`Run sync again`}
</ak-action-button>
</div>
</div>
</div>
@ -148,85 +197,15 @@ export class LDAPSourceViewPage extends LitElement {
data-tab-title="${t`Changelog`}"
class="pf-c-page__main-section pf-m-no-padding-mobile"
>
<div class="pf-c-card">
<div class="pf-c-card__body">
<ak-object-changelog
targetModelPk=${this.source.pk || ""}
targetModelApp="authentik_sources_ldap"
targetModelName="ldapsource"
>
</ak-object-changelog>
</div>
</div>
</section>
<section
slot="page-sync"
data-tab-title="${t`Sync`}"
class="pf-c-page__main-section pf-m-no-padding-mobile"
>
<div class="pf-u-display-flex pf-u-justify-content-center">
<div class="pf-u-w-75">
<div class="pf-c-card">
<div class="pf-c-card__title">
<p>${t`Sync status`}</p>
</div>
<div class="pf-c-card__body">
${until(
new SourcesApi(DEFAULT_CONFIG)
.sourcesLdapSyncStatusList({
slug: this.source.slug,
})
.then((tasks) => {
if (tasks.length < 1) {
return html`<p>${t`Not synced yet.`}</p>`;
}
return html`<ul class="pf-c-list">
${tasks.map((task) => {
let header = "";
if (task.status === StatusEnum.Warning) {
header = t`Task finished with warnings`;
} else if (task.status === StatusEnum.Error) {
header = t`Task finished with errors`;
} else {
header = t`Last sync: ${task.taskFinishTimestamp.toLocaleString()}`;
}
return html`<li>
<p>${task.taskName}</p>
<ul class="pf-c-list">
<li>${header}</li>
${task.messages.map((m) => {
return html`<li>${m}</li>`;
})}
</ul>
</li> `;
})}
</ul>`;
}),
"loading",
)}
</div>
<div class="pf-c-card__footer">
<ak-action-button
class="pf-m-primary"
.apiRequest=${() => {
return new SourcesApi(DEFAULT_CONFIG)
.sourcesLdapPartialUpdate({
slug: this.source?.slug || "",
patchedLDAPSourceRequest: this.source,
})
.then(() => {
this.dispatchEvent(
new CustomEvent(EVENT_REFRESH, {
bubbles: true,
composed: true,
}),
);
});
}}
>
${t`Run sync again`}
</ak-action-button>
</div>
<div class="pf-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__body">
<ak-object-changelog
targetModelPk=${this.source.pk || ""}
targetModelApp="authentik_sources_ldap"
targetModelName="ldapsource"
>
</ak-object-changelog>
</div>
</div>
</div>

264
web/src/pages/sources/oauth/OAuthSourceViewPage.ts
View file

@ -9,13 +9,10 @@ import PFCard from "@patternfly/patternfly/components/Card/card.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
import PFFlex from "@patternfly/patternfly/utilities/Flex/flex.css";
import PFSizing from "@patternfly/patternfly/utilities/Sizing/sizing.css";
import { OAuthSource, SourcesApi } from "@goauthentik/api";
import { OAuthSource, ProviderTypeEnum, SourcesApi } from "@goauthentik/api";
import { DEFAULT_CONFIG } from "../../../api/Config";
import { EVENT_REFRESH } from "../../../constants";
@ -27,6 +24,30 @@ import "../../../elements/forms/ModalForm";
import "../../policies/BoundPoliciesList";
import "./OAuthSourceForm";
export function ProviderToLabel(provider?: ProviderTypeEnum): string {
if (!provider) return "";
switch (provider) {
case ProviderTypeEnum.Apple:
return "Apple";
case ProviderTypeEnum.Azuread:
return "Azure Active Directory";
case ProviderTypeEnum.Discord:
return "Discord";
case ProviderTypeEnum.Facebook:
return "Facebook";
case ProviderTypeEnum.Github:
return "GitHub";
case ProviderTypeEnum.Google:
return "Google";
case ProviderTypeEnum.Openidconnect:
return t`Generic OpenID Connect`;
case ProviderTypeEnum.Reddit:
return "Reddit";
case ProviderTypeEnum.Twitter:
return "Twitter";
}
}
@customElement("ak-source-oauth-view")
export class OAuthSourceViewPage extends LitElement {
@property({ type: String })
@ -44,19 +65,7 @@ export class OAuthSourceViewPage extends LitElement {
source?: OAuthSource;
static get styles(): CSSResult[] {
return [
PFBase,
PFPage,
PFButton,
PFFlex,
PFDisplay,
PFGallery,
PFContent,
PFCard,
PFDescriptionList,
PFSizing,
AKGlobal,
];
return [PFBase, PFPage, PFButton, PFGrid, PFContent, PFCard, PFDescriptionList, AKGlobal];
}
constructor() {
@ -77,101 +86,94 @@ export class OAuthSourceViewPage extends LitElement {
data-tab-title="${t`Overview`}"
class="pf-c-page__main-section pf-m-no-padding-mobile"
>
<div class="pf-u-display-flex pf-u-justify-content-center">
<div class="pf-u-w-75">
<div class="pf-c-card">
<div class="pf-c-card__body">
<dl class="pf-c-description-list pf-m-2-col-on-lg">
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Name`}</span
>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${this.source.name}
</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Provider Type`}</span
>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${this.source.providerType}
</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Callback URL`}</span
>
</dt>
<dd class="pf-c-description-list__description">
<code class="pf-c-description-list__text"
>${this.source.callbackUrl}</code
>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Access Key`}</span
>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${this.source.consumerKey}
</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Authorization URL`}</span
>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${this.source.type?.authorizationUrl ||
this.source.authorizationUrl}
</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Token URL`}</span
>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${this.source.type?.accessTokenUrl ||
this.source.accessTokenUrl}
</div>
</dd>
</div>
</dl>
</div>
<div class="pf-c-card__footer">
<ak-forms-modal>
<span slot="submit"> ${t`Update`} </span>
<span slot="header"> ${t`Update OAuth Source`} </span>
<ak-source-oauth-form
slot="form"
.instancePk=${this.source.slug}
>
</ak-source-oauth-form>
<button slot="trigger" class="pf-c-button pf-m-primary">
${t`Edit`}
</button>
</ak-forms-modal>
</div>
<div class="pf-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__body">
<dl class="pf-c-description-list pf-m-2-col-on-lg">
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text">${t`Name`}</span>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${this.source.name}
</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Provider Type`}</span
>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${ProviderToLabel(this.source.providerType)}
</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Callback URL`}</span
>
</dt>
<dd class="pf-c-description-list__description">
<code class="pf-c-description-list__text"
>${this.source.callbackUrl}</code
>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Access Key`}</span
>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${this.source.consumerKey}
</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Authorization URL`}</span
>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${this.source.type?.authorizationUrl ||
this.source.authorizationUrl}
</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Token URL`}</span
>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${this.source.type?.accessTokenUrl ||
this.source.accessTokenUrl}
</div>
</dd>
</div>
</dl>
</div>
<div class="pf-c-card__footer">
<ak-forms-modal>
<span slot="submit"> ${t`Update`} </span>
<span slot="header"> ${t`Update OAuth Source`} </span>
<ak-source-oauth-form slot="form" .instancePk=${this.source.slug}>
</ak-source-oauth-form>
<button slot="trigger" class="pf-c-button pf-m-primary">
${t`Edit`}
</button>
</ak-forms-modal>
</div>
</div>
</div>
@ -181,14 +183,16 @@ export class OAuthSourceViewPage extends LitElement {
data-tab-title="${t`Changelog`}"
class="pf-c-page__main-section pf-m-no-padding-mobile"
>
<div class="pf-c-card">
<div class="pf-c-card__body">
<ak-object-changelog
targetModelPk=${this.source.pk || ""}
targetModelApp="authentik_sources_oauth"
targetModelName="oauthsource"
>
</ak-object-changelog>
<div class="pf-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__body">
<ak-object-changelog
targetModelPk=${this.source.pk || ""}
targetModelApp="authentik_sources_oauth"
targetModelName="oauthsource"
>
</ak-object-changelog>
</div>
</div>
</div>
</section>
@ -197,14 +201,16 @@ export class OAuthSourceViewPage extends LitElement {
data-tab-title="${t`Policy Bindings`}"
class="pf-c-page__main-section pf-m-no-padding-mobile"
>
<div class="pf-c-card">
<div class="pf-c-card__title">
${t`These bindings control which users can access this source.
You can only use policies here as access is checked before the user is authenticated.`}
</div>
<div class="pf-c-card__body">
<ak-bound-policies-list .target=${this.source.pk} ?policyOnly=${true}>
</ak-bound-policies-list>
<div class="pf-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__title">
${t`These bindings control which users can access this source.
You can only use policies here as access is checked before the user is authenticated.`}
</div>
<div class="pf-c-card__body">
<ak-bound-policies-list .target=${this.source.pk} ?policyOnly=${true}>
</ak-bound-policies-list>
</div>
</div>
</div>
</div>

112
web/src/pages/sources/plex/PlexSourceViewPage.ts
View file

@ -9,11 +9,8 @@ import PFCard from "@patternfly/patternfly/components/Card/card.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
import PFFlex from "@patternfly/patternfly/utilities/Flex/flex.css";
import PFSizing from "@patternfly/patternfly/utilities/Sizing/sizing.css";
import { PlexSource, SourcesApi } from "@goauthentik/api";
@ -44,19 +41,7 @@ export class PlexSourceViewPage extends LitElement {
source?: PlexSource;
static get styles(): CSSResult[] {
return [
PFBase,
PFPage,
PFButton,
PFFlex,
PFDisplay,
PFGallery,
PFContent,
PFCard,
PFDescriptionList,
PFSizing,
AKGlobal,
];
return [PFBase, PFPage, PFButton, PFGrid, PFContent, PFCard, PFDescriptionList, AKGlobal];
}
constructor() {
@ -77,39 +62,32 @@ export class PlexSourceViewPage extends LitElement {
data-tab-title="${t`Overview`}"
class="pf-c-page__main-section pf-m-no-padding-mobile"
>
<div class="pf-u-display-flex pf-u-justify-content-center">
<div class="pf-u-w-75">
<div class="pf-c-card">
<div class="pf-c-card__body">
<dl class="pf-c-description-list pf-m-2-col-on-lg">
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Name`}</span
>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${this.source.name}
</div>
</dd>
</div>
</dl>
</div>
<div class="pf-c-card__footer">
<ak-forms-modal>
<span slot="submit"> ${t`Update`} </span>
<span slot="header"> ${t`Update Plex Source`} </span>
<ak-source-plex-form
slot="form"
.instancePk=${this.source.slug}
>
</ak-source-plex-form>
<button slot="trigger" class="pf-c-button pf-m-primary">
${t`Edit`}
</button>
</ak-forms-modal>
</div>
<div class="pf-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__body">
<dl class="pf-c-description-list pf-m-2-col-on-lg">
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text">${t`Name`}</span>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${this.source.name}
</div>
</dd>
</div>
</dl>
</div>
<div class="pf-c-card__footer">
<ak-forms-modal>
<span slot="submit"> ${t`Update`} </span>
<span slot="header"> ${t`Update Plex Source`} </span>
<ak-source-plex-form slot="form" .instancePk=${this.source.slug}>
</ak-source-plex-form>
<button slot="trigger" class="pf-c-button pf-m-primary">
${t`Edit`}
</button>
</ak-forms-modal>
</div>
</div>
</div>
@ -119,14 +97,16 @@ export class PlexSourceViewPage extends LitElement {
data-tab-title="${t`Changelog`}"
class="pf-c-page__main-section pf-m-no-padding-mobile"
>
<div class="pf-c-card">
<div class="pf-c-card__body">
<ak-object-changelog
targetModelPk=${this.source.pk || ""}
targetModelApp="authentik_sources_plex"
targetModelName="plexsource"
>
</ak-object-changelog>
<div class="pf-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__body">
<ak-object-changelog
targetModelPk=${this.source.pk || ""}
targetModelApp="authentik_sources_plex"
targetModelName="plexsource"
>
</ak-object-changelog>
</div>
</div>
</div>
</section>
@ -135,14 +115,16 @@ export class PlexSourceViewPage extends LitElement {
data-tab-title="${t`Policy Bindings`}"
class="pf-c-page__main-section pf-m-no-padding-mobile"
>
<div class="pf-c-card">
<div class="pf-c-card__title">
${t`These bindings control which users can access this source.
<div class="pf-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__title">
${t`These bindings control which users can access this source.
You can only use policies here as access is checked before the user is authenticated.`}
</div>
<div class="pf-c-card__body">
<ak-bound-policies-list .target=${this.source.pk} ?policyOnly=${true}>
</ak-bound-policies-list>
</div>
<div class="pf-c-card__body">
<ak-bound-policies-list .target=${this.source.pk} ?policyOnly=${true}>
</ak-bound-policies-list>
</div>
</div>
</div>
</div>

242
web/src/pages/sources/saml/SAMLSourceViewPage.ts
View file

@ -11,11 +11,8 @@ import PFCard from "@patternfly/patternfly/components/Card/card.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
import PFFlex from "@patternfly/patternfly/utilities/Flex/flex.css";
import PFSizing from "@patternfly/patternfly/utilities/Sizing/sizing.css";
import { SAMLSource, SourcesApi } from "@goauthentik/api";
@ -46,19 +43,7 @@ export class SAMLSourceViewPage extends LitElement {
source?: SAMLSource;
static get styles(): CSSResult[] {
return [
PFBase,
PFPage,
PFFlex,
PFButton,
PFDisplay,
PFGallery,
PFContent,
PFCard,
PFDescriptionList,
PFSizing,
AKGlobal,
];
return [PFBase, PFPage, PFGrid, PFButton, PFContent, PFCard, PFDescriptionList, AKGlobal];
}
constructor() {
@ -79,75 +64,68 @@ export class SAMLSourceViewPage extends LitElement {
data-tab-title="${t`Overview`}"
class="pf-c-page__main-section pf-m-no-padding-mobile"
>
<div class="pf-u-display-flex pf-u-justify-content-center">
<div class="pf-u-w-75">
<div class="pf-c-card">
<div class="pf-c-card__body">
<dl class="pf-c-description-list pf-m-3-col-on-lg">
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Name`}</span
>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${this.source.name}
</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`SSO URL`}</span
>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${this.source.ssoUrl}
</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`SLO URL`}</span
>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${this.source.sloUrl}
</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Issuer`}</span
>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${this.source.issuer}
</div>
</dd>
</div>
</dl>
</div>
<div class="pf-c-card__footer">
<ak-forms-modal>
<span slot="submit"> ${t`Update`} </span>
<span slot="header"> ${t`Update SAML Source`} </span>
<ak-source-saml-form
slot="form"
.instancePk=${this.source.slug}
>
</ak-source-saml-form>
<button slot="trigger" class="pf-c-button pf-m-primary">
${t`Edit`}
</button>
</ak-forms-modal>
</div>
<div class="pf-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__body">
<dl class="pf-c-description-list pf-m-3-col-on-lg">
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text">${t`Name`}</span>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${this.source.name}
</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`SSO URL`}</span
>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${this.source.ssoUrl}
</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`SLO URL`}</span
>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${this.source.sloUrl}
</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Issuer`}</span
>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${this.source.issuer}
</div>
</dd>
</div>
</dl>
</div>
<div class="pf-c-card__footer">
<ak-forms-modal>
<span slot="submit"> ${t`Update`} </span>
<span slot="header"> ${t`Update SAML Source`} </span>
<ak-source-saml-form slot="form" .instancePk=${this.source.slug}>
</ak-source-saml-form>
<button slot="trigger" class="pf-c-button pf-m-primary">
${t`Edit`}
</button>
</ak-forms-modal>
</div>
</div>
</div>
@ -157,14 +135,16 @@ export class SAMLSourceViewPage extends LitElement {
data-tab-title="${t`Changelog`}"
class="pf-c-page__main-section pf-m-no-padding-mobile"
>
<div class="pf-c-card">
<div class="pf-c-card__body">
<ak-object-changelog
targetModelPk=${this.source.pk || ""}
targetModelApp="authentik_sources_saml"
targetModelName="samlsource"
>
</ak-object-changelog>
<div class="pf-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__body">
<ak-object-changelog
targetModelPk=${this.source.pk || ""}
targetModelApp="authentik_sources_saml"
targetModelName="samlsource"
>
</ak-object-changelog>
</div>
</div>
</div>
</section>
@ -173,36 +153,34 @@ export class SAMLSourceViewPage extends LitElement {
data-tab-title="${t`Metadata`}"
class="pf-c-page__main-section pf-m-no-padding-mobile"
>
<div class="pf-u-display-flex pf-u-justify-content-center">
<div class="pf-u-w-75">
<div class="pf-c-card">
${until(
new SourcesApi(DEFAULT_CONFIG)
.sourcesSamlMetadataRetrieve({
slug: this.source.slug,
})
.then((m) => {
return html`
<div class="pf-c-card__body">
<ak-codemirror
mode="xml"
?readOnly=${true}
value="${ifDefined(m.metadata)}"
></ak-codemirror>
</div>
<div class="pf-c-card__footer">
<a
class="pf-c-button pf-m-primary"
target="_blank"
href=${ifDefined(m.downloadUrl)}
>
${t`Download`}
</a>
</div>
`;
}),
)}
</div>
<div class="pf-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
${until(
new SourcesApi(DEFAULT_CONFIG)
.sourcesSamlMetadataRetrieve({
slug: this.source.slug,
})
.then((m) => {
return html`
<div class="pf-c-card__body">
<ak-codemirror
mode="xml"
?readOnly=${true}
value="${ifDefined(m.metadata)}"
></ak-codemirror>
</div>
<div class="pf-c-card__footer">
<a
class="pf-c-button pf-m-primary"
target="_blank"
href=${ifDefined(m.downloadUrl)}
>
${t`Download`}
</a>
</div>
`;
}),
)}
</div>
</div>
</section>
@ -211,14 +189,16 @@ export class SAMLSourceViewPage extends LitElement {
data-tab-title="${t`Policy Bindings`}"
class="pf-c-page__main-section pf-m-no-padding-mobile"
>
<div class="pf-c-card">
<div class="pf-c-card__title">
${t`These bindings control which users can access this source.
<div class="pf-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__title">
${t`These bindings control which users can access this source.
You can only use policies here as access is checked before the user is authenticated.`}
</div>
<div class="pf-c-card__body">
<ak-bound-policies-list .target=${this.source.pk} ?policyOnly=${true}>
</ak-bound-policies-list>
</div>
<div class="pf-c-card__body">
<ak-bound-policies-list .target=${this.source.pk} ?policyOnly=${true}>
</ak-bound-policies-list>
</div>
</div>
</div>
</div>