diff --git a/web/nginx.conf b/web/nginx.conf index f827a88bd..42a8d3d21 100644 --- a/web/nginx.conf +++ b/web/nginx.conf @@ -72,11 +72,17 @@ http { listen 80; server_name _; charset utf-8; + root /usr/share/nginx/html; location / { - root /usr/share/nginx/html; access_log /dev/stdout json_combined; } + location /static/ { + expires @31d; + add_header Cache-Control "public, no-transform"; + add_header X-authentik-version "2021.3.4"; + add_header Vary X-authentik-version; + } } } diff --git a/web/rollup.config.js b/web/rollup.config.js index d4a930e9b..e60d4e963 100644 --- a/web/rollup.config.js +++ b/web/rollup.config.js @@ -15,6 +15,14 @@ const resources = [ { src: "src/assets/*", dest: "dist/assets" }, { src: "./icons/*", dest: "dist/assets/icons" }, ]; +// eslint-disable-next-line no-undef +const isProdBuild = process.env.NODE_ENV === "production"; +// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types +function manualChunks(id) { + if (id.includes("node_modules")) { + return "vendor"; + } +} export default [ // Autogenerated API Client @@ -29,8 +37,7 @@ export default [ ], plugins: [ typescript(), - // eslint-disable-next-line no-undef - process.env.NODE_ENV === "production" ? terser() : undefined, + isProdBuild && terser(), ].filter(p => p), watch: { clearScreen: false, @@ -44,6 +51,7 @@ export default [ format: "es", dir: "dist", sourcemap: true, + manualChunks: manualChunks, }, ], plugins: [ @@ -55,8 +63,7 @@ export default [ resolve({ browser: true }), commonjs(), sourcemaps(), - // eslint-disable-next-line no-undef - process.env.NODE_ENV === "production" ? terser() : undefined, + isProdBuild && terser(), copy({ targets: [...resources], copyOnce: false, @@ -75,6 +82,7 @@ export default [ format: "es", dir: "dist", sourcemap: true, + manualChunks: manualChunks, }, ], plugins: [ @@ -86,8 +94,7 @@ export default [ resolve({ browser: true }), commonjs(), sourcemaps(), - // eslint-disable-next-line no-undef - process.env.NODE_ENV === "production" ? terser() : undefined, + isProdBuild && terser(), copy({ targets: [...resources], copyOnce: false, diff --git a/web/src/authentik.css b/web/src/authentik.css index c391694a9..b3392a3f6 100644 --- a/web/src/authentik.css +++ b/web/src/authentik.css @@ -20,54 +20,6 @@ html > input { display: block; } -/* login page's icons */ -.pf-c-login__main-footer-links-item-link img { - fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill); - width: 100%; - max-width: var(--pf-c-login__main-footer-links-item-link-svg--Width); - height: 100%; - max-height: var(--pf-c-login__main-footer-links-item-link-svg--Height); -} - -/* fix multiple selects height */ -select[multiple] { - height: 15em; -} - -/* Form with user */ -.form-control-static { - margin-top: var(--pf-global--spacer--sm); - display: flex; - align-items: center; - justify-content: space-between; -} -.form-control-static .left { - display: flex; - align-items: center; -} -.form-control-static img { - margin-right: var(--pf-global--spacer--xs); -} -.form-control-static a { - padding-top: var(--pf-global--spacer--xs); - padding-bottom: var(--pf-global--spacer--xs); - line-height: var(--pf-global--spacer--xl); -} - -/* Static OTP Tokens, authentik.stages.otp_static */ -.ak-otp-tokens { - list-style: circle; - columns: 2; - -webkit-columns: 2; - -moz-columns: 2; - margin-left: var(--pf-global--spacer--xs); - width: 100%; -} -.ak-otp-tokens li { - font-size: var(--pf-global--FontSize--2xl); - font-family: monospace; -} - .pf-c-content h1 { display: flex; align-items: flex-start; @@ -79,14 +31,6 @@ select[multiple] { margin-right: var(--pf-global--spacer--sm); } -.subtext { - font-size: var(--pf-global--FontSize--sm); -} - -.pf-c-page__main, .pf-c-drawer__content, .pf-c-page__drawer { - z-index: auto !important; -} - /* ensure background on non-flow pages match */ .pf-c-background-image::before { background-image: url("/static/dist/assets/images/flow_background.jpg"); @@ -124,7 +68,7 @@ ak-message { } /* Header sections */ .pf-c-page__main-section { - background-color: var(--ak-dark-background); + --pf-c-page__main-section--BackgroundColor: var(--ak-dark-background); } .pf-c-page__main-section.pf-m-light { background-color: var(--ak-dark-background-light); @@ -199,7 +143,7 @@ ak-message { --pf-c-form-control--BorderRightColor: var(--ak-dark-background-lighter); --pf-c-form-control--BorderLeftColor: var(--ak-dark-background-lighter); --pf-global--BackgroundColor--100: transparent; - background-color: var(--ak-dark-background-light); + --pf-c-form-control--BackgroundColor: var(--ak-dark-background-light); color: var(--ak-dark-foreground); } .pf-c-form-control[readonly] { diff --git a/web/src/common/styles.ts b/web/src/common/styles.ts index 2fdbd8c29..2c07b0d78 100644 --- a/web/src/common/styles.ts +++ b/web/src/common/styles.ts @@ -1,10 +1,4 @@ -import { css, CSSResult } from "lit-element"; -import PF from "@patternfly/patternfly/patternfly.css"; -import PFAddons from "@patternfly/patternfly/patternfly-addons.css"; -import FA from "@fortawesome/fontawesome-free/css/fontawesome.css"; -import AKGlobal from "../authentik.css"; -import CodeMirrorStyle from "codemirror/lib/codemirror.css"; -import CodeMirrorTheme from "codemirror/theme/monokai.css"; +import { css } from "lit-element"; export const ColorStyles = css` .pf-m-success { @@ -29,4 +23,3 @@ export const ColorStyles = css` background-color: var(--pf-global--danger-color--100); } `; -export const COMMON_STYLES: CSSResult[] = [PF, PFAddons, FA, AKGlobal, CodeMirrorStyle, CodeMirrorTheme, ColorStyles]; diff --git a/web/src/elements/EmptyState.ts b/web/src/elements/EmptyState.ts index a1a14cb2b..e8341743f 100644 --- a/web/src/elements/EmptyState.ts +++ b/web/src/elements/EmptyState.ts @@ -1,7 +1,9 @@ import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css"; -import FA from "@fortawesome/fontawesome-free/css/fontawesome.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css"; +import PFTitle from "@patternfly/patternfly/components/Title/title.css"; + +import { SpinnerSize } from "./Spinner"; @customElement("ak-empty-state") export class EmptyState extends LitElement { @@ -9,17 +11,24 @@ export class EmptyState extends LitElement { @property({type: String}) icon = ""; + @property({type: Boolean}) + loading = false; + @property() header?: string; static get styles(): CSSResult[] { - return [PFBase, FA, PFEmptyState]; + return [PFBase, PFEmptyState, PFTitle]; } render(): TemplateResult { return html`
- + ${this.loading ? + html`
+ +
`: + html``}

