diff --git a/web/src/pages/users/settings/BaseUserSettings.ts b/web/src/pages/users/settings/BaseUserSettings.ts
new file mode 100644
index 000000000..a4c6d5b5f
--- /dev/null
+++ b/web/src/pages/users/settings/BaseUserSettings.ts
@@ -0,0 +1,16 @@
+import { CSSResult, LitElement, property } from "lit-element";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFCard from "@patternfly/patternfly/components/Card/card.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import AKGlobal from "../../../authentik.css";
+
+export abstract class BaseUserSettings extends LitElement {
+
+ @property()
+ objectId!: string;
+
+ static get styles(): CSSResult[] {
+ return [PFBase, PFCard, PFButton, AKGlobal];
+ }
+}
+
diff --git a/web/src/pages/users/settings/Password.ts b/web/src/pages/users/settings/Password.ts
deleted file mode 100644
index ddc4f7517..000000000
--- a/web/src/pages/users/settings/Password.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
-import PFBase from "@patternfly/patternfly/patternfly-base.css";
-import PFCard from "@patternfly/patternfly/components/Card/card.css";
-import PFButton from "@patternfly/patternfly/components/Button/button.css";
-import AKGlobal from "../../../authentik.css";
-import { gettext } from "django";
-import { FlowURLManager } from "../../../api/legacy";
-
-@customElement("ak-user-settings-password")
-export class UserSettingsPassword extends LitElement {
-
- @property()
- stageId!: string;
-
- static get styles(): CSSResult[] {
- return [PFBase, PFCard, PFButton, AKGlobal];
- }
-
- render(): TemplateResult {
- // For this stage we don't need to check for a configureFlow,
- // as the stage won't return any UI Elements if no configureFlow is set.
- return html`
-
- ${gettext('Change your password')}
-
-
-
`;
- }
-
-}
diff --git a/web/src/pages/users/settings/UserSettingsAuthenticatorStatic.ts b/web/src/pages/users/settings/UserSettingsAuthenticatorStatic.ts
new file mode 100644
index 000000000..cc92d121b
--- /dev/null
+++ b/web/src/pages/users/settings/UserSettingsAuthenticatorStatic.ts
@@ -0,0 +1,69 @@
+import { AuthenticatorsApi, StagesApi } from "authentik-api";
+import { gettext } from "django";
+import { customElement, html, TemplateResult } from "lit-element";
+import { until } from "lit-html/directives/until";
+import { DEFAULT_CONFIG } from "../../../api/Config";
+import { FlowURLManager } from "../../../api/legacy";
+import { BaseUserSettings } from "./BaseUserSettings";
+
+@customElement("ak-user-settings-authenticator-static")
+export class UserSettingsAuthenticatorStatic extends BaseUserSettings {
+
+ renderEnabled(): TemplateResult {
+ return html`
+
+ ${gettext("Status: Enabled")}
+
+
+
+ `;
+ }
+
+ renderDisabled(): TemplateResult {
+ return html`
+
+
+ ${gettext("Status: Disabled")}
+
+
+
+ `;
+ }
+
+ render(): TemplateResult {
+ return html`
+
+ ${gettext("Time-based One-Time Passwords")}
+
+ ${until(new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsTotpList({}).then((devices) => {
+ return devices.results.length > 0 ? this.renderEnabled() : this.renderDisabled();
+ }))}
+
`;
+ }
+
+}
diff --git a/web/src/pages/users/settings/UserSettingsAuthenticatorTOTP.ts b/web/src/pages/users/settings/UserSettingsAuthenticatorTOTP.ts
new file mode 100644
index 000000000..07acc82b6
--- /dev/null
+++ b/web/src/pages/users/settings/UserSettingsAuthenticatorTOTP.ts
@@ -0,0 +1,84 @@
+import { AuthenticatorsApi, StagesApi } from "authentik-api";
+import { gettext } from "django";
+import { CSSResult, customElement, html, TemplateResult } from "lit-element";
+import { until } from "lit-html/directives/until";
+import { DEFAULT_CONFIG } from "../../../api/Config";
+import { FlowURLManager } from "../../../api/legacy";
+import { STATIC_TOKEN_STYLE } from "../../../flows/stages/authenticator_static/AuthenticatorStaticStage";
+import { BaseUserSettings } from "./BaseUserSettings";
+
+@customElement("ak-user-settings-authenticator-totp")
+export class UserSettingsAuthenticatorTOTP extends BaseUserSettings {
+
+ static get styles(): CSSResult[] {
+ return super.styles.concat(STATIC_TOKEN_STYLE);
+ }
+
+ renderEnabled(): TemplateResult {
+ return html`
+
+ ${gettext("Status: Enabled")}
+
+
+
+ ${until(new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsStaticList({}).then((devices) => {
+ if (devices.results.length < 1) {
+ return;
+ }
+ return devices.results[0].tokenSet?.map((token) => {
+ return html`- ${token.token}
`;
+ });
+ }))}
+
+
+ `;
+ }
+
+ renderDisabled(): TemplateResult {
+ return html`
+
+
+ ${gettext("Status: Disabled")}
+
+
+
+ `;
+ }
+
+ render(): TemplateResult {
+ return html`
+
+ ${gettext("Static Tokens")}
+
+ ${until(new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsTotpList({}).then((devices) => {
+ return devices.results.length > 0 ? this.renderEnabled() : this.renderDisabled();
+ }))}
+
`;
+ }
+
+}
diff --git a/web/src/pages/users/settings/AuthenticatorWebAuthnDevices.ts b/web/src/pages/users/settings/UserSettingsAuthenticatorWebAuthnDevices.ts
similarity index 80%
rename from web/src/pages/users/settings/AuthenticatorWebAuthnDevices.ts
rename to web/src/pages/users/settings/UserSettingsAuthenticatorWebAuthnDevices.ts
index a47704a6f..e4a306103 100644
--- a/web/src/pages/users/settings/AuthenticatorWebAuthnDevices.ts
+++ b/web/src/pages/users/settings/UserSettingsAuthenticatorWebAuthnDevices.ts
@@ -1,24 +1,16 @@
-import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
-import PFBase from "@patternfly/patternfly/patternfly-base.css";
-import PFCard from "@patternfly/patternfly/components/Card/card.css";
-import PFDataList from "@patternfly/patternfly/components/DataList/data-list.css";
-import PFButton from "@patternfly/patternfly/components/Button/button.css";
-import AKGlobal from "../../../authentik.css";
+import { customElement, html, TemplateResult } from "lit-element";
import { gettext } from "django";
import { AuthenticatorsApi, StagesApi } from "authentik-api";
import { until } from "lit-html/directives/until";
import { FlowURLManager, UserURLManager } from "../../../api/legacy";
import { DEFAULT_CONFIG } from "../../../api/Config";
+import { BaseUserSettings } from "./BaseUserSettings";
+import "../../../elements/buttons/ModalButton";
+import "../../../elements/buttons/SpinnerButton";
+import "../../../elements/forms/DeleteForm";
@customElement("ak-user-settings-authenticator-webauthn")
-export class UserSettingsAuthenticatorWebAuthnDevices extends LitElement {
-
- @property()
- stageId!: string;
-
- static get styles(): CSSResult[] {
- return [PFBase, PFCard, PFButton, PFDataList, AKGlobal];
- }
+export class UserSettingsAuthenticatorWebAuthnDevices extends BaseUserSettings {
render(): TemplateResult {
return html`
@@ -39,7 +31,7 @@ export class UserSettingsAuthenticatorWebAuthnDevices extends LitElement {
- ${gettext('Update')}
+ ${gettext("Update")}
@@ -64,9 +56,9 @@ export class UserSettingsAuthenticatorWebAuthnDevices extends LitElement {