stages/authenticator_*: migrate remaining stages to webcomponents

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/flows/stages/authenticator_static/AuthenticatorStaticStage.ts

@@ -13,6 +13,21 @@ import "../../../elements/forms/FormElement";
 import "../../../elements/EmptyState";
 import "../../FormStatic";
 
+export const STATIC_TOKEN_STYLE = css`
+/* Static OTP Tokens */
+.ak-otp-tokens {
+    list-style: circle;
+    columns: 2;
+    -webkit-columns: 2;
+    -moz-columns: 2;
+    margin-left: var(--pf-global--spacer--xs);
+}
+.ak-otp-tokens li {
+    font-size: var(--pf-global--FontSize--2xl);
+    font-family: monospace;
+}
+`;
+
 export interface AuthenticatorStaticChallenge extends WithUserInfoChallenge {
     codes: number[];
 }
@@ -24,20 +39,7 @@ export class AuthenticatorStaticStage extends BaseStage {
     challenge?: AuthenticatorStaticChallenge;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal].concat(css`
-            /* Static OTP Tokens */
-            .ak-otp-tokens {
-                list-style: circle;
-                columns: 2;
-                -webkit-columns: 2;
-                -moz-columns: 2;
-                margin-left: var(--pf-global--spacer--xs);
-            }
-            .ak-otp-tokens li {
-                font-size: var(--pf-global--FontSize--2xl);
-                font-family: monospace;
-            }
-        `);
+        return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal, STATIC_TOKEN_STYLE];
     }
 
     render(): TemplateResult {

web/src/pages/users/UserSettingsPage.ts

@@ -20,8 +20,10 @@ import { ifDefined } from "lit-html/directives/if-defined";
 import "../../elements/Tabs";
 import "../tokens/UserTokenList";
 import "../generic/SiteShell";
-import "./settings/AuthenticatorWebAuthnDevices";
-import "./settings/Password";
+import "./settings/UserSettingsAuthenticatorTOTP";
+import "./settings/UserSettingsAuthenticatorStatic";
+import "./settings/UserSettingsAuthenticatorWebAuthnDevices";
+import "./settings/UserSettingsPassword";
 
 @customElement("ak-user-settings")
 export class UserSettingsPage extends LitElement {
@@ -38,6 +40,12 @@ export class UserSettingsPage extends LitElement {
             case "ak-user-settings-password":
                 return html`<ak-user-settings-password stageId=${stage.objectUid}>
                 </ak-user-settings-password>`;
+            case "ak-user-settings-authenticator-totp":
+                return html`<ak-user-settings-authenticator-totp stageId=${stage.objectUid}>
+                </ak-user-settings-authenticator-totp>`;
+            case "ak-user-settings-authenticator-static":
+                return html`<ak-user-settings-authenticator-static stageId=${stage.objectUid}>
+                </ak-user-settings-authenticator-static>`;
             default:
                 return html`<div class="pf-u-display-flex pf-u-justify-content-center">
                     <div class="pf-u-w-75">

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];
+    }
+}
+

web/src/pages/users/settings/Password.ts

@@ -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`<div class="pf-c-card">
-            <div class="pf-c-card__title">
-                ${gettext('Change your password')}
-            </div>
-            <div class="pf-c-card__body">
-                <a href="${FlowURLManager.configure(this.stageId, '?next=/%23user')}"
-                    class="pf-c-button pf-m-primary">
-                    ${gettext('Change password')}
-                </a>
-            </div>
-        </div>`;
-    }
-
-}

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`<div class="pf-c-card__body">
+                <p>
+                    ${gettext("Status: Enabled")}
+                    <i class="pf-icon pf-icon-ok"></i>
+                </p>
+            </div>
+            <div class="pf-c-card__footer">
+                <button
+                    class="pf-c-button pf-m-danger"
+                    @click=${() => {
+                        return new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsTotpList({}).then((devices) => {
+                            if (devices.results.length < 1) {
+                                return;
+                            }
+                            // TODO: Handle multiple devices, currently we assume only one TOTP Device
+                            return new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsTotpDelete({
+                                id: devices.results[0].pk || 0
+                            });
+                        });
+                    }}>
+                    ${gettext("Disable Time-based OTP")}
+                </button>
+            </div>`;
+    }
+
+    renderDisabled(): TemplateResult {
+        return html`
+            <div class="pf-c-card__body">
+                <p>
+                    ${gettext("Status: Disabled")}
+                    <i class="pf-icon pf-icon-error-circle-o"></i>
+                </p>
+            </div>
+            <div class="pf-c-card__footer">
+                ${until(new StagesApi(DEFAULT_CONFIG).stagesAuthenticatorTotpRead({ stageUuid: this.objectId}).then((stage) => {
+                    if (stage.configureFlow) {
+                        return html`<a href="${FlowURLManager.configure(stage.pk || "", "?next=/%23%2Fuser")}"
+                                class="pf-c-button pf-m-primary">${gettext("Enable Time-based OTP")}
+                            </a>`;
+                    }
+                    return html``;
+                }))}
+            </div>`;
+    }
+
+    render(): TemplateResult {
+        return html`<div class="pf-c-card">
+            <div class="pf-c-card__title">
+                ${gettext("Time-based One-Time Passwords")}
+            </div>
+            ${until(new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsTotpList({}).then((devices) => {
+                return devices.results.length > 0 ? this.renderEnabled() : this.renderDisabled();
+            }))}
+        </div>`;
+    }
+
+}

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`<div class="pf-c-card__body">
+                <p>
+                    ${gettext("Status: Enabled")}
+                    <i class="pf-icon pf-icon-ok"></i>
+                </p>
+                <ul class="ak-otp-tokens">
+                    ${until(new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsStaticList({}).then((devices) => {
+                        if (devices.results.length < 1) {
+                            return;
+                        }
+                        return devices.results[0].tokenSet?.map((token) => {
+                            return html`<li>${token.token}</li>`;
+                        });
+                    }))}
+                </ul>
+            </div>
+            <div class="pf-c-card__footer">
+                <button
+                    class="pf-c-button pf-m-danger"
+                    @click=${() => {
+                        return new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsStaticList({}).then((devices) => {
+                            if (devices.results.length < 1) {
+                                return;
+                            }
+                            // TODO: Handle multiple devices, currently we assume only one TOTP Device
+                            return new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsStaticDelete({
+                                id: devices.results[0].pk || 0
+                            });
+                        });
+                    }}>
+                    ${gettext("Disable Static Tokens")}
+                </button>
+            </div>`;
+    }
+
+    renderDisabled(): TemplateResult {
+        return html`
+            <div class="pf-c-card__body">
+                <p>
+                    ${gettext("Status: Disabled")}
+                    <i class="pf-icon pf-icon-error-circle-o"></i>
+                </p>
+            </div>
+            <div class="pf-c-card__footer">
+                ${until(new StagesApi(DEFAULT_CONFIG).stagesAuthenticatorStaticRead({ stageUuid: this.objectId}).then((stage) => {
+                    if (stage.configureFlow) {
+                        return html`<a href="${FlowURLManager.configure(stage.pk || "", "?next=/%23%2Fuser")}"
+                                class="pf-c-button pf-m-primary">${gettext("Enable Static Tokens")}
+                            </a>`;
+                    }
+                    return html``;
+                }))}
+            </div>`;
+    }
+
+    render(): TemplateResult {
+        return html`<div class="pf-c-card">
+            <div class="pf-c-card__title">
+                ${gettext("Static Tokens")}
+            </div>
+            ${until(new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsTotpList({}).then((devices) => {
+                return devices.results.length > 0 ? this.renderEnabled() : this.renderDisabled();
+            }))}
+        </div>`;
+    }
+
+}

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`<div class="pf-c-card">
@@ -39,7 +31,7 @@ export class UserSettingsAuthenticatorWebAuthnDevices extends LitElement {
                                         <div class="pf-c-data-list__cell">
                                             <ak-modal-button href="${UserURLManager.authenticatorWebauthn(`devices/${device.pk}/update/`)}">
                                                 <ak-spinner-button slot="trigger" class="pf-m-primary">
-                                                    ${gettext('Update')}
+                                                    ${gettext("Update")}
                                                 </ak-spinner-button>
                                                 <div slot="modal"></div>
                                             </ak-modal-button>
@@ -64,9 +56,9 @@ export class UserSettingsAuthenticatorWebAuthnDevices extends LitElement {
                 </ul>
             </div>
             <div class="pf-c-card__footer">
-                ${until(new StagesApi(DEFAULT_CONFIG).stagesAuthenticatorWebauthnRead({stageUuid: this.stageId}).then((stage) => {
+                ${until(new StagesApi(DEFAULT_CONFIG).stagesAuthenticatorWebauthnRead({ stageUuid: this.objectId}).then((stage) => {
                     if (stage.configureFlow) {
-                        return html`<a href="${FlowURLManager.configure(stage.pk || "", '?next=/%23user')}"
+                        return html`<a href="${FlowURLManager.configure(stage.pk || "", "?next=/%23%2Fuser")}"
                                 class="pf-c-button pf-m-primary">${gettext("Configure WebAuthn")}
                             </a>`;
                     }

web/src/pages/users/settings/UserSettingsPassword.ts

@@ -0,0 +1,25 @@
+import { customElement, html, TemplateResult } from "lit-element";
+import { gettext } from "django";
+import { FlowURLManager } from "../../../api/legacy";
+import { BaseUserSettings } from "./BaseUserSettings";
+
+@customElement("ak-user-settings-password")
+export class UserSettingsPassword extends BaseUserSettings {
+
+    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`<div class="pf-c-card">
+            <div class="pf-c-card__title">
+                ${gettext("Change your password")}
+            </div>
+            <div class="pf-c-card__body">
+                <a href="${FlowURLManager.configure(this.objectId, "?next=/%23%2Fuser")}"
+                    class="pf-c-button pf-m-primary">
+                    ${gettext("Change password")}
+                </a>
+            </div>
+        </div>`;
+    }
+
+}