keycloakify 7.0.0-rc.0 → 7.0.0-rc.10

package/src/login/pages/Info.tsx

@@ -0,0 +1,47 @@
+import { assert } from "keycloakify/tools/assert";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+
+export default function Info(props: PageProps<Extract<KcContext, { pageId: "info.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { msgStr, msg } = i18n;
+
+    assert(kcContext.message !== undefined);
+
+    const { messageHeader, message, requiredActions, skipLink, pageRedirectUri, actionUri, client } = kcContext;
+
+    return (
+        <Template
+            {...{ kcContext, i18n, doUseDefaultCss, classes }}
+            displayMessage={false}
+            headerNode={messageHeader !== undefined ? <>{messageHeader}</> : <>{message.summary}</>}
+        >
+            <div id="kc-info-message">
+                <p className="instruction">
+                    {message.summary}
+
+                    {requiredActions !== undefined && (
+                        <b>{requiredActions.map(requiredAction => msgStr(`requiredAction.${requiredAction}` as const)).join(",")}</b>
+                    )}
+                </p>
+                {!skipLink && pageRedirectUri !== undefined ? (
+                    <p>
+                        <a href={pageRedirectUri}>{msg("backToApplication")}</a>
+                    </p>
+                ) : actionUri !== undefined ? (
+                    <p>
+                        <a href={actionUri}>{msg("proceedWithAction")}</a>
+                    </p>
+                ) : (
+                    client.baseUrl !== undefined && (
+                        <p>
+                            <a href={client.baseUrl}>{msg("backToApplication")}</a>
+                        </p>
+                    )
+                )}
+            </div>
+        </Template>
+    );
+}

package/src/login/pages/Login.tsx

@@ -0,0 +1,201 @@
+import { useState, type FormEventHandler } from "react";
+import { clsx } from "keycloakify/tools/clsx";
+import { useConstCallback } from "keycloakify/tools/useConstCallback";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import { useGetClassName } from "keycloakify/login/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({
+        doUseDefaultCss,
+        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")}
+            infoNode={
+                realm.password &&
+                realm.registrationAllowed &&
+                !registrationDisabled && (
+                    <div id="kc-registration">
+                        <span>
+                            {msg("noAccount")}
+                            <a tabIndex={6} href={url.registrationUrl}>
+                                {msg("doRegister")}
+                            </a>
+                        </span>
+                    </div>
+                )
+            }
+        >
+            <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>
+        </Template>
+    );
+}

package/src/login/pages/LoginConfigTotp.tsx

@@ -0,0 +1,187 @@
+import { clsx } from "keycloakify/tools/clsx";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import { useGetClassName } from "keycloakify/login/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({
+        doUseDefaultCss,
+        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")}>
+            <>
+                <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>
+            </>
+        </Template>
+    );
+}

package/src/login/pages/LoginIdpLinkConfirm.tsx

@@ -0,0 +1,55 @@
+import { clsx } from "keycloakify/tools/clsx";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import { useGetClassName } from "keycloakify/login/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({
+        doUseDefaultCss,
+        classes
+    });
+
+    const { url, idpAlias } = kcContext;
+
+    const { msg } = i18n;
+
+    return (
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("confirmLinkIdpTitle")}>
+            <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>
+        </Template>
+    );
+}

package/src/login/pages/LoginIdpLinkEmail.tsx

@@ -0,0 +1,25 @@
+import type { KcContext } from "keycloakify/login/kcContext";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import type { I18n } from "keycloakify/login/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)}>
+            <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>
+        </Template>
+    );
+}

package/src/login/pages/LoginOtp.tsx

@@ -0,0 +1,116 @@
+import { useEffect } from "react";
+import { headInsert } from "keycloakify/tools/headInsert";
+import { pathJoin } from "keycloakify/bin/tools/pathJoin";
+import { clsx } from "keycloakify/tools/clsx";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import { useGetClassName } from "keycloakify/login/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({
+        doUseDefaultCss,
+        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")}>
+            <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>
+        </Template>
+    );
+}
+
+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/login/pages/LoginPageExpired.tsx

@@ -0,0 +1,28 @@
+import type { PageProps } from "keycloakify/login/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")}>
+            <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>
+        </Template>
+    );
+}