Add login-idp-link-confirm.ftl

src/bin/build-keycloak-theme/generateFtl/index.ts

@@ -15,7 +15,8 @@ export const pageIds = [
     "login.ftl", "register.ftl", "info.ftl", 
     "error.ftl", "login-reset-password.ftl", 
     "login-verify-email.ftl", "terms.ftl",
-    "login-otp.ftl", "login-update-profile.ftl"
+    "login-otp.ftl", "login-update-profile.ftl", 
+    "login-idp-link-confirm.ftl"
 ] as const;
 
 export type PageId = typeof pageIds[number];

src/bin/build-keycloak-theme/generateFtl/login-idp-link-confirm.ftl

@@ -0,0 +1,11 @@
+<script>const _= 
+{
+	"idpAlias": (function (){
+	    <#attempt>
+	        return "${idpAlias}";
+	    <#recover>
+	    </#attempt>
+		return "";
+	})()
+}
+</script>

src/lib/components/KcApp.tsx

@@ -9,10 +9,11 @@ import { Error } from "./Error";
 import { LoginResetPassword } from "./LoginResetPassword";
 import { LoginVerifyEmail } from "./LoginVerifyEmail";
 import { Terms } from "./Terms";
-import { LoginOtp } from "./LoginOtp";
-import { LoginUpdateProfile } from "./LoginUpdateProfile";
+import { LoginOtp } from "./LoginOtp";
+import { LoginUpdateProfile } from "./LoginUpdateProfile";
+import { LoginIdpLinkConfirm } from "./LoginIdpLinkConfirm";
 
-export const KcApp = memo(({ kcContext, ...props }: { kcContext: KcContext; } & KcProps ) => {
+export const KcApp = memo(({ kcContext, ...props }: { kcContext: KcContext; } & KcProps) => {
     switch (kcContext.pageId) {
         case "login.ftl": return <Login {...{ kcContext, ...props }} />;
         case "register.ftl": return <Register {...{ kcContext, ...props }} />;
@@ -20,8 +21,9 @@ export const KcApp = memo(({ kcContext, ...props }: { kcContext: KcContext; } &
         case "error.ftl": return <Error {...{ kcContext, ...props }} />;
         case "login-reset-password.ftl": return <LoginResetPassword {...{ kcContext, ...props }} />;
         case "login-verify-email.ftl": return <LoginVerifyEmail {...{ kcContext, ...props }} />;
-        case "terms.ftl": return <Terms {...{ kcContext, ...props }}/>;
-        case "login-otp.ftl": return <LoginOtp {...{ kcContext, ...props }}/>;
+        case "terms.ftl": return <Terms {...{ kcContext, ...props }} />;
+        case "login-otp.ftl": return <LoginOtp {...{ kcContext, ...props }} />;
         case "login-update-profile.ftl": return <LoginUpdateProfile {...{ kcContext, ...props }} />;
+        case "login-idp-link-confirm.ftl": return <LoginIdpLinkConfirm {...{ kcContext, ...props }} />;
     }
 });

src/lib/components/LoginIdpLinkConfirm.tsx

@@ -0,0 +1,58 @@
+
+import { memo } from "react";
+import { Template } from "./Template";
+import type { KcProps } from "./KcProps";
+import type { KcContext } from "../KcContext";
+import { useKcMessage } from "../i18n/useKcMessage";
+import { cx } from "tss-react";
+
+export const LoginIdpLinkConfirm = memo(({ kcContext, ...props }: { kcContext: KcContext.LoginIdpLinkConfirm; } & KcProps) => {
+
+	const { msg } = useKcMessage();
+
+	const { url, idpAlias } = kcContext;
+
+	return (
+		<Template
+			{...{ kcContext, ...props }}
+			headerNode={msg("confirmLinkIdpTitle")}
+			formNode={
+				<form id="kc-register-form" action={url.loginAction} method="post">
+					<div className={cx(props.kcFormGroupClass)}>
+						<button
+							type="submit"
+							className={cx(
+								props.kcButtonClass,
+								props.kcButtonDefaultClass,
+								props.kcButtonBlockClass,
+								props.kcButtonLargeClass
+							)}
+							name="submitAction"
+							id="updateProfile"
+							value="updateProfile"
+						>
+							{msg("confirmLinkIdpReviewProfile")}
+						</button>
+						<button
+							type="submit"
+							className={cx(
+								props.kcButtonClass,
+								props.kcButtonDefaultClass,
+								props.kcButtonBlockClass,
+								props.kcButtonLargeClass
+							)}
+							name="submitAction"
+							id="linkAccount"
+							value="linkAccount"
+						>
+							{msg("confirmLinkIdpContinue", idpAlias)}
+						</button>
+					</div>
+				</form>
+			}
+		/>
+	);
+
+});
+
+

src/lib/kcContext.ts

@@ -17,7 +17,8 @@ type ExtractAfterStartingWith<Prefix extends string, StrEnum> =
 export type KcContext =
     KcContext.Login | KcContext.Register | KcContext.Info |
     KcContext.Error | KcContext.LoginResetPassword | KcContext.LoginVerifyEmail |
-    KcContext.Terms | KcContext.LoginOtp | KcContext.LoginUpdateProfile;
+    KcContext.Terms | KcContext.LoginOtp | KcContext.LoginUpdateProfile |
+    KcContext.LoginIdpLinkConfirm;
 
 export declare namespace KcContext {
 
@@ -190,6 +191,11 @@ export declare namespace KcContext {
 
     };
 
+    export type LoginIdpLinkConfirm = Common & {
+        pageId: "login-idp-link-confirm.ftl";
+        idpAlias: string;
+    };
+
 }
 
 doExtends<KcContext["pageId"], PageId>();

src/lib/kcContextMocks/index.ts

@@ -241,3 +241,9 @@ export const kcLoginUpdateProfileContext: KcContext.LoginUpdateProfile = {
     }
 };
 
+export const kcLoginIdpLinkConfirmContext: KcContext.LoginIdpLinkConfirm ={
+    ...kcCommonContext,
+    "pageId": "login-idp-link-confirm.ftl",
+    "idpAlias": "FranceConnect"
+};
+