diff --git a/web/src/admin/admin-overview/cards/RecentEventsCard.ts b/web/src/admin/admin-overview/cards/RecentEventsCard.ts
index b02c992b2..11c197dd8 100644
--- a/web/src/admin/admin-overview/cards/RecentEventsCard.ts
+++ b/web/src/admin/admin-overview/cards/RecentEventsCard.ts
@@ -1,9 +1,9 @@
-import "@goauthentik/admin/events/EventInfo";
import { EventGeo } from "@goauthentik/admin/events/utils";
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { EventWithContext } from "@goauthentik/common/events";
import { actionToLabel } from "@goauthentik/common/labels";
import { truncate } from "@goauthentik/common/utils";
+import "@goauthentik/components/ak-event-info";
import "@goauthentik/elements/Tabs";
import "@goauthentik/elements/buttons/Dropdown";
import "@goauthentik/elements/buttons/ModalButton";
diff --git a/web/src/admin/events/EventInfo.ts b/web/src/admin/events/EventInfo.ts
deleted file mode 100644
index 0a1b32cc4..000000000
--- a/web/src/admin/events/EventInfo.ts
+++ /dev/null
@@ -1,442 +0,0 @@
-import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { VERSION } from "@goauthentik/common/constants";
-import { EventContext, EventModel, EventWithContext } from "@goauthentik/common/events";
-import { AKElement } from "@goauthentik/elements/Base";
-import "@goauthentik/elements/Expand";
-import "@goauthentik/elements/Spinner";
-import { PFSize } from "@goauthentik/elements/Spinner";
-
-import { msg, str } from "@lit/localize";
-import { CSSResult, TemplateResult, css, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { until } from "lit/directives/until.js";
-
-import PFButton from "@patternfly/patternfly/components/Button/button.css";
-import PFCard from "@patternfly/patternfly/components/Card/card.css";
-import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
-import PFList from "@patternfly/patternfly/components/List/list.css";
-import PFFlex from "@patternfly/patternfly/layouts/Flex/flex.css";
-import PFBase from "@patternfly/patternfly/patternfly-base.css";
-
-import { EventActions, FlowsApi } from "@goauthentik/api";
-
-@customElement("ak-event-info")
-export class EventInfo extends AKElement {
- @property({ attribute: false })
- event!: EventWithContext;
-
- static get styles(): CSSResult[] {
- return [
- PFBase,
- PFButton,
- PFFlex,
- PFCard,
- PFList,
- PFDescriptionList,
- css`
- code {
- display: block;
- white-space: pre-wrap;
- word-break: break-all;
- }
- .pf-l-flex {
- justify-content: space-between;
- }
- .pf-l-flex__item {
- min-width: 25%;
- }
- iframe {
- width: 100%;
- height: 50rem;
- }
- `,
- ];
- }
-
- getModelInfo(context: EventModel): TemplateResult {
- if (context === null) {
- return html`-`;
- }
- return html`
-
-
-
-
- ${msg("UID")}
-
-
-
-
${context.pk}
-
-
-
-
- ${msg("Name")}
-
-
-
-
${context.name}
-
-
-
-
- ${msg("App")}
-
-
-
-
${context.app}
-
-
-
-
- ${msg("Model Name")}
-
-
-
-
${context.model_name}
-
-
-
-
-
-
- ${msg("Message")}
-
-
-
-
${context.message}
-
-
-
-
- ${msg("Subject")}
-
-
-
-
${context.subject}
-
-
-
-
- ${msg("From")}
-
-
-
-
${context.from_email}
-
-
-
-
- ${msg("To")}
-
-
-
-
- ${(context.to_email as string[]).map((to) => {
- return html`
- ${to}
`;
- })}
-
-
-
`;
- }
-
- defaultResponse(): TemplateResult {
- return html`
-
-
${msg("Context")}
-
- ${JSON.stringify(this.event?.context, null, 4)}
-
-
-
-
${msg("User")}
-
- ${JSON.stringify(this.event?.user, null, 4)}
-
-
-
- Stacktrace from authentik
-
-\`\`\`
-${context.message as string}
-\`\`\`
-
-
-
-**Version and Deployment (please complete the following information):**
-- authentik version: ${VERSION}
-- Deployment: [e.g. docker-compose, helm]
-
-**Additional context**
-Add any other context about the problem here.
- `;
- return `https://github.com/goauthentik/authentik/issues/
-new?labels=bug,from_authentik&title=${encodeURIComponent(title)}
-&body=${encodeURIComponent(fullBody)}`.trim();
- }
-
- render(): TemplateResult {
- if (!this.event) {
- return html``;
- }
- switch (this.event?.action) {
- case EventActions.ModelCreated:
- case EventActions.ModelUpdated:
- case EventActions.ModelDeleted:
- return html`
- ${msg("Affected model:")}
-
- ${this.getModelInfo(this.event.context?.model as EventModel)}
-
- `;
- case EventActions.AuthorizeApplication:
- return html`
-
-
${msg("Authorized application:")}
-
- ${this.getModelInfo(
- this.event.context.authorized_application as EventModel,
- )}
-
-
-
-
${msg("Using flow")}
-
-
${until(
- new FlowsApi(DEFAULT_CONFIG)
- .flowsInstancesList({
- flowUuid: this.event.context.flow as string,
- })
- .then((resp) => {
- return html`${resp.results[0].name}`;
- }),
- html``,
- )}
-
-
-
-
${msg("Email info:")}
- ${this.getEmailInfo(this.event.context)}
-
-
- `;
- case EventActions.SecretView:
- return html` ${msg("Secret:")}
- ${this.getModelInfo(this.event.context.secret as EventModel)}`;
- case EventActions.SystemException:
- return html`
-
-
${msg("Exception")}
-
-
-
${this.event.context.message}
-
-
-
-
-
${msg("Exception")}
-
-
${this.event.context.message || this.event.context.error}
-
-
-
-
${msg("Expression")}
-
- ${this.event.context.expression}
-
-
-
-
-
${msg("Binding")}
- ${this.getModelInfo(this.event.context.binding as EventModel)}
-
-
-
${msg("Request")}
-
-
- -
- ${msg("Object")}:
- ${this.getModelInfo(
- (this.event.context.request as EventContext)
- .obj as EventModel,
- )}
-
- -
- ${msg("Context")}:
-
${JSON.stringify(
- (this.event.context.request as EventContext)
- .context,
- null,
- 4,
- )}
-
-
-
-
-
-
${msg("Exception")}
-
- ${this.event.context.message || this.event.context.error}
-
-
-
-
-
${msg("Binding")}
- ${this.getModelInfo(this.event.context.binding as EventModel)}
-
-
-
${msg("Request")}
-
-
- -
- ${msg("Object")}:
- ${this.getModelInfo(
- (this.event.context.request as EventContext)
- .obj as EventModel,
- )}
-
- -
- ${msg("Context")}:
-
${JSON.stringify(
- (this.event.context.request as EventContext)
- .context,
- null,
- 4,
- )}
-
-
-
-
-
-
${msg("Result")}
-
-
- -
- ${msg("Passing")}:
- ${(this.event.context.result as EventContext).passing}
-
- -
- ${msg("Messages")}:
-
- ${(
- (this.event.context.result as EventContext)
- .messages as string[]
- ).map((msg) => {
- return html`- ${msg}
`;
- })}
-
-
-
-
-
-
${this.event.context.message}
- ${this.defaultResponse()}`;
- case EventActions.UpdateAvailable:
- return html`${msg("New version available!")}
-
- ${this.event.context.new_version}
- `;
- // Action types which typically don't record any extra context.
- // If context is not empty, we fall to the default response.
- case EventActions.Login:
- if ("using_source" in this.event.context) {
- return html`
-
-
${msg("Using source")}
- ${this.getModelInfo(this.event.context.using_source as EventModel)}
-
-
- ${msg(str`Attempted to log in as ${this.event.context.username}`)}
-
- ${this.defaultResponse()}`;
- case EventActions.Logout:
- if (Object.keys(this.event.context).length === 0) {
- return html`${msg("No additional data available.")}`;
- }
- return this.defaultResponse();
- case EventActions.SystemTaskException:
- return html`
-
-
${msg("Exception")}
-
-
${this.event.context.message}
-
-
-
+ Stacktrace from authentik
+
+\`\`\`
+${context.message as string}
+\`\`\`
+
+
+
+**Version and Deployment (please complete the following information):**
+- authentik version: ${VERSION}
+- Deployment: [e.g. docker-compose, helm]
+
+**Additional context**
+Add any other context about the problem here.
+ `;
+
+@customElement("ak-event-info")
+export class EventInfo extends AKElement {
+ @property({ attribute: false })
+ event!: EventWithContext;
+
+ static get styles(): CSSResult[] {
+ return [
+ PFBase,
+ PFButton,
+ PFFlex,
+ PFCard,
+ PFList,
+ PFDescriptionList,
+ css`
+ code {
+ display: block;
+ white-space: pre-wrap;
+ word-break: break-all;
+ }
+ .pf-l-flex {
+ justify-content: space-between;
+ }
+ .pf-l-flex__item {
+ min-width: 25%;
+ }
+ iframe {
+ width: 100%;
+ height: 50rem;
+ }
+ `,
+ ];
+ }
+
+ renderDescriptionGroup([term, description]: Pair) {
+ return html`
+
+ ${term}
+
+
+ ${description}
+
+
+
+ ${map(modelFields, this.renderDescriptionGroup)}
+
+
+ ${map(emailFields, this.renderDescriptionGroup)}
+
`;
+ }
+
+ renderDefaultResponse(): TemplateResult {
+ return html`
+
+
${msg("Context")}
+
+ ${JSON.stringify(this.event?.context, null, 4)}
+
+
+
+
${msg("User")}
+
+ ${JSON.stringify(this.event?.user, null, 4)}
+
+
+
${msg("Affected model:")}
+
+ ${this.getModelInfo(this.event.context?.model as EventModel)}
+
+ `;
+ }
+
+ renderAuthorizeApplication() {
+ return html`
+
+
${msg("Authorized application:")}
+
+ ${this.getModelInfo(
+ this.event.context.authorized_application as EventModel,
+ )}
+
+
+
+
${msg("Using flow")}
+
+
${until(
+ new FlowsApi(DEFAULT_CONFIG)
+ .flowsInstancesList({
+ flowUuid: this.event.context.flow as string,
+ })
+ .then((resp) => {
+ return html`${resp.results[0].name}`;
+ }),
+ html``,
+ )}
+
+
+
+
${msg("Email info:")}
+ ${this.getEmailInfo(this.event.context)}
+
+
+ `;
+ }
+
+ renderSecretView() {
+ return html` ${msg("Secret:")}
+ ${this.getModelInfo(this.event.context.secret as EventModel)}`;
+ }
+
+ renderSystemException() {
+ return html`
+
+
${msg("Exception")}
+
+
+
${this.event.context.message}
+
+
+
+
+
${msg("Exception")}
+
+
${this.event.context.message || this.event.context.error}
+
+
+
+
${msg("Expression")}
+
+ ${this.event.context.expression}
+
+
+
+
+
${msg("Binding")}
+ ${this.getModelInfo(this.event.context.binding as EventModel)}
+
+
+
${msg("Request")}
+
+
+ -
+ ${msg("Object")}:
+ ${this.getModelInfo(
+ (this.event.context.request as EventContext).obj as EventModel,
+ )}
+
+ -
+ ${msg("Context")}:
+
${JSON.stringify(
+ (this.event.context.request as EventContext).context,
+ null,
+ 4,
+ )}
+
+
+
+
+
+
${msg("Exception")}
+
+ ${this.event.context.message || this.event.context.error}
+
+
+
+
+
${msg("Binding")}
+ ${this.getModelInfo(this.event.context.binding as EventModel)}
+
+
+
${msg("Request")}
+
+
+ -
+ ${msg("Object")}:
+ ${this.getModelInfo(
+ (this.event.context.request as EventContext).obj as EventModel,
+ )}
+
+ -
+ ${msg("Context")}:
+
${JSON.stringify(
+ (this.event.context.request as EventContext).context,
+ null,
+ 4,
+ )}
+
+
+
+
+
+
${msg("Result")}
+
+
+ -
+ ${msg("Passing")}:
+ ${(this.event.context.result as EventContext).passing}
+
+ -
+ ${msg("Messages")}:
+
+ ${(
+ (this.event.context.result as EventContext)
+ .messages as string[]
+ ).map((msg) => {
+ return html`- ${msg}
`;
+ })}
+
+
+
+
+
+
${this.event.context.message}
+ ${this.renderDefaultResponse()}`;
+ }
+
+ renderUpdateAvailable() {
+ return html`${msg("New version available")}
+
+ ${this.event.context.new_version}
+ `;
+ // Action types which typically don't record any extra context.
+ // If context is not empty, we fall to the default response.
+ }
+
+ renderLogin() {
+ if ("using_source" in this.event.context) {
+ return html`
+
+
${msg("Using source")}
+ ${this.getModelInfo(this.event.context.using_source as EventModel)}
+
+
+ ${msg(str`Attempted to log in as ${this.event.context.username}`)}
+
+ ${this.renderDefaultResponse()}`;
+ }
+
+ renderLogout() {
+ if (Object.keys(this.event.context).length === 0) {
+ return html`${msg("No additional data available.")}`;
+ }
+ return this.renderDefaultResponse();
+ }
+
+ renderSystemTaskException() {
+ return html`
+
+
${msg("Exception")}
+
+
${this.event.context.message}
+
+
+