${this.header}

diff --git a/web/src/elements/Tabs.ts b/web/src/elements/Tabs.ts index 2d1006f5c..0871f0181 100644 --- a/web/src/elements/Tabs.ts +++ b/web/src/elements/Tabs.ts @@ -1,10 +1,7 @@ import { LitElement, html, customElement, property, CSSResult, TemplateResult, css } from "lit-element"; import { ifDefined } from "lit-html/directives/if-defined"; -// @ts-ignore -import TabsStyle from "@patternfly/patternfly/components/Tabs/tabs.css"; -// @ts-ignore -import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css"; -// @ts-ignore +import PFTabs from "@patternfly/patternfly/components/Tabs/tabs.css"; +import PFGlobal from "@patternfly/patternfly/patternfly-base.css"; import AKGlobal from "../authentik.css"; import { CURRENT_CLASS } from "../constants"; import { gettext } from "django"; @@ -18,7 +15,7 @@ export class Tabs extends LitElement { vertical = false; static get styles(): CSSResult[] { - return [GlobalsStyle, TabsStyle, AKGlobal, css` + return [PFGlobal, PFTabs, AKGlobal, css` ::slotted(*) { height: 100%; flex-grow: 2; diff --git a/web/src/elements/buttons/ModalButton.ts b/web/src/elements/buttons/ModalButton.ts index 1991d260c..1e2953c9e 100644 --- a/web/src/elements/buttons/ModalButton.ts +++ b/web/src/elements/buttons/ModalButton.ts @@ -1,11 +1,21 @@ import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; import { unsafeHTML } from "lit-html/directives/unsafe-html"; +import PFBase from "@patternfly/patternfly/patternfly-base.css"; +import PFButton from "@patternfly/patternfly/components/Button/button.css"; +import PFModalBox from "@patternfly/patternfly/components/ModalBox/modal-box.css"; +import PFForm from "@patternfly/patternfly/components/Form/form.css"; +import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; +import PFBullseye from "@patternfly/patternfly/layouts/Bullseye/bullseye.css"; +import PFBackdrop from "@patternfly/patternfly/components/Backdrop/backdrop.css"; +import PFPage from "@patternfly/patternfly/components/Page/page.css"; +import PFStack from "@patternfly/patternfly/layouts/Stack/stack.css"; +import PFCard from "@patternfly/patternfly/components/Card/card.css"; +import PFContent from "@patternfly/patternfly/components/Content/content.css"; import { convertToSlug } from "../../utils"; import { SpinnerButton } from "./SpinnerButton"; import { PRIMARY_CLASS } from "../../constants"; import { showMessage } from "../messages/MessageContainer"; -import { COMMON_STYLES } from "../../common/styles"; @customElement("ak-modal-button") export class ModalButton extends LitElement { @@ -19,7 +29,7 @@ export class ModalButton extends LitElement { modal = ""; static get styles(): CSSResult[] { - return COMMON_STYLES.concat( + return [PFBase, PFButton, PFModalBox, PFForm, PFFormControl, PFBullseye, PFBackdrop, PFPage, PFStack, PFCard, PFContent].concat( css` :host { text-align: left; @@ -30,6 +40,10 @@ export class ModalButton extends LitElement { .pf-c-modal-box > .pf-c-button + * { margin-right: 0; } + /* fix multiple selects height */ + select[multiple] { + height: 15em; + } ` ); } diff --git a/web/src/elements/buttons/SpinnerButton.ts b/web/src/elements/buttons/SpinnerButton.ts index f8a59cb21..bf97c70dd 100644 --- a/web/src/elements/buttons/SpinnerButton.ts +++ b/web/src/elements/buttons/SpinnerButton.ts @@ -1,6 +1,6 @@ import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; // @ts-ignore -import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css"; +import GlobalsStyle from "@patternfly/patternfly/patternfly-base.css"; // @ts-ignore import ButtonStyle from "@patternfly/patternfly/components/Button/button.css"; // @ts-ignore diff --git a/web/src/elements/buttons/TokenCopyButton.ts b/web/src/elements/buttons/TokenCopyButton.ts index 0fa257bd4..c1e732876 100644 --- a/web/src/elements/buttons/TokenCopyButton.ts +++ b/web/src/elements/buttons/TokenCopyButton.ts @@ -1,6 +1,6 @@ import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; // @ts-ignore -import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css"; +import GlobalsStyle from "@patternfly/patternfly/patternfly-base.css"; // @ts-ignore import ButtonStyle from "@patternfly/patternfly/components/Button/button.css"; import { CoreApi } from "authentik-api"; diff --git a/web/src/elements/cards/AggregateCard.ts b/web/src/elements/cards/AggregateCard.ts index 101114df0..6a2cd6cc8 100644 --- a/web/src/elements/cards/AggregateCard.ts +++ b/web/src/elements/cards/AggregateCard.ts @@ -1,7 +1,9 @@ import { gettext } from "django"; import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; import { ifDefined } from "lit-html/directives/if-defined"; -import { COMMON_STYLES } from "../../common/styles"; +import PFBase from "@patternfly/patternfly/patternfly-base.css"; +import PFCard from "@patternfly/patternfly/components/Card/card.css"; +import PFFlex from "@patternfly/patternfly/layouts/Flex/flex.css"; @customElement("ak-aggregate-card") export class AggregateCard extends LitElement { @@ -15,7 +17,7 @@ export class AggregateCard extends LitElement { headerLink?: string; static get styles(): CSSResult[] { - return COMMON_STYLES.concat([css` + return [PFBase, PFCard, PFFlex].concat([css` .pf-c-card.pf-c-card-aggregate { height: 100%; } @@ -24,6 +26,9 @@ export class AggregateCard extends LitElement { text-align: center; color: var(--pf-global--Color--100); } + .subtext { + font-size: var(--pf-global--FontSize--sm); + } `]); } diff --git a/web/src/elements/messages/Message.ts b/web/src/elements/messages/Message.ts index 79ce70cc2..1c215f190 100644 --- a/web/src/elements/messages/Message.ts +++ b/web/src/elements/messages/Message.ts @@ -4,7 +4,6 @@ import PFAlertGroup from "@patternfly/patternfly/components/AlertGroup/alert-gro import PFAlert from "@patternfly/patternfly/components/Alert/alert.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; -import FA from "@fortawesome/fontawesome-free/css/fontawesome.css"; export interface APIMessage { level_tag: string; @@ -32,7 +31,7 @@ export class Message extends LitElement { onRemove?: (m: APIMessage) => void; static get styles(): CSSResult[] { - return [PFBase, FA, PFButton, PFAlert, PFAlertGroup]; + return [PFBase, PFButton, PFAlert, PFAlertGroup]; } firstUpdated(): void { diff --git a/web/src/elements/notifications/NotificationDrawer.ts b/web/src/elements/notifications/NotificationDrawer.ts index ffef63b6f..e8e301db7 100644 --- a/web/src/elements/notifications/NotificationDrawer.ts +++ b/web/src/elements/notifications/NotificationDrawer.ts @@ -3,7 +3,9 @@ import { css, CSSResult, customElement, html, LitElement, property, TemplateResu import { EventsApi, Notification } from "authentik-api"; import { AKResponse } from "../../api/Client"; import { DEFAULT_CONFIG } from "../../api/Config"; -import { COMMON_STYLES } from "../../common/styles"; +import PFBase from "@patternfly/patternfly/patternfly-base.css"; +import PFNotificationDrawer from "@patternfly/patternfly/components/NotificationDrawer/notification-drawer.css"; +import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css"; @customElement("ak-notification-drawer") export class NotificationDrawer extends LitElement { @@ -15,7 +17,7 @@ export class NotificationDrawer extends LitElement { unread = 0; static get styles(): CSSResult[] { - return COMMON_STYLES.concat( + return [PFBase, PFNotificationDrawer, PFDropdown].concat( css` .pf-c-notification-drawer__header { height: 114px; diff --git a/web/src/elements/notifications/NotificationTrigger.ts b/web/src/elements/notifications/NotificationTrigger.ts index 842a18c2e..f20cf8a9c 100644 --- a/web/src/elements/notifications/NotificationTrigger.ts +++ b/web/src/elements/notifications/NotificationTrigger.ts @@ -1,11 +1,12 @@ import { CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element"; -import { COMMON_STYLES } from "../../common/styles"; +import PFBase from "@patternfly/patternfly/patternfly-base.css"; +import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css"; @customElement("ak-notification-trigger") export class NotificationRule extends LitElement { static get styles(): CSSResult[] { - return COMMON_STYLES; + return [PFBase, PFDropdown]; } constructor() { diff --git a/web/src/elements/router/Router404.ts b/web/src/elements/router/Router404.ts index bef417232..d04832511 100644 --- a/web/src/elements/router/Router404.ts +++ b/web/src/elements/router/Router404.ts @@ -1,6 +1,8 @@ import { gettext } from "django"; import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; -import { COMMON_STYLES } from "../../common/styles"; +import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css"; +import PFTitle from "@patternfly/patternfly/components/Title/title.css"; +import PFBase from "@patternfly/patternfly/patternfly-base.css"; @customElement("ak-router-404") export class Router404 extends LitElement { @@ -9,7 +11,7 @@ export class Router404 extends LitElement { url = ""; static get styles(): CSSResult[] { - return COMMON_STYLES; + return [PFBase, PFEmptyState, PFTitle]; } render(): TemplateResult { diff --git a/web/src/elements/router/RouterOutlet.ts b/web/src/elements/router/RouterOutlet.ts index 6aae6046e..9ebfefed2 100644 --- a/web/src/elements/router/RouterOutlet.ts +++ b/web/src/elements/router/RouterOutlet.ts @@ -1,9 +1,4 @@ import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; -// @ts-ignore -import CodeMirrorStyle from "codemirror/lib/codemirror.css"; -// @ts-ignore -import CodeMirrorTheme from "codemirror/theme/monokai.css"; -import { COMMON_STYLES } from "../../common/styles"; import { Route } from "./Route"; import { ROUTES } from "../../routes"; import { RouteMatch } from "./RouteMatch"; @@ -21,8 +16,6 @@ export class RouterOutlet extends LitElement { static get styles(): CSSResult[] { return [ - CodeMirrorStyle, - CodeMirrorTheme, css` :host { height: 100vh; @@ -33,7 +26,7 @@ export class RouterOutlet extends LitElement { flex-direction: column; } `, - ].concat(...COMMON_STYLES); + ]; } constructor() { @@ -68,9 +61,9 @@ export class RouterOutlet extends LitElement { console.debug(`authentik/router: route "${activeUrl}" not defined`); const route = new Route( RegExp(""), - html` -
- ` + html`
+ +
` ); matchedRoute = new RouteMatch(route); matchedRoute.arguments = route.url.exec(activeUrl)?.groups || {}; diff --git a/web/src/elements/sidebar/Sidebar.ts b/web/src/elements/sidebar/Sidebar.ts index 4801f04da..5a3624591 100644 --- a/web/src/elements/sidebar/Sidebar.ts +++ b/web/src/elements/sidebar/Sidebar.ts @@ -1,11 +1,7 @@ import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; -// @ts-ignore -import PageStyle from "@patternfly/patternfly/components/Page/page.css"; -// @ts-ignore -import NavStyle from "@patternfly/patternfly/components/Nav/nav.css"; -// @ts-ignore -import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css"; -// @ts-ignore +import PFPage from "@patternfly/patternfly/components/Page/page.css"; +import PFNav from "@patternfly/patternfly/components/Nav/nav.css"; +import PFBase from "@patternfly/patternfly/patternfly-base.css"; import AKGlobal from "../../authentik.css"; import { until } from "lit-html/directives/until"; @@ -99,9 +95,9 @@ export class Sidebar extends LitElement { static get styles(): CSSResult[] { return [ - GlobalsStyle, - PageStyle, - NavStyle, + PFBase, + PFPage, + PFNav, AKGlobal, css` .pf-c-nav__link.pf-m-current::after, diff --git a/web/src/elements/sidebar/SidebarBrand.ts b/web/src/elements/sidebar/SidebarBrand.ts index c24ffbac5..615db34f5 100644 --- a/web/src/elements/sidebar/SidebarBrand.ts +++ b/web/src/elements/sidebar/SidebarBrand.ts @@ -1,8 +1,6 @@ import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; -// @ts-ignore -import PageStyle from "@patternfly/patternfly/components/Page/page.css"; -// @ts-ignore -import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css"; +import PFPage from "@patternfly/patternfly/components/Page/page.css"; +import PFGlobal from "@patternfly/patternfly/patternfly-base.css"; import { configureSentry } from "../../api/Config"; import { Config } from "authentik-api"; import { ifDefined } from "lit-html/directives/if-defined"; @@ -23,8 +21,8 @@ export class SidebarBrand extends LitElement { static get styles(): CSSResult[] { return [ - GlobalsStyle, - PageStyle, + PFGlobal, + PFPage, css` :host { display: flex; diff --git a/web/src/elements/sidebar/SidebarHamburger.ts b/web/src/elements/sidebar/SidebarHamburger.ts index 0312cefd5..5ddf2e317 100644 --- a/web/src/elements/sidebar/SidebarHamburger.ts +++ b/web/src/elements/sidebar/SidebarHamburger.ts @@ -1,11 +1,13 @@ import { css, CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element"; -import { COMMON_STYLES } from "../../common/styles"; +import PFBase from "@patternfly/patternfly/patternfly-base.css"; +import PFButton from "@patternfly/patternfly/components/Button/button.css"; + @customElement("ak-sidebar-hamburger") export class SidebarHamburger extends LitElement { static get styles(): CSSResult[] { - return COMMON_STYLES.concat( + return [PFBase, PFButton].concat( css` :host { position: absolute; diff --git a/web/src/elements/sidebar/SidebarUser.ts b/web/src/elements/sidebar/SidebarUser.ts index fc17cfbde..2a516e172 100644 --- a/web/src/elements/sidebar/SidebarUser.ts +++ b/web/src/elements/sidebar/SidebarUser.ts @@ -1,12 +1,9 @@ import { css, CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element"; -// @ts-ignore -import NavStyle from "@patternfly/patternfly/components/Nav/nav.css"; -// @ts-ignore -import fa from "@fortawesome/fontawesome-free/css/all.css"; -// @ts-ignore -import AvatarStyle from "@patternfly/patternfly/components/Avatar/avatar.css"; +import PFNav from "@patternfly/patternfly/components/Nav/nav.css"; +import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css"; import { me } from "../../api/Users"; import { until } from "lit-html/directives/until"; +import PFBase from "@patternfly/patternfly/patternfly-base.css"; import "../notifications/NotificationTrigger"; import { ifDefined } from "lit-html/directives/if-defined"; @@ -16,9 +13,9 @@ export class SidebarUser extends LitElement { static get styles(): CSSResult[] { return [ - fa, - NavStyle, - AvatarStyle, + PFBase, + PFNav, + PFAvatar, css` :host { display: flex; diff --git a/web/src/elements/table/Table.ts b/web/src/elements/table/Table.ts index e8775a864..b8f3053cd 100644 --- a/web/src/elements/table/Table.ts +++ b/web/src/elements/table/Table.ts @@ -1,12 +1,18 @@ import { gettext } from "django"; import { CSSResult, html, LitElement, property, TemplateResult } from "lit-element"; import { AKResponse } from "../../api/Client"; -import { COMMON_STYLES } from "../../common/styles"; + +import PFBase from "@patternfly/patternfly/patternfly-base.css"; +import PFTable from "@patternfly/patternfly/components/Table/table.css"; +import PFBullseye from "@patternfly/patternfly/layouts/Bullseye/bullseye.css"; +import PFButton from "@patternfly/patternfly/components/Button/button.css"; +import PFToolbar from "@patternfly/patternfly/components/Toolbar/toolbar.css"; +import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css"; +import PFPagination from "@patternfly/patternfly/components/Pagination/pagination.css"; +import AKGlobal from "../../authentik.css"; import "./TablePagination"; import "../EmptyState"; -import "../Spinner"; -import { SpinnerSize } from "../Spinner"; export class TableColumn { @@ -109,7 +115,7 @@ export abstract class Table extends LitElement { expandedRows: boolean[] = []; static get styles(): CSSResult[] { - return COMMON_STYLES; + return [PFBase, PFTable, PFBullseye, PFButton, PFToolbar, PFDropdown, PFPagination, AKGlobal]; } constructor() { @@ -138,14 +144,10 @@ export abstract class Table extends LitElement { return html`
-
-
-
- -
-

