From 629a0e1a4dea9b96f0866c03691312eb0599c85f Mon Sep 17 00:00:00 2001 From: Jens Langhammer Date: Fri, 26 Nov 2021 19:40:40 +0100 Subject: [PATCH] web/admin: make object view pages more consistent Signed-off-by: Jens Langhammer --- .../providers/proxy/ProxyProviderViewPage.ts | 340 +++++++++--------- .../providers/saml/SAMLProviderViewPage.ts | 4 +- .../pages/sources/ldap/LDAPSourceViewPage.ts | 271 +++++++------- .../sources/oauth/OAuthSourceViewPage.ts | 264 +++++++------- .../pages/sources/plex/PlexSourceViewPage.ts | 112 +++--- .../pages/sources/saml/SAMLSourceViewPage.ts | 242 ++++++------- 6 files changed, 587 insertions(+), 646 deletions(-) diff --git a/web/src/pages/providers/proxy/ProxyProviderViewPage.ts b/web/src/pages/providers/proxy/ProxyProviderViewPage.ts index eeeb6bcd0..97c6ed740 100644 --- a/web/src/pages/providers/proxy/ProxyProviderViewPage.ts +++ b/web/src/pages/providers/proxy/ProxyProviderViewPage.ts @@ -113,183 +113,177 @@ export class ProxyProviderViewPage extends LitElement { ` : html``}
-
-
-
-
-
-
- ${t`Name`} -
-
-
- ${this.provider.name} -
-
-
-
-
- ${t`Assigned to application`} -
-
-
- -
-
-
-
-
- ${t`Internal Host`} -
-
-
- ${this.provider.internalHost} -
-
-
-
-
- ${t`External Host`} -
-
-
- ${this.provider.externalHost} -
-
-
-
-
- ${t`Basic-Auth`} -
-
-
- ${this.provider.basicAuthEnabled - ? html` -   ${t`Yes`}` - : html` -   ${t`No`}`} -
-
-
-
-
- ${t`Mode`} -
-
-
- ${ModeToLabel(this.provider.mode || ProxyMode.Proxy)} -
-
-
-
-
-
- - ${t`Update`} - ${t`Update Proxy Provider`} - - - - -
+
+
+
+
+
+ ${t`Name`} +
+
+
+ ${this.provider.name} +
+
+
+
+
+ ${t`Assigned to application`} +
+
+
+ +
+
+
+
+
+ ${t`Internal Host`} +
+
+
+ ${this.provider.internalHost} +
+
+
+
+
+ ${t`External Host`} +
+
+
+ ${this.provider.externalHost} +
+
+
+
+
+ ${t`Basic-Auth`} +
+
+
+ ${this.provider.basicAuthEnabled + ? html` +   ${t`Yes`}` + : html` +   ${t`No`}`} +
+
+
+
+
+ ${t`Mode`} +
+
+
+ ${ModeToLabel(this.provider.mode || ProxyMode.Proxy)} +
+
+
+
+
+
+ + ${t`Update`} + ${t`Update Proxy Provider`} + + + +
-
-
-
${t`Protocol Settings`}
-
-
-
- - -
-
-
+
+
${t`Protocol Settings`}
+
+
+
+ + +
+
-
-
-
${t`Setup`}
-
- -
- ${this.renderConfigTemplate(MDNginxIngress.html)} -
-
- ${this.renderConfigTemplate(MDNginxPM.html)} -
-
- ${this.renderConfigTemplate(MDNginxStandalone.html)} -
-
- ${this.renderConfigTemplate(MDTraefikIngres.html)} -
-
- ${this.renderConfigTemplate(MDTraefikCompose.html)} -
-
- ${this.renderConfigTemplate(MDTraefikStandalone.html)} -
- -
+
+
${t`Setup`}
+
+ +
+ ${this.renderConfigTemplate(MDNginxIngress.html)} +
+
+ ${this.renderConfigTemplate(MDNginxPM.html)} +
+
+ ${this.renderConfigTemplate(MDNginxStandalone.html)} +
+
+ ${this.renderConfigTemplate(MDTraefikIngres.html)} +
+
+ ${this.renderConfigTemplate(MDTraefikCompose.html)} +
+
+ ${this.renderConfigTemplate(MDTraefikStandalone.html)} +
+
`; diff --git a/web/src/pages/providers/saml/SAMLProviderViewPage.ts b/web/src/pages/providers/saml/SAMLProviderViewPage.ts index 98c7b5167..3746119b7 100644 --- a/web/src/pages/providers/saml/SAMLProviderViewPage.ts +++ b/web/src/pages/providers/saml/SAMLProviderViewPage.ts @@ -107,7 +107,7 @@ export class SAMLProviderViewPage extends LitElement {
` }
-
+
@@ -178,7 +178,7 @@ export class SAMLProviderViewPage extends LitElement {
-
+
${t`Related objects`}
diff --git a/web/src/pages/sources/ldap/LDAPSourceViewPage.ts b/web/src/pages/sources/ldap/LDAPSourceViewPage.ts index 595627c5e..581907dc3 100644 --- a/web/src/pages/sources/ldap/LDAPSourceViewPage.ts +++ b/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, - 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" > -
-
-
-
-
-
-
- ${t`Name`} -
-
-
- ${this.source.name} -
-
-
-
-
- ${t`Server URI`} -
-
-
- ${this.source.serverUri} -
-
-
-
-
- ${t`Base DN`} -
-
-
-
    -
  • ${this.source.baseDn}
    • -
-
-
-
-
-
-
- - ${t`Update`} - ${t`Update LDAP Source`} - - - - -
+
+
+
+
+
+
+ ${t`Name`} +
+
+
+ ${this.source.name} +
+
+
+
+
+ ${t`Server URI`} +
+
+
+ ${this.source.serverUri} +
+
+
+
+
+ ${t`Base DN`} +
+
+
+
    +
  • ${this.source.baseDn}
    • +
+
+
+
+
+
+
+ + ${t`Update`} + ${t`Update LDAP Source`} + + + + +
+
+
+
+

${t`Sync status`}

+
+
+ ${until( + new SourcesApi(DEFAULT_CONFIG) + .sourcesLdapSyncStatusList({ + slug: this.source.slug, + }) + .then((tasks) => { + if (tasks.length < 1) { + return html`

${t`Not synced yet.`}

`; + } + return html`
    + ${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`
  • +

    ${task.taskName}

    +
      +
    • ${header}
      • + ${task.messages.map((m) => { + return html`
    • ${m}
      • `; + })} +
    +
    • `; + })} +
