web/admin: make object view pages more consistent

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/pages/providers/proxy/ProxyProviderViewPage.ts

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

web/src/pages/providers/saml/SAMLProviderViewPage.ts

@@ -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>

web/src/pages/sources/ldap/LDAPSourceViewPage.ts

@@ -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,
+            PFGrid,
-            PFDisplay,
-            PFGallery,
             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-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">
                             <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"
+                                        <span class="pf-c-description-list__text">${t`Name`}</span>
-                                                >${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
+                                <ak-source-ldap-form slot="form" .instancePk=${this.source.slug}>
-                                        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 class="pf-c-card pf-l-grid__item pf-m-12-col">
-                </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__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>`;

web/src/pages/sources/oauth/OAuthSourceViewPage.ts

@@ -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 [
+        return [PFBase, PFPage, PFButton, PFGrid, PFContent, PFCard, PFDescriptionList, AKGlobal];
-            PFBase,
-            PFPage,
-            PFButton,
-            PFFlex,
-            PFDisplay,
-            PFGallery,
-            PFContent,
-            PFCard,
-            PFDescriptionList,
-            PFSizing,
-            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-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">
                             <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"
+                                        <span class="pf-c-description-list__text">${t`Name`}</span>
-                                                >${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
+                                <ak-source-oauth-form slot="form" .instancePk=${this.source.slug}>
-                                        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>`;
     }
 }

web/src/pages/sources/plex/PlexSourceViewPage.ts

@@ -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 [
+        return [PFBase, PFPage, PFButton, PFGrid, PFContent, PFCard, PFDescriptionList, AKGlobal];
-            PFBase,
-            PFPage,
-            PFButton,
-            PFFlex,
-            PFDisplay,
-            PFGallery,
-            PFContent,
-            PFCard,
-            PFDescriptionList,
-            PFSizing,
-            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-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">
                             <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"
+                                        <span class="pf-c-description-list__text">${t`Name`}</span>
-                                                >${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
+                                <ak-source-plex-form slot="form" .instancePk=${this.source.slug}>
-                                        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>`;
     }
 }

web/src/pages/sources/saml/SAMLSourceViewPage.ts

@@ -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 [
+        return [PFBase, PFPage, PFGrid, PFButton, PFContent, PFCard, PFDescriptionList, AKGlobal];
-            PFBase,
-            PFPage,
-            PFFlex,
-            PFButton,
-            PFDisplay,
-            PFGallery,
-            PFContent,
-            PFCard,
-            PFDescriptionList,
-            PFSizing,
-            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-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">
                             <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"
+                                        <span class="pf-c-description-list__text">${t`Name`}</span>
-                                                >${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
+                                <ak-source-saml-form slot="form" .instancePk=${this.source.slug}>
-                                        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-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(
                             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>`;
     }
 }