feat: Addition of Totp account page

src/account/Fallback.tsx

@@ -7,6 +7,7 @@ import { assert, type Equals } from "tsafe/assert";
 const Password = lazy(() => import("keycloakify/account/pages/Password"));
 const Account = lazy(() => import("keycloakify/account/pages/Account"));
 const Sessions = lazy(() => import("keycloakify/account/pages/Sessions"));
+const Totp = lazy(() => import("keycloakify/account/pages/Totp"));
 
 export default function Fallback(props: PageProps<KcContext, I18n>) {
     const { kcContext, ...rest } = props;
@@ -21,6 +22,8 @@ export default function Fallback(props: PageProps<KcContext, I18n>) {
                         return <Sessions kcContext={kcContext} {...rest} />;
                     case "account.ftl":
                         return <Account kcContext={kcContext} {...rest} />;
+                    case "totp.ftl":
+                        return <Totp kcContext={kcContext} {...rest} />;
                 }
                 assert<Equals<typeof kcContext, never>>(false);
             })()}

src/account/kcContext/KcContext.ts

@@ -3,7 +3,7 @@ import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
 import { type ThemeType } from "keycloakify/bin/constants";
 
-export type KcContext = KcContext.Password | KcContext.Account | KcContext.Sessions;
+export type KcContext = KcContext.Password | KcContext.Account | KcContext.Sessions | KcContext.Totp;
 
 export declare namespace KcContext {
     export type Common = {
@@ -134,6 +134,49 @@ export declare namespace KcContext {
         };
         stateChecker: string;
     };
+
+    export type Totp = Common & {
+        pageId: "totp.ftl";
+        totp: {
+            totpSecretEncoded: string;
+            qrUrl: string;
+            policy: {
+                algorithm: "HmacSHA1" | "HmacSHA256" | "HmacSHA512";
+                digits: number;
+                lookAheadWindow: number;
+            } & (
+                | {
+                      type: "totp";
+                      period: number;
+                  }
+                | {
+                      type: "hotp";
+                      initialCounter: number;
+                  }
+            );
+            supportedApplications: string[];
+            totpSecretQrCode: string;
+            manualUrl: string;
+            totpSecret: string;
+            otpCredentials: { id: string; userLabel: string }[];
+        };
+        url: {
+            accountUrl: string;
+            passwordUrl: string;
+            totpUrl: string;
+            socialUrl: string;
+            sessionsUrl: string;
+            applicationsUrl: string;
+            logUrl: string;
+            resourceUrl: string;
+            resourcesCommonPath: string;
+            resourcesPath: string;
+            /** @deprecated, not present in recent keycloak version apparently, use kcContext.referrer instead */
+            referrerURI?: string;
+            getLogoutUrl: () => string;
+        };
+        stateChecker: string;
+    };
 }
 
 {

src/account/kcContext/kcContextMocks.ts

@@ -199,5 +199,27 @@ export const kcContextMocks: KcContext[] = [
             ]
         },
         "stateChecker": ""
+    }),
+    id<KcContext.Totp>({
+        ...kcContextCommonMock,
+        "pageId": "totp.ftl",
+        totp: {
+            totpSecretEncoded: "KVVF G2BY N4YX S6LB IUYT K2LH IFYE 4SBV",
+            qrUrl: "#",
+            totpSecretQrCode:
+                "iVBORw0KGgoAAAANSUhEUgAAAPYAAAD2AQAAAADNaUdlAAACM0lEQVR4Xu3OIZJgOQwDUDFd2UxiurLAVnnbHw4YGDKtSiWOn4Gxf81//7r/+q8b4HfLGBZDK9d85NmNR+sB42sXvOYrN5P1DcgYYFTGfOlbzE8gzwy3euweGizw7cfdl34/GRhlkxjKNV+5AebPXPORX1JuB9x8ZfbyyD2y1krWAKsbMq1HnqQDaLfa77p4+MqvzEGSqvSAD/2IHW2yHaigR9tX3m8dDIYGcNf3f+gDpVBZbZU77zyJ6Rlcy+qoTMG887KAPD9hsh6a1Sv3gJUHGHUAxSMzj7zqDDe7Phmt2eG+8UsMxjRGm816MAO+8VMl1R1jGHOrZB/5Zo/WXAPgxixm9Mo96vDGrM1eOto8c4Ax4wF437mifOXlpiPzCnN7Y9l95NnEMxgMY9AAGA8fucH14Y1aVb6N/cqrmyh0BVht7k1e+bU8LK0Cg5vmVq9c5vHIjOfqxDIfeTraNVTwewa4wVe+SW5N+uP1qACeudUZbqGOfA6VZV750Noq2Xx3kpveV44ZelSV1V7KFHzkWyVrrlUwG0Pl9pWnoy3vsQoME6vKI69i5osVgwWzHT7zjmJtMcNUSVn1oYMd7ZodbgowZl45VG0uVuLPUr1yc79uaQBag/mqR34xhlWyHm1prplHboCWdZ4TeZjsK8+dI+jbz1C5hl65mcpgB5dhcj8+dGO+0Ko68+lD37JDD83dpDLzzK+TrQyaVwGj6pUboGV+7+AyN8An/pf84/7rv/4/1l4OCc/1BYMAAAAASUVORK5CYII=",
+            manualUrl: "#",
+            totpSecret: "G4nsI8lQagRMUchH8jEG",
+            otpCredentials: [],
+            supportedApplications: ["FreeOTP", "Google Authenticator"],
+            policy: {
+                algorithm: "HmacSHA1",
+                digits: 6,
+                lookAheadWindow: 1,
+                type: "totp",
+                period: 30
+            }
+        },
+        "stateChecker": ""
     })
 ];

