trustchain-oc1-orchestral
/
authentik
Archived
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web: remove common_styles 

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-03-17 17:11:39 +01:00
parent 2698d9d23a
commit 43bf9e6c21
59 changed files with 500 additions and 351 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/nginx.conf
View File

@ -72,11 +72,17 @@ http {
listen 80; listen 80;
server_name _; server_name _;
charset utf-8; charset utf-8;
root /usr/share/nginx/html;
location / { location / {
root /usr/share/nginx/html;
access_log /dev/stdout json_combined; 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;
}
} }
} }

19
web/rollup.config.js
View File

@ -15,6 +15,14 @@ const resources = [
{ src: "src/assets/*", dest: "dist/assets" }, { src: "src/assets/*", dest: "dist/assets" },
{ src: "./icons/*", dest: "dist/assets/icons" }, { 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 [ export default [
// Autogenerated API Client // Autogenerated API Client
@ -29,8 +37,7 @@ export default [
], ],
plugins: [ plugins: [
typescript(), typescript(),
// eslint-disable-next-line no-undef isProdBuild && terser(),
process.env.NODE_ENV === "production" ? terser() : undefined,
].filter(p => p), ].filter(p => p),
watch: { watch: {
clearScreen: false, clearScreen: false,
@ -44,6 +51,7 @@ export default [
format: "es", format: "es",
dir: "dist", dir: "dist",
sourcemap: true, sourcemap: true,
manualChunks: manualChunks,
}, },
], ],
plugins: [ plugins: [
@ -55,8 +63,7 @@ export default [
resolve({ browser: true }), resolve({ browser: true }),
commonjs(), commonjs(),
sourcemaps(), sourcemaps(),
// eslint-disable-next-line no-undef isProdBuild && terser(),
process.env.NODE_ENV === "production" ? terser() : undefined,
copy({ copy({
targets: [...resources], targets: [...resources],
copyOnce: false, copyOnce: false,
@ -75,6 +82,7 @@ export default [
format: "es", format: "es",
dir: "dist", dir: "dist",
sourcemap: true, sourcemap: true,
manualChunks: manualChunks,
}, },
], ],
plugins: [ plugins: [
@ -86,8 +94,7 @@ export default [
resolve({ browser: true }), resolve({ browser: true }),
commonjs(), commonjs(),
sourcemaps(), sourcemaps(),
// eslint-disable-next-line no-undef isProdBuild && terser(),
process.env.NODE_ENV === "production" ? terser() : undefined,
copy({ copy({
targets: [...resources], targets: [...resources],
copyOnce: false, copyOnce: false,

60
web/src/authentik.css
View File

@ -20,54 +20,6 @@ html > input {
display: block; 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 { .pf-c-content h1 {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
@ -79,14 +31,6 @@ select[multiple] {
margin-right: var(--pf-global--spacer--sm); 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 */ /* ensure background on non-flow pages match */
.pf-c-background-image::before { .pf-c-background-image::before {
background-image: url("/static/dist/assets/images/flow_background.jpg"); background-image: url("/static/dist/assets/images/flow_background.jpg");
@ -124,7 +68,7 @@ ak-message {
} }
/* Header sections */ /* Header sections */
.pf-c-page__main-section { .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 { .pf-c-page__main-section.pf-m-light {
background-color: var(--ak-dark-background-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--BorderRightColor: var(--ak-dark-background-lighter);
--pf-c-form-control--BorderLeftColor: var(--ak-dark-background-lighter); --pf-c-form-control--BorderLeftColor: var(--ak-dark-background-lighter);
--pf-global--BackgroundColor--100: transparent; --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); color: var(--ak-dark-foreground);
} }
.pf-c-form-control[readonly] { .pf-c-form-control[readonly] {

9
web/src/common/styles.ts
View File

@ -1,10 +1,4 @@
import { css, CSSResult } from "lit-element"; import { css } 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";
export const ColorStyles = css` export const ColorStyles = css`
.pf-m-success { .pf-m-success {
@ -29,4 +23,3 @@ export const ColorStyles = css`
background-color: var(--pf-global--danger-color--100); background-color: var(--pf-global--danger-color--100);
} }
`; `;
export const COMMON_STYLES: CSSResult[] = [PF, PFAddons, FA, AKGlobal, CodeMirrorStyle, CodeMirrorTheme, ColorStyles];

15
web/src/elements/EmptyState.ts
View File

@ -1,7 +1,9 @@
import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css"; 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 PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import { SpinnerSize } from "./Spinner";
@customElement("ak-empty-state") @customElement("ak-empty-state")
export class EmptyState extends LitElement { export class EmptyState extends LitElement {
@ -9,17 +11,24 @@ export class EmptyState extends LitElement {
@property({type: String}) @property({type: String})
icon = ""; icon = "";
@property({type: Boolean})
loading = false;
@property() @property()
header?: string; header?: string;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [PFBase, FA, PFEmptyState]; return [PFBase, PFEmptyState, PFTitle];
} }
render(): TemplateResult { render(): TemplateResult {
return html`<div class="pf-c-empty-state"> return html`<div class="pf-c-empty-state">
<div class="pf-c-empty-state__content"> <div class="pf-c-empty-state__content">
<i class="pf-icon fa ${this.icon || "fa-question-circle"} pf-c-empty-state__icon" aria-hidden="true"></i> ${this.loading ?
html`<div class="pf-c-empty-state__icon">
<ak-spinner size=${SpinnerSize.XLarge}></ak-spinner>
</div>`:
html`<i class="pf-icon fa ${this.icon || "fa-question-circle"} pf-c-empty-state__icon" aria-hidden="true"></i>`}
<h1 class="pf-c-title pf-m-lg"> <h1 class="pf-c-title pf-m-lg">
${this.header} ${this.header}
</h1> </h1>

9
web/src/elements/Tabs.ts
View File

@ -1,10 +1,7 @@
import { LitElement, html, customElement, property, CSSResult, TemplateResult, css } from "lit-element"; import { LitElement, html, customElement, property, CSSResult, TemplateResult, css } from "lit-element";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
// @ts-ignore import PFTabs from "@patternfly/patternfly/components/Tabs/tabs.css";
import TabsStyle from "@patternfly/patternfly/components/Tabs/tabs.css"; import PFGlobal from "@patternfly/patternfly/patternfly-base.css";
// @ts-ignore
import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
// @ts-ignore
import AKGlobal from "../authentik.css"; import AKGlobal from "../authentik.css";
import { CURRENT_CLASS } from "../constants"; import { CURRENT_CLASS } from "../constants";
import { gettext } from "django"; import { gettext } from "django";
@ -18,7 +15,7 @@ export class Tabs extends LitElement {
vertical = false; vertical = false;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [GlobalsStyle, TabsStyle, AKGlobal, css` return [PFGlobal, PFTabs, AKGlobal, css`
::slotted(*) { ::slotted(*) {
height: 100%; height: 100%;
flex-grow: 2; flex-grow: 2;

18
web/src/elements/buttons/ModalButton.ts
View File

@ -1,11 +1,21 @@
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { unsafeHTML } from "lit-html/directives/unsafe-html"; 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 { convertToSlug } from "../../utils";
import { SpinnerButton } from "./SpinnerButton"; import { SpinnerButton } from "./SpinnerButton";
import { PRIMARY_CLASS } from "../../constants"; import { PRIMARY_CLASS } from "../../constants";
import { showMessage } from "../messages/MessageContainer"; import { showMessage } from "../messages/MessageContainer";
import { COMMON_STYLES } from "../../common/styles";
@customElement("ak-modal-button") @customElement("ak-modal-button")
export class ModalButton extends LitElement { export class ModalButton extends LitElement {
@ -19,7 +29,7 @@ export class ModalButton extends LitElement {
modal = "<slot name='modal'></slot>"; modal = "<slot name='modal'></slot>";
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES.concat( return [PFBase, PFButton, PFModalBox, PFForm, PFFormControl, PFBullseye, PFBackdrop, PFPage, PFStack, PFCard, PFContent].concat(
css` css`
:host { :host {
text-align: left; text-align: left;
@ -30,6 +40,10 @@ export class ModalButton extends LitElement {
.pf-c-modal-box > .pf-c-button + * { .pf-c-modal-box > .pf-c-button + * {
margin-right: 0; margin-right: 0;
} }
/* fix multiple selects height */
select[multiple] {
height: 15em;
}
` `
); );
} }

2
web/src/elements/buttons/SpinnerButton.ts
View File

@ -1,6 +1,6 @@
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
// @ts-ignore // @ts-ignore
import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css"; import GlobalsStyle from "@patternfly/patternfly/patternfly-base.css";
// @ts-ignore // @ts-ignore
import ButtonStyle from "@patternfly/patternfly/components/Button/button.css"; import ButtonStyle from "@patternfly/patternfly/components/Button/button.css";
// @ts-ignore // @ts-ignore

2
web/src/elements/buttons/TokenCopyButton.ts
View File

@ -1,6 +1,6 @@
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
// @ts-ignore // @ts-ignore
import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css"; import GlobalsStyle from "@patternfly/patternfly/patternfly-base.css";
// @ts-ignore // @ts-ignore
import ButtonStyle from "@patternfly/patternfly/components/Button/button.css"; import ButtonStyle from "@patternfly/patternfly/components/Button/button.css";
import { CoreApi } from "authentik-api"; import { CoreApi } from "authentik-api";

9
web/src/elements/cards/AggregateCard.ts
View File

@ -1,7 +1,9 @@
import { gettext } from "django"; import { gettext } from "django";
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { ifDefined } from "lit-html/directives/if-defined"; 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") @customElement("ak-aggregate-card")
export class AggregateCard extends LitElement { export class AggregateCard extends LitElement {
@ -15,7 +17,7 @@ export class AggregateCard extends LitElement {
headerLink?: string; headerLink?: string;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES.concat([css` return [PFBase, PFCard, PFFlex].concat([css`
.pf-c-card.pf-c-card-aggregate { .pf-c-card.pf-c-card-aggregate {
height: 100%; height: 100%;
} }
@ -24,6 +26,9 @@ export class AggregateCard extends LitElement {
text-align: center; text-align: center;
color: var(--pf-global--Color--100); color: var(--pf-global--Color--100);
} }
.subtext {
font-size: var(--pf-global--FontSize--sm);
}
`]); `]);
} }

3
web/src/elements/messages/Message.ts
View File

@ -4,7 +4,6 @@ import PFAlertGroup from "@patternfly/patternfly/components/AlertGroup/alert-gro
import PFAlert from "@patternfly/patternfly/components/Alert/alert.css"; import PFAlert from "@patternfly/patternfly/components/Alert/alert.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css";
import FA from "@fortawesome/fontawesome-free/css/fontawesome.css";
export interface APIMessage { export interface APIMessage {
level_tag: string; level_tag: string;
@ -32,7 +31,7 @@ export class Message extends LitElement {
onRemove?: (m: APIMessage) => void; onRemove?: (m: APIMessage) => void;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [PFBase, FA, PFButton, PFAlert, PFAlertGroup]; return [PFBase, PFButton, PFAlert, PFAlertGroup];
} }
firstUpdated(): void { firstUpdated(): void {

6
web/src/elements/notifications/NotificationDrawer.ts
View File

@ -3,7 +3,9 @@ import { css, CSSResult, customElement, html, LitElement, property, TemplateResu
import { EventsApi, Notification } from "authentik-api"; import { EventsApi, Notification } from "authentik-api";
import { AKResponse } from "../../api/Client"; import { AKResponse } from "../../api/Client";
import { DEFAULT_CONFIG } from "../../api/Config"; 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") @customElement("ak-notification-drawer")
export class NotificationDrawer extends LitElement { export class NotificationDrawer extends LitElement {
@ -15,7 +17,7 @@ export class NotificationDrawer extends LitElement {
unread = 0; unread = 0;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES.concat( return [PFBase, PFNotificationDrawer, PFDropdown].concat(
css` css`
.pf-c-notification-drawer__header { .pf-c-notification-drawer__header {
height: 114px; height: 114px;

5
web/src/elements/notifications/NotificationTrigger.ts
View File

@ -1,11 +1,12 @@
import { CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element"; 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") @customElement("ak-notification-trigger")
export class NotificationRule extends LitElement { export class NotificationRule extends LitElement {
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES; return [PFBase, PFDropdown];
} }
constructor() { constructor() {

6
web/src/elements/router/Router404.ts
View File

@ -1,6 +1,8 @@
import { gettext } from "django"; import { gettext } from "django";
import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; 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") @customElement("ak-router-404")
export class Router404 extends LitElement { export class Router404 extends LitElement {
@ -9,7 +11,7 @@ export class Router404 extends LitElement {
url = ""; url = "";
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES; return [PFBase, PFEmptyState, PFTitle];
} }
render(): TemplateResult { render(): TemplateResult {

15
web/src/elements/router/RouterOutlet.ts
View File

@ -1,9 +1,4 @@
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; 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 { Route } from "./Route";
import { ROUTES } from "../../routes"; import { ROUTES } from "../../routes";
import { RouteMatch } from "./RouteMatch"; import { RouteMatch } from "./RouteMatch";
@ -21,8 +16,6 @@ export class RouterOutlet extends LitElement {
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [ return [
CodeMirrorStyle,
CodeMirrorTheme,
css` css`
:host { :host {
height: 100vh; height: 100vh;
@ -33,7 +26,7 @@ export class RouterOutlet extends LitElement {
flex-direction: column; flex-direction: column;
} }
`, `,
].concat(...COMMON_STYLES); ];
} }
constructor() { constructor() {
@ -68,9 +61,9 @@ export class RouterOutlet extends LitElement {
console.debug(`authentik/router: route "${activeUrl}" not defined`); console.debug(`authentik/router: route "${activeUrl}" not defined`);
const route = new Route( const route = new Route(
RegExp(""), RegExp(""),
html`<ak-site-shell class="pf-c-page__main" url=${activeUrl}> html`<div class="pf-c-page__main">
<div slot="body"></div> <ak-router-404 url=${activeUrl}></ak-router-404>
</ak-site-shell>` </div>`
); );
matchedRoute = new RouteMatch(route); matchedRoute = new RouteMatch(route);
matchedRoute.arguments = route.url.exec(activeUrl)?.groups || {}; matchedRoute.arguments = route.url.exec(activeUrl)?.groups || {};

16
web/src/elements/sidebar/Sidebar.ts
View File

@ -1,11 +1,7 @@
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
// @ts-ignore import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PageStyle from "@patternfly/patternfly/components/Page/page.css"; import PFNav from "@patternfly/patternfly/components/Nav/nav.css";
// @ts-ignore import PFBase from "@patternfly/patternfly/patternfly-base.css";
import NavStyle from "@patternfly/patternfly/components/Nav/nav.css";
// @ts-ignore
import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
// @ts-ignore
import AKGlobal from "../../authentik.css"; import AKGlobal from "../../authentik.css";
import { until } from "lit-html/directives/until"; import { until } from "lit-html/directives/until";
@ -99,9 +95,9 @@ export class Sidebar extends LitElement {
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [ return [
GlobalsStyle, PFBase,
PageStyle, PFPage,
NavStyle, PFNav,
AKGlobal, AKGlobal,
css` css`
.pf-c-nav__link.pf-m-current::after, .pf-c-nav__link.pf-m-current::after,

10
web/src/elements/sidebar/SidebarBrand.ts
View File

@ -1,8 +1,6 @@
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
// @ts-ignore import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PageStyle from "@patternfly/patternfly/components/Page/page.css"; import PFGlobal from "@patternfly/patternfly/patternfly-base.css";
// @ts-ignore
import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
import { configureSentry } from "../../api/Config"; import { configureSentry } from "../../api/Config";
import { Config } from "authentik-api"; import { Config } from "authentik-api";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
@ -23,8 +21,8 @@ export class SidebarBrand extends LitElement {
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [ return [
GlobalsStyle, PFGlobal,
PageStyle, PFPage,
css` css`
:host { :host {
display: flex; display: flex;

6
web/src/elements/sidebar/SidebarHamburger.ts
View File

@ -1,11 +1,13 @@
import { css, CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element"; 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") @customElement("ak-sidebar-hamburger")
export class SidebarHamburger extends LitElement { export class SidebarHamburger extends LitElement {
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES.concat( return [PFBase, PFButton].concat(
css` css`
:host { :host {
position: absolute; position: absolute;

15
web/src/elements/sidebar/SidebarUser.ts
View File

@ -1,12 +1,9 @@
import { css, CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element"; import { css, CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
// @ts-ignore import PFNav from "@patternfly/patternfly/components/Nav/nav.css";
import NavStyle from "@patternfly/patternfly/components/Nav/nav.css"; import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";
// @ts-ignore
import fa from "@fortawesome/fontawesome-free/css/all.css";
// @ts-ignore
import AvatarStyle from "@patternfly/patternfly/components/Avatar/avatar.css";
import { me } from "../../api/Users"; import { me } from "../../api/Users";
import { until } from "lit-html/directives/until"; import { until } from "lit-html/directives/until";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import "../notifications/NotificationTrigger"; import "../notifications/NotificationTrigger";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
@ -16,9 +13,9 @@ export class SidebarUser extends LitElement {
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [ return [
fa, PFBase,
NavStyle, PFNav,
AvatarStyle, PFAvatar,
css` css`
:host { :host {
display: flex; display: flex;

26
web/src/elements/table/Table.ts
View File

@ -1,12 +1,18 @@
import { gettext } from "django"; import { gettext } from "django";
import { CSSResult, html, LitElement, property, TemplateResult } from "lit-element"; import { CSSResult, html, LitElement, property, TemplateResult } from "lit-element";
import { AKResponse } from "../../api/Client"; 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 "./TablePagination";
import "../EmptyState"; import "../EmptyState";
import "../Spinner";
import { SpinnerSize } from "../Spinner";
export class TableColumn { export class TableColumn {
@ -109,7 +115,7 @@ export abstract class Table<T> extends LitElement {
expandedRows: boolean[] = []; expandedRows: boolean[] = [];
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES; return [PFBase, PFTable, PFBullseye, PFButton, PFToolbar, PFDropdown, PFPagination, AKGlobal];
} }
constructor() { constructor() {
@ -138,14 +144,10 @@ export abstract class Table<T> extends LitElement {
return html`<tr role="row"> return html`<tr role="row">
<td role="cell" colspan="25"> <td role="cell" colspan="25">
<div class="pf-l-bullseye"> <div class="pf-l-bullseye">
<div class="pf-c-empty-state pf-m-sm"> <ak-empty-state
<div class="pf-c-empty-state__content"> ?loading="${true}"
<div class="pf-c-empty-state__icon"> header=${gettext("Loading")}>
<ak-spinner size=${SpinnerSize.XLarge}></ak-spinner> </ak-empty-state>
</div>
<h2 class="pf-c-title pf-m-lg">${gettext("Loading")}</h2>
</div>
</div>
</div> </div>
</td> </td>
</tr>`; </tr>`;

7
web/src/elements/table/TablePage.ts
View File

@ -1,8 +1,11 @@
import { gettext } from "django"; import { gettext } from "django";
import { CSSResult } from "lit-element";
import { html, TemplateResult } from "lit-html"; import { html, TemplateResult } from "lit-html";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import { Table } from "./Table"; import { Table } from "./Table";
import "./TableSearch"; import "./TableSearch";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
export abstract class TablePage<T> extends Table<T> { export abstract class TablePage<T> extends Table<T> {
abstract pageTitle(): string; abstract pageTitle(): string;
@ -10,6 +13,10 @@ export abstract class TablePage<T> extends Table<T> {
abstract pageIcon(): string; abstract pageIcon(): string;
abstract searchEnabled(): boolean; abstract searchEnabled(): boolean;
static get styles(): CSSResult[] {
return super.styles.concat(PFPage, PFContent);
}
renderSearch(): TemplateResult { renderSearch(): TemplateResult {
if (!this.searchEnabled()) { if (!this.searchEnabled()) {
return super.renderSearch(); return super.renderSearch();

7
web/src/elements/table/TablePagination.ts
View File

@ -1,7 +1,10 @@
import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { COMMON_STYLES } from "../../common/styles";
import { AKPagination } from "../../api/Client"; import { AKPagination } from "../../api/Client";
import { gettext } from "django"; 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") @customElement("ak-table-pagination")
export class TablePagination extends LitElement { export class TablePagination extends LitElement {
@ -13,7 +16,7 @@ export class TablePagination extends LitElement {
pageChangeHandler: (page: number) => void = (page: number) => {} pageChangeHandler: (page: number) => void = (page: number) => {}
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES; return [PFBase, PFButton, PFPagination];
} }
render(): TemplateResult { render(): TemplateResult {

9
web/src/elements/table/TableSearch.ts
View File

@ -1,6 +1,11 @@
import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { ifDefined } from "lit-html/directives/if-defined"; 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") @customElement("ak-table-search")
export class TableSearch extends LitElement { export class TableSearch extends LitElement {
@ -12,7 +17,7 @@ export class TableSearch extends LitElement {
onSearch?: (value: string) => void; onSearch?: (value: string) => void;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES; return [PFBase, PFButton, PFToolbar, PFInputGroup, PFFormControl];
} }
render(): TemplateResult { render(): TemplateResult {

23
web/src/elements/utils/LoadingState.ts
View File

@ -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`<div class="pf-c-empty-state pf-m-full-height">
<div class="pf-c-empty-state__content">
<div class="pf-l-bullseye">
<div class="pf-l-bullseye__item">
<ak-spinner size="${SpinnerSize.XLarge}"></ak-spinner>
</div>
</div>
</div>
</div>`;
}
}

17
web/src/flows/FlowExecutor.ts
View File

@ -5,6 +5,8 @@ import PFLogin from "@patternfly/patternfly/components/Login/login.css";
import PFBackgroundImage from "@patternfly/patternfly/components/BackgroundImage/background-image.css"; import PFBackgroundImage from "@patternfly/patternfly/components/BackgroundImage/background-image.css";
import PFList from "@patternfly/patternfly/components/List/list.css"; import PFList from "@patternfly/patternfly/components/List/list.css";
import AKGlobal from "../authentik.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 { unsafeHTML } from "lit-html/directives/unsafe-html";
import "./stages/authenticator_static/AuthenticatorStaticStage"; import "./stages/authenticator_static/AuthenticatorStaticStage";
@ -30,7 +32,6 @@ import { AuthenticatorStaticChallenge } from "./stages/authenticator_static/Auth
import { AuthenticatorValidateStageChallenge } from "./stages/authenticator_validate/AuthenticatorValidateStage"; import { AuthenticatorValidateStageChallenge } from "./stages/authenticator_validate/AuthenticatorValidateStage";
import { WebAuthnAuthenticatorRegisterChallenge } from "./stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage"; import { WebAuthnAuthenticatorRegisterChallenge } from "./stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage";
import { CaptchaChallenge } from "./stages/captcha/CaptchaStage"; import { CaptchaChallenge } from "./stages/captcha/CaptchaStage";
import { COMMON_STYLES } from "../common/styles";
import { SpinnerSize } from "../elements/Spinner"; import { SpinnerSize } from "../elements/Spinner";
import { StageHost } from "./stages/base"; import { StageHost } from "./stages/base";
import { Challenge, ChallengeTypeEnum, FlowsApi } from "authentik-api"; import { Challenge, ChallengeTypeEnum, FlowsApi } from "authentik-api";
@ -48,7 +49,7 @@ export class FlowExecutor extends LitElement implements StageHost {
loading = false; loading = false;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES.concat(css` return [PFBase, PFLogin, PFTitle].concat(css`
.ak-loading { .ak-loading {
display: flex; display: flex;
height: 100%; height: 100%;
@ -64,6 +65,10 @@ export class FlowExecutor extends LitElement implements StageHost {
:host { :host {
position: relative; position: relative;
} }
.ak-exception {
font-family: monospace;
overflow-x: scroll;
}
`); `);
} }
@ -110,13 +115,7 @@ export class FlowExecutor extends LitElement implements StageHost {
errorMessage(error: string): void { errorMessage(error: string): void {
this.challenge = <ShellChallenge>{ this.challenge = <ShellChallenge>{
type: ChallengeTypeEnum.Shell, type: ChallengeTypeEnum.Shell,
body: `<style> body: `<header class="pf-c-login__main-header">
.ak-exception {
font-family: monospace;
overflow-x: scroll;
}
</style>
<header class="pf-c-login__main-header">
<h1 class="pf-c-title pf-m-3xl"> <h1 class="pf-c-title pf-m-3xl">
${gettext("Whoops!")} ${gettext("Whoops!")}
</h1> </h1>

39
web/src/flows/FormStatic.ts Normal file
View File

@ -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`
<div class="form-control-static">
<slot name="avatar"></slot>
<slot name="link"></slot>
</div>
`;
}
}

26
web/src/flows/stages/authenticator_static/AuthenticatorStaticStage.ts
View File

@ -1,10 +1,15 @@
import { gettext } from "django"; import { gettext } from "django";
import { css, CSSResult, customElement, html, property, TemplateResult } from "lit-element"; import { css, CSSResult, customElement, html, property, TemplateResult } from "lit-element";
import { WithUserInfoChallenge } from "../../../api/Flows"; 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 { BaseStage } from "../base";
import "../../../elements/forms/FormElement"; import "../../../elements/forms/FormElement";
import "../../../elements/utils/LoadingState"; import "../../../elements/EmptyState";
import "../../FormStatic";
export interface AuthenticatorStaticChallenge extends WithUserInfoChallenge { export interface AuthenticatorStaticChallenge extends WithUserInfoChallenge {
codes: number[]; codes: number[];
@ -17,7 +22,7 @@ export class AuthenticatorStaticStage extends BaseStage {
challenge?: AuthenticatorStaticChallenge; challenge?: AuthenticatorStaticChallenge;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES.concat(css` return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton].concat(css`
/* Static OTP Tokens */ /* Static OTP Tokens */
.ak-otp-tokens { .ak-otp-tokens {
list-style: circle; list-style: circle;
@ -35,7 +40,10 @@ export class AuthenticatorStaticStage extends BaseStage {
render(): TemplateResult { render(): TemplateResult {
if (!this.challenge) { if (!this.challenge) {
return html`<ak-loading-state></ak-loading-state>`; return html`<ak-empty-state
?loading="${true}"
header=${gettext("Loading")}>
</ak-empty-state>`;
} }
return html`<header class="pf-c-login__main-header"> return html`<header class="pf-c-login__main-header">
<h1 class="pf-c-title pf-m-3xl"> <h1 class="pf-c-title pf-m-3xl">
@ -44,17 +52,15 @@ export class AuthenticatorStaticStage extends BaseStage {
</header> </header>
<div class="pf-c-login__main-body"> <div class="pf-c-login__main-body">
<form class="pf-c-form" @submit=${(e: Event) => { this.submitForm(e); }}> <form class="pf-c-form" @submit=${(e: Event) => { this.submitForm(e); }}>
<div class="pf-c-form__group"> <ak-form-static class="pf-c-form__group">
<div class="form-control-static"> <div slot="avatar">
<div class="left">
<img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}"> <img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
${this.challenge.pending_user} ${this.challenge.pending_user}
</div> </div>
<div class="right"> <div slot="link">
<a href="/flows/-/cancel/">${gettext("Not you?")}</a> <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
</div> </div>
</div> </ak-form-static>
</div>
<ak-form-element <ak-form-element
label="${gettext("Tokens")}" label="${gettext("Tokens")}"
?required="${true}" ?required="${true}"

26
web/src/flows/stages/authenticator_totp/AuthenticatorTOTPStage.ts
View File

@ -1,12 +1,17 @@
import { gettext } from "django"; import { gettext } from "django";
import { CSSResult, customElement, html, property, TemplateResult } from "lit-element"; import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
import { WithUserInfoChallenge } from "../../../api/Flows"; 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 { BaseStage } from "../base";
import "webcomponent-qr-code"; import "webcomponent-qr-code";
import "../../../elements/forms/FormElement"; import "../../../elements/forms/FormElement";
import { showMessage } from "../../../elements/messages/MessageContainer"; import { showMessage } from "../../../elements/messages/MessageContainer";
import "../../../elements/utils/LoadingState"; import "../../../elements/EmptyState";
import "../../FormStatic";
export interface AuthenticatorTOTPChallenge extends WithUserInfoChallenge { export interface AuthenticatorTOTPChallenge extends WithUserInfoChallenge {
config_url: string; config_url: string;
@ -19,12 +24,15 @@ export class AuthenticatorTOTPStage extends BaseStage {
challenge?: AuthenticatorTOTPChallenge; challenge?: AuthenticatorTOTPChallenge;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES; return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton];
} }
render(): TemplateResult { render(): TemplateResult {
if (!this.challenge) { if (!this.challenge) {
return html`<ak-loading-state></ak-loading-state>`; return html`<ak-empty-state
?loading="${true}"
header=${gettext("Loading")}>
</ak-empty-state>`;
} }
return html`<header class="pf-c-login__main-header"> return html`<header class="pf-c-login__main-header">
<h1 class="pf-c-title pf-m-3xl"> <h1 class="pf-c-title pf-m-3xl">
@ -33,17 +41,15 @@ export class AuthenticatorTOTPStage extends BaseStage {
</header> </header>
<div class="pf-c-login__main-body"> <div class="pf-c-login__main-body">
<form class="pf-c-form" @submit=${(e: Event) => { this.submitForm(e); }}> <form class="pf-c-form" @submit=${(e: Event) => { this.submitForm(e); }}>
<div class="pf-c-form__group"> <ak-form-static class="pf-c-form__group">
<div class="form-control-static"> <div slot="avatar">
<div class="left">
<img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}"> <img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
${this.challenge.pending_user} ${this.challenge.pending_user}
</div> </div>
<div class="right"> <div slot="link">
<a href="/flows/-/cancel/">${gettext("Not you?")}</a> <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
</div> </div>
</div> </ak-form-static>
</div>
<input type="hidden" name="otp_uri" value=${this.challenge.config_url} /> <input type="hidden" name="otp_uri" value=${this.challenge.config_url} />
<ak-form-element> <ak-form-element>
<!-- @ts-ignore --> <!-- @ts-ignore -->

13
web/src/flows/stages/authenticator_validate/AuthenticatorValidateStage.ts
View File

@ -1,7 +1,11 @@
import { gettext } from "django"; import { gettext } from "django";
import { css, CSSResult, customElement, html, property, TemplateResult } from "lit-element"; import { css, CSSResult, customElement, html, property, TemplateResult } from "lit-element";
import { WithUserInfoChallenge } from "../../../api/Flows"; 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, StageHost } from "../base"; import { BaseStage, StageHost } from "../base";
import "./AuthenticatorValidateStageWebAuthn"; import "./AuthenticatorValidateStageWebAuthn";
import "./AuthenticatorValidateStageCode"; import "./AuthenticatorValidateStageCode";
@ -41,7 +45,7 @@ export class AuthenticatorValidateStage extends BaseStage implements StageHost {
} }
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES.concat(css` return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton].concat(css`
ul > li:not(:last-child) { ul > li:not(:last-child) {
padding-bottom: 1rem; padding-bottom: 1rem;
} }
@ -134,7 +138,10 @@ export class AuthenticatorValidateStage extends BaseStage implements StageHost {
render(): TemplateResult { render(): TemplateResult {
if (!this.challenge) { if (!this.challenge) {
return html`<ak-loading-state></ak-loading-state>`; return html`<ak-empty-state
?loading="${true}"
header=${gettext("Loading")}>
</ak-empty-state>`;
} }
// User only has a single device class, so we don't show a picker // User only has a single device class, so we don't show a picker
if (this.challenge?.device_challenges.length === 1) { if (this.challenge?.device_challenges.length === 1) {

26
web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageCode.ts
View File

@ -1,11 +1,16 @@
import { gettext } from "django"; import { gettext } from "django";
import { CSSResult, customElement, html, property, TemplateResult } from "lit-element"; import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
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 { BaseStage } from "../base";
import { AuthenticatorValidateStage, AuthenticatorValidateStageChallenge, DeviceChallenge } from "./AuthenticatorValidateStage"; import { AuthenticatorValidateStage, AuthenticatorValidateStageChallenge, DeviceChallenge } from "./AuthenticatorValidateStage";
import "../../../elements/forms/FormElement"; import "../../../elements/forms/FormElement";
import "../../../elements/utils/LoadingState"; import "../../../elements/EmptyState";
import { PasswordManagerPrefill } from "../identification/IdentificationStage"; import { PasswordManagerPrefill } from "../identification/IdentificationStage";
import "../../FormStatic";
@customElement("ak-stage-authenticator-validate-code") @customElement("ak-stage-authenticator-validate-code")
export class AuthenticatorValidateStageWebCode extends BaseStage { export class AuthenticatorValidateStageWebCode extends BaseStage {
@ -20,26 +25,27 @@ export class AuthenticatorValidateStageWebCode extends BaseStage {
showBackButton = false; showBackButton = false;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES; return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton];
} }
render(): TemplateResult { render(): TemplateResult {
if (!this.challenge) { if (!this.challenge) {
return html`<ak-loading-state></ak-loading-state>`; return html`<ak-empty-state
?loading="${true}"
header=${gettext("Loading")}>
</ak-empty-state>`;
} }
return html`<div class="pf-c-login__main-body"> return html`<div class="pf-c-login__main-body">
<form class="pf-c-form" @submit=${(e: Event) => { this.submitForm(e); }}> <form class="pf-c-form" @submit=${(e: Event) => { this.submitForm(e); }}>
<div class="pf-c-form__group"> <ak-form-static class="pf-c-form__group">
<div class="form-control-static"> <div slot="avatar">
<div class="left">
<img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}"> <img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
${this.challenge.pending_user} ${this.challenge.pending_user}
</div> </div>
<div class="right"> <div slot="link">
<a href="/flows/-/cancel/">${gettext("Not you?")}</a> <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
</div> </div>
</div> </ak-form-static>
</div>
<ak-form-element <ak-form-element
label="${gettext("Code")}" label="${gettext("Code")}"
?required="${true}" ?required="${true}"

8
web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn.ts
View File

@ -1,6 +1,10 @@
import { gettext } from "django"; import { gettext } from "django";
import { CSSResult, customElement, html, property, TemplateResult } from "lit-element"; import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
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 { SpinnerSize } from "../../../elements/Spinner"; import { SpinnerSize } from "../../../elements/Spinner";
import { transformAssertionForServer, transformCredentialRequestOptions } from "../authenticator_webauthn/utils"; import { transformAssertionForServer, transformCredentialRequestOptions } from "../authenticator_webauthn/utils";
import { BaseStage } from "../base"; import { BaseStage } from "../base";
@ -25,7 +29,7 @@ export class AuthenticatorValidateStageWebAuthn extends BaseStage {
showBackButton = false; showBackButton = false;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES; return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton];
} }
async authenticate(): Promise<void> { async authenticate(): Promise<void> {

8
web/src/flows/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage.ts
View File

@ -1,7 +1,11 @@
import { gettext } from "django"; import { gettext } from "django";
import { CSSResult, customElement, html, property, TemplateResult } from "lit-element"; import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
import { WithUserInfoChallenge } from "../../../api/Flows"; 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 { SpinnerSize } from "../../../elements/Spinner"; import { SpinnerSize } from "../../../elements/Spinner";
import { BaseStage } from "../base"; import { BaseStage } from "../base";
import { Assertion, transformCredentialCreateOptions, transformNewAssertionForServer } from "./utils"; import { Assertion, transformCredentialCreateOptions, transformNewAssertionForServer } from "./utils";
@ -27,7 +31,7 @@ export class WebAuthnAuthenticatorRegisterStage extends BaseStage {
registerMessage = ""; registerMessage = "";
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES; return [PFLogin, PFFormControl, PFForm, PFTitle, PFButton];
} }
async register(): Promise<void> { async register(): Promise<void> {

21
web/src/flows/stages/autosubmit/AutosubmitStage.ts
View File

@ -1,9 +1,13 @@
import { gettext } from "django"; import { gettext } from "django";
import { CSSResult, customElement, html, property, TemplateResult } from "lit-element"; import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
import { WithUserInfoChallenge } from "../../../api/Flows"; 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 { BaseStage } from "../base";
import "../../../elements/utils/LoadingState"; import "../../../elements/EmptyState";
export interface AutosubmitChallenge extends WithUserInfoChallenge { export interface AutosubmitChallenge extends WithUserInfoChallenge {
url: string; url: string;
@ -17,7 +21,7 @@ export class AutosubmitStage extends BaseStage {
challenge?: AutosubmitChallenge; challenge?: AutosubmitChallenge;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES; return [PFLogin, PFForm, PFFormControl, PFButton, PFTitle];
} }
updated(): void { updated(): void {
@ -26,7 +30,10 @@ export class AutosubmitStage extends BaseStage {
render(): TemplateResult { render(): TemplateResult {
if (!this.challenge) { if (!this.challenge) {
return html`<ak-loading-state></ak-loading-state>`; return html`<ak-empty-state
?loading="${true}"
header=${gettext("Loading")}>
</ak-empty-state>`;
} }
return html`<header class="pf-c-login__main-header"> return html`<header class="pf-c-login__main-header">
<h1 class="pf-c-title pf-m-3xl"> <h1 class="pf-c-title pf-m-3xl">
@ -38,8 +45,10 @@ export class AutosubmitStage extends BaseStage {
${Object.entries(this.challenge.attrs).map(([ key, value ]) => { ${Object.entries(this.challenge.attrs).map(([ key, value ]) => {
return html`<input type="hidden" name="${key}" value="${value}">`; return html`<input type="hidden" name="${key}" value="${value}">`;
})} })}
<ak-loading-state></ak-loading-state> <ak-empty-state
?loading="${true}"
header=${gettext("Loading")}>
</ak-empty-state>
<div class="pf-c-form__group pf-m-action"> <div class="pf-c-form__group pf-m-action">
<button type="submit" class="pf-c-button pf-m-primary pf-m-block"> <button type="submit" class="pf-c-button pf-m-primary pf-m-block">
${gettext("Continue")} ${gettext("Continue")}

28
web/src/flows/stages/captcha/CaptchaStage.ts
View File

@ -1,11 +1,16 @@
import { gettext } from "django"; import { gettext } from "django";
import { CSSResult, customElement, html, property, TemplateResult } from "lit-element"; import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
import { WithUserInfoChallenge } from "../../../api/Flows"; 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 { SpinnerSize } from "../../../elements/Spinner"; import { SpinnerSize } from "../../../elements/Spinner";
import { BaseStage } from "../base"; import { BaseStage } from "../base";
import "../../../elements/forms/FormElement"; import "../../../elements/forms/FormElement";
import "../../../elements/utils/LoadingState"; import "../../../elements/EmptyState";
import "../../FormStatic";
export interface CaptchaChallenge extends WithUserInfoChallenge { export interface CaptchaChallenge extends WithUserInfoChallenge {
site_key: string; site_key: string;
@ -18,7 +23,7 @@ export class CaptchaStage extends BaseStage {
challenge?: CaptchaChallenge; challenge?: CaptchaChallenge;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES; return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton];
} }
submitFormAlt(token: string): void { submitFormAlt(token: string): void {
@ -29,7 +34,7 @@ export class CaptchaStage extends BaseStage {
firstUpdated(): void { firstUpdated(): void {
const script = document.createElement("script"); const script = document.createElement("script");
script.src = "https://www.google.com/recaptcha/api.js";//?render=${this.challenge?.site_key}`; script.src = "https://www.google.com/recaptcha/api.js";
script.async = true; script.async = true;
script.defer = true; script.defer = true;
const captchaContainer = document.createElement("div"); const captchaContainer = document.createElement("div");
@ -54,7 +59,10 @@ export class CaptchaStage extends BaseStage {
render(): TemplateResult { render(): TemplateResult {
if (!this.challenge) { if (!this.challenge) {
return html`<ak-loading-state></ak-loading-state>`; return html`<ak-empty-state
?loading="${true}"
header=${gettext("Loading")}>
</ak-empty-state>`;
} }
return html`<header class="pf-c-login__main-header"> return html`<header class="pf-c-login__main-header">
<h1 class="pf-c-title pf-m-3xl"> <h1 class="pf-c-title pf-m-3xl">
@ -63,17 +71,15 @@ export class CaptchaStage extends BaseStage {
</header> </header>
<div class="pf-c-login__main-body"> <div class="pf-c-login__main-body">
<form class="pf-c-form"> <form class="pf-c-form">
<div class="pf-c-form__group"> <ak-form-static class="pf-c-form__group">
<div class="form-control-static"> <div slot="avatar">
<div class="left">
<img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}"> <img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
${this.challenge.pending_user} ${this.challenge.pending_user}
</div> </div>
<div class="right"> <div slot="link">
<a href="/flows/-/cancel/">${gettext("Not you?")}</a> <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
</div> </div>
</div> </ak-form-static>
</div>
<div class="ak-loading"> <div class="ak-loading">
<ak-spinner size=${SpinnerSize.XLarge}></ak-spinner> <ak-spinner size=${SpinnerSize.XLarge}></ak-spinner>
</div> </div>

26
web/src/flows/stages/consent/ConsentStage.ts
View File

@ -1,9 +1,14 @@
import { gettext } from "django"; import { gettext } from "django";
import { CSSResult, customElement, html, property, TemplateResult } from "lit-element"; import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
import { WithUserInfoChallenge } from "../../../api/Flows"; 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 { BaseStage } from "../base";
import "../../../elements/utils/LoadingState"; import "../../../elements/EmptyState";
import "../../FormStatic";
export interface Permission { export interface Permission {
name: string; name: string;
@ -24,12 +29,15 @@ export class ConsentStage extends BaseStage {
challenge?: ConsentChallenge; challenge?: ConsentChallenge;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES; return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton];
} }
render(): TemplateResult { render(): TemplateResult {
if (!this.challenge) { if (!this.challenge) {
return html`<ak-loading-state></ak-loading-state>`; return html`<ak-empty-state
?loading="${true}"
header=${gettext("Loading")}>
</ak-empty-state>`;
} }
return html`<header class="pf-c-login__main-header"> return html`<header class="pf-c-login__main-header">
<h1 class="pf-c-title pf-m-3xl"> <h1 class="pf-c-title pf-m-3xl">
@ -38,17 +46,15 @@ export class ConsentStage extends BaseStage {
</header> </header>
<div class="pf-c-login__main-body"> <div class="pf-c-login__main-body">
<form class="pf-c-form" @submit=${(e: Event) => { this.submitForm(e); }}> <form class="pf-c-form" @submit=${(e: Event) => { this.submitForm(e); }}>
<div class="pf-c-form__group"> <ak-form-static class="pf-c-form__group">
<div class="form-control-static"> <div slot="avatar">
<div class="left">
<img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}"> <img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
${this.challenge.pending_user} ${this.challenge.pending_user}
</div> </div>
<div class="right"> <div slot="link">
<a href="/flows/-/cancel/">${gettext("Not you?")}</a> <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
</div> </div>
</div> </ak-form-static>
</div>
<div class="pf-c-form__group"> <div class="pf-c-form__group">
<p id="header-text"> <p id="header-text">

15
web/src/flows/stages/email/EmailStage.ts
View File

@ -1,9 +1,13 @@
import { gettext } from "django"; import { gettext } from "django";
import { CSSResult, customElement, html, property, TemplateResult } from "lit-element"; import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
import { Challenge } from "authentik-api"; import { Challenge } from "authentik-api";
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 { BaseStage } from "../base";
import "../../../elements/utils/LoadingState"; import "../../../elements/EmptyState";
export type EmailChallenge = Challenge; export type EmailChallenge = Challenge;
@ -14,12 +18,15 @@ export class EmailStage extends BaseStage {
challenge?: EmailChallenge; challenge?: EmailChallenge;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES; return [PFLogin, PFForm, PFFormControl, PFButton, PFTitle];
} }
render(): TemplateResult { render(): TemplateResult {
if (!this.challenge) { if (!this.challenge) {
return html`<ak-loading-state></ak-loading-state>`; return html`<ak-empty-state
?loading="${true}"
header=${gettext("Loading")}>
</ak-empty-state>`;
} }
return html`<header class="pf-c-login__main-header"> return html`<header class="pf-c-login__main-header">
<h1 class="pf-c-title pf-m-3xl"> <h1 class="pf-c-title pf-m-3xl">

22
web/src/flows/stages/identification/IdentificationStage.ts
View File

@ -1,9 +1,13 @@
import { gettext } from "django"; import { gettext } from "django";
import { css, CSSResult, customElement, html, property, TemplateResult } from "lit-element"; import { css, CSSResult, customElement, html, property, TemplateResult } from "lit-element";
import { COMMON_STYLES } from "../../../common/styles";
import { BaseStage } from "../base"; import { BaseStage } from "../base";
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 "../../../elements/forms/FormElement"; import "../../../elements/forms/FormElement";
import "../../../elements/utils/LoadingState"; import "../../../elements/EmptyState";
import { Challenge } from "../../../api/Flows"; import { Challenge } from "../../../api/Flows";
export const PasswordManagerPrefill: { export const PasswordManagerPrefill: {
@ -40,10 +44,15 @@ export class IdentificationStage extends BaseStage {
challenge?: IdentificationChallenge; challenge?: IdentificationChallenge;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES.concat( return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton].concat(
css` css`
/* login page's icons */
.pf-c-login__main-footer-links-item-link img { .pf-c-login__main-footer-links-item-link img {
width: 100px; 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);
} }
` `
); );
@ -144,7 +153,10 @@ export class IdentificationStage extends BaseStage {
render(): TemplateResult { render(): TemplateResult {
if (!this.challenge) { if (!this.challenge) {
return html`<ak-loading-state></ak-loading-state>`; return html`<ak-empty-state
?loading="${true}"
header=${gettext("Loading")}>
</ak-empty-state>`;
} }
return html`<header class="pf-c-login__main-header"> return html`<header class="pf-c-login__main-header">
<h1 class="pf-c-title pf-m-3xl"> <h1 class="pf-c-title pf-m-3xl">

26
web/src/flows/stages/password/PasswordStage.ts
View File

@ -1,11 +1,16 @@
import { gettext } from "django"; import { gettext } from "django";
import { CSSResult, customElement, html, property, TemplateResult } from "lit-element"; import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
import { WithUserInfoChallenge } from "../../../api/Flows"; 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 { BaseStage } from "../base";
import "../../../elements/forms/FormElement"; import "../../../elements/forms/FormElement";
import "../../../elements/utils/LoadingState"; import "../../../elements/EmptyState";
import { PasswordManagerPrefill } from "../identification/IdentificationStage"; import { PasswordManagerPrefill } from "../identification/IdentificationStage";
import "../../FormStatic";
export interface PasswordChallenge extends WithUserInfoChallenge { export interface PasswordChallenge extends WithUserInfoChallenge {
recovery_url?: string; recovery_url?: string;
@ -18,12 +23,15 @@ export class PasswordStage extends BaseStage {
challenge?: PasswordChallenge; challenge?: PasswordChallenge;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES; return [PFLogin, PFForm, PFFormControl, PFButton, PFTitle];
} }
render(): TemplateResult { render(): TemplateResult {
if (!this.challenge) { if (!this.challenge) {
return html`<ak-loading-state></ak-loading-state>`; return html`<ak-empty-state
?loading="${true}"
header=${gettext("Loading")}>
</ak-empty-state>`;
} }
return html`<header class="pf-c-login__main-header"> return html`<header class="pf-c-login__main-header">
<h1 class="pf-c-title pf-m-3xl"> <h1 class="pf-c-title pf-m-3xl">
@ -32,17 +40,15 @@ export class PasswordStage extends BaseStage {
</header> </header>
<div class="pf-c-login__main-body"> <div class="pf-c-login__main-body">
<form class="pf-c-form" @submit=${(e: Event) => {this.submitForm(e);}}> <form class="pf-c-form" @submit=${(e: Event) => {this.submitForm(e);}}>
<div class="pf-c-form__group"> <ak-form-static class="pf-c-form__group">
<div class="form-control-static"> <div slot="avatar">
<div class="left">
<img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}"> <img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
${this.challenge.pending_user} ${this.challenge.pending_user}
</div> </div>
<div class="right"> <div slot="link">
<a href="/flows/-/cancel/">${gettext("Not you?")}</a> <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
</div> </div>
</div> </ak-form-static>
</div>
<input name="username" autocomplete="username" type="hidden" value="${this.challenge.pending_user}"> <input name="username" autocomplete="username" type="hidden" value="${this.challenge.pending_user}">
<ak-form-element <ak-form-element

15
web/src/flows/stages/prompt/PromptStage.ts
View File

@ -1,10 +1,14 @@
import { gettext } from "django"; import { gettext } from "django";
import { CSSResult, customElement, html, property, TemplateResult } from "lit-element"; import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
import { unsafeHTML } from "lit-html/directives/unsafe-html"; import { unsafeHTML } from "lit-html/directives/unsafe-html";
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 { BaseStage } from "../base";
import "../../../elements/forms/FormElement"; import "../../../elements/forms/FormElement";
import "../../../elements/utils/LoadingState"; import "../../../elements/EmptyState";
import { Challenge } from "../../../api/Flows"; import { Challenge } from "../../../api/Flows";
export interface Prompt { export interface Prompt {
@ -27,7 +31,7 @@ export class PromptStage extends BaseStage {
challenge?: PromptChallenge; challenge?: PromptChallenge;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES; return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton];
} }
renderPromptInner(prompt: Prompt): string { renderPromptInner(prompt: Prompt): string {
@ -113,7 +117,10 @@ export class PromptStage extends BaseStage {
render(): TemplateResult { render(): TemplateResult {
if (!this.challenge) { if (!this.challenge) {
return html`<ak-loading-state></ak-loading-state>`; return html`<ak-empty-state
?loading="${true}"
header=${gettext("Loading")}>
</ak-empty-state>`;
} }
return html`<header class="pf-c-login__main-header"> return html`<header class="pf-c-login__main-header">
<h1 class="pf-c-title pf-m-3xl"> <h1 class="pf-c-title pf-m-3xl">

16
web/src/interfaces/Interface.ts
View File

@ -1,12 +1,15 @@
import { gettext } from "django"; import { css, CSSResult, html, LitElement, property, TemplateResult } from "lit-element";
import { CSSResult, html, LitElement, property, TemplateResult } from "lit-element";
import { SidebarItem } from "../elements/sidebar/Sidebar"; import { SidebarItem } from "../elements/sidebar/Sidebar";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFSkipToContent from "@patternfly/patternfly/components/SkipToContent/skip-to-content.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFDrawer from "@patternfly/patternfly/components/Drawer/drawer.css";
import "../elements/router/RouterOutlet"; import "../elements/router/RouterOutlet";
import "../elements/messages/MessageContainer"; import "../elements/messages/MessageContainer";
import "../elements/sidebar/SidebarHamburger"; import "../elements/sidebar/SidebarHamburger";
import "../elements/notifications/NotificationDrawer"; import "../elements/notifications/NotificationDrawer";
import { COMMON_STYLES } from "../common/styles";
export abstract class Interface extends LitElement { export abstract class Interface extends LitElement {
@property({type: Boolean}) @property({type: Boolean})
@ -18,7 +21,11 @@ export abstract class Interface extends LitElement {
abstract get sidebar(): SidebarItem[]; abstract get sidebar(): SidebarItem[];
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES; return [PFBase, PFPage, PFSkipToContent, PFButton, PFDrawer, css`
.pf-c-page__main, .pf-c-drawer__content, .pf-c-page__drawer {
z-index: auto !important;
}
`];
} }
constructor() { constructor() {
@ -38,7 +45,6 @@ export abstract class Interface extends LitElement {
render(): TemplateResult { render(): TemplateResult {
return html`<ak-message-container></ak-message-container> return html`<ak-message-container></ak-message-container>
<div class="pf-c-page"> <div class="pf-c-page">
<a class="pf-c-skip-to-content pf-c-button pf-m-primary" href="#main-content">${gettext("Skip to content")}</a>
<ak-sidebar-hamburger> <ak-sidebar-hamburger>
</ak-sidebar-hamburger> </ak-sidebar-hamburger>
<ak-sidebar class="pf-c-page__sidebar ${this.sidebarOpen ? "pf-m-expanded" : "pf-m-collapsed"}" .items=${this.sidebar}> <ak-sidebar class="pf-c-page__sidebar ${this.sidebarOpen ? "pf-m-expanded" : "pf-m-collapsed"}" .items=${this.sidebar}>

15
web/src/pages/LibraryPage.ts
View File

@ -6,8 +6,15 @@ import { Application, CoreApi } from "authentik-api";
import { AKResponse } from "../api/Client"; import { AKResponse } from "../api/Client";
import { DEFAULT_CONFIG } from "../api/Config"; import { DEFAULT_CONFIG } from "../api/Config";
import { me } from "../api/Users"; import { me } from "../api/Users";
import { COMMON_STYLES } from "../common/styles";
import { loading, truncate } from "../utils"; import { loading, truncate } from "../utils";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFCard from "@patternfly/patternfly/components/Card/card.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
import AKGlobal from "../authentik.css";
import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";
@customElement("ak-library-app") @customElement("ak-library-app")
export class LibraryApplication extends LitElement { export class LibraryApplication extends LitElement {
@ -15,7 +22,7 @@ export class LibraryApplication extends LitElement {
application?: Application; application?: Application;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES.concat( return [PFBase, PFCard, PFAvatar,
css` css`
a { a {
height: 100%; height: 100%;
@ -36,7 +43,7 @@ export class LibraryApplication extends LitElement {
margin-right: 0.25em; margin-right: 0.25em;
} }
` `
); ];
} }
render(): TemplateResult { render(): TemplateResult {
@ -75,7 +82,7 @@ export class LibraryPage extends LitElement {
apps?: AKResponse<Application>; apps?: AKResponse<Application>;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES.concat(css` return [PFBase, PFEmptyState, PFTitle, PFPage, PFContent, AKGlobal].concat(css`
:host, :host,
main { main {
height: 100%; height: 100%;

7
web/src/pages/admin-overview/AdminOverviewPage.ts
View File

@ -1,6 +1,5 @@
import { gettext } from "django"; import { gettext } from "django";
import { CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element"; import { CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
import { COMMON_STYLES } from "../../common/styles";
import "../../elements/charts/AdminLoginsChart"; import "../../elements/charts/AdminLoginsChart";
import "../../elements/cards/AggregatePromiseCard"; import "../../elements/cards/AggregatePromiseCard";
@ -14,11 +13,15 @@ import "./cards/UserCountStatusCard";
import "./cards/VersionStatusCard"; import "./cards/VersionStatusCard";
import "./cards/WorkerStatusCard"; import "./cards/WorkerStatusCard";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
@customElement("ak-admin-overview") @customElement("ak-admin-overview")
export class AdminOverviewPage extends LitElement { export class AdminOverviewPage extends LitElement {
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES; return [PFGallery, PFPage, PFContent];
} }
render(): TemplateResult { render(): TemplateResult {

4
web/src/pages/admin-overview/TopApplicationsTable.ts
View File

@ -1,7 +1,7 @@
import { gettext } from "django"; import { gettext } from "django";
import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { COMMON_STYLES } from "../../common/styles";
import { EventsApi, EventTopPerUser } from "authentik-api"; import { EventsApi, EventTopPerUser } from "authentik-api";
import PFTable from "@patternfly/patternfly/components/Table/table.css";
import "../../elements/Spinner"; import "../../elements/Spinner";
import { DEFAULT_CONFIG } from "../../api/Config"; import { DEFAULT_CONFIG } from "../../api/Config";
@ -13,7 +13,7 @@ export class TopApplicationsTable extends LitElement {
topN?: EventTopPerUser[]; topN?: EventTopPerUser[];
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES; return [PFTable];
} }
firstUpdated(): void { firstUpdated(): void {

3
web/src/pages/applications/ApplicationListPage.ts
View File

@ -10,6 +10,7 @@ import { PAGE_SIZE } from "../../constants";
import { Application, CoreApi } from "authentik-api"; import { Application, CoreApi } from "authentik-api";
import { DEFAULT_CONFIG } from "../../api/Config"; import { DEFAULT_CONFIG } from "../../api/Config";
import { AdminURLManager } from "../../api/legacy"; import { AdminURLManager } from "../../api/legacy";
import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";
@customElement("ak-application-list") @customElement("ak-application-list")
export class ApplicationListPage extends TablePage<Application> { export class ApplicationListPage extends TablePage<Application> {
@ -39,7 +40,7 @@ export class ApplicationListPage extends TablePage<Application> {
} }
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return super.styles.concat(css` return super.styles.concat(PFAvatar, css`
tr td:first-child { tr td:first-child {
width: auto; width: auto;
min-width: 0px; min-width: 0px;

14
web/src/pages/applications/ApplicationViewPage.ts
View File

@ -1,16 +1,19 @@
import { gettext } from "django"; import { gettext } from "django";
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { COMMON_STYLES } from "../../common/styles";
import "../../elements/Tabs"; import "../../elements/Tabs";
import "../../elements/charts/ApplicationAuthorizeChart"; import "../../elements/charts/ApplicationAuthorizeChart";
import "../../elements/buttons/ModalButton"; import "../../elements/buttons/ModalButton";
import "../../elements/buttons/SpinnerButton"; import "../../elements/buttons/SpinnerButton";
import "../../elements/policies/BoundPoliciesList"; import "../../elements/policies/BoundPoliciesList";
import "../../elements/utils/LoadingState"; import "../../elements/EmptyState";
import { Application, CoreApi } from "authentik-api"; import { Application, CoreApi } from "authentik-api";
import { DEFAULT_CONFIG } from "../../api/Config"; import { DEFAULT_CONFIG } from "../../api/Config";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
@customElement("ak-application-view") @customElement("ak-application-view")
export class ApplicationViewPage extends LitElement { export class ApplicationViewPage extends LitElement {
@property() @property()
@ -31,7 +34,7 @@ export class ApplicationViewPage extends LitElement {
application!: Application; application!: Application;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES.concat( return [PFPage, PFContent, PFGallery].concat(
css` css`
img.pf-icon { img.pf-icon {
max-height: 24px; max-height: 24px;
@ -52,7 +55,10 @@ export class ApplicationViewPage extends LitElement {
</h1> </h1>
</div> </div>
</section> </section>
<ak-loading-state></ak-loading-state>`; <ak-empty-state
?loading="${true}"
header=${gettext("Loading")}>
</ak-empty-state>`;
} }
return html`<section class="pf-c-page__main-section pf-m-light"> return html`<section class="pf-c-page__main-section pf-m-light">
<div class="pf-c-content"> <div class="pf-c-content">

10
web/src/pages/events/EventInfo.ts
View File

@ -2,13 +2,17 @@ import { gettext } from "django";
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { until } from "lit-html/directives/until"; import { until } from "lit-html/directives/until";
import { FlowsApi } from "authentik-api"; import { FlowsApi } from "authentik-api";
import { COMMON_STYLES } from "../../common/styles";
import "../../elements/Spinner"; import "../../elements/Spinner";
import "../../elements/Expand"; import "../../elements/Expand";
import { SpinnerSize } from "../../elements/Spinner"; import { SpinnerSize } from "../../elements/Spinner";
import { EventContext, EventWithContext } from "../../api/Events"; import { EventContext, EventWithContext } from "../../api/Events";
import { DEFAULT_CONFIG } from "../../api/Config"; import { DEFAULT_CONFIG } from "../../api/Config";
import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
import PFFlex from "@patternfly/patternfly/layouts/Flex/flex.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFList from "@patternfly/patternfly/components/List/list.css";
@customElement("ak-event-info") @customElement("ak-event-info")
export class EventInfo extends LitElement { export class EventInfo extends LitElement {
@ -16,7 +20,7 @@ export class EventInfo extends LitElement {
event!: EventWithContext; event!: EventWithContext;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES.concat( return [PFBase, PFFlex, PFList, PFDescriptionList,
css` css`
code { code {
display: block; display: block;
@ -29,7 +33,7 @@ export class EventInfo extends LitElement {
min-width: 25%; min-width: 25%;
} }
` `
); ];
} }
getModelInfo(context: EventContext): TemplateResult { getModelInfo(context: EventContext): TemplateResult {

6
web/src/pages/events/EventInfoPage.ts
View File

@ -3,7 +3,9 @@ import { css, CSSResult, customElement, html, LitElement, property, TemplateResu
import { EventsApi } from "authentik-api"; import { EventsApi } from "authentik-api";
import { DEFAULT_CONFIG } from "../../api/Config"; import { DEFAULT_CONFIG } from "../../api/Config";
import { EventWithContext } from "../../api/Events"; import { EventWithContext } from "../../api/Events";
import { COMMON_STYLES } from "../../common/styles"; import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFCard from "@patternfly/patternfly/components/Card/card.css";
import "./EventInfo"; import "./EventInfo";
@customElement("ak-event-info-page") @customElement("ak-event-info-page")
@ -26,7 +28,7 @@ export class EventInfoPage extends LitElement {
event!: EventWithContext; event!: EventWithContext;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES.concat(css` return [PFBase, PFPage, PFCard].concat(css`
.pf-c-card { .pf-c-card {
color: var(--ak-dark-foreground); color: var(--ak-dark-foreground);
} }

7
web/src/pages/flows/FlowViewPage.ts
View File

@ -1,6 +1,5 @@
import { gettext } from "django"; import { gettext } from "django";
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { COMMON_STYLES } from "../../common/styles";
import "../../elements/Tabs"; import "../../elements/Tabs";
import "../../elements/buttons/ModalButton"; import "../../elements/buttons/ModalButton";
@ -11,6 +10,10 @@ import "./FlowDiagram";
import { Flow, FlowsApi } from "authentik-api"; import { Flow, FlowsApi } from "authentik-api";
import { DEFAULT_CONFIG } from "../../api/Config"; import { DEFAULT_CONFIG } from "../../api/Config";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
@customElement("ak-flow-view") @customElement("ak-flow-view")
export class FlowViewPage extends LitElement { export class FlowViewPage extends LitElement {
@property() @property()
@ -26,7 +29,7 @@ export class FlowViewPage extends LitElement {
flow!: Flow; flow!: Flow;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES.concat( return [PFPage, PFContent, PFGallery].concat(
css` css`
img.pf-icon { img.pf-icon {
max-height: 24px; max-height: 24px;

7
web/src/pages/generic/SiteShell.ts
View File

@ -4,7 +4,10 @@ import { showMessage } from "../../elements/messages/MessageContainer";
import { gettext } from "django"; import { gettext } from "django";
import { SentryIgnoredError } from "../../common/errors"; import { SentryIgnoredError } from "../../common/errors";
import { unsafeHTML } from "lit-html/directives/unsafe-html"; import { unsafeHTML } from "lit-html/directives/unsafe-html";
import { COMMON_STYLES } from "../../common/styles";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
@customElement("ak-site-shell") @customElement("ak-site-shell")
export class SiteShell extends LitElement { export class SiteShell extends LitElement {
@ -23,7 +26,7 @@ export class SiteShell extends LitElement {
body = ""; body = "";
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES.concat( return [PFPage, PFGallery, PFContent].concat(
css` css`
:host, :host,
::slotted(*) { ::slotted(*) {

5
web/src/pages/outposts/OutpostHealth.ts
View File

@ -3,8 +3,9 @@ import { CSSResult, customElement, html, LitElement, property, TemplateResult }
import { until } from "lit-html/directives/until"; import { until } from "lit-html/directives/until";
import { OutpostsApi } from "authentik-api"; import { OutpostsApi } from "authentik-api";
import { DEFAULT_CONFIG } from "../../api/Config"; import { DEFAULT_CONFIG } from "../../api/Config";
import { COMMON_STYLES } from "../../common/styles"; import PFBase from "@patternfly/patternfly/patternfly-base.css";
import "../../elements/Spinner"; import "../../elements/Spinner";
import { ColorStyles } from "../../common/styles";
@customElement("ak-outpost-health") @customElement("ak-outpost-health")
export class OutpostHealth extends LitElement { export class OutpostHealth extends LitElement {
@ -13,7 +14,7 @@ export class OutpostHealth extends LitElement {
outpostId?: string; outpostId?: string;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES; return [PFBase, ColorStyles];
} }
render(): TemplateResult { render(): TemplateResult {

7
web/src/pages/providers/OAuth2ProviderViewPage.ts
View File

@ -1,6 +1,9 @@
import { gettext } from "django"; import { gettext } from "django";
import { CSSResult, customElement, html, property, TemplateResult } from "lit-element"; import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
import { COMMON_STYLES } from "../../common/styles";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
import "../../elements/buttons/ModalButton"; import "../../elements/buttons/ModalButton";
import "../../elements/buttons/SpinnerButton"; import "../../elements/buttons/SpinnerButton";
@ -47,7 +50,7 @@ export class OAuth2ProviderViewPage extends Page {
providerUrls?: OAuth2ProviderSetupURLs; providerUrls?: OAuth2ProviderSetupURLs;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES; return [PFPage, PFGallery, PFContent];
} }
constructor() { constructor() {

13
web/src/pages/providers/ProviderViewPage.ts
View File

@ -1,9 +1,8 @@
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { COMMON_STYLES } from "../../common/styles";
import "../../elements/buttons/ModalButton"; import "../../elements/buttons/ModalButton";
import "../../elements/buttons/SpinnerButton"; import "../../elements/buttons/SpinnerButton";
import "../../elements/utils/LoadingState"; import "../../elements/EmptyState";
import "./SAMLProviderViewPage"; import "./SAMLProviderViewPage";
import "./OAuth2ProviderViewPage"; import "./OAuth2ProviderViewPage";
@ -11,6 +10,7 @@ import "./ProxyProviderViewPage";
import { Provider, ProvidersApi } from "authentik-api"; import { Provider, ProvidersApi } from "authentik-api";
import { DEFAULT_CONFIG } from "../../api/Config"; import { DEFAULT_CONFIG } from "../../api/Config";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import { gettext } from "django";
@customElement("ak-provider-view") @customElement("ak-provider-view")
export class ProviderViewPage extends LitElement { export class ProviderViewPage extends LitElement {
@ -26,16 +26,19 @@ export class ProviderViewPage extends LitElement {
provider?: Provider; provider?: Provider;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES.concat(css` return [css`
* { * {
height: 100%; height: 100%;
} }
`); `];
} }
render(): TemplateResult { render(): TemplateResult {
if (!this.provider) { if (!this.provider) {
return html`<ak-loading-state></ak-loading-state>`; return html`<ak-empty-state
?loading="${true}"
header=${gettext("Loading")}>
</ak-empty-state>`;
} }
switch (this.provider?.objectType) { switch (this.provider?.objectType) {
case "saml": case "saml":

9
web/src/pages/providers/ProxyProviderViewPage.ts
View File

@ -1,6 +1,11 @@
import { gettext } from "django"; import { gettext } from "django";
import { CSSResult, customElement, html, property, TemplateResult } from "lit-element"; import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
import { COMMON_STYLES } from "../../common/styles";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFCard from "@patternfly/patternfly/components/Card/card.css";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
import "../../elements/buttons/ModalButton"; import "../../elements/buttons/ModalButton";
import "../../elements/buttons/SpinnerButton"; import "../../elements/buttons/SpinnerButton";
@ -40,7 +45,7 @@ export class ProxyProviderViewPage extends Page {
provider?: ProxyProvider; provider?: ProxyProvider;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES; return [PFPage, PFContent, PFDescriptionList, PFCard, PFBase];
} }
constructor() { constructor() {

7
web/src/pages/providers/SAMLProviderViewPage.ts
View File

@ -1,7 +1,10 @@
import { gettext } from "django"; import { gettext } from "django";
import { CSSResult, customElement, html, property, TemplateResult } from "lit-element"; import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
import { until } from "lit-html/directives/until"; import { until } from "lit-html/directives/until";
import { COMMON_STYLES } from "../../common/styles";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
import "../../elements/buttons/ModalButton"; import "../../elements/buttons/ModalButton";
import "../../elements/buttons/SpinnerButton"; import "../../elements/buttons/SpinnerButton";
@ -41,7 +44,7 @@ export class SAMLProviderViewPage extends Page {
provider?: SAMLProvider; provider?: SAMLProvider;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES; return [PFPage, PFGallery, PFContent];
} }
constructor() { constructor() {

7
web/src/pages/sources/LDAPSourceViewPage.ts
View File

@ -1,6 +1,9 @@
import { gettext } from "django"; import { gettext } from "django";
import { CSSResult, customElement, html, property, TemplateResult } from "lit-element"; import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
import { COMMON_STYLES } from "../../common/styles";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
import "../../elements/buttons/ModalButton"; import "../../elements/buttons/ModalButton";
import "../../elements/buttons/SpinnerButton"; import "../../elements/buttons/SpinnerButton";
@ -38,7 +41,7 @@ export class LDAPSourceViewPage extends Page {
source!: LDAPSource; source!: LDAPSource;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES; return [PFPage, PFGallery, PFContent];
} }
constructor() { constructor() {

7
web/src/pages/sources/OAuthSourceViewPage.ts
View File

@ -1,6 +1,9 @@
import { gettext } from "django"; import { gettext } from "django";
import { CSSResult, customElement, html, property, TemplateResult } from "lit-element"; import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
import { COMMON_STYLES } from "../../common/styles";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
import "../../elements/buttons/ModalButton"; import "../../elements/buttons/ModalButton";
import "../../elements/buttons/SpinnerButton"; import "../../elements/buttons/SpinnerButton";
@ -36,7 +39,7 @@ export class OAuthSourceViewPage extends Page {
source?: OAuthSource; source?: OAuthSource;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES; return [PFPage, PFGallery, PFContent];
} }
constructor() { constructor() {

7
web/src/pages/sources/SAMLSourceViewPage.ts
View File

@ -1,7 +1,10 @@
import { gettext } from "django"; import { gettext } from "django";
import { CSSResult, customElement, html, property, TemplateResult } from "lit-element"; import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
import { until } from "lit-html/directives/until"; import { until } from "lit-html/directives/until";
import { COMMON_STYLES } from "../../common/styles";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
import "../../elements/buttons/ModalButton"; import "../../elements/buttons/ModalButton";
import "../../elements/buttons/SpinnerButton"; import "../../elements/buttons/SpinnerButton";
@ -37,7 +40,7 @@ export class SAMLSourceViewPage extends Page {
source?: SAMLSource; source?: SAMLSource;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES; return [PFPage, PFGallery, PFContent];
} }
constructor() { constructor() {

7
web/src/pages/sources/SourceViewPage.ts
View File

@ -1,7 +1,10 @@
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { Source, SourcesApi } from "authentik-api"; import { Source, SourcesApi } from "authentik-api";
import { DEFAULT_CONFIG } from "../../api/Config"; import { DEFAULT_CONFIG } from "../../api/Config";
import { COMMON_STYLES } from "../../common/styles";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
import "../../elements/buttons/ModalButton"; import "../../elements/buttons/ModalButton";
import "../../elements/buttons/SpinnerButton"; import "../../elements/buttons/SpinnerButton";
@ -31,7 +34,7 @@ export class SourceViewPage extends LitElement {
source?: Source; source?: Source;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES.concat(css` return [PFPage, PFGallery, PFContent].concat(css`
* { * {
height: 100%; height: 100%;
} }

8
web/src/utils.ts
View File

@ -1,5 +1,6 @@
import { gettext } from "django";
import { html, TemplateResult } from "lit-html"; import { html, TemplateResult } from "lit-html";
import "./elements/utils/LoadingState"; import "./elements/EmptyState";
export function getCookie(name: string): string { export function getCookie(name: string): string {
let cookieValue = ""; let cookieValue = "";
@ -43,7 +44,10 @@ export function truncate(input?: string, max = 10): string {
export function loading<T>(v: T, actual: TemplateResult): TemplateResult { export function loading<T>(v: T, actual: TemplateResult): TemplateResult {
if (!v) { if (!v) {
return html`<ak-loading-state></ak-loading-state>`; return html`<ak-empty-state
?loading="${true}"
header=${gettext("Loading")}>
</ak-empty-state>`;
} }
return actual; return actual;
} }