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 

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

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

@ -107,7 +107,7 @@ export class SAMLProviderViewPage extends LitElement {
</div>` </div>`
} }
<div class="pf-l-grid pf-m-gutter"> <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"> <div class="pf-c-card__body">
<dl class="pf-c-description-list pf-m-3-col-on-lg"> <dl class="pf-c-description-list pf-m-3-col-on-lg">
<div class="pf-c-description-list__group"> <div class="pf-c-description-list__group">
@ -178,7 +178,7 @@ export class SAMLProviderViewPage extends LitElement {
</ak-forms-modal> </ak-forms-modal>
</div> </div>
</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"> <div class="pf-c-card__title">
${t`Related objects`} ${t`Related objects`}
</div> </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 PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
import PFList from "@patternfly/patternfly/components/List/list.css"; import PFList from "@patternfly/patternfly/components/List/list.css";
import PFPage from "@patternfly/patternfly/components/Page/page.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 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"; import { LDAPSource, SourcesApi, StatusEnum } from "@goauthentik/api";
@ -50,13 +47,10 @@ export class LDAPSourceViewPage extends LitElement {
PFBase, PFBase,
PFPage, PFPage,
PFButton, PFButton,
PFFlex, PFGrid,
PFDisplay,
PFGallery,
PFContent, PFContent,
PFCard, PFCard,
PFDescriptionList, PFDescriptionList,
PFSizing,
PFList, PFList,
AKGlobal, AKGlobal,
]; ];
@ -80,65 +74,120 @@ export class LDAPSourceViewPage extends LitElement {
data-tab-title="${t`Overview`}" data-tab-title="${t`Overview`}"
class="pf-c-page__main-section pf-m-no-padding-mobile" 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-l-grid pf-m-gutter">
<div class="pf-u-w-75"> <div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card"> <div class="pf-c-card__body">
<div class="pf-c-card__body"> <dl class="pf-c-description-list pf-m-2-col-on-lg">
<dl class="pf-c-description-list pf-m-2-col-on-lg"> <div class="pf-c-description-list__group">
<div class="pf-c-description-list__group"> <dt class="pf-c-description-list__term">
<dt class="pf-c-description-list__term"> <span class="pf-c-description-list__text">${t`Name`}</span>
<span class="pf-c-description-list__text" </dt>
>${t`Name`}</span <dd class="pf-c-description-list__description">
> <div class="pf-c-description-list__text">
</dt> ${this.source.name}
<dd class="pf-c-description-list__description"> </div>
<div class="pf-c-description-list__text"> </dd>
${this.source.name} </div>
</div> <div class="pf-c-description-list__group">
</dd> <dt class="pf-c-description-list__term">
</div> <span class="pf-c-description-list__text"
<div class="pf-c-description-list__group"> >${t`Server URI`}</span
<dt class="pf-c-description-list__term"> >
<span class="pf-c-description-list__text" </dt>
>${t`Server URI`}</span <dd class="pf-c-description-list__description">
> <div class="pf-c-description-list__text">
</dt> ${this.source.serverUri}
<dd class="pf-c-description-list__description"> </div>
<div class="pf-c-description-list__text"> </dd>
${this.source.serverUri} </div>
</div> <div class="pf-c-description-list__group">
</dd> <dt class="pf-c-description-list__term">
</div> <span class="pf-c-description-list__text"
<div class="pf-c-description-list__group"> >${t`Base DN`}</span
<dt class="pf-c-description-list__term"> >
<span class="pf-c-description-list__text" </dt>
>${t`Base DN`}</span <dd class="pf-c-description-list__description">
> <div class="pf-c-description-list__text">
</dt> <ul>
<dd class="pf-c-description-list__description"> <li>${this.source.baseDn}</li>
<div class="pf-c-description-list__text"> </ul>
<ul> </div>
<li>${this.source.baseDn}</li> </dd>
</ul> </div>
</div> </dl>
</dd> </div>
</div> <div class="pf-c-card__footer">
</dl> <ak-forms-modal>
</div> <span slot="submit"> ${t`Update`} </span>
<div class="pf-c-card__footer"> <span slot="header"> ${t`Update LDAP Source`} </span>
<ak-forms-modal> <ak-source-ldap-form slot="form" .instancePk=${this.source.slug}>
<span slot="submit"> ${t`Update`} </span> </ak-source-ldap-form>
<span slot="header"> ${t`Update LDAP Source`} </span> <button slot="trigger" class="pf-c-button pf-m-primary">
<ak-source-ldap-form ${t`Edit`}
slot="form" </button>
.instancePk=${this.source.slug} </ak-forms-modal>
> </div>
</ak-source-ldap-form> </div>
<button slot="trigger" class="pf-c-button pf-m-primary"> <div class="pf-c-card pf-l-grid__item pf-m-12-col">
${t`Edit`} <div class="pf-c-card__title">
</button> <p>${t`Sync status`}</p>
</ak-forms-modal> </div>
</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> </div>
</div> </div>
@ -148,85 +197,15 @@ export class LDAPSourceViewPage extends LitElement {
data-tab-title="${t`Changelog`}" data-tab-title="${t`Changelog`}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-c-page__main-section pf-m-no-padding-mobile"
> >
<div class="pf-c-card"> <div class="pf-l-grid pf-m-gutter">
<div class="pf-c-card__body"> <div class="pf-c-card pf-l-grid__item pf-m-12-col">
<ak-object-changelog <div class="pf-c-card__body">
targetModelPk=${this.source.pk || ""} <ak-object-changelog
targetModelApp="authentik_sources_ldap" targetModelPk=${this.source.pk || ""}
targetModelName="ldapsource" targetModelApp="authentik_sources_ldap"
> targetModelName="ldapsource"
</ak-object-changelog> >
</div> </ak-object-changelog>
</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> </div>
</div> </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 PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css"; import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
import PFPage from "@patternfly/patternfly/components/Page/page.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 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 { DEFAULT_CONFIG } from "../../../api/Config";
import { EVENT_REFRESH } from "../../../constants"; import { EVENT_REFRESH } from "../../../constants";
@ -27,6 +24,30 @@ import "../../../elements/forms/ModalForm";
import "../../policies/BoundPoliciesList"; import "../../policies/BoundPoliciesList";
import "./OAuthSourceForm"; 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") @customElement("ak-source-oauth-view")
export class OAuthSourceViewPage extends LitElement { export class OAuthSourceViewPage extends LitElement {
@property({ type: String }) @property({ type: String })
@ -44,19 +65,7 @@ export class OAuthSourceViewPage extends LitElement {
source?: OAuthSource; source?: OAuthSource;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [ return [PFBase, PFPage, PFButton, PFGrid, PFContent, PFCard, PFDescriptionList, AKGlobal];
PFBase,
PFPage,
PFButton,
PFFlex,
PFDisplay,
PFGallery,
PFContent,
PFCard,
PFDescriptionList,
PFSizing,
AKGlobal,
];
} }
constructor() { constructor() {
@ -77,101 +86,94 @@ export class OAuthSourceViewPage extends LitElement {
data-tab-title="${t`Overview`}" data-tab-title="${t`Overview`}"
class="pf-c-page__main-section pf-m-no-padding-mobile" 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-l-grid pf-m-gutter">
<div class="pf-u-w-75"> <div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card"> <div class="pf-c-card__body">
<div class="pf-c-card__body"> <dl class="pf-c-description-list pf-m-2-col-on-lg">
<dl class="pf-c-description-list pf-m-2-col-on-lg"> <div class="pf-c-description-list__group">
<div class="pf-c-description-list__group"> <dt class="pf-c-description-list__term">
<dt class="pf-c-description-list__term"> <span class="pf-c-description-list__text">${t`Name`}</span>
<span class="pf-c-description-list__text" </dt>
>${t`Name`}</span <dd class="pf-c-description-list__description">
> <div class="pf-c-description-list__text">
</dt> ${this.source.name}
<dd class="pf-c-description-list__description"> </div>
<div class="pf-c-description-list__text"> </dd>
${this.source.name} </div>
</div> <div class="pf-c-description-list__group">
</dd> <dt class="pf-c-description-list__term">
</div> <span class="pf-c-description-list__text"
<div class="pf-c-description-list__group"> >${t`Provider Type`}</span
<dt class="pf-c-description-list__term"> >
<span class="pf-c-description-list__text" </dt>
>${t`Provider Type`}</span <dd class="pf-c-description-list__description">
> <div class="pf-c-description-list__text">
</dt> ${ProviderToLabel(this.source.providerType)}
<dd class="pf-c-description-list__description"> </div>
<div class="pf-c-description-list__text"> </dd>
${this.source.providerType} </div>
</div> <div class="pf-c-description-list__group">
</dd> <dt class="pf-c-description-list__term">
</div> <span class="pf-c-description-list__text"
<div class="pf-c-description-list__group"> >${t`Callback URL`}</span
<dt class="pf-c-description-list__term"> >
<span class="pf-c-description-list__text" </dt>
>${t`Callback URL`}</span <dd class="pf-c-description-list__description">
> <code class="pf-c-description-list__text"
</dt> >${this.source.callbackUrl}</code
<dd class="pf-c-description-list__description"> >
<code class="pf-c-description-list__text" </dd>
>${this.source.callbackUrl}</code </div>
> <div class="pf-c-description-list__group">
</dd> <dt class="pf-c-description-list__term">
</div> <span class="pf-c-description-list__text"
<div class="pf-c-description-list__group"> >${t`Access Key`}</span
<dt class="pf-c-description-list__term"> >
<span class="pf-c-description-list__text" </dt>
>${t`Access Key`}</span <dd class="pf-c-description-list__description">
> <div class="pf-c-description-list__text">
</dt> ${this.source.consumerKey}
<dd class="pf-c-description-list__description"> </div>
<div class="pf-c-description-list__text"> </dd>
${this.source.consumerKey} </div>
</div> <div class="pf-c-description-list__group">
</dd> <dt class="pf-c-description-list__term">
</div> <span class="pf-c-description-list__text"
<div class="pf-c-description-list__group"> >${t`Authorization URL`}</span
<dt class="pf-c-description-list__term"> >
<span class="pf-c-description-list__text" </dt>
>${t`Authorization URL`}</span <dd class="pf-c-description-list__description">
> <div class="pf-c-description-list__text">
</dt> ${this.source.type?.authorizationUrl ||
<dd class="pf-c-description-list__description"> this.source.authorizationUrl}
<div class="pf-c-description-list__text"> </div>
${this.source.type?.authorizationUrl || </dd>
this.source.authorizationUrl} </div>
</div> <div class="pf-c-description-list__group">
</dd> <dt class="pf-c-description-list__term">
</div> <span class="pf-c-description-list__text"
<div class="pf-c-description-list__group"> >${t`Token URL`}</span
<dt class="pf-c-description-list__term"> >
<span class="pf-c-description-list__text" </dt>
>${t`Token URL`}</span <dd class="pf-c-description-list__description">
> <div class="pf-c-description-list__text">
</dt> ${this.source.type?.accessTokenUrl ||
<dd class="pf-c-description-list__description"> this.source.accessTokenUrl}
<div class="pf-c-description-list__text"> </div>
${this.source.type?.accessTokenUrl || </dd>
this.source.accessTokenUrl} </div>
</div> </dl>
</dd> </div>
</div> <div class="pf-c-card__footer">
</dl> <ak-forms-modal>
</div> <span slot="submit"> ${t`Update`} </span>
<div class="pf-c-card__footer"> <span slot="header"> ${t`Update OAuth Source`} </span>
<ak-forms-modal> <ak-source-oauth-form slot="form" .instancePk=${this.source.slug}>
<span slot="submit"> ${t`Update`} </span> </ak-source-oauth-form>
<span slot="header"> ${t`Update OAuth Source`} </span> <button slot="trigger" class="pf-c-button pf-m-primary">
<ak-source-oauth-form ${t`Edit`}
slot="form" </button>
.instancePk=${this.source.slug} </ak-forms-modal>
>
</ak-source-oauth-form>
<button slot="trigger" class="pf-c-button pf-m-primary">
${t`Edit`}
</button>
</ak-forms-modal>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -181,14 +183,16 @@ export class OAuthSourceViewPage extends LitElement {
data-tab-title="${t`Changelog`}" data-tab-title="${t`Changelog`}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-c-page__main-section pf-m-no-padding-mobile"
> >
<div class="pf-c-card"> <div class="pf-l-grid pf-m-gutter">
<div class="pf-c-card__body"> <div class="pf-c-card pf-l-grid__item pf-m-12-col">
<ak-object-changelog <div class="pf-c-card__body">
targetModelPk=${this.source.pk || ""} <ak-object-changelog
targetModelApp="authentik_sources_oauth" targetModelPk=${this.source.pk || ""}
targetModelName="oauthsource" targetModelApp="authentik_sources_oauth"
> targetModelName="oauthsource"
</ak-object-changelog> >
</ak-object-changelog>
</div>
</div> </div>
</div> </div>
</section> </section>
@ -197,14 +201,16 @@ export class OAuthSourceViewPage extends LitElement {
data-tab-title="${t`Policy Bindings`}" data-tab-title="${t`Policy Bindings`}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-c-page__main-section pf-m-no-padding-mobile"
> >
<div class="pf-c-card"> <div class="pf-l-grid pf-m-gutter">
<div class="pf-c-card__title"> <div class="pf-c-card pf-l-grid__item pf-m-12-col">
${t`These bindings control which users can access this source. <div class="pf-c-card__title">
You can only use policies here as access is checked before the user is authenticated.`} ${t`These bindings control which users can access this source.
</div> You can only use policies here as access is checked before the user is authenticated.`}
<div class="pf-c-card__body"> </div>
<ak-bound-policies-list .target=${this.source.pk} ?policyOnly=${true}> <div class="pf-c-card__body">
</ak-bound-policies-list> <ak-bound-policies-list .target=${this.source.pk} ?policyOnly=${true}>
</ak-bound-policies-list>
</div>
</div> </div>
</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 PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css"; import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
import PFPage from "@patternfly/patternfly/components/Page/page.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 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"; import { PlexSource, SourcesApi } from "@goauthentik/api";
@ -44,19 +41,7 @@ export class PlexSourceViewPage extends LitElement {
source?: PlexSource; source?: PlexSource;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [ return [PFBase, PFPage, PFButton, PFGrid, PFContent, PFCard, PFDescriptionList, AKGlobal];
PFBase,
PFPage,
PFButton,
PFFlex,
PFDisplay,
PFGallery,
PFContent,
PFCard,
PFDescriptionList,
PFSizing,
AKGlobal,
];
} }
constructor() { constructor() {
@ -77,39 +62,32 @@ export class PlexSourceViewPage extends LitElement {
data-tab-title="${t`Overview`}" data-tab-title="${t`Overview`}"
class="pf-c-page__main-section pf-m-no-padding-mobile" 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-l-grid pf-m-gutter">
<div class="pf-u-w-75"> <div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card"> <div class="pf-c-card__body">
<div class="pf-c-card__body"> <dl class="pf-c-description-list pf-m-2-col-on-lg">
<dl class="pf-c-description-list pf-m-2-col-on-lg"> <div class="pf-c-description-list__group">
<div class="pf-c-description-list__group"> <dt class="pf-c-description-list__term">
<dt class="pf-c-description-list__term"> <span class="pf-c-description-list__text">${t`Name`}</span>
<span class="pf-c-description-list__text" </dt>
>${t`Name`}</span <dd class="pf-c-description-list__description">
> <div class="pf-c-description-list__text">
</dt> ${this.source.name}
<dd class="pf-c-description-list__description"> </div>
<div class="pf-c-description-list__text"> </dd>
${this.source.name} </div>
</div> </dl>
</dd> </div>
</div> <div class="pf-c-card__footer">
</dl> <ak-forms-modal>
</div> <span slot="submit"> ${t`Update`} </span>
<div class="pf-c-card__footer"> <span slot="header"> ${t`Update Plex Source`} </span>
<ak-forms-modal> <ak-source-plex-form slot="form" .instancePk=${this.source.slug}>
<span slot="submit"> ${t`Update`} </span> </ak-source-plex-form>
<span slot="header"> ${t`Update Plex Source`} </span> <button slot="trigger" class="pf-c-button pf-m-primary">
<ak-source-plex-form ${t`Edit`}
slot="form" </button>
.instancePk=${this.source.slug} </ak-forms-modal>
>
</ak-source-plex-form>
<button slot="trigger" class="pf-c-button pf-m-primary">
${t`Edit`}
</button>
</ak-forms-modal>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -119,14 +97,16 @@ export class PlexSourceViewPage extends LitElement {
data-tab-title="${t`Changelog`}" data-tab-title="${t`Changelog`}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-c-page__main-section pf-m-no-padding-mobile"
> >
<div class="pf-c-card"> <div class="pf-l-grid pf-m-gutter">
<div class="pf-c-card__body"> <div class="pf-c-card pf-l-grid__item pf-m-12-col">
<ak-object-changelog <div class="pf-c-card__body">
targetModelPk=${this.source.pk || ""} <ak-object-changelog
targetModelApp="authentik_sources_plex" targetModelPk=${this.source.pk || ""}
targetModelName="plexsource" targetModelApp="authentik_sources_plex"
> targetModelName="plexsource"
</ak-object-changelog> >
</ak-object-changelog>
</div>
</div> </div>
</div> </div>
</section> </section>
@ -135,14 +115,16 @@ export class PlexSourceViewPage extends LitElement {
data-tab-title="${t`Policy Bindings`}" data-tab-title="${t`Policy Bindings`}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-c-page__main-section pf-m-no-padding-mobile"
> >
<div class="pf-c-card"> <div class="pf-l-grid pf-m-gutter">
<div class="pf-c-card__title"> <div class="pf-c-card pf-l-grid__item pf-m-12-col">
${t`These bindings control which users can access this source. <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.`} You can only use policies here as access is checked before the user is authenticated.`}
</div> </div>
<div class="pf-c-card__body"> <div class="pf-c-card__body">
<ak-bound-policies-list .target=${this.source.pk} ?policyOnly=${true}> <ak-bound-policies-list .target=${this.source.pk} ?policyOnly=${true}>
</ak-bound-policies-list> </ak-bound-policies-list>
</div>
</div> </div>
</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 PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css"; import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
import PFPage from "@patternfly/patternfly/components/Page/page.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 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"; import { SAMLSource, SourcesApi } from "@goauthentik/api";
@ -46,19 +43,7 @@ export class SAMLSourceViewPage extends LitElement {
source?: SAMLSource; source?: SAMLSource;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [ return [PFBase, PFPage, PFGrid, PFButton, PFContent, PFCard, PFDescriptionList, AKGlobal];
PFBase,
PFPage,
PFFlex,
PFButton,
PFDisplay,
PFGallery,
PFContent,
PFCard,
PFDescriptionList,
PFSizing,
AKGlobal,
];
} }
constructor() { constructor() {
@ -79,75 +64,68 @@ export class SAMLSourceViewPage extends LitElement {
data-tab-title="${t`Overview`}" data-tab-title="${t`Overview`}"
class="pf-c-page__main-section pf-m-no-padding-mobile" 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-l-grid pf-m-gutter">
<div class="pf-u-w-75"> <div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card"> <div class="pf-c-card__body">
<div class="pf-c-card__body"> <dl class="pf-c-description-list pf-m-3-col-on-lg">
<dl class="pf-c-description-list pf-m-3-col-on-lg"> <div class="pf-c-description-list__group">
<div class="pf-c-description-list__group"> <dt class="pf-c-description-list__term">
<dt class="pf-c-description-list__term"> <span class="pf-c-description-list__text">${t`Name`}</span>
<span class="pf-c-description-list__text" </dt>
>${t`Name`}</span <dd class="pf-c-description-list__description">
> <div class="pf-c-description-list__text">
</dt> ${this.source.name}
<dd class="pf-c-description-list__description"> </div>
<div class="pf-c-description-list__text"> </dd>
${this.source.name} </div>
</div> <div class="pf-c-description-list__group">
</dd> <dt class="pf-c-description-list__term">
</div> <span class="pf-c-description-list__text"
<div class="pf-c-description-list__group"> >${t`SSO URL`}</span
<dt class="pf-c-description-list__term"> >
<span class="pf-c-description-list__text" </dt>
>${t`SSO URL`}</span <dd class="pf-c-description-list__description">
> <div class="pf-c-description-list__text">
</dt> ${this.source.ssoUrl}
<dd class="pf-c-description-list__description"> </div>
<div class="pf-c-description-list__text"> </dd>
${this.source.ssoUrl} </div>
</div> <div class="pf-c-description-list__group">
</dd> <dt class="pf-c-description-list__term">
</div> <span class="pf-c-description-list__text"
<div class="pf-c-description-list__group"> >${t`SLO URL`}</span
<dt class="pf-c-description-list__term"> >
<span class="pf-c-description-list__text" </dt>
>${t`SLO URL`}</span <dd class="pf-c-description-list__description">
> <div class="pf-c-description-list__text">
</dt> ${this.source.sloUrl}
<dd class="pf-c-description-list__description"> </div>
<div class="pf-c-description-list__text"> </dd>
${this.source.sloUrl} </div>
</div> <div class="pf-c-description-list__group">
</dd> <dt class="pf-c-description-list__term">
</div> <span class="pf-c-description-list__text"
<div class="pf-c-description-list__group"> >${t`Issuer`}</span
<dt class="pf-c-description-list__term"> >
<span class="pf-c-description-list__text" </dt>
>${t`Issuer`}</span <dd class="pf-c-description-list__description">
> <div class="pf-c-description-list__text">
</dt> ${this.source.issuer}
<dd class="pf-c-description-list__description"> </div>
<div class="pf-c-description-list__text"> </dd>
${this.source.issuer} </div>
</div> </dl>
</dd> </div>
</div> <div class="pf-c-card__footer">
</dl> <ak-forms-modal>
</div> <span slot="submit"> ${t`Update`} </span>
<div class="pf-c-card__footer"> <span slot="header"> ${t`Update SAML Source`} </span>
<ak-forms-modal> <ak-source-saml-form slot="form" .instancePk=${this.source.slug}>
<span slot="submit"> ${t`Update`} </span> </ak-source-saml-form>
<span slot="header"> ${t`Update SAML Source`} </span> <button slot="trigger" class="pf-c-button pf-m-primary">
<ak-source-saml-form ${t`Edit`}
slot="form" </button>
.instancePk=${this.source.slug} </ak-forms-modal>
>
</ak-source-saml-form>
<button slot="trigger" class="pf-c-button pf-m-primary">
${t`Edit`}
</button>
</ak-forms-modal>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -157,14 +135,16 @@ export class SAMLSourceViewPage extends LitElement {
data-tab-title="${t`Changelog`}" data-tab-title="${t`Changelog`}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-c-page__main-section pf-m-no-padding-mobile"
> >
<div class="pf-c-card"> <div class="pf-l-grid pf-m-gutter">
<div class="pf-c-card__body"> <div class="pf-c-card pf-l-grid__item pf-m-12-col">
<ak-object-changelog <div class="pf-c-card__body">
targetModelPk=${this.source.pk || ""} <ak-object-changelog
targetModelApp="authentik_sources_saml" targetModelPk=${this.source.pk || ""}
targetModelName="samlsource" targetModelApp="authentik_sources_saml"
> targetModelName="samlsource"
</ak-object-changelog> >
</ak-object-changelog>
</div>
</div> </div>
</div> </div>
</section> </section>
@ -173,36 +153,34 @@ export class SAMLSourceViewPage extends LitElement {
data-tab-title="${t`Metadata`}" data-tab-title="${t`Metadata`}"
class="pf-c-page__main-section pf-m-no-padding-mobile" 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-l-grid pf-m-gutter">
<div class="pf-u-w-75"> <div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card"> ${until(
${until( new SourcesApi(DEFAULT_CONFIG)
new SourcesApi(DEFAULT_CONFIG) .sourcesSamlMetadataRetrieve({
.sourcesSamlMetadataRetrieve({ slug: this.source.slug,
slug: this.source.slug, })
}) .then((m) => {
.then((m) => { return html`
return html` <div class="pf-c-card__body">
<div class="pf-c-card__body"> <ak-codemirror
<ak-codemirror mode="xml"
mode="xml" ?readOnly=${true}
?readOnly=${true} value="${ifDefined(m.metadata)}"
value="${ifDefined(m.metadata)}" ></ak-codemirror>
></ak-codemirror> </div>
</div> <div class="pf-c-card__footer">
<div class="pf-c-card__footer"> <a
<a class="pf-c-button pf-m-primary"
class="pf-c-button pf-m-primary" target="_blank"
target="_blank" href=${ifDefined(m.downloadUrl)}
href=${ifDefined(m.downloadUrl)} >
> ${t`Download`}
${t`Download`} </a>
</a> </div>
</div> `;
`; }),
}), )}
)}
</div>
</div> </div>
</div> </div>
</section> </section>
@ -211,14 +189,16 @@ export class SAMLSourceViewPage extends LitElement {
data-tab-title="${t`Policy Bindings`}" data-tab-title="${t`Policy Bindings`}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-c-page__main-section pf-m-no-padding-mobile"
> >
<div class="pf-c-card"> <div class="pf-l-grid pf-m-gutter">
<div class="pf-c-card__title"> <div class="pf-c-card pf-l-grid__item pf-m-12-col">
${t`These bindings control which users can access this source. <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.`} You can only use policies here as access is checked before the user is authenticated.`}
</div> </div>
<div class="pf-c-card__body"> <div class="pf-c-card__body">
<ak-bound-policies-list .target=${this.source.pk} ?policyOnly=${true}> <ak-bound-policies-list .target=${this.source.pk} ?policyOnly=${true}>
</ak-bound-policies-list> </ak-bound-policies-list>
</div>
</div> </div>
</div> </div>
</div> </div>