@keycloakify/login-ui 250004.0.33

package/keycloak-theme/login/pages/login-password/Page.tsx

@@ -0,0 +1,103 @@
+import { useState } from "react";
+import { assert } from "tsafe/assert";
+import { kcSanitize } from "@keycloakify/login-ui/kcSanitize";
+import { clsx } from "@keycloakify/login-ui/tools/clsx";
+import { PasswordWrapper } from "../../components/PasswordWrapper";
+import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
+import { useKcContext } from "../../KcContext";
+import { useI18n } from "../../i18n";
+import { Template } from "../../components/Template";
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "login-password.ftl");
+
+    const { kcClsx } = useKcClsx();
+
+    const { msg, msgStr } = useI18n();
+
+    const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
+
+    return (
+        <Template
+            headerNode={msg("doLogIn")}
+            displayMessage={!kcContext.messagesPerField.existsError("password")}
+        >
+            <div id="kc-form">
+                <div id="kc-form-wrapper">
+                    <form
+                        id="kc-form-login"
+                        onSubmit={() => {
+                            setIsLoginButtonDisabled(true);
+                            return true;
+                        }}
+                        action={kcContext.url.loginAction}
+                        method="post"
+                    >
+                        <div className={clsx(kcClsx("kcFormGroupClass"), "no-bottom-margin")}>
+                            <hr />
+                            <label htmlFor="password" className={kcClsx("kcLabelClass")}>
+                                {msg("password")}
+                            </label>
+
+                            <PasswordWrapper passwordInputId="password">
+                                <input
+                                    tabIndex={2}
+                                    id="password"
+                                    className={kcClsx("kcInputClass")}
+                                    name="password"
+                                    type="password"
+                                    autoFocus
+                                    autoComplete="on"
+                                    aria-invalid={kcContext.messagesPerField.existsError(
+                                        "username",
+                                        "password"
+                                    )}
+                                />
+                            </PasswordWrapper>
+
+                            {kcContext.messagesPerField.existsError("password") && (
+                                <span
+                                    id="input-error-password"
+                                    className={kcClsx("kcInputErrorMessageClass")}
+                                    aria-live="polite"
+                                    dangerouslySetInnerHTML={{
+                                        __html: kcSanitize(kcContext.messagesPerField.get("password"))
+                                    }}
+                                />
+                            )}
+                        </div>
+                        <div className={kcClsx("kcFormGroupClass", "kcFormSettingClass")}>
+                            <div id="kc-form-options" />
+                            <div className={kcClsx("kcFormOptionsWrapperClass")}>
+                                {kcContext.realm.resetPasswordAllowed && (
+                                    <span>
+                                        <a tabIndex={5} href={kcContext.url.loginResetCredentialsUrl}>
+                                            {msg("doForgotPassword")}
+                                        </a>
+                                    </span>
+                                )}
+                            </div>
+                        </div>
+                        <div id="kc-form-buttons" className={kcClsx("kcFormGroupClass")}>
+                            <input
+                                tabIndex={4}
+                                className={kcClsx(
+                                    "kcButtonClass",
+                                    "kcButtonPrimaryClass",
+                                    "kcButtonBlockClass",
+                                    "kcButtonLargeClass"
+                                )}
+                                name="login"
+                                id="kc-login"
+                                type="submit"
+                                value={msgStr("doLogIn")}
+                                disabled={isLoginButtonDisabled}
+                            />
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/login-password/index.ts

@@ -0,0 +1,3 @@
+import { Page } from "./Page";
+
+export default Page;

package/keycloak-theme/login/pages/login-recovery-authn-code-config/Page.tsx

@@ -0,0 +1,167 @@
+import { assert } from "tsafe/assert";
+import { clsx } from "@keycloakify/login-ui/tools/clsx";
+import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
+import { useScript } from "./useScript";
+import { useKcContext } from "../../KcContext";
+import { useI18n } from "../../i18n";
+import { Template } from "../../components/Template";
+import { LogoutOtherSessions } from "../../components/LogoutOtherSessions";
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "login-recovery-authn-code-config.ftl");
+
+    const { kcClsx } = useKcClsx();
+
+    const { recoveryAuthnCodesConfigBean, isAppInitiatedAction } = kcContext;
+
+    const { msg, msgStr } = useI18n();
+
+    const olRecoveryCodesListId = "kc-recovery-codes-list";
+
+    useScript({ olRecoveryCodesListId });
+
+    return (
+        <Template headerNode={msg("recovery-code-config-header")}>
+            <div
+                className={clsx(
+                    "pf-c-alert",
+                    "pf-m-warning",
+                    "pf-m-inline",
+                    kcClsx("kcRecoveryCodesWarning")
+                )}
+                aria-label="Warning alert"
+            >
+                <div className="pf-c-alert__icon">
+                    <i className="pficon-warning-triangle-o" aria-hidden="true" />
+                </div>
+                <h4 className="pf-c-alert__title">
+                    <span className="pf-screen-reader">Warning alert:</span>
+                    {msg("recovery-code-config-warning-title")}
+                </h4>
+                <div className="pf-c-alert__description">
+                    <p>{msg("recovery-code-config-warning-message")}</p>
+                </div>
+            </div>
+
+            <ol id={olRecoveryCodesListId} className={kcClsx("kcRecoveryCodesList")}>
+                {recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesList.map((code, index) => (
+                    <li key={index}>
+                        <span>{index + 1}:</span> {code.slice(0, 4)}-{code.slice(4, 8)}-{code.slice(8)}
+                    </li>
+                ))}
+            </ol>
+
+            {/* actions */}
+            <div className={kcClsx("kcRecoveryCodesActions")}>
+                <button
+                    id="printRecoveryCodes"
+                    className={clsx("pf-c-button", "pf-m-link")}
+                    type="button"
+                >
+                    <i className="pficon-print" aria-hidden="true" /> {msg("recovery-codes-print")}
+                </button>
+                <button
+                    id="downloadRecoveryCodes"
+                    className={clsx("pf-c-button", "pf-m-link")}
+                    type="button"
+                >
+                    <i className="pficon-save" aria-hidden="true" /> {msg("recovery-codes-download")}
+                </button>
+                <button
+                    id="copyRecoveryCodes"
+                    className={clsx("pf-c-button", "pf-m-link")}
+                    type="button"
+                >
+                    <i className="pficon-blueprint" aria-hidden="true" /> {msg("recovery-codes-copy")}
+                </button>
+            </div>
+
+            {/* confirmation checkbox */}
+            <div className={kcClsx("kcFormOptionsClass")}>
+                <input
+                    className={kcClsx("kcCheckInputClass")}
+                    type="checkbox"
+                    id="kcRecoveryCodesConfirmationCheck"
+                    name="kcRecoveryCodesConfirmationCheck"
+                    onChange={event => {
+                        //@ts-expect-error: This is inherited from the original code
+                        document.getElementById("saveRecoveryAuthnCodesBtn").disabled =
+                            !event.target.checked;
+                    }}
+                />
+                <label htmlFor="kcRecoveryCodesConfirmationCheck">
+                    {msg("recovery-codes-confirmation-message")}
+                </label>
+            </div>
+
+            <form
+                action={kcContext.url.loginAction}
+                className={kcClsx("kcFormGroupClass")}
+                id="kc-recovery-codes-settings-form"
+                method="post"
+            >
+                <input
+                    type="hidden"
+                    name="generatedRecoveryAuthnCodes"
+                    value={recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesAsString}
+                />
+                <input
+                    type="hidden"
+                    name="generatedAt"
+                    value={recoveryAuthnCodesConfigBean.generatedAt}
+                />
+                <input
+                    type="hidden"
+                    id="userLabel"
+                    name="userLabel"
+                    value={msgStr("recovery-codes-label-default")}
+                />
+
+                <LogoutOtherSessions />
+
+                {isAppInitiatedAction ? (
+                    <>
+                        <input
+                            type="submit"
+                            className={kcClsx(
+                                "kcButtonClass",
+                                "kcButtonPrimaryClass",
+                                "kcButtonLargeClass"
+                            )}
+                            id="saveRecoveryAuthnCodesBtn"
+                            value={msgStr("recovery-codes-action-complete")}
+                            disabled
+                        />
+                        <button
+                            type="submit"
+                            className={kcClsx(
+                                "kcButtonClass",
+                                "kcButtonDefaultClass",
+                                "kcButtonLargeClass"
+                            )}
+                            id="cancelRecoveryAuthnCodesBtn"
+                            name="cancel-aia"
+                            value="true"
+                        >
+                            {msg("recovery-codes-action-cancel")}
+                        </button>
+                    </>
+                ) : (
+                    <input
+                        type="submit"
+                        className={kcClsx(
+                            "kcButtonClass",
+                            "kcButtonPrimaryClass",
+                            "kcButtonBlockClass",
+                            "kcButtonLargeClass"
+                        )}
+                        id="saveRecoveryAuthnCodesBtn"
+                        value={msgStr("recovery-codes-action-complete")}
+                        disabled
+                    />
+                )}
+            </form>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/login-recovery-authn-code-config/index.ts

@@ -0,0 +1,3 @@
+import { Page } from "./Page";
+
+export default Page;

package/keycloak-theme/login/pages/login-recovery-authn-code-config/useScript.tsx

@@ -0,0 +1,145 @@
+import { useEffect } from "react";
+import { useInsertScriptTags } from "@keycloakify/login-ui/tools/useInsertScriptTags";
+import { waitForElementMountedOnDom } from "@keycloakify/login-ui/tools/waitForElementMountedOnDom";
+import { useI18n } from "../../i18n";
+
+export function useScript(params: { olRecoveryCodesListId: string }) {
+    const { olRecoveryCodesListId } = params;
+
+    const { msgStr, isFetchingTranslations } = useI18n();
+
+    const { insertScriptTags } = useInsertScriptTags({
+        effectId: "LoginRecoveryAuthnCodeConfig",
+        scriptTags: [
+            {
+                type: "text/javascript",
+                textContent: () => `
+
+                    /* copy recovery codes  */
+                    function copyRecoveryCodes() {
+                        var tmpTextarea = document.createElement("textarea");
+                        var codes = document.querySelectorAll("#${olRecoveryCodesListId} li");
+                        for (i = 0; i < codes.length; i++) {
+                            tmpTextarea.value = tmpTextarea.value + codes[i].innerText + "\\n";
+                        }
+                        document.body.appendChild(tmpTextarea);
+                        tmpTextarea.select();
+                        document.execCommand("copy");
+                        document.body.removeChild(tmpTextarea);
+                    }
+
+                    var copyButton = document.getElementById("copyRecoveryCodes");
+                    copyButton && copyButton.addEventListener("click", function () {
+                        copyRecoveryCodes();
+                    });
+
+                    /* download recovery codes  */
+                    function formatCurrentDateTime() {
+                        var dt = new Date();
+                        var options = {
+                            month: 'long',
+                            day: 'numeric',
+                            year: 'numeric',
+                            hour: 'numeric',
+                            minute: 'numeric',
+                            timeZoneName: 'short'
+                        };
+
+                        return dt.toLocaleString('en-US', options);
+                    }
+
+                    function parseRecoveryCodeList() {
+                        var recoveryCodes = document.querySelectorAll("#${olRecoveryCodesListId} li");
+                        var recoveryCodeList = "";
+
+                        for (var i = 0; i < recoveryCodes.length; i++) {
+                            var recoveryCodeLiElement = recoveryCodes[i].innerText;
+                            recoveryCodeList += recoveryCodeLiElement + "\\r\\n";
+                        }
+
+                        return recoveryCodeList;
+                    }
+
+                    function buildDownloadContent() {
+                        var recoveryCodeList = parseRecoveryCodeList();
+                        var dt = new Date();
+                        var options = {
+                            month: 'long',
+                            day: 'numeric',
+                            year: 'numeric',
+                            hour: 'numeric',
+                            minute: 'numeric',
+                            timeZoneName: 'short'
+                        };
+
+                        return fileBodyContent =
+                            ${JSON.stringify(msgStr("recovery-codes-download-file-header"))} + "\\n\\n" +
+                            recoveryCodeList + "\\n" +
+                            ${JSON.stringify(msgStr("recovery-codes-download-file-description"))} + "\\n\\n" +
+                            ${JSON.stringify(msgStr("recovery-codes-download-file-date"))} + " " + formatCurrentDateTime();
+                    }
+
+                    function setUpDownloadLinkAndDownload(filename, text) {
+                        var el = document.createElement('a');
+                        el.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+                        el.setAttribute('download', filename);
+                        el.style.display = 'none';
+                        document.body.appendChild(el);
+                        el.click();
+                        document.body.removeChild(el);
+                    }
+
+                    function downloadRecoveryCodes() {
+                        setUpDownloadLinkAndDownload('kc-download-recovery-codes.txt', buildDownloadContent());
+                    }
+
+                    var downloadButton = document.getElementById("downloadRecoveryCodes");
+                    downloadButton && downloadButton.addEventListener("click", downloadRecoveryCodes);
+
+                    /* print recovery codes */
+                    function buildPrintContent() {
+                        var recoveryCodeListHTML = document.getElementById('${olRecoveryCodesListId}').innerHTML;
+                        var styles =
+                            \`@page { size: auto;  margin-top: 0; }
+                            body { width: 480px; }
+                            div { list-style-type: none; font-family: monospace }
+                            p:first-of-type { margin-top: 48px }\`;
+
+                        return printFileContent =
+                            "<html><style>" + styles + "</style><body>" +
+                            "<title>kc-download-recovery-codes</title>" +
+                            "<p>" + ${JSON.stringify(msgStr("recovery-codes-download-file-header"))} + "</p>" +
+                            "<div>" + recoveryCodeListHTML + "</div>" +
+                            "<p>" + ${JSON.stringify(msgStr("recovery-codes-download-file-description"))} + "</p>" +
+                            "<p>" + ${JSON.stringify(msgStr("recovery-codes-download-file-date"))} + " " + formatCurrentDateTime() + "</p>" +
+                            "</body></html>";
+                    }
+
+                    function printRecoveryCodes() {
+                        var w = window.open();
+                        w.document.write(buildPrintContent());
+                        w.print();
+                        w.close();
+                    }
+
+                    var printButton = document.getElementById("printRecoveryCodes");
+                    printButton && printButton.addEventListener("click", printRecoveryCodes);
+                `
+            }
+        ]
+    });
+
+    useEffect(() => {
+        if (isFetchingTranslations) {
+            return;
+        }
+
+        (async () => {
+            await waitForElementMountedOnDom({
+                elementId: olRecoveryCodesListId
+            });
+
+            insertScriptTags();
+        })();
+    }, [isFetchingTranslations]);
+}

package/keycloak-theme/login/pages/login-recovery-authn-code-input/Page.tsx

@@ -0,0 +1,84 @@
+import { assert } from "tsafe/assert";
+import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
+import { kcSanitize } from "@keycloakify/login-ui/kcSanitize";
+import { useKcContext } from "../../KcContext";
+import { useI18n } from "../../i18n";
+import { Template } from "../../components/Template";
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "login-recovery-authn-code-input.ftl");
+
+    const { kcClsx } = useKcClsx();
+
+    const { url, messagesPerField, recoveryAuthnCodesInputBean } = kcContext;
+
+    const { msg, msgStr } = useI18n();
+
+    return (
+        <Template
+            headerNode={msg("auth-recovery-code-header")}
+            displayMessage={!messagesPerField.existsError("recoveryCodeInput")}
+        >
+            <form
+                id="kc-recovery-code-login-form"
+                className={kcClsx("kcFormClass")}
+                action={url.loginAction}
+                method="post"
+            >
+                <div className={kcClsx("kcFormGroupClass")}>
+                    <div className={kcClsx("kcLabelWrapperClass")}>
+                        <label htmlFor="recoveryCodeInput" className={kcClsx("kcLabelClass")}>
+                            {msg(
+                                "auth-recovery-code-prompt",
+                                `${recoveryAuthnCodesInputBean.codeNumber}`
+                            )}
+                        </label>
+                    </div>
+                    <div className={kcClsx("kcInputWrapperClass")}>
+                        <input
+                            tabIndex={1}
+                            id="recoveryCodeInput"
+                            name="recoveryCodeInput"
+                            aria-invalid={messagesPerField.existsError("recoveryCodeInput")}
+                            autoComplete="off"
+                            type="text"
+                            className={kcClsx("kcInputClass")}
+                            autoFocus
+                        />
+                        {messagesPerField.existsError("recoveryCodeInput") && (
+                            <span
+                                id="input-error"
+                                className={kcClsx("kcInputErrorMessageClass")}
+                                aria-live="polite"
+                                dangerouslySetInnerHTML={{
+                                    __html: kcSanitize(messagesPerField.get("recoveryCodeInput"))
+                                }}
+                            />
+                        )}
+                    </div>
+                </div>
+
+                <div className={kcClsx("kcFormGroupClass")}>
+                    <div id="kc-form-options" className={kcClsx("kcFormOptionsWrapperClass")}>
+                        <div className={kcClsx("kcFormOptionsWrapperClass")} />
+                    </div>
+                    <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
+                        <input
+                            className={kcClsx(
+                                "kcButtonClass",
+                                "kcButtonPrimaryClass",
+                                "kcButtonBlockClass",
+                                "kcButtonLargeClass"
+                            )}
+                            name="login"
+                            id="kc-login"
+                            type="submit"
+                            value={msgStr("doLogIn")}
+                        />
+                    </div>
+                </div>
+            </form>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/login-recovery-authn-code-input/index.ts

@@ -0,0 +1,3 @@
+import { Page } from "./Page";
+
+export default Page;

package/keycloak-theme/login/pages/login-reset-otp/Page.tsx

@@ -0,0 +1,82 @@
+import { assert } from "tsafe/assert";
+import { Fragment } from "react";
+import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
+import { useKcContext } from "../../KcContext";
+import { useI18n } from "../../i18n";
+import { Template } from "../../components/Template";
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "login-reset-otp.ftl");
+
+    const { kcClsx } = useKcClsx();
+
+    const { url, messagesPerField, configuredOtpCredentials } = kcContext;
+
+    const { msg, msgStr } = useI18n();
+
+    return (
+        <Template displayMessage={!messagesPerField.existsError("totp")} headerNode={msg("doLogIn")}>
+            <form
+                id="kc-otp-reset-form"
+                className={kcClsx("kcFormClass")}
+                action={url.loginAction}
+                method="post"
+            >
+                <div className={kcClsx("kcInputWrapperClass")}>
+                    <div className={kcClsx("kcInfoAreaWrapperClass")}>
+                        <p id="kc-otp-reset-form-description">{msg("otp-reset-description")}</p>
+                        {configuredOtpCredentials.userOtpCredentials.map((otpCredential, index) => (
+                            <Fragment key={otpCredential.id}>
+                                <input
+                                    id={`kc-otp-credential-${index}`}
+                                    className={kcClsx("kcLoginOTPListInputClass")}
+                                    type="radio"
+                                    name="selectedCredentialId"
+                                    value={otpCredential.id}
+                                    defaultChecked={
+                                        otpCredential.id ===
+                                        configuredOtpCredentials.selectedCredentialId
+                                    }
+                                />
+                                <label
+                                    htmlFor={`kc-otp-credential-${index}`}
+                                    className={kcClsx("kcLoginOTPListClass")}
+                                    tabIndex={index}
+                                >
+                                    <span className={kcClsx("kcLoginOTPListItemHeaderClass")}>
+                                        <span className={kcClsx("kcLoginOTPListItemIconBodyClass")}>
+                                            <i
+                                                className={kcClsx("kcLoginOTPListItemIconClass")}
+                                                aria-hidden="true"
+                                            ></i>
+                                        </span>
+                                        <span className={kcClsx("kcLoginOTPListItemTitleClass")}>
+                                            {otpCredential.userLabel}
+                                        </span>
+                                    </span>
+                                </label>
+                            </Fragment>
+                        ))}
+                        <div className={kcClsx("kcFormGroupClass")}>
+                            <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
+                                <input
+                                    id="kc-otp-reset-form-submit"
+                                    className={kcClsx(
+                                        "kcButtonClass",
+                                        "kcButtonPrimaryClass",
+                                        "kcButtonBlockClass",
+                                        "kcButtonLargeClass"
+                                    )}
+                                    type="submit"
+                                    value={msgStr("doSubmit")}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </form>
+            <div className="clearfix" />
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/login-reset-otp/index.ts

@@ -0,0 +1,3 @@
+import { Page } from "./Page";
+
+export default Page;