src/account/pages/Totp.tsx

@@ -0,0 +1,186 @@
+import { clsx } from "keycloakify/tools/clsx";
+import type { PageProps } from "keycloakify/account/pages/PageProps";
+import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+
+export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+    const { getClassName } = useGetClassName({
+        doUseDefaultCss,
+        classes
+    });
+
+    const { url, isAppInitiatedAction, totp, mode, messagesPerField } = kcContext;
+
+    const { msg, msgStr } = i18n;
+
+    const algToKeyUriAlg: Record<(typeof kcContext)["totp"]["policy"]["algorithm"], string> = {
+        "HmacSHA1": "SHA1",
+        "HmacSHA256": "SHA256",
+        "HmacSHA512": "SHA512"
+    };
+
+    return (
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="totp">
+            <>
+                <ol id="kc-totp-settings">
+                    <li>
+                        <p>{msg("loginTotpStep1")}</p>
+
+                        <ul id="kc-totp-supported-apps">
+                            {totp.supportedApplications.map(app => (
+                                <li>{msg(app as MessageKey)}</li>
+                            ))}
+                        </ul>
+                    </li>
+
+                    {mode && mode == "manual" ? (
+                        <>
+                            <li>
+                                <p>{msg("loginTotpManualStep2")}</p>
+                                <p>
+                                    <span id="kc-totp-secret-key">{totp.totpSecretEncoded}</span>
+                                </p>
+                                <p>
+                                    <a href={totp.qrUrl} id="mode-barcode">
+                                        {msg("loginTotpScanBarcode")}
+                                    </a>
+                                </p>
+                            </li>
+                            <li>
+                                <p>{msg("loginTotpManualStep3")}</p>
+                                <p>
+                                    <ul>
+                                        <li id="kc-totp-type">
+                                            {msg("loginTotpType")}: {msg(`loginTotp.${totp.policy.type}`)}
+                                        </li>
+                                        <li id="kc-totp-algorithm">
+                                            {msg("loginTotpAlgorithm")}: {algToKeyUriAlg?.[totp.policy.algorithm] ?? totp.policy.algorithm}
+                                        </li>
+                                        <li id="kc-totp-digits">
+                                            {msg("loginTotpDigits")}: {totp.policy.digits}
+                                        </li>
+                                        {totp.policy.type === "totp" ? (
+                                            <li id="kc-totp-period">
+                                                {msg("loginTotpInterval")}: {totp.policy.period}
+                                            </li>
+                                        ) : (
+                                            <li id="kc-totp-counter">
+                                                {msg("loginTotpCounter")}: {totp.policy.initialCounter}
+                                            </li>
+                                        )}
+                                    </ul>
+                                </p>
+                            </li>
+                        </>
+                    ) : (
+                        <li>
+                            <p>{msg("loginTotpStep2")}</p>
+                            <img id="kc-totp-secret-qr-code" src={`data:image/png;base64, ${totp.totpSecretQrCode}`} alt="Figure: Barcode" />
+                            <br />
+                            <p>
+                                <a href={totp.manualUrl} id="mode-manual">
+                                    {msg("loginTotpUnableToScan")}
+                                </a>
+                            </p>
+                        </li>
+                    )}
+                    <li>
+                        <p>{msg("loginTotpStep3")}</p>
+                        <p>{msg("loginTotpStep3DeviceName")}</p>
+                    </li>
+                </ol>
+
+                <form action={url.loginAction} className={getClassName("kcFormClass")} id="kc-totp-settings-form" method="post">
+                    <div className={getClassName("kcFormGroupClass")}>
+                        <div className={getClassName("kcInputWrapperClass")}>
+                            <label htmlFor="totp" className={getClassName("kcLabelClass")}>
+                                {msg("authenticatorCode")}
+                            </label>{" "}
+                            <span className="required">*</span>
+                        </div>
+                        <div className={getClassName("kcInputWrapperClass")}>
+                            <input
+                                type="text"
+                                id="totp"
+                                name="totp"
+                                autoComplete="off"
+                                className={getClassName("kcInputClass")}
+                                aria-invalid={messagesPerField.existsError("totp")}
+                            />
+
+                            {messagesPerField.existsError("totp") && (
+                                <span id="input-error-otp-code" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
+                                    {messagesPerField.get("totp")}
+                                </span>
+                            )}
+                        </div>
+                        <input type="hidden" id="totpSecret" name="totpSecret" value={totp.totpSecret} />
+                        {mode && <input type="hidden" id="mode" value={mode} />}
+                    </div>
+
+                    <div className={getClassName("kcFormGroupClass")}>
+                        <div className={getClassName("kcInputWrapperClass")}>
+                            <label htmlFor="userLabel" className={getClassName("kcLabelClass")}>
+                                {msg("loginTotpDeviceName")}
+                            </label>{" "}
+                            {totp.otpCredentials.length >= 1 && <span className="required">*</span>}
+                        </div>
+                        <div className={getClassName("kcInputWrapperClass")}>
+                            <input
+                                type="text"
+                                id="userLabel"
+                                name="userLabel"
+                                autoComplete="off"
+                                className={getClassName("kcInputClass")}
+                                aria-invalid={messagesPerField.existsError("userLabel")}
+                            />
+                            {messagesPerField.existsError("userLabel") && (
+                                <span id="input-error-otp-label" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
+                                    {messagesPerField.get("userLabel")}
+                                </span>
+                            )}
+                        </div>
+                    </div>
+
+                    {isAppInitiatedAction ? (
+                        <>
+                            <input
+                                type="submit"
+                                className={clsx(
+                                    getClassName("kcButtonClass"),
+                                    getClassName("kcButtonPrimaryClass"),
+                                    getClassName("kcButtonLargeClass")
+                                )}
+                                id="saveTOTPBtn"
+                                value={msgStr("doSubmit")}
+                            />
+                            <button
+                                type="submit"
+                                className={clsx(
+                                    getClassName("kcButtonClass"),
+                                    getClassName("kcButtonDefaultClass"),
+                                    getClassName("kcButtonLargeClass"),
+                                    getClassName("kcButtonLargeClass")
+                                )}
+                                id="cancelTOTPBtn"
+                                name="cancel-aia"
+                                value="true"
+                            >
+                                {msg("doCancel")}
+                            </button>
+                        </>
+                    ) : (
+                        <input
+                            type="submit"
+                            className={clsx(getClassName("kcButtonClass"), getClassName("kcButtonPrimaryClass"), getClassName("kcButtonLargeClass"))}
+                            id="saveTOTPBtn"
+                            value={msgStr("doSubmit")}
+                        />
+                    )}
+                </form>
+            </>
+        </Template>
+    );
+}

