web: upgrade to lit 3 (#8781)
* Holding for a moment...
* web: replace rollup with esbuild
This commit replaces rollup with esbuild.
The biggest fix was to alter the way CSS is imported into our system;
esbuild delivers it to the browser as text, rather than as a bundle
with metadata that, frankly, we never use. ESBuild will bundle the
CSS for us just fine, and interpreting those strings *as* CSS turned
out to be a small hurdle. Code has been added to AKElement and
Interface to ensure that all CSS referenced by an element has been
converted to a Browser CSSStyleSheet before being presented to the
browser.
A similar fix has been provided for the markdown imports. The
biggest headache there was that the re-arrangement of our documentation
broke Jen's existing parser for fixing relative links. I've provided
a corresponding hack that provides the necessary detail, but since
the Markdown is being presented to the browser as text, we have to
provide a hint in the markdown component for where any relative
links should go, and we're importing and processing the markdown
at runtime. This doesn't seem to be a big performance hit.
The entire build process is driven by the new build script, `build.mjs`,
which starts the esbuild process as a service connected to the build
script and then runs the commands sent to it as fast as possible.
The biggest "hack" in it is actually the replacement for rollup's
`rollup-copy-plugin`, which is clever enough I'm surprised it doesn't
exist as a standalone file-copy package in its own right.
I've also used a filesystem watch library to encode a "watcher"
mechanism into the build script. `node build.mjs --watch` will
work on MacOS; I haven't tested it elsewhere, at least not yet.
`node build.mjs --proxy` does what the old rollup.proxy.js script
did.
The savings are substantial. It takes less than two seconds to build
the whole UI, a huge savings off the older ~45-50 seconds I routinely
saw on my old Mac. It's also about 9% smaller.
The trade-offs appear to be small: processing the CSS as StyleSheets,
and the Markdown as HTML, at run-time is a small performance hit,
but I didn't notice it in amongst everything else the UI does as
it starts up.
Manual chunking is gone; esbuild's support for that is quite difficult
to get right compared to Rollup's, although there's been a bit of
yelling at ESbuild over it. Codemirror is built into its own chunk;
it's just not _named_ distinctly anymore.
The one thing I haven't been able to test yet is whether or not the
polyfills and runtim shims work as expected on older browsers.
* web: continue with performance and build fixes
This commit introduces a couple of fixes enabled by esbuild and other
features.
1. build-locales
`build-locales` is a new NodeJS script in the `./scripts` folder
that does pretty much what it says in the name: it translates Xliff
files into `.ts` files. It has two DevExp advantages over the old
build system.
First, it will check the build times of the xlf files and
their ts equivalents, and will only run the actual build-locales
command if the XLF files are newer than their TS equivalents.
Second, it captures the stderr output from the build-locales command
and summarizes it. Instead of the thousands of lines of "this
string has no translation equivalent," now it just reports the
number of missed translations per locale.
2. check-spelling
This is a simple wrapper around the `codespell` command, mostly
just to reduce the visual clutter of `package.json`, but also to
permit it to run just about anywhere without needed hard-coded
paths to the dictionaries, using a fairly classic trick with git.
3. pseudolocalize and import-maps
These scripts were in TypeScript, but for our purposes I've
saved their constructed equivalents instead. This saves on
visual clutter in the `package.json` script, and reduced the
time they have to run during full builds. They're small enough
I feel confident they won't need too much looking over.
Also, two lint bugs in Markdown.ts have been fixed.
* Removed a few lines that weren't in use.
* build-locales was sufficiently complex it needed some comments.
* web: formalize that horrible unixy git status checker into a proper function.
* Added types for , the Markdown processor for in-line documentation.
* web: upgrade to Lit3
This commit replaces our Lit2 implementation with a Lit3 implementation.
This upgrade required two major shifts within our code, both of them consequential.
First, the restructuring of the way the get/set decorators for properties and states meant that a
lot of the code we were using needed to be refactored. More than that, a lot of those custom
accessors were implemented to trigger side-effects, such as when a providerID is set or changed
triggering the ProviderView to fetch the requsted Provider. The Lit2 and Lit3 documentation both say
[there is a better way to handle
this](https://lit.dev/docs/v2/components/properties/#:~:text=In%20most%20cases%2C%20you%20do%20not%20need%20to%20create%20custom%20property%20accessors)
by detecting the change in the `willUpdate()` point of an elements Lifecycle and triggering the side
effect there instead. I've done this in several places with a pattern of detecting the change, and
then naming the corresponding change as `fetchRequestedThing()`. The resulting code is cleaner and
uses fewer controversial features.
The other is that the type signature for `LitElement.createRenderRoot()` has changed to be either an
HTMLElement or a DocumentFragment. This required some serious refactoring of type changes through
Base and Interface codes. Noteably, the custom `AdoptedStyleSheetsElement` interface has been
superseded by the supplied and standardized
[DocumentOrShadowRoot](aa2b2352e1/src/lib/dom.generated.d.ts (L4715))
interface. Unfortunately, that interface is a mixin, and casting or instance checking are still in
place to make sure the objects being manipulated are typed "correctly."
Three files I touched during the course of this triggered SonarJS, so there are some minor fixes,
replacing some awkward syntax with more idiomatic code. These are very minor, such as replacing:
```
const result = someFunction();
return result;
/* with */
return someFunction();
```
and
```
const result = x();
if (!result) { return true } else { return false }
/* with */
return !x();
```
* fix package lock
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* don't use hardcoded magic values
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---------
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Ken Sternberg
1245
web/package-lock.json
generated
1245
web/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -39,9 +39,10 @@
|
||||
"@formatjs/intl-listformat": "^7.5.5",
|
||||
"@fortawesome/fontawesome-free": "^6.5.1",
|
||||
"@goauthentik/api": "^2024.2.2-1709583949",
|
||||
"@lit-labs/context": "^0.4.0",
|
||||
"@lit-labs/task": "^3.1.0",
|
||||
"@lit/localize": "^0.11.4",
|
||||
"@lit/reactive-element": "^2.0.4",
|
||||
"@lit/context": "^1.1.0",
|
||||
"@lit/localize": "^0.12.1",
|
||||
"@open-wc/lit-helpers": "^0.7.0",
|
||||
"@patternfly/elements": "^2.4.0",
|
||||
"@patternfly/patternfly": "^4.224.2",
|
||||
@ -56,7 +57,7 @@
|
||||
"country-flag-icons": "^1.5.9",
|
||||
"fuse.js": "^7.0.0",
|
||||
"guacamole-common-js": "^1.5.0",
|
||||
"lit": "^2.8.0",
|
||||
"lit": "^3.1.2",
|
||||
"md-front-matter": "^1.0.4",
|
||||
"mermaid": "^10.9.0",
|
||||
"rapidoc": "^9.3.4",
|
||||
|
||||
@ -14,7 +14,7 @@ import "@goauthentik/elements/Tabs";
|
||||
import "@goauthentik/elements/buttons/SpinnerButton";
|
||||
|
||||
import { msg } from "@lit/localize";
|
||||
import { CSSResult, TemplateResult, html } from "lit";
|
||||
import { CSSResult, PropertyValues, TemplateResult, html } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
import { ifDefined } from "lit/directives/if-defined.js";
|
||||
|
||||
@ -37,37 +37,11 @@ import {
|
||||
|
||||
@customElement("ak-application-view")
|
||||
export class ApplicationViewPage extends AKElement {
|
||||
@property()
|
||||
set applicationSlug(value: string) {
|
||||
new CoreApi(DEFAULT_CONFIG)
|
||||
.coreApplicationsRetrieve({
|
||||
slug: value,
|
||||
})
|
||||
.then((app) => {
|
||||
this.application = app;
|
||||
if (
|
||||
app.providerObj &&
|
||||
[
|
||||
"authentik_providers_proxy.proxyprovider",
|
||||
"authentik_providers_ldap.ldapprovider",
|
||||
].includes(app.providerObj.metaModelName)
|
||||
) {
|
||||
new OutpostsApi(DEFAULT_CONFIG)
|
||||
.outpostsInstancesList({
|
||||
providersByPk: [app.provider || 0],
|
||||
pageSize: 1,
|
||||
})
|
||||
.then((outposts) => {
|
||||
if (outposts.pagination.count < 1) {
|
||||
this.missingOutpost = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
@property({ type: String })
|
||||
applicationSlug?: string;
|
||||
|
||||
@property({ attribute: false })
|
||||
application!: Application;
|
||||
@state()
|
||||
application?: Application;
|
||||
|
||||
@state()
|
||||
missingOutpost = false;
|
||||
@ -86,6 +60,40 @@ export class ApplicationViewPage extends AKElement {
|
||||
];
|
||||
}
|
||||
|
||||
fetchIsMissingOutpost(providersByPk: Array<number>) {
|
||||
new OutpostsApi(DEFAULT_CONFIG)
|
||||
.outpostsInstancesList({
|
||||
providersByPk,
|
||||
pageSize: 1,
|
||||
})
|
||||
.then((outposts) => {
|
||||
if (outposts.pagination.count < 1) {
|
||||
this.missingOutpost = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
fetchApplication(slug: string) {
|
||||
new CoreApi(DEFAULT_CONFIG).coreApplicationsRetrieve({ slug }).then((app) => {
|
||||
this.application = app;
|
||||
if (
|
||||
app.providerObj &&
|
||||
[
|
||||
RbacPermissionsAssignedByUsersListModelEnum.ProvidersProxyProxyprovider.toString(),
|
||||
RbacPermissionsAssignedByUsersListModelEnum.ProvidersLdapLdapprovider.toString(),
|
||||
].includes(app.providerObj.metaModelName)
|
||||
) {
|
||||
this.fetchIsMissingOutpost([app.provider || 0]);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
willUpdate(changedProperties: PropertyValues<this>) {
|
||||
if (changedProperties.has("applicationSlug") && this.applicationSlug) {
|
||||
this.fetchApplication(this.applicationSlug);
|
||||
}
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
return html`<ak-page-header
|
||||
header=${this.application?.name || msg("Loading")}
|
||||
|
||||
@ -20,8 +20,9 @@ export class AkBackchannelProvidersInput extends AKElement {
|
||||
// TODO: This abstraction is wrong; it's putting *more* layers in as a way of managing the
|
||||
// visual clutter and legibility issues of ak-form-elemental-horizontal and patternfly in
|
||||
// general.
|
||||
|
||||
protected createRenderRoot() {
|
||||
return this;
|
||||
return this as HTMLElement;
|
||||
}
|
||||
|
||||
@property({ type: String })
|
||||
|
||||
@ -4,7 +4,7 @@ import { KeyUnknown, serializeForm } from "@goauthentik/elements/forms/Form";
|
||||
import { HorizontalFormElement } from "@goauthentik/elements/forms/HorizontalFormElement";
|
||||
import { CustomEmitterElement } from "@goauthentik/elements/utils/eventEmitter";
|
||||
|
||||
import { consume } from "@lit-labs/context";
|
||||
import { consume } from "@lit/context";
|
||||
import { query } from "@lit/reactive-element/decorators.js";
|
||||
|
||||
import { styles as AwadStyles } from "./BasePanel.css";
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { createContext } from "@lit-labs/context";
|
||||
import { createContext } from "@lit/context";
|
||||
|
||||
import { ApplicationWizardState } from "./types";
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { AkWizard } from "@goauthentik/components/ak-wizard-main/AkWizard";
|
||||
import { CustomListenerElement } from "@goauthentik/elements/utils/eventEmitter";
|
||||
|
||||
import { ContextProvider } from "@lit-labs/context";
|
||||
import { ContextProvider } from "@lit/context";
|
||||
import { msg } from "@lit/localize";
|
||||
import { customElement, state } from "lit/decorators.js";
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { consume } from "@lit-labs/context";
|
||||
import { consume } from "@lit/context";
|
||||
import { customElement } from "@lit/reactive-element/decorators/custom-element.js";
|
||||
import { state } from "@lit/reactive-element/decorators/state.js";
|
||||
import { LitElement, html } from "lit";
|
||||
|
||||
@ -8,8 +8,8 @@ import { AKElement } from "@goauthentik/elements/Base";
|
||||
import "@goauthentik/elements/PageHeader";
|
||||
|
||||
import { msg, str } from "@lit/localize";
|
||||
import { CSSResult, TemplateResult, html } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
import { CSSResult, PropertyValues, TemplateResult, html } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
|
||||
import PFCard from "@patternfly/patternfly/components/Card/card.css";
|
||||
import PFContent from "@patternfly/patternfly/components/Content/content.css";
|
||||
@ -22,24 +22,28 @@ import { EventsApi } from "@goauthentik/api";
|
||||
|
||||
@customElement("ak-event-view")
|
||||
export class EventViewPage extends AKElement {
|
||||
@property()
|
||||
set eventID(value: string) {
|
||||
new EventsApi(DEFAULT_CONFIG)
|
||||
.eventsEventsRetrieve({
|
||||
eventUuid: value,
|
||||
})
|
||||
.then((ev) => {
|
||||
this.event = ev as EventWithContext;
|
||||
});
|
||||
}
|
||||
@property({ type: String })
|
||||
eventID?: string;
|
||||
|
||||
@property({ attribute: false })
|
||||
@state()
|
||||
event!: EventWithContext;
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return [PFBase, PFGrid, PFDescriptionList, PFPage, PFContent, PFCard];
|
||||
}
|
||||
|
||||
fetchEvent(eventUuid: string) {
|
||||
new EventsApi(DEFAULT_CONFIG).eventsEventsRetrieve({ eventUuid }).then((ev) => {
|
||||
this.event = ev as EventWithContext;
|
||||
});
|
||||
}
|
||||
|
||||
willUpdate(changedProperties: PropertyValues<this>) {
|
||||
if (changedProperties.has("eventID") && this.eventID) {
|
||||
this.fetchEvent(this.eventID);
|
||||
}
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
if (!this.event) {
|
||||
return html`<ak-page-header icon="pf-icon pf-icon-catalog" header=${msg("Loading")}>
|
||||
|
||||
@ -12,8 +12,8 @@ import "@goauthentik/elements/Tabs";
|
||||
import "@goauthentik/elements/buttons/SpinnerButton";
|
||||
|
||||
import { msg } from "@lit/localize";
|
||||
import { CSSResult, TemplateResult, css, html } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
import { CSSResult, PropertyValues, TemplateResult, css, html } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
|
||||
import PFButton from "@patternfly/patternfly/components/Button/button.css";
|
||||
import PFCard from "@patternfly/patternfly/components/Card/card.css";
|
||||
@ -32,18 +32,10 @@ import {
|
||||
|
||||
@customElement("ak-flow-view")
|
||||
export class FlowViewPage extends AKElement {
|
||||
@property()
|
||||
set flowSlug(value: string) {
|
||||
new FlowsApi(DEFAULT_CONFIG)
|
||||
.flowsInstancesRetrieve({
|
||||
slug: value,
|
||||
})
|
||||
.then((flow) => {
|
||||
this.flow = flow;
|
||||
});
|
||||
}
|
||||
@property({ type: String })
|
||||
flowSlug?: string;
|
||||
|
||||
@property({ attribute: false })
|
||||
@state()
|
||||
flow!: Flow;
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
@ -57,6 +49,18 @@ export class FlowViewPage extends AKElement {
|
||||
`);
|
||||
}
|
||||
|
||||
fetchFlow(slug: string) {
|
||||
new FlowsApi(DEFAULT_CONFIG).flowsInstancesRetrieve({ slug }).then((flow) => {
|
||||
this.flow = flow;
|
||||
});
|
||||
}
|
||||
|
||||
willUpdate(changedProperties: PropertyValues<this>) {
|
||||
if (changedProperties.has("flowSlug") && this.flowSlug) {
|
||||
this.fetchFlow(this.flowSlug);
|
||||
}
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
if (!this.flow) {
|
||||
return html``;
|
||||
|
||||
@ -12,7 +12,7 @@ import "@goauthentik/elements/buttons/ModalButton";
|
||||
import "@goauthentik/elements/buttons/SpinnerButton";
|
||||
|
||||
import { msg } from "@lit/localize";
|
||||
import { CSSResult, TemplateResult, html } from "lit";
|
||||
import { CSSResult, PropertyValues, TemplateResult, html } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
import { ifDefined } from "lit/directives/if-defined.js";
|
||||
|
||||
@ -37,21 +37,10 @@ import {
|
||||
|
||||
@customElement("ak-provider-ldap-view")
|
||||
export class LDAPProviderViewPage extends AKElement {
|
||||
@property()
|
||||
set args(value: { [key: string]: number }) {
|
||||
this.providerID = value.id;
|
||||
}
|
||||
|
||||
@property({ type: Number })
|
||||
set providerID(value: number) {
|
||||
new ProvidersApi(DEFAULT_CONFIG)
|
||||
.providersLdapRetrieve({
|
||||
id: value,
|
||||
})
|
||||
.then((prov) => (this.provider = prov));
|
||||
}
|
||||
providerID?: number;
|
||||
|
||||
@property({ attribute: false })
|
||||
@state()
|
||||
provider?: LDAPProvider;
|
||||
|
||||
@state()
|
||||
@ -84,6 +73,18 @@ export class LDAPProviderViewPage extends AKElement {
|
||||
});
|
||||
}
|
||||
|
||||
fetchProvider(id: number) {
|
||||
new ProvidersApi(DEFAULT_CONFIG)
|
||||
.providersLdapRetrieve({ id })
|
||||
.then((prov) => (this.provider = prov));
|
||||
}
|
||||
|
||||
willUpdate(changedProperties: PropertyValues<this>) {
|
||||
if (changedProperties.has("providerID") && this.providerID) {
|
||||
this.fetchProvider(this.providerID);
|
||||
}
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
if (!this.provider) {
|
||||
return html``;
|
||||
|
||||
@ -25,8 +25,8 @@ import "@goauthentik/elements/buttons/SpinnerButton";
|
||||
import { getURLParam } from "@goauthentik/elements/router/RouteMatch";
|
||||
|
||||
import { msg } from "@lit/localize";
|
||||
import { CSSResult, TemplateResult, html } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
import { CSSResult, PropertyValues, TemplateResult, html } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
|
||||
import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";
|
||||
import PFButton from "@patternfly/patternfly/components/Button/button.css";
|
||||
@ -75,21 +75,10 @@ export function isForward(mode: ProxyMode): boolean {
|
||||
|
||||
@customElement("ak-provider-proxy-view")
|
||||
export class ProxyProviderViewPage extends AKElement {
|
||||
@property()
|
||||
set args(value: { [key: string]: number }) {
|
||||
this.providerID = value.id;
|
||||
}
|
||||
|
||||
@property({ type: Number })
|
||||
set providerID(value: number) {
|
||||
new ProvidersApi(DEFAULT_CONFIG)
|
||||
.providersProxyRetrieve({
|
||||
id: value,
|
||||
})
|
||||
.then((prov) => (this.provider = prov));
|
||||
}
|
||||
providerID?: number;
|
||||
|
||||
@property({ attribute: false })
|
||||
@state()
|
||||
provider?: ProxyProvider;
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
@ -116,6 +105,18 @@ export class ProxyProviderViewPage extends AKElement {
|
||||
});
|
||||
}
|
||||
|
||||
fetchProvider(id: number) {
|
||||
new ProvidersApi(DEFAULT_CONFIG)
|
||||
.providersProxyRetrieve({ id })
|
||||
.then((prov) => (this.provider = prov));
|
||||
}
|
||||
|
||||
willUpdate(changedProperties: PropertyValues<this>) {
|
||||
if (changedProperties.has("providerID") && this.providerID) {
|
||||
this.fetchProvider(this.providerID);
|
||||
}
|
||||
}
|
||||
|
||||
renderConfig(): TemplateResult {
|
||||
const serves = [
|
||||
{
|
||||
|
||||
@ -15,8 +15,8 @@ import "@goauthentik/elements/buttons/ModalButton";
|
||||
import "@goauthentik/elements/buttons/SpinnerButton";
|
||||
|
||||
import { msg } from "@lit/localize";
|
||||
import { CSSResult, TemplateResult, html } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
import { CSSResult, PropertyValues, TemplateResult, html } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
|
||||
import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";
|
||||
import PFButton from "@patternfly/patternfly/components/Button/button.css";
|
||||
@ -38,21 +38,10 @@ import {
|
||||
|
||||
@customElement("ak-provider-rac-view")
|
||||
export class RACProviderViewPage extends AKElement {
|
||||
@property()
|
||||
set args(value: { [key: string]: number }) {
|
||||
this.providerID = value.id;
|
||||
}
|
||||
|
||||
@property({ type: Number })
|
||||
set providerID(value: number) {
|
||||
new ProvidersApi(DEFAULT_CONFIG)
|
||||
.providersRacRetrieve({
|
||||
id: value,
|
||||
})
|
||||
.then((prov) => (this.provider = prov));
|
||||
}
|
||||
providerID?: number;
|
||||
|
||||
@property({ attribute: false })
|
||||
@state()
|
||||
provider?: RACProvider;
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
@ -79,6 +68,18 @@ export class RACProviderViewPage extends AKElement {
|
||||
});
|
||||
}
|
||||
|
||||
fetchProvider(id: number) {
|
||||
new ProvidersApi(DEFAULT_CONFIG)
|
||||
.providersRacRetrieve({ id })
|
||||
.then((prov) => (this.provider = prov));
|
||||
}
|
||||
|
||||
willUpdate(changedProperties: PropertyValues<this>) {
|
||||
if (changedProperties.has("providerID") && this.providerID) {
|
||||
this.fetchProvider(this.providerID);
|
||||
}
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
if (!this.provider) {
|
||||
return html``;
|
||||
|
||||
@ -11,8 +11,8 @@ import "@goauthentik/elements/buttons/ModalButton";
|
||||
import "@goauthentik/elements/buttons/SpinnerButton";
|
||||
|
||||
import { msg } from "@lit/localize";
|
||||
import { CSSResult, TemplateResult, html } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
import { CSSResult, PropertyValues, TemplateResult, html } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
|
||||
import PFButton from "@patternfly/patternfly/components/Button/button.css";
|
||||
import PFCard from "@patternfly/patternfly/components/Card/card.css";
|
||||
@ -32,21 +32,10 @@ import {
|
||||
|
||||
@customElement("ak-provider-radius-view")
|
||||
export class RadiusProviderViewPage extends AKElement {
|
||||
@property()
|
||||
set args(value: { [key: string]: number }) {
|
||||
this.providerID = value.id;
|
||||
}
|
||||
|
||||
@property({ type: Number })
|
||||
set providerID(value: number) {
|
||||
new ProvidersApi(DEFAULT_CONFIG)
|
||||
.providersRadiusRetrieve({
|
||||
id: value,
|
||||
})
|
||||
.then((prov) => (this.provider = prov));
|
||||
}
|
||||
providerID?: number;
|
||||
|
||||
@property({ attribute: false })
|
||||
@state()
|
||||
provider?: RadiusProvider;
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
@ -71,6 +60,18 @@ export class RadiusProviderViewPage extends AKElement {
|
||||
});
|
||||
}
|
||||
|
||||
fetchProvider(id: number) {
|
||||
new ProvidersApi(DEFAULT_CONFIG)
|
||||
.providersRadiusRetrieve({ id })
|
||||
.then((prov) => (this.provider = prov));
|
||||
}
|
||||
|
||||
willUpdate(changedProperties: PropertyValues<this>) {
|
||||
if (changedProperties.has("providerID") && this.providerID) {
|
||||
this.fetchProvider(this.providerID);
|
||||
}
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
if (!this.provider) {
|
||||
return html``;
|
||||
|
||||
@ -17,7 +17,7 @@ import "@goauthentik/elements/buttons/SpinnerButton";
|
||||
import { showMessage } from "@goauthentik/elements/messages/MessageContainer";
|
||||
|
||||
import { msg } from "@lit/localize";
|
||||
import { CSSResult, TemplateResult, html } from "lit";
|
||||
import { CSSResult, PropertyValues, TemplateResult, html } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
import { ifDefined } from "lit/directives/if-defined.js";
|
||||
|
||||
@ -55,37 +55,10 @@ interface SAMLPreviewAttribute {
|
||||
|
||||
@customElement("ak-provider-saml-view")
|
||||
export class SAMLProviderViewPage extends AKElement {
|
||||
@property()
|
||||
set args(value: { [key: string]: number }) {
|
||||
this.providerID = value.id;
|
||||
}
|
||||
|
||||
@property({ type: Number })
|
||||
set providerID(value: number) {
|
||||
new ProvidersApi(DEFAULT_CONFIG)
|
||||
.providersSamlRetrieve({
|
||||
id: value,
|
||||
})
|
||||
.then((prov) => {
|
||||
this.provider = prov;
|
||||
if (prov.signingKp) {
|
||||
new CryptoApi(DEFAULT_CONFIG)
|
||||
.cryptoCertificatekeypairsRetrieve({
|
||||
kpUuid: prov.signingKp,
|
||||
})
|
||||
.then((kp) => (this.signer = kp));
|
||||
}
|
||||
if (prov.verificationKp) {
|
||||
new CryptoApi(DEFAULT_CONFIG)
|
||||
.cryptoCertificatekeypairsRetrieve({
|
||||
kpUuid: prov.verificationKp,
|
||||
})
|
||||
.then((kp) => (this.verifier = kp));
|
||||
}
|
||||
});
|
||||
}
|
||||
providerID?: number;
|
||||
|
||||
@property({ attribute: false })
|
||||
@state()
|
||||
provider?: SAMLProvider;
|
||||
|
||||
@state()
|
||||
@ -138,6 +111,36 @@ export class SAMLProviderViewPage extends AKElement {
|
||||
});
|
||||
}
|
||||
|
||||
fetchCertificate(kpUuid: string) {
|
||||
return new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsRetrieve({ kpUuid });
|
||||
}
|
||||
|
||||
fetchSigningCertificate(kpUuid: string) {
|
||||
this.fetchCertificate(kpUuid).then((kp) => (this.signer = kp));
|
||||
}
|
||||
|
||||
fetchVerificationCertificate(kpUuid: string) {
|
||||
this.fetchCertificate(kpUuid).then((kp) => (this.verifier = kp));
|
||||
}
|
||||
|
||||
fetchProvider(id: number) {
|
||||
new ProvidersApi(DEFAULT_CONFIG).providersSamlRetrieve({ id }).then((prov) => {
|
||||
this.provider = prov;
|
||||
if (this.provider.signingKp) {
|
||||
this.fetchSigningCertificate(this.provider.signingKp);
|
||||
}
|
||||
if (this.provider.verificationKp) {
|
||||
this.fetchVerificationCertificate(this.provider.verificationKp);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
willUpdate(changedProperties: PropertyValues<this>) {
|
||||
if (changedProperties.has("providerID") && this.providerID) {
|
||||
this.fetchProvider(this.providerID);
|
||||
}
|
||||
}
|
||||
|
||||
renderRelatedObjects(): TemplateResult {
|
||||
const relatedObjects = [];
|
||||
if (this.provider?.assignedApplicationName) {
|
||||
|
||||
@ -11,7 +11,7 @@ import "@goauthentik/elements/buttons/ActionButton";
|
||||
import "@goauthentik/elements/buttons/ModalButton";
|
||||
|
||||
import { msg, str } from "@lit/localize";
|
||||
import { CSSResult, TemplateResult, html } from "lit";
|
||||
import { CSSResult, PropertyValues, TemplateResult, html } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
|
||||
import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";
|
||||
@ -37,21 +37,10 @@ import {
|
||||
|
||||
@customElement("ak-provider-scim-view")
|
||||
export class SCIMProviderViewPage extends AKElement {
|
||||
@property()
|
||||
set args(value: { [key: string]: number }) {
|
||||
this.providerID = value.id;
|
||||
}
|
||||
|
||||
@property({ type: Number })
|
||||
set providerID(value: number) {
|
||||
new ProvidersApi(DEFAULT_CONFIG)
|
||||
.providersScimRetrieve({
|
||||
id: value,
|
||||
})
|
||||
.then((prov) => (this.provider = prov));
|
||||
}
|
||||
providerID?: number;
|
||||
|
||||
@property({ attribute: false })
|
||||
@state()
|
||||
provider?: SCIMProvider;
|
||||
|
||||
@state()
|
||||
@ -82,6 +71,18 @@ export class SCIMProviderViewPage extends AKElement {
|
||||
});
|
||||
}
|
||||
|
||||
fetchProvider(id: number) {
|
||||
new ProvidersApi(DEFAULT_CONFIG)
|
||||
.providersScimRetrieve({ id })
|
||||
.then((prov) => (this.provider = prov));
|
||||
}
|
||||
|
||||
willUpdate(changedProperties: PropertyValues<this>) {
|
||||
if (changedProperties.has("providerID") && this.providerID) {
|
||||
this.fetchProvider(this.providerID);
|
||||
}
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
if (!this.provider) {
|
||||
return html``;
|
||||
|
||||
@ -15,7 +15,7 @@ import "@goauthentik/elements/forms/HorizontalFormElement";
|
||||
import "@goauthentik/elements/forms/SearchSelect";
|
||||
|
||||
import { msg } from "@lit/localize";
|
||||
import { TemplateResult, html } from "lit";
|
||||
import { PropertyValues, TemplateResult, html } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
import { ifDefined } from "lit/directives/if-defined.js";
|
||||
|
||||
@ -40,22 +40,8 @@ export class OAuthSourceForm extends WithCapabilitiesConfig(BaseSourceForm<OAuth
|
||||
return source;
|
||||
}
|
||||
|
||||
_modelName?: string;
|
||||
|
||||
@property()
|
||||
set modelName(v: string | undefined) {
|
||||
this._modelName = v;
|
||||
new SourcesApi(DEFAULT_CONFIG)
|
||||
.sourcesOauthSourceTypesList({
|
||||
name: v?.replace("oauthsource", ""),
|
||||
})
|
||||
.then((type) => {
|
||||
this.providerType = type[0];
|
||||
});
|
||||
}
|
||||
get modelName(): string | undefined {
|
||||
return this._modelName;
|
||||
}
|
||||
modelName?: string;
|
||||
|
||||
@property({ attribute: false })
|
||||
providerType: SourceType | null = null;
|
||||
@ -97,6 +83,22 @@ export class OAuthSourceForm extends WithCapabilitiesConfig(BaseSourceForm<OAuth
|
||||
return source;
|
||||
}
|
||||
|
||||
fetchProviderType(v: string | undefined) {
|
||||
new SourcesApi(DEFAULT_CONFIG)
|
||||
.sourcesOauthSourceTypesList({
|
||||
name: v?.replace("oauthsource", ""),
|
||||
})
|
||||
.then((type) => {
|
||||
this.providerType = type[0];
|
||||
});
|
||||
}
|
||||
|
||||
willUpdate(changedProperties: PropertyValues<this>) {
|
||||
if (changedProperties.has("modelName")) {
|
||||
this.fetchProviderType(this.modelName);
|
||||
}
|
||||
}
|
||||
|
||||
renderUrlOptions(): TemplateResult {
|
||||
if (!this.providerType?.urlsCustomizable) {
|
||||
return html``;
|
||||
|
||||
@ -13,7 +13,7 @@ import { PaginatedResponse } from "@goauthentik/elements/table/Table";
|
||||
import { Table, TableColumn } from "@goauthentik/elements/table/Table";
|
||||
|
||||
import { msg } from "@lit/localize";
|
||||
import { TemplateResult, html } from "lit";
|
||||
import { PropertyValues, TemplateResult, html } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
|
||||
import { Event, EventsApi } from "@goauthentik/api";
|
||||
@ -31,27 +31,18 @@ export class ObjectChangelog extends Table<Event> {
|
||||
@property()
|
||||
targetModelApp?: string;
|
||||
|
||||
private _targetModelName = "";
|
||||
|
||||
@property()
|
||||
set targetModelName(value: string) {
|
||||
this._targetModelName = value;
|
||||
this.fetch();
|
||||
}
|
||||
|
||||
get targetModelName(): string {
|
||||
return this._targetModelName;
|
||||
}
|
||||
targetModelName = "";
|
||||
|
||||
async apiEndpoint(page: number): Promise<PaginatedResponse<Event>> {
|
||||
let modelName = this._targetModelName;
|
||||
let modelName = this.targetModelName;
|
||||
let appName = this.targetModelApp;
|
||||
if (this._targetModelName.indexOf(".") !== -1) {
|
||||
const parts = this._targetModelName.split(".", 1);
|
||||
if (this.targetModelName.indexOf(".") !== -1) {
|
||||
const parts = this.targetModelName.split(".", 1);
|
||||
appName = parts[0];
|
||||
modelName = parts[1];
|
||||
}
|
||||
if (this._targetModelName === "") {
|
||||
if (this.targetModelName === "") {
|
||||
return Promise.reject();
|
||||
}
|
||||
return new EventsApi(DEFAULT_CONFIG).eventsEventsList({
|
||||
@ -74,6 +65,12 @@ export class ObjectChangelog extends Table<Event> {
|
||||
];
|
||||
}
|
||||
|
||||
willUpdate(changedProperties: PropertyValues<this>) {
|
||||
if (changedProperties.has("targetModelName") && this.targetModelName) {
|
||||
this.fetch();
|
||||
}
|
||||
}
|
||||
|
||||
row(item: EventWithContext): TemplateResult[] {
|
||||
return [
|
||||
html`${actionToLabel(item.action)}`,
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { createContext } from "@lit-labs/context";
|
||||
import { createContext } from "@lit/context";
|
||||
|
||||
import type { Config, CurrentBrand, LicenseSummary } from "@goauthentik/api";
|
||||
|
||||
|
||||
@ -11,8 +11,6 @@ import ThemeDark from "@goauthentik/common/styles/theme-dark.css";
|
||||
|
||||
import { Config, CurrentBrand, UiThemeEnum } from "@goauthentik/api";
|
||||
|
||||
import { AdoptedStyleSheetsElement } from "./types";
|
||||
|
||||
type AkInterface = HTMLElement & {
|
||||
getTheme: () => Promise<UiThemeEnum>;
|
||||
brand?: CurrentBrand;
|
||||
@ -59,19 +57,22 @@ export class AKElement extends LitElement {
|
||||
super();
|
||||
}
|
||||
|
||||
protected createRenderRoot(): ShadowRoot | Element {
|
||||
this.fixElementStyles();
|
||||
const root = super.createRenderRoot() as ShadowRoot;
|
||||
let styleRoot: AdoptedStyleSheetsElement = root;
|
||||
if ("ShadyDOM" in window) {
|
||||
styleRoot = document;
|
||||
}
|
||||
setInitialStyles(root: DocumentOrShadowRoot) {
|
||||
const styleRoot: DocumentOrShadowRoot = (
|
||||
"ShadyDOM" in window ? document : root
|
||||
) as DocumentOrShadowRoot;
|
||||
styleRoot.adoptedStyleSheets = adaptCSS([
|
||||
...styleRoot.adoptedStyleSheets,
|
||||
ensureCSSStyleSheet(AKGlobal),
|
||||
]);
|
||||
this._initTheme(styleRoot);
|
||||
this._initCustomCSS(styleRoot);
|
||||
}
|
||||
|
||||
protected createRenderRoot() {
|
||||
this.fixElementStyles();
|
||||
const root = super.createRenderRoot();
|
||||
this.setInitialStyles(root as unknown as DocumentOrShadowRoot);
|
||||
return root;
|
||||
}
|
||||
|
||||
@ -86,7 +87,7 @@ export class AKElement extends LitElement {
|
||||
).elementStyles.map(ensureCSSStyleSheet);
|
||||
}
|
||||
|
||||
async _initTheme(root: AdoptedStyleSheetsElement): Promise<void> {
|
||||
async _initTheme(root: DocumentOrShadowRoot): Promise<void> {
|
||||
// Early activate theme based on media query to prevent light flash
|
||||
// when dark is preferred
|
||||
this._activateTheme(
|
||||
@ -98,7 +99,7 @@ export class AKElement extends LitElement {
|
||||
this._applyTheme(root, await this.getTheme());
|
||||
}
|
||||
|
||||
private async _initCustomCSS(root: AdoptedStyleSheetsElement): Promise<void> {
|
||||
private async _initCustomCSS(root: DocumentOrShadowRoot): Promise<void> {
|
||||
const sheets = await fetchCustomCSS();
|
||||
sheets.map((css) => {
|
||||
if (css === "") {
|
||||
@ -110,7 +111,7 @@ export class AKElement extends LitElement {
|
||||
});
|
||||
}
|
||||
|
||||
_applyTheme(root: AdoptedStyleSheetsElement, theme?: UiThemeEnum): void {
|
||||
_applyTheme(root: DocumentOrShadowRoot, theme?: UiThemeEnum): void {
|
||||
if (!theme) {
|
||||
theme = UiThemeEnum.Automatic;
|
||||
}
|
||||
@ -145,7 +146,7 @@ export class AKElement extends LitElement {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
_activateTheme(root: AdoptedStyleSheetsElement, theme: UiThemeEnum) {
|
||||
_activateTheme(root: DocumentOrShadowRoot, theme: UiThemeEnum) {
|
||||
if (theme === this._activeTheme) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -7,10 +7,9 @@ import {
|
||||
authentikConfigContext,
|
||||
authentikEnterpriseContext,
|
||||
} from "@goauthentik/elements/AuthentikContexts";
|
||||
import type { AdoptedStyleSheetsElement } from "@goauthentik/elements/types";
|
||||
import { ensureCSSStyleSheet } from "@goauthentik/elements/utils/ensureCSSStyleSheet";
|
||||
|
||||
import { ContextProvider } from "@lit-labs/context";
|
||||
import { ContextProvider } from "@lit/context";
|
||||
import { state } from "lit/decorators.js";
|
||||
|
||||
import PFBase from "@patternfly/patternfly/patternfly-base.css";
|
||||
@ -76,9 +75,9 @@ export class Interface extends AKElement implements AkInterface {
|
||||
this.dataset.akInterfaceRoot = "true";
|
||||
}
|
||||
|
||||
_activateTheme(root: AdoptedStyleSheetsElement, theme: UiThemeEnum): void {
|
||||
_activateTheme(root: DocumentOrShadowRoot, theme: UiThemeEnum): void {
|
||||
super._activateTheme(root, theme);
|
||||
super._activateTheme(document, theme);
|
||||
super._activateTheme(document as unknown as DocumentOrShadowRoot, theme);
|
||||
}
|
||||
|
||||
async getTheme(): Promise<UiThemeEnum> {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { authentikConfigContext } from "@goauthentik/elements/AuthentikContexts";
|
||||
|
||||
import { consume } from "@lit-labs/context";
|
||||
import { consume } from "@lit/context";
|
||||
import type { LitElement } from "lit";
|
||||
|
||||
import type { Config } from "@goauthentik/api";
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { authentikBrandContext } from "@goauthentik/elements/AuthentikContexts";
|
||||
|
||||
import { consume } from "@lit-labs/context";
|
||||
import { consume } from "@lit/context";
|
||||
import type { LitElement } from "lit";
|
||||
|
||||
import type { CurrentBrand } from "@goauthentik/api";
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { authentikConfigContext } from "@goauthentik/elements/AuthentikContexts";
|
||||
|
||||
import { consume } from "@lit-labs/context";
|
||||
import { consume } from "@lit/context";
|
||||
import type { LitElement } from "lit";
|
||||
|
||||
import { CapabilitiesEnum } from "@goauthentik/api";
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { authentikEnterpriseContext } from "@goauthentik/elements/AuthentikContexts";
|
||||
|
||||
import { consume } from "@lit-labs/context";
|
||||
import { consume } from "@lit/context";
|
||||
import type { LitElement } from "lit";
|
||||
|
||||
import type { LicenseSummary } from "@goauthentik/api";
|
||||
|
||||
@ -13,8 +13,8 @@ import { WithBrandConfig } from "@goauthentik/elements/Interface/brandProvider";
|
||||
import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
|
||||
|
||||
import { msg } from "@lit/localize";
|
||||
import { CSSResult, TemplateResult, css, html } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
import { CSSResult, PropertyValues, TemplateResult, css, html } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
|
||||
import PFButton from "@patternfly/patternfly/components/Button/button.css";
|
||||
import PFContent from "@patternfly/patternfly/components/Content/content.css";
|
||||
@ -35,29 +35,11 @@ export class PageHeader extends WithBrandConfig(AKElement) {
|
||||
hasNotifications = false;
|
||||
|
||||
@property()
|
||||
set header(value: string) {
|
||||
const currentIf = currentInterface();
|
||||
let title = this.brand?.brandingTitle || TITLE_DEFAULT;
|
||||
if (currentIf === "admin") {
|
||||
title = `${msg("Admin")} - ${title}`;
|
||||
}
|
||||
if (value !== "") {
|
||||
title = `${value} - ${title}`;
|
||||
}
|
||||
document.title = title;
|
||||
this._header = value;
|
||||
}
|
||||
|
||||
get header(): string {
|
||||
return this._header;
|
||||
}
|
||||
header = "";
|
||||
|
||||
@property()
|
||||
description?: string;
|
||||
|
||||
@state()
|
||||
_header = "";
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return [
|
||||
PFBase,
|
||||
@ -125,6 +107,23 @@ export class PageHeader extends WithBrandConfig(AKElement) {
|
||||
});
|
||||
}
|
||||
|
||||
setTitle(value: string) {
|
||||
const currentIf = currentInterface();
|
||||
const title = this.brand?.brandingTitle || TITLE_DEFAULT;
|
||||
document.title =
|
||||
currentIf === "admin"
|
||||
? `${msg("Admin")} - ${title}`
|
||||
: value !== ""
|
||||
? `${value} - ${title}`
|
||||
: title;
|
||||
}
|
||||
|
||||
willUpdate(changedProperties: PropertyValues<this>) {
|
||||
if (changedProperties.has("header") && this.header) {
|
||||
this.setTitle(this.header);
|
||||
}
|
||||
}
|
||||
|
||||
renderIcon(): TemplateResult {
|
||||
if (this.icon) {
|
||||
if (this.iconImage && !this.icon.startsWith("fa://")) {
|
||||
|
||||
@ -50,7 +50,7 @@ export class TreeViewNode extends AKElement {
|
||||
return pathItems.reverse().join(this.separator);
|
||||
}
|
||||
|
||||
protected createRenderRoot(): Element {
|
||||
protected createRenderRoot() {
|
||||
return this;
|
||||
}
|
||||
|
||||
@ -171,8 +171,7 @@ export class TreeView extends AKElement {
|
||||
}
|
||||
return item;
|
||||
} else {
|
||||
const child = this.createNode(path, parentItem.childItems[idx], level + 1);
|
||||
return child;
|
||||
return this.createNode(path, parentItem.childItems[idx], level + 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -77,8 +77,9 @@ export class AkDualSelectProvider extends CustomListenerElement(AKElement) {
|
||||
|
||||
if (changedProperties.has("provider")) {
|
||||
this.pagination = undefined;
|
||||
if (changedProperties.get("provider")) {
|
||||
this.selectedMap.set(changedProperties.get("provider"), this.selected);
|
||||
const previousProvider = changedProperties.get("provider");
|
||||
if (previousProvider) {
|
||||
this.selectedMap.set(previousProvider, this.selected);
|
||||
this.selected = this.selectedMap.get(this.provider) ?? [];
|
||||
}
|
||||
this.fetch();
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { createContext } from "@lit-labs/context";
|
||||
import { createContext } from "@lit/context";
|
||||
|
||||
export const localeContext = createContext<string>("locale");
|
||||
export default localeContext;
|
||||
|
||||
@ -3,7 +3,7 @@ import { AKElement } from "@goauthentik/elements/Base";
|
||||
import { PFSize } from "@goauthentik/elements/Spinner";
|
||||
import { CustomEmitterElement } from "@goauthentik/elements/utils/eventEmitter";
|
||||
|
||||
import { Task, TaskStatus } from "@lit-labs/task";
|
||||
import { Task, TaskStatus } from "@lit/task";
|
||||
import { css, html } from "lit";
|
||||
import { property } from "lit/decorators.js";
|
||||
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
export interface AdoptedStyleSheetsElement {
|
||||
adoptedStyleSheets: readonly CSSStyleSheet[];
|
||||
}
|
||||
@ -18,7 +18,7 @@ import "@goauthentik/flow/stages/RedirectStage";
|
||||
import { StageHost, SubmitOptions } from "@goauthentik/flow/stages/base";
|
||||
|
||||
import { msg } from "@lit/localize";
|
||||
import { CSSResult, TemplateResult, css, html, nothing } from "lit";
|
||||
import { CSSResult, PropertyValues, TemplateResult, css, html, nothing } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
import { unsafeHTML } from "lit/directives/unsafe-html.js";
|
||||
import { until } from "lit/directives/until.js";
|
||||
@ -72,24 +72,8 @@ export class FlowExecutor extends Interface implements StageHost {
|
||||
@state()
|
||||
inspectorOpen = false;
|
||||
|
||||
_flowInfo?: ContextualFlowInfo;
|
||||
|
||||
@state()
|
||||
set flowInfo(value: ContextualFlowInfo | undefined) {
|
||||
this._flowInfo = value;
|
||||
if (!value) {
|
||||
return;
|
||||
}
|
||||
this.shadowRoot
|
||||
?.querySelectorAll<HTMLDivElement>(".pf-c-background-image")
|
||||
.forEach((bg) => {
|
||||
bg.style.setProperty("--ak-flow-background", `url('${value?.background}')`);
|
||||
});
|
||||
}
|
||||
|
||||
get flowInfo(): ContextualFlowInfo | undefined {
|
||||
return this._flowInfo;
|
||||
}
|
||||
flowInfo?: ContextualFlowInfo;
|
||||
|
||||
ws: WebsocketClient;
|
||||
|
||||
@ -218,10 +202,7 @@ export class FlowExecutor extends Interface implements StageHost {
|
||||
if (this.challenge.flowInfo) {
|
||||
this.flowInfo = this.challenge.flowInfo;
|
||||
}
|
||||
if (this.challenge.responseErrors) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
return !this.challenge.responseErrors;
|
||||
} catch (exc: unknown) {
|
||||
this.errorMessage(exc as Error | ResponseError);
|
||||
return false;
|
||||
@ -274,6 +255,24 @@ export class FlowExecutor extends Interface implements StageHost {
|
||||
this.challenge = challenge as ChallengeTypes;
|
||||
}
|
||||
|
||||
setShadowStyles(value: ContextualFlowInfo) {
|
||||
if (!value) {
|
||||
return;
|
||||
}
|
||||
this.shadowRoot
|
||||
?.querySelectorAll<HTMLDivElement>(".pf-c-background-image")
|
||||
.forEach((bg) => {
|
||||
bg.style.setProperty("--ak-flow-background", `url('${value?.background}')`);
|
||||
});
|
||||
}
|
||||
|
||||
// DOM post-processing has to happen after the render.
|
||||
updated(changedProperties: PropertyValues<this>) {
|
||||
if (changedProperties.has("flowInfo") && this.flowInfo !== undefined) {
|
||||
this.setShadowStyles(this.flowInfo);
|
||||
}
|
||||
}
|
||||
|
||||
async renderChallengeNativeElement(): Promise<TemplateResult> {
|
||||
switch (this.challenge?.component) {
|
||||
case "ak-stage-access-denied":
|
||||
|
||||
Reference in New Issue
Block a user