${gettext("Loading")}

-
-
+ +
`; diff --git a/web/src/elements/table/TablePage.ts b/web/src/elements/table/TablePage.ts index 20876cbe2..d0c0a2063 100644 --- a/web/src/elements/table/TablePage.ts +++ b/web/src/elements/table/TablePage.ts @@ -1,8 +1,11 @@ import { gettext } from "django"; +import { CSSResult } from "lit-element"; import { html, TemplateResult } from "lit-html"; import { ifDefined } from "lit-html/directives/if-defined"; import { Table } from "./Table"; import "./TableSearch"; +import PFPage from "@patternfly/patternfly/components/Page/page.css"; +import PFContent from "@patternfly/patternfly/components/Content/content.css"; export abstract class TablePage extends Table { abstract pageTitle(): string; @@ -10,6 +13,10 @@ export abstract class TablePage extends Table { abstract pageIcon(): string; abstract searchEnabled(): boolean; + static get styles(): CSSResult[] { + return super.styles.concat(PFPage, PFContent); + } + renderSearch(): TemplateResult { if (!this.searchEnabled()) { return super.renderSearch(); diff --git a/web/src/elements/table/TablePagination.ts b/web/src/elements/table/TablePagination.ts index 0bfee7c84..9b267b7bb 100644 --- a/web/src/elements/table/TablePagination.ts +++ b/web/src/elements/table/TablePagination.ts @@ -1,7 +1,10 @@ import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; -import { COMMON_STYLES } from "../../common/styles"; import { AKPagination } from "../../api/Client"; import { gettext } from "django"; +import PFBase from "@patternfly/patternfly/patternfly-base.css"; +import PFButton from "@patternfly/patternfly/components/Button/button.css"; +import PFPagination from "@patternfly/patternfly/components/Pagination/pagination.css"; + @customElement("ak-table-pagination") export class TablePagination extends LitElement { @@ -13,7 +16,7 @@ export class TablePagination extends LitElement { pageChangeHandler: (page: number) => void = (page: number) => {} static get styles(): CSSResult[] { - return COMMON_STYLES; + return [PFBase, PFButton, PFPagination]; } render(): TemplateResult { diff --git a/web/src/elements/table/TableSearch.ts b/web/src/elements/table/TableSearch.ts index c66cf5208..1326d58e7 100644 --- a/web/src/elements/table/TableSearch.ts +++ b/web/src/elements/table/TableSearch.ts @@ -1,6 +1,11 @@ import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; import { ifDefined } from "lit-html/directives/if-defined"; -import { COMMON_STYLES } from "../../common/styles"; +import PFBase from "@patternfly/patternfly/patternfly-base.css"; +import PFButton from "@patternfly/patternfly/components/Button/button.css"; +import PFToolbar from "@patternfly/patternfly/components/Toolbar/toolbar.css"; +import PFInputGroup from "@patternfly/patternfly/components/InputGroup/input-group.css"; +import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; + @customElement("ak-table-search") export class TableSearch extends LitElement { @@ -12,7 +17,7 @@ export class TableSearch extends LitElement { onSearch?: (value: string) => void; static get styles(): CSSResult[] { - return COMMON_STYLES; + return [PFBase, PFButton, PFToolbar, PFInputGroup, PFFormControl]; } render(): TemplateResult { diff --git a/web/src/elements/utils/LoadingState.ts b/web/src/elements/utils/LoadingState.ts deleted file mode 100644 index f6a51abd6..000000000 --- a/web/src/elements/utils/LoadingState.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element"; -import { COMMON_STYLES } from "../../common/styles"; -import { SpinnerSize } from "../Spinner"; - -@customElement("ak-loading-state") -export class LoadingState extends LitElement { - - static get styles(): CSSResult[] { - return COMMON_STYLES; - } - - render(): TemplateResult { - return html`
-
-
-
- -
-
-
-
`; - } -} diff --git a/web/src/flows/FlowExecutor.ts b/web/src/flows/FlowExecutor.ts index 7c14574e2..5ba23400c 100644 --- a/web/src/flows/FlowExecutor.ts +++ b/web/src/flows/FlowExecutor.ts @@ -5,6 +5,8 @@ import PFLogin from "@patternfly/patternfly/components/Login/login.css"; import PFBackgroundImage from "@patternfly/patternfly/components/BackgroundImage/background-image.css"; import PFList from "@patternfly/patternfly/components/List/list.css"; import AKGlobal from "../authentik.css"; +import PFBase from "@patternfly/patternfly/patternfly-base.css"; +import PFTitle from "@patternfly/patternfly/components/Title/title.css"; import { unsafeHTML } from "lit-html/directives/unsafe-html"; import "./stages/authenticator_static/AuthenticatorStaticStage"; @@ -30,7 +32,6 @@ import { AuthenticatorStaticChallenge } from "./stages/authenticator_static/Auth import { AuthenticatorValidateStageChallenge } from "./stages/authenticator_validate/AuthenticatorValidateStage"; import { WebAuthnAuthenticatorRegisterChallenge } from "./stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage"; import { CaptchaChallenge } from "./stages/captcha/CaptchaStage"; -import { COMMON_STYLES } from "../common/styles"; import { SpinnerSize } from "../elements/Spinner"; import { StageHost } from "./stages/base"; import { Challenge, ChallengeTypeEnum, FlowsApi } from "authentik-api"; @@ -48,7 +49,7 @@ export class FlowExecutor extends LitElement implements StageHost { loading = false; static get styles(): CSSResult[] { - return COMMON_STYLES.concat(css` + return [PFBase, PFLogin, PFTitle].concat(css` .ak-loading { display: flex; height: 100%; @@ -64,6 +65,10 @@ export class FlowExecutor extends LitElement implements StageHost { :host { position: relative; } + .ak-exception { + font-family: monospace; + overflow-x: scroll; + } `); } @@ -110,21 +115,15 @@ export class FlowExecutor extends LitElement implements StageHost { errorMessage(error: string): void { this.challenge = { type: ChallengeTypeEnum.Shell, - body: ` - - ` + body: ` + ` }; } diff --git a/web/src/flows/FormStatic.ts b/web/src/flows/FormStatic.ts new file mode 100644 index 000000000..44c222817 --- /dev/null +++ b/web/src/flows/FormStatic.ts @@ -0,0 +1,39 @@ +import { css, CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element"; + +@customElement("ak-form-static") +export class FormStatic extends LitElement { + + static get styles(): CSSResult[] { + return [css` + /* Form with user */ + .form-control-static { + margin-top: var(--pf-global--spacer--sm); + display: flex; + align-items: center; + justify-content: space-between; + } + .form-control-static slot[name=avatar] { + display: flex; + align-items: center; + } + .form-control-static img { + margin-right: var(--pf-global--spacer--xs); + } + .form-control-static a { + padding-top: var(--pf-global--spacer--xs); + padding-bottom: var(--pf-global--spacer--xs); + line-height: var(--pf-global--spacer--xl); + } + `]; + } + + render(): TemplateResult { + return html` +
+ + +
+ `; + } + +} diff --git a/web/src/flows/stages/authenticator_static/AuthenticatorStaticStage.ts b/web/src/flows/stages/authenticator_static/AuthenticatorStaticStage.ts index ed4d32d89..2187c0ea9 100644 --- a/web/src/flows/stages/authenticator_static/AuthenticatorStaticStage.ts +++ b/web/src/flows/stages/authenticator_static/AuthenticatorStaticStage.ts @@ -1,10 +1,15 @@ import { gettext } from "django"; import { css, CSSResult, customElement, html, property, TemplateResult } from "lit-element"; import { WithUserInfoChallenge } from "../../../api/Flows"; -import { COMMON_STYLES } from "../../../common/styles"; +import PFLogin from "@patternfly/patternfly/components/Login/login.css"; +import PFForm from "@patternfly/patternfly/components/Form/form.css"; +import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; +import PFTitle from "@patternfly/patternfly/components/Title/title.css"; +import PFButton from "@patternfly/patternfly/components/Button/button.css"; import { BaseStage } from "../base"; import "../../../elements/forms/FormElement"; -import "../../../elements/utils/LoadingState"; +import "../../../elements/EmptyState"; +import "../../FormStatic"; export interface AuthenticatorStaticChallenge extends WithUserInfoChallenge { codes: number[]; @@ -17,7 +22,7 @@ export class AuthenticatorStaticStage extends BaseStage { challenge?: AuthenticatorStaticChallenge; static get styles(): CSSResult[] { - return COMMON_STYLES.concat(css` + return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton].concat(css` /* Static OTP Tokens */ .ak-otp-tokens { list-style: circle; @@ -35,7 +40,10 @@ export class AuthenticatorStaticStage extends BaseStage { render(): TemplateResult { if (!this.challenge) { - return html``; + return html` + `; } return html`