keycloakify 7.0.0-rc.0 → 7.0.0-rc.12

package/src/pages/Login.tsx

@@ -1,202 +0,0 @@
-import { useState, type FormEventHandler } from "react";
-import { clsx } from "keycloakify/tools/clsx";
-import { useConstCallback } from "keycloakify/tools/useConstCallback";
-import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
-import { useGetClassName } from "keycloakify/lib/useGetClassName";
-import type { KcContext } from "../kcContext";
-import type { I18n } from "../i18n";
-
-export default function Login(props: PageProps<Extract<KcContext, { pageId: "login.ftl" }>, I18n>) {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
-
-    const { getClassName } = useGetClassName({
-        "defaultClasses": !doUseDefaultCss ? undefined : defaultClasses,
-        classes
-    });
-
-    const { social, realm, url, usernameEditDisabled, login, auth, registrationDisabled } = kcContext;
-
-    const { msg, msgStr } = i18n;
-
-    const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
-
-    const onSubmit = useConstCallback<FormEventHandler<HTMLFormElement>>(e => {
-        e.preventDefault();
-
-        setIsLoginButtonDisabled(true);
-
-        const formElement = e.target as HTMLFormElement;
-
-        //NOTE: Even if we login with email Keycloak expect username and password in
-        //the POST request.
-        formElement.querySelector("input[name='email']")?.setAttribute("name", "username");
-
-        formElement.submit();
-    });
-
-    return (
-        <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            displayInfo={social.displayInfo}
-            displayWide={realm.password && social.providers !== undefined}
-            headerNode={msg("doLogIn")}
-            formNode={
-                <div id="kc-form" className={clsx(realm.password && social.providers !== undefined && getClassName("kcContentWrapperClass"))}>
-                    <div
-                        id="kc-form-wrapper"
-                        className={clsx(
-                            realm.password &&
-                                social.providers && [getClassName("kcFormSocialAccountContentClass"), getClassName("kcFormSocialAccountClass")]
-                        )}
-                    >
-                        {realm.password && (
-                            <form id="kc-form-login" onSubmit={onSubmit} action={url.loginAction} method="post">
-                                <div className={getClassName("kcFormGroupClass")}>
-                                    {(() => {
-                                        const label = !realm.loginWithEmailAllowed
-                                            ? "username"
-                                            : realm.registrationEmailAsUsername
-                                            ? "email"
-                                            : "usernameOrEmail";
-
-                                        const autoCompleteHelper: typeof label = label === "usernameOrEmail" ? "username" : label;
-
-                                        return (
-                                            <>
-                                                <label htmlFor={autoCompleteHelper} className={getClassName("kcLabelClass")}>
-                                                    {msg(label)}
-                                                </label>
-                                                <input
-                                                    tabIndex={1}
-                                                    id={autoCompleteHelper}
-                                                    className={getClassName("kcInputClass")}
-                                                    //NOTE: This is used by Google Chrome auto fill so we use it to tell
-                                                    //the browser how to pre fill the form but before submit we put it back
-                                                    //to username because it is what keycloak expects.
-                                                    name={autoCompleteHelper}
-                                                    defaultValue={login.username ?? ""}
-                                                    type="text"
-                                                    {...(usernameEditDisabled
-                                                        ? { "disabled": true }
-                                                        : {
-                                                              "autoFocus": true,
-                                                              "autoComplete": "off"
-                                                          })}
-                                                />
-                                            </>
-                                        );
-                                    })()}
-                                </div>
-                                <div className={getClassName("kcFormGroupClass")}>
-                                    <label htmlFor="password" className={getClassName("kcLabelClass")}>
-                                        {msg("password")}
-                                    </label>
-                                    <input
-                                        tabIndex={2}
-                                        id="password"
-                                        className={getClassName("kcInputClass")}
-                                        name="password"
-                                        type="password"
-                                        autoComplete="off"
-                                    />
-                                </div>
-                                <div className={clsx(getClassName("kcFormGroupClass"), getClassName("kcFormSettingClass"))}>
-                                    <div id="kc-form-options">
-                                        {realm.rememberMe && !usernameEditDisabled && (
-                                            <div className="checkbox">
-                                                <label>
-                                                    <input
-                                                        tabIndex={3}
-                                                        id="rememberMe"
-                                                        name="rememberMe"
-                                                        type="checkbox"
-                                                        {...(login.rememberMe
-                                                            ? {
-                                                                  "checked": true
-                                                              }
-                                                            : {})}
-                                                    />
-                                                    {msg("rememberMe")}
-                                                </label>
-                                            </div>
-                                        )}
-                                    </div>
-                                    <div className={getClassName("kcFormOptionsWrapperClass")}>
-                                        {realm.resetPasswordAllowed && (
-                                            <span>
-                                                <a tabIndex={5} href={url.loginResetCredentialsUrl}>
-                                                    {msg("doForgotPassword")}
-                                                </a>
-                                            </span>
-                                        )}
-                                    </div>
-                                </div>
-                                <div id="kc-form-buttons" className={getClassName("kcFormGroupClass")}>
-                                    <input
-                                        type="hidden"
-                                        id="id-hidden-input"
-                                        name="credentialId"
-                                        {...(auth?.selectedCredential !== undefined
-                                            ? {
-                                                  "value": auth.selectedCredential
-                                              }
-                                            : {})}
-                                    />
-                                    <input
-                                        tabIndex={4}
-                                        className={clsx(
-                                            getClassName("kcButtonClass"),
-                                            getClassName("kcButtonPrimaryClass"),
-                                            getClassName("kcButtonBlockClass"),
-                                            getClassName("kcButtonLargeClass")
-                                        )}
-                                        name="login"
-                                        id="kc-login"
-                                        type="submit"
-                                        value={msgStr("doLogIn")}
-                                        disabled={isLoginButtonDisabled}
-                                    />
-                                </div>
-                            </form>
-                        )}
-                    </div>
-                    {realm.password && social.providers !== undefined && (
-                        <div
-                            id="kc-social-providers"
-                            className={clsx(getClassName("kcFormSocialAccountContentClass"), getClassName("kcFormSocialAccountClass"))}
-                        >
-                            <ul
-                                className={clsx(
-                                    getClassName("kcFormSocialAccountListClass"),
-                                    social.providers.length > 4 && getClassName("kcFormSocialAccountDoubleListClass")
-                                )}
-                            >
-                                {social.providers.map(p => (
-                                    <li key={p.providerId} className={getClassName("kcFormSocialAccountListLinkClass")}>
-                                        <a href={p.loginUrl} id={`zocial-${p.alias}`} className={clsx("zocial", p.providerId)}>
-                                            <span>{p.displayName}</span>
-                                        </a>
-                                    </li>
-                                ))}
-                            </ul>
-                        </div>
-                    )}
-                </div>
-            }
-            infoNode={
-                realm.password &&
-                realm.registrationAllowed &&
-                !registrationDisabled && (
-                    <div id="kc-registration">
-                        <span>
-                            {msg("noAccount")}
-                            <a tabIndex={6} href={url.registrationUrl}>
-                                {msg("doRegister")}
-                            </a>
-                        </span>
-                    </div>
-                )
-            }
-        />
-    );
-}