src/bin/keycloakify/generateFtl/pageId.ts

@@ -27,7 +27,7 @@ export const loginThemePageIds = [
     "saml-post-form.ftl"
 ] as const;
 
-export const accountThemePageIds = ["password.ftl", "account.ftl", "sessions.ftl"] as const;
+export const accountThemePageIds = ["password.ftl", "account.ftl", "sessions.ftl", "totp.ftl"] as const;
 
 export type LoginThemePageId = (typeof loginThemePageIds)[number];
 export type AccountThemePageId = (typeof accountThemePageIds)[number];

stories/account/pages/Sessions.stories.tsx

@@ -23,10 +23,4 @@ export default meta;
 
 export const Default = () => <PageStory />;
 
-export const WithMessage = () => (
+export const WithMessage = () => <PageStory kcContext={{}} />;
-    <PageStory
-        kcContext={{
-            message: { type: "success", summary: "This is a test message" }
-        }}
-    />
-);

stories/account/pages/Totp.stories.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import type { ComponentMeta } from "@storybook/react";
+import { createPageStory } from "../createPageStory";
+
+const pageId = "totp.ftl";
+
+const { PageStory } = createPageStory({ pageId });
+
+const meta: ComponentMeta<any> = {
+    title: `account/${pageId}`,
+    component: PageStory,
+    parameters: {
+        viewMode: "story",
+        previewTabs: {
+            "storybook/docs/panel": {
+                hidden: true
+            }
+        }
+    }
+};
+
+export default meta;
+
+export const Default = () => (
+    <PageStory
+        kcContext={{
+            totp: {
+                totpSecretEncoded: "HB2W ESCK KJKF K5DC GJQX S5RQ I5AX CZ2U",
+                totpSecret: "8ubHJRTUtb2ayv0GAqgT",
+                manualUrl: "http://localhost:8080/realms/master/account/totp?mode=manual",
+                supportedApplications: ["totpAppFreeOTPName", "totpAppMicrosoftAuthenticatorName", "totpAppGoogleName"],
+                totpSecretQrCode:
+                    "iVBORw0KGgoAAAANSUhEUgAAAPYAAAD2AQAAAADNaUdlAAACoUlEQVR4Xu2YPW7DMAxGGWTImCP4JvbFAtiAL+bcxEfI6MEI+z3Kzl+BLh2oIRwEV08FJIr8SMX8T1vtc+bdvvxz5t2+/HPm3eA3Mzvc+jm+fDoPzXIQkPV18N79ejvOWnRpTlcf/XTVV4Aq+MU0uzZaZI12rZVml4YzVcQHDTrEYufBKuQaZEfX1TvDWhEv98+ty79dGX7HRx438ofQfB04Th08jNS+us+n+1l/XbfZKrgcumj/trRnpfak0Dw54Xp/nC+Xy5bOB7x6dDxt1sq5j/tP52vkd5Ee+Xc1JfnKmergxKdcOyOSCgLik5xXEtXBtXVVvTFcC+pdV6+YqIVT+rpNf4hKjqMgXdo9frO5ldAM1dFJfA7+1O9srqiM4W6otuYQIZ0pvivg8mWUvo6q14VImuTocf/JXFq4cP8lPifld/jXidQqOL0CX0V66L9a6Y9Pu34nc7XW8qoQQ9GfcghVwiq4kStqDdl1hGZpZ3f/ZnN9qyCHkTrWq4nl/l/8n8tVmieL1lpFhiDw0uQ84jeXl4ahp+tay/1r6/ai3/kchxKQI6njyCX64zg8n2s4RZEhIDkJ5ZD9b/mTzZnVq2mmMFP/RjJpwNObf7M5qa0Lj9K837/kvKuEu1ov6p9EiEXkd8ei+57f+VwJPSCSfSnNWkR8PvefytFvK/1riPiIEkXM1sGl39qrWlcEm9K3OXnXn2wO4qcFhWZ02uFk2dO/uTwMJx9ostn6Q4mq4LzvDmoSqXqzE5+8BHiOVsJ7arH661ZFuixCGp/+z+ZsWF+ROuR3I9faS39YBS82F9d2rpWkUzWchqFFdWitS5C+9F+5vC/3T/9Fkl8Y+H3BN/9mc/KHRwrxGa9iePnHGvhf9uWfM+/25Z8z7/Zv/gPV7u6J7fyCcQAAAABJRU5ErkJggg==",
+                qrUrl: "http://localhost:8080/realms/master/account/totp?mode=qr",
+                otpCredentials: []
+            },
+            url: {
+                resourcesPath: "/resources/ueycc/account/keycloakify-starter",
+                resourceUrl: "http://localhost:8080/realms/master/account/resource",
+                resourcesCommonPath: "/resources/ueycc/account/keycloakify-starter/resources-common",
+                logUrl: "http://localhost:8080/realms/master/account/log",
+                socialUrl: "http://localhost:8080/realms/master/account/identity",
+                accountUrl: "http://localhost:8080/realms/master/account/",
+                sessionsUrl: "http://localhost:8080/realms/master/account/sessions",
+                totpUrl: "http://localhost:8080/realms/master/account/totp",
+                applicationsUrl: "http://localhost:8080/realms/master/account/applications",
+                passwordUrl: "http://localhost:8080/realms/master/account/password"
+            }
+        }}
+    />
+);