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

12
web/src/pages/providers/proxy/ProxyProviderViewPage.ts
View File

@ -113,8 +113,7 @@ 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 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">
@ -218,9 +217,7 @@ export class ProxyProviderViewPage extends LitElement {
</ak-forms-modal>
</div>
</div>
</div>
<div class="pf-l-grid__item pf-m-12-col">
<div class="pf-c-card">
<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">
@ -240,9 +237,7 @@ export class ProxyProviderViewPage extends LitElement {
</form>
</div>
</div>
</div>
<div class="pf-l-grid__item pf-m-12-col">
<div class="pf-c-card">
<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">
@ -291,7 +286,6 @@ export class ProxyProviderViewPage extends LitElement {
</ak-tabs>
</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 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>

69
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,16 +74,13 @@ 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-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
>
<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">
@ -129,10 +120,7 @@ export class LDAPSourceViewPage extends LitElement {
<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 slot="form" .instancePk=${this.source.slug}>
</ak-source-ldap-form>
<button slot="trigger" class="pf-c-button pf-m-primary">
${t`Edit`}
@ -140,33 +128,7 @@ export class LDAPSourceViewPage extends LitElement {
</ak-forms-modal>
</div>
</div>
</div>
</div>
</section>
<section
slot="page-changelog"
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 pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__title">
<p>${t`Sync status`}</p>
</div>
@ -229,6 +191,23 @@ export class LDAPSourceViewPage extends LitElement {
</div>
</div>
</div>
</section>
<section
slot="page-changelog"
data-tab-title="${t`Changelog`}"
class="pf-c-page__main-section pf-m-no-padding-mobile"
>
<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>
</section>
</ak-tabs>`;

70
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,16 +86,13 @@ 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-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
>
<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">
@ -102,7 +108,7 @@ export class OAuthSourceViewPage extends LitElement {
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${this.source.providerType}
${ProviderToLabel(this.source.providerType)}
</div>
</dd>
</div>
@ -162,10 +168,7 @@ export class OAuthSourceViewPage extends LitElement {
<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 slot="form" .instancePk=${this.source.slug}>
</ak-source-oauth-form>
<button slot="trigger" class="pf-c-button pf-m-primary">
${t`Edit`}
@ -174,14 +177,14 @@ export class OAuthSourceViewPage extends LitElement {
</div>
</div>
</div>
</div>
</section>
<section
slot="page-changelog"
data-tab-title="${t`Changelog`}"
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 pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__body">
<ak-object-changelog
targetModelPk=${this.source.pk || ""}
@ -191,13 +194,15 @@ export class OAuthSourceViewPage extends LitElement {
</ak-object-changelog>
</div>
</div>
</div>
</section>
<div
slot="page-policy-binding"
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-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.`}
@ -208,6 +213,7 @@ export class OAuthSourceViewPage extends LitElement {
</div>
</div>
</div>
</div>
</ak-tabs>`;
}
}

42
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,16 +62,13 @@ 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-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
>
<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">
@ -100,10 +82,7 @@ export class PlexSourceViewPage extends LitElement {
<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 slot="form" .instancePk=${this.source.slug}>
</ak-source-plex-form>
<button slot="trigger" class="pf-c-button pf-m-primary">
${t`Edit`}
@ -112,14 +91,14 @@ export class PlexSourceViewPage extends LitElement {
</div>
</div>
</div>
</div>
</section>
<section
slot="page-changelog"
data-tab-title="${t`Changelog`}"
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 pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__body">
<ak-object-changelog
targetModelPk=${this.source.pk || ""}
@ -129,13 +108,15 @@ export class PlexSourceViewPage extends LitElement {
</ak-object-changelog>
</div>
</div>
</div>
</section>
<div
slot="page-policy-binding"
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-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.`}
@ -146,6 +127,7 @@ export class PlexSourceViewPage extends LitElement {
</div>
</div>
</div>
</div>
</ak-tabs>`;
}
}

48
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,16 +64,13 @@ 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-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
>
<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">
@ -138,10 +120,7 @@ export class SAMLSourceViewPage extends LitElement {
<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 slot="form" .instancePk=${this.source.slug}>
</ak-source-saml-form>
<button slot="trigger" class="pf-c-button pf-m-primary">
${t`Edit`}
@ -150,14 +129,14 @@ export class SAMLSourceViewPage extends LitElement {
</div>
</div>
</div>
</div>
</section>
<section
slot="page-changelog"
data-tab-title="${t`Changelog`}"
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 pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__body">
<ak-object-changelog
targetModelPk=${this.source.pk || ""}
@ -167,15 +146,15 @@ export class SAMLSourceViewPage extends LitElement {
</ak-object-changelog>
</div>
</div>
</div>
</section>
<section
slot="page-metadata"
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">
<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({
@ -204,14 +183,14 @@ export class SAMLSourceViewPage extends LitElement {
)}
</div>
</div>
</div>
</section>
<div
slot="page-policy-bindings"
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-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.`}
@ -222,6 +201,7 @@ export class SAMLSourceViewPage extends LitElement {
</div>
</div>
</div>
</div>
</ak-tabs>`;
}
}