package/src/pages/LoginConfigTotp.tsx

@@ -1,195 +0,0 @@
-import { clsx } from "keycloakify/tools/clsx";
-import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
-import { useGetClassName } from "keycloakify/lib/useGetClassName";
-import type { KcContext } from "../kcContext";
-import type { I18n } from "../i18n";
-
-export default function LoginConfigTotp(props: PageProps<Extract<KcContext, { pageId: "login-config-totp.ftl" }>, I18n>) {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
-
-    const { getClassName } = useGetClassName({
-        "defaultClasses": !doUseDefaultCss ? undefined : defaultClasses,
-        classes
-    });
-
-    const { url, isAppInitiatedAction, totp, mode, messagesPerField } = kcContext;
-
-    const { msg, msgStr } = i18n;
-
-    const algToKeyUriAlg: Record<KcContext.LoginConfigTotp["totp"]["policy"]["algorithm"], string> = {
-        "HmacSHA1": "SHA1",
-        "HmacSHA256": "SHA256",
-        "HmacSHA512": "SHA512"
-    };
-
-    return (
-        <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            headerNode={msg("loginTotpTitle")}
-            formNode={
-                <>
-                    <ol id="kc-totp-settings">
-                        <li>
-                            <p>{msg("loginTotpStep1")}</p>
-
-                            <ul id="kc-totp-supported-apps">
-                                {totp.policy.supportedApplications.map(app => (
-                                    <li>{app}</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>
-                </>
-            }
-        />
-    );
-}

package/src/pages/LoginIdpLinkConfirm.tsx

@@ -1,59 +0,0 @@
-import { clsx } from "keycloakify/tools/clsx";
-import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
-import { useGetClassName } from "keycloakify/lib/useGetClassName";
-import type { KcContext } from "../kcContext";
-import type { I18n } from "../i18n";
-
-export default function LoginIdpLinkConfirm(props: PageProps<Extract<KcContext, { pageId: "login-idp-link-confirm.ftl" }>, I18n>) {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
-
-    const { getClassName } = useGetClassName({
-        "defaultClasses": !doUseDefaultCss ? undefined : defaultClasses,
-        classes
-    });
-
-    const { url, idpAlias } = kcContext;
-
-    const { msg } = i18n;
-
-    return (
-        <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            headerNode={msg("confirmLinkIdpTitle")}
-            formNode={
-                <form id="kc-register-form" action={url.loginAction} method="post">
-                    <div className={getClassName("kcFormGroupClass")}>
-                        <button
-                            type="submit"
-                            className={clsx(
-                                getClassName("kcButtonClass"),
-                                getClassName("kcButtonDefaultClass"),
-                                getClassName("kcButtonBlockClass"),
-                                getClassName("kcButtonLargeClass")
-                            )}
-                            name="submitAction"
-                            id="updateProfile"
-                            value="updateProfile"
-                        >
-                            {msg("confirmLinkIdpReviewProfile")}
-                        </button>
-                        <button
-                            type="submit"
-                            className={clsx(
-                                getClassName("kcButtonClass"),
-                                getClassName("kcButtonDefaultClass"),
-                                getClassName("kcButtonBlockClass"),
-                                getClassName("kcButtonLargeClass")
-                            )}
-                            name="submitAction"
-                            id="linkAccount"
-                            value="linkAccount"
-                        >
-                            {msg("confirmLinkIdpContinue", idpAlias)}
-                        </button>
-                    </div>
-                </form>
-            }
-        />
-    );
-}

package/src/pages/LoginIdpLinkEmail.tsx

@@ -1,31 +0,0 @@
-import type { KcContext } from "keycloakify/kcContext";
-import { type PageProps } from "keycloakify/pages/PageProps";
-import type { I18n } from "keycloakify/i18n";
-
-export default function LoginIdpLinkEmail(props: PageProps<Extract<KcContext, { pageId: "login-idp-link-email.ftl" }>, I18n>) {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
-
-    const { url, realm, brokerContext, idpAlias } = kcContext;
-
-    const { msg } = i18n;
-
-    return (
-        <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            headerNode={msg("emailLinkIdpTitle", idpAlias)}
-            formNode={
-                <>
-                    <p id="instruction1" className="instruction">
-                        {msg("emailLinkIdp1", idpAlias, brokerContext.username, realm.displayName)}
-                    </p>
-                    <p id="instruction2" className="instruction">
-                        {msg("emailLinkIdp2")} <a href={url.loginAction}>{msg("doClickHere")}</a> {msg("emailLinkIdp3")}
-                    </p>
-                    <p id="instruction3" className="instruction">
-                        {msg("emailLinkIdp4")} <a href={url.loginAction}>{msg("doClickHere")}</a> {msg("emailLinkIdp5")}
-                    </p>
-                </>
-            }
-        />
-    );
-}

package/src/pages/LoginOtp.tsx

@@ -1,120 +0,0 @@
-import { useEffect } from "react";
-import { headInsert } from "../tools/headInsert";
-import { pathJoin } from "../bin/tools/pathJoin";
-import { clsx } from "keycloakify/tools/clsx";
-import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
-import { useGetClassName } from "keycloakify/lib/useGetClassName";
-import type { KcContext } from "../kcContext";
-import type { I18n } from "../i18n";
-
-export default function LoginOtp(props: PageProps<Extract<KcContext, { pageId: "login-otp.ftl" }>, I18n>) {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
-
-    const { getClassName } = useGetClassName({
-        "defaultClasses": !doUseDefaultCss ? undefined : defaultClasses,
-        classes
-    });
-
-    const { otpLogin, url } = kcContext;
-
-    const { msg, msgStr } = i18n;
-
-    useEffect(() => {
-        let isCleanedUp = false;
-
-        headInsert({
-            "type": "javascript",
-            "src": pathJoin(kcContext.url.resourcesCommonPath, "node_modules/jquery/dist/jquery.min.js")
-        }).then(() => {
-            if (isCleanedUp) return;
-
-            evaluateInlineScript();
-        });
-
-        return () => {
-            isCleanedUp = true;
-        };
-    }, []);
-
-    return (
-        <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            headerNode={msg("doLogIn")}
-            formNode={
-                <form id="kc-otp-login-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
-                    {otpLogin.userOtpCredentials.length > 1 && (
-                        <div className={getClassName("kcFormGroupClass")}>
-                            <div className={getClassName("kcInputWrapperClass")}>
-                                {otpLogin.userOtpCredentials.map(otpCredential => (
-                                    <div key={otpCredential.id} className={getClassName("kcSelectOTPListClass")}>
-                                        <input type="hidden" value="${otpCredential.id}" />
-                                        <div className={getClassName("kcSelectOTPListItemClass")}>
-                                            <span className={getClassName("kcAuthenticatorOtpCircleClass")} />
-                                            <h2 className={getClassName("kcSelectOTPItemHeadingClass")}>{otpCredential.userLabel}</h2>
-                                        </div>
-                                    </div>
-                                ))}
-                            </div>
-                        </div>
-                    )}
-                    <div className={getClassName("kcFormGroupClass")}>
-                        <div className={getClassName("kcLabelWrapperClass")}>
-                            <label htmlFor="otp" className={getClassName("kcLabelClass")}>
-                                {msg("loginOtpOneTime")}
-                            </label>
-                        </div>
-
-                        <div className={getClassName("kcInputWrapperClass")}>
-                            <input id="otp" name="otp" autoComplete="off" type="text" className={getClassName("kcInputClass")} autoFocus />
-                        </div>
-                    </div>
-
-                    <div className={getClassName("kcFormGroupClass")}>
-                        <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
-                            <div className={getClassName("kcFormOptionsWrapperClass")} />
-                        </div>
-
-                        <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
-                            <input
-                                className={clsx(
-                                    getClassName("kcButtonClass"),
-                                    getClassName("kcButtonPrimaryClass"),
-                                    getClassName("kcButtonBlockClass"),
-                                    getClassName("kcButtonLargeClass")
-                                )}
-                                name="login"
-                                id="kc-login"
-                                type="submit"
-                                value={msgStr("doLogIn")}
-                            />
-                        </div>
-                    </div>
-                </form>
-            }
-        />
-    );
-}
-
-declare const $: any;
-
-function evaluateInlineScript() {
-    $(document).ready(function () {
-        // Card Single Select
-        $(".card-pf-view-single-select").click(function (this: any) {
-            if ($(this).hasClass("active")) {
-                $(this).removeClass("active");
-                $(this).children().removeAttr("name");
-            } else {
-                $(".card-pf-view-single-select").removeClass("active");
-                $(".card-pf-view-single-select").children().removeAttr("name");
-                $(this).addClass("active");
-                $(this).children().attr("name", "selectedCredentialId");
-            }
-        });
-
-        var defaultCred = $(".card-pf-view-single-select")[0];
-        if (defaultCred) {
-            defaultCred.click();
-        }
-    });
-}

package/src/pages/LoginPageExpired.tsx

@@ -1,35 +0,0 @@
-import { type PageProps } from "keycloakify/pages/PageProps";
-import type { KcContext } from "../kcContext";
-import type { I18n } from "../i18n";
-
-export default function LoginPageExpired(props: PageProps<Extract<KcContext, { pageId: "login-page-expired.ftl" }>, I18n>) {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
-
-    const { url } = kcContext;
-
-    const { msg } = i18n;
-
-    return (
-        <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            displayMessage={false}
-            headerNode={msg("pageExpiredTitle")}
-            formNode={
-                <>
-                    <p id="instruction1" className="instruction">
-                        {msg("pageExpiredMsg1")}
-                        <a id="loginRestartLink" href={url.loginRestartFlowUrl}>
-                            {msg("doClickHere")}
-                        </a>{" "}
-                        .<br />
-                        {msg("pageExpiredMsg2")}{" "}
-                        <a id="loginContinueLink" href={url.loginAction}>
-                            {msg("doClickHere")}
-                        </a>{" "}
-                        .
-                    </p>
-                </>
-            }
-        />
-    );
-}