added login-page-expired.ftl

src/lib/components/KcApp.tsx

@@ -13,6 +13,7 @@ import { LoginOtp } from "./LoginOtp";
 import { LoginUpdatePassword } from "./LoginUpdatePassword";
 import { LoginUpdateProfile } from "./LoginUpdateProfile";
 import { LoginIdpLinkConfirm } from "./LoginIdpLinkConfirm";
+import { LoginPageExpired } from "./LoginPageExpired";
 
 export const KcApp = memo(({ kcContext, ...props }: { kcContext: KcContextBase } & KcProps) => {
     switch (kcContext.pageId) {
@@ -40,5 +41,7 @@ export const KcApp = memo(({ kcContext, ...props }: { kcContext: KcContextBase }
             return <LoginUpdateProfile {...{ kcContext, ...props }} />;
         case "login-idp-link-confirm.ftl":
             return <LoginIdpLinkConfirm {...{ kcContext, ...props }} />;
+        case "login-page-expired.ftl":
+            return <LoginPageExpired {...{ kcContext, ...props }} />;
     }
 });

src/lib/components/LoginPageExpired.tsx

@@ -0,0 +1,36 @@
+import { memo } from "react";
+import { Template } from "./Template";
+import type { KcProps } from "./KcProps";
+import type { KcContextBase } from "../getKcContext/KcContextBase";
+import { useKcMessage } from "../i18n/useKcMessage";
+
+export const LoginPageExpired = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginPageExpired } & KcProps) => {
+    const { url } = kcContext;
+
+    const { msg } = useKcMessage();
+
+    return (
+        <Template
+            {...{ kcContext, ...props }}
+            doFetchDefaultThemeResources={true}
+            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>
+                </>
+            }
+        />
+    );
+});

src/lib/getKcContext/KcContextBase.ts

@@ -23,7 +23,8 @@ export type KcContextBase =
     | KcContextBase.LoginOtp
     | KcContextBase.LoginUpdatePassword
     | KcContextBase.LoginUpdateProfile
-    | KcContextBase.LoginIdpLinkConfirm;
+    | KcContextBase.LoginIdpLinkConfirm
+    | KcContextBase.LoginPageExpired;
 
 export declare namespace KcContextBase {
     export type Common = {
@@ -213,6 +214,10 @@ export declare namespace KcContextBase {
         pageId: "login-idp-link-confirm.ftl";
         idpAlias: string;
     };
+
+    export type LoginPageExpired = Common & {
+        pageId: "login-page-expired.ftl";
+    };
 }
 
 export type Attribute = {