`; + }), + "loading", + )} +
+
+ { + 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`} +
@@ -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" > -
-
- - -
-
- -
-
-
-
-
-

${t`Sync status`}

-
-
- ${until( - new SourcesApi(DEFAULT_CONFIG) - .sourcesLdapSyncStatusList({ - slug: this.source.slug, - }) - .then((tasks) => { - if (tasks.length < 1) { - return html`

${t`Not synced yet.`}

`; - } - return html`
    - ${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`
  • -

    ${task.taskName}

    -
      -
    • ${header}
      • - ${task.messages.map((m) => { - return html`
    • ${m}
      • `; - })} -
    -
    • `; - })} -
`; - }), - "loading", - )} -
-
- { - 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`} - -
+
+
+
+ +
diff --git a/web/src/pages/sources/oauth/OAuthSourceViewPage.ts b/web/src/pages/sources/oauth/OAuthSourceViewPage.ts index cfce87229..75dcfa592 100644 --- a/web/src/pages/sources/oauth/OAuthSourceViewPage.ts +++ b/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 [ - 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" > -
-
-
-
-
-
-
- ${t`Name`} -
-
-
- ${this.source.name} -
-
-
-
-
- ${t`Provider Type`} -
-
-
- ${this.source.providerType} -
-
-
-
-
- ${t`Callback URL`} -
-
- ${this.source.callbackUrl} -
-
-
-
- ${t`Access Key`} -
-
-
- ${this.source.consumerKey} -
-
-
-
-
- ${t`Authorization URL`} -
-
-
- ${this.source.type?.authorizationUrl || - this.source.authorizationUrl} -
-
-
-
-
- ${t`Token URL`} -
-
-
- ${this.source.type?.accessTokenUrl || - this.source.accessTokenUrl} -
-
-
-
-
-
- - ${t`Update`} - ${t`Update OAuth Source`} - - - - -
+
+
+
+
+
+
+ ${t`Name`} +
+
+
+ ${this.source.name} +
+
+
+
+
+ ${t`Provider Type`} +
+
+
+ ${ProviderToLabel(this.source.providerType)} +
+
+
+
+
+ ${t`Callback URL`} +
+
+ ${this.source.callbackUrl} +
+
+
+
+ ${t`Access Key`} +
+
+
+ ${this.source.consumerKey} +
+
+
+
+
+ ${t`Authorization URL`} +
+
+
+ ${this.source.type?.authorizationUrl || + this.source.authorizationUrl} +
+
+
+
+
+ ${t`Token URL`} +
+
+
+ ${this.source.type?.accessTokenUrl || + this.source.accessTokenUrl} +
+
+
+
+
+
+ + ${t`Update`} + ${t`Update OAuth Source`} + + + +
@@ -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" > -
-
- - +
+
+
+ + +
@@ -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" > -
-
- ${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.`} -
-
- - +
+
+
+ ${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.`} +
+
+ + +
diff --git a/web/src/pages/sources/plex/PlexSourceViewPage.ts b/web/src/pages/sources/plex/PlexSourceViewPage.ts index 081b1c0b8..2edbc65a5 100644 --- a/web/src/pages/sources/plex/PlexSourceViewPage.ts +++ b/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 [ - 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" > -
-
-
-
-
-
-
- ${t`Name`} -
-
-
- ${this.source.name} -
-
-
-
-
-
- - ${t`Update`} - ${t`Update Plex Source`} - - - - -
+
+
+
+
+
+
+ ${t`Name`} +
+
+
+ ${this.source.name} +
+
+
+
+
+
+ + ${t`Update`} + ${t`Update Plex Source`} + + + +
@@ -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" > -
-
- - +
+
+
+ + +
@@ -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" > -
-
- ${t`These bindings control which users can access this source. +
+
+
+ ${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.`} -
-
- - +
+
+ + +
diff --git a/web/src/pages/sources/saml/SAMLSourceViewPage.ts b/web/src/pages/sources/saml/SAMLSourceViewPage.ts index 8c19b75f7..95e2fc962 100644 --- a/web/src/pages/sources/saml/SAMLSourceViewPage.ts +++ b/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 [ - 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" > -
-
-
-
-
-
-
- ${t`Name`} -
-
-
- ${this.source.name} -
-
-
-
-
- ${t`SSO URL`} -
-
-
- ${this.source.ssoUrl} -
-
-
-
-
- ${t`SLO URL`} -
-
-
- ${this.source.sloUrl} -
-
-
-
-
- ${t`Issuer`} -
-
-
- ${this.source.issuer} -
-
-
-
-
-
- - ${t`Update`} - ${t`Update SAML Source`} - - - - -
+
+
+
+
+
+
+ ${t`Name`} +
+
+
+ ${this.source.name} +
+
+
+
+
+ ${t`SSO URL`} +
+
+
+ ${this.source.ssoUrl} +
+
+
+
+
+ ${t`SLO URL`} +
+
+
+ ${this.source.sloUrl} +
+
+
+
+
+ ${t`Issuer`} +
+
+
+ ${this.source.issuer} +
+
+
+
+
+
+ + ${t`Update`} + ${t`Update SAML Source`} + + + +
@@ -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" > -
-
- - +
+
+
+ + +
@@ -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" > -
-
-
- ${until( - new SourcesApi(DEFAULT_CONFIG) - .sourcesSamlMetadataRetrieve({ - slug: this.source.slug, - }) - .then((m) => { - return html` -
- -
-
- - ${t`Download`} - -
- `; - }), - )} -
+
+
+ ${until( + new SourcesApi(DEFAULT_CONFIG) + .sourcesSamlMetadataRetrieve({ + slug: this.source.slug, + }) + .then((m) => { + return html` +
+ +
+
+ + ${t`Download`} + +
+ `; + }), + )}
@@ -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" > -
-
- ${t`These bindings control which users can access this source. +
+
+
+ ${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.`} -
-
- - +
+
+ + +