Merge pull request #92 from Tasyp/add-login-idp-link-email

feat: add login-idp-link-email page

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

@@ -18,6 +18,7 @@ export const pageIds = [
     "login-update-profile.ftl",
     "login-update-password.ftl",
     "login-idp-link-confirm.ftl",
+    "login-idp-link-email.ftl",
     "login-page-expired.ftl",
 ] as const;
 

src/lib/components/KcApp.tsx

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

src/lib/components/LoginIdpLinkEmail.tsx

@@ -0,0 +1,32 @@
+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 LoginIdpLinkEmail = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginIdpLinkEmail } & KcProps) => {
+    const { url, realm, brokerContext, idpAlias } = kcContext;
+
+    const { msg } = useKcMessage();
+
+    return (
+        <Template
+            {...{ kcContext, ...props }}
+            doFetchDefaultThemeResources={true}
+            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>
+                </>
+            }
+        />
+    );
+});

src/lib/getKcContext/KcContextBase.ts

@@ -24,6 +24,7 @@ export type KcContextBase =
     | KcContextBase.LoginUpdatePassword
     | KcContextBase.LoginUpdateProfile
     | KcContextBase.LoginIdpLinkConfirm
+    | KcContextBase.LoginIdpLinkEmail
     | KcContextBase.LoginPageExpired;
 
 export declare namespace KcContextBase {
@@ -215,6 +216,14 @@ export declare namespace KcContextBase {
         idpAlias: string;
     };
 
+    export type LoginIdpLinkEmail = Common & {
+        pageId: "login-idp-link-email.ftl";
+        brokerContext: {
+            username: string;
+        };
+        idpAlias: string;
+    };
+
     export type LoginPageExpired = Common & {
         pageId: "login-page-expired.ftl";
     };

src/lib/getKcContext/kcContextMocks/kcContextMocks.ts

@@ -367,4 +367,12 @@ export const kcContextMocks: KcContextBase[] = [
         "pageId": "login-idp-link-confirm.ftl",
         "idpAlias": "FranceConnect",
     }),
+    id<KcContextBase.LoginIdpLinkEmail>({
+        ...kcContextCommonMock,
+        "pageId": "login-idp-link-email.ftl",
+        "idpAlias": "FranceConnect",
+        "brokerContext": {
+            "username": "anUsername",
+        },
+    }),
 ];