Add code.ftl page

src/bin/keycloakify/generateFtl/pageId.ts

@@ -26,7 +26,8 @@ export const loginThemePageIds = [
     "update-email.ftl",
     "select-authenticator.ftl",
     "saml-post-form.ftl",
-    "delete-credential.ftl"
+    "delete-credential.ftl",
+    "code.ftl"
 ] as const;
 
 export const accountThemePageIds = [

src/login/Fallback.tsx

@@ -32,6 +32,7 @@ const UpdateEmail = lazy(() => import("keycloakify/login/pages/UpdateEmail"));
 const SelectAuthenticator = lazy(() => import("keycloakify/login/pages/SelectAuthenticator"));
 const SamlPostForm = lazy(() => import("keycloakify/login/pages/SamlPostForm"));
 const DeleteCredential = lazy(() => import("keycloakify/login/pages/DeleteCredential"));
+const Code = lazy(() => import("keycloakify/login/pages/Code"));
 
 type FallbackProps = PageProps<KcContext, I18n> & {
     UserProfileFormFields: LazyOrNot<(props: UserProfileFormFieldsProps) => JSX.Element>;
@@ -98,6 +99,8 @@ export default function Fallback(props: FallbackProps) {
                         return <SamlPostForm kcContext={kcContext} {...rest} />;
                     case "delete-credential.ftl":
                         return <DeleteCredential kcContext={kcContext} {...rest} />;
+                    case "code.ftl":
+                        return <Code kcContext={kcContext} {...rest} />;
                 }
                 assert<Equals<typeof kcContext, never>>(false);
             })()}

src/login/kcContext/KcContext.ts

@@ -36,7 +36,8 @@ export type KcContext =
     | KcContext.UpdateEmail
     | KcContext.SelectAuthenticator
     | KcContext.SamlPostForm
-    | KcContext.DeleteCredential;
+    | KcContext.DeleteCredential
+    | KcContext.Code;
 
 assert<KcContext["themeType"] extends ThemeType ? true : false>();
 
@@ -497,6 +498,15 @@ export declare namespace KcContext {
         pageId: "delete-credential.ftl";
         credentialLabel: string;
     };
+
+    export type Code = Common & {
+        pageId: "code.ftl";
+        code: {
+            success: boolean;
+            code?: string;
+            error?: string;
+        };
+    };
 }
 
 export type UserProfile = {

src/login/pages/Code.tsx

@@ -0,0 +1,35 @@
+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 Code(props: PageProps<Extract<KcContext, { pageId: "code.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { getClassName } = useGetClassName({
+        doUseDefaultCss,
+        classes
+    });
+
+    const { code } = kcContext;
+
+    const { msg } = i18n;
+
+    return (
+        <Template
+            {...{ kcContext, i18n, doUseDefaultCss, classes }}
+            headerNode={code.success ? msg("codeSuccessTitle") : msg("codeErrorTitle", code.error)}
+        >
+            <div id="kc-code">
+                {code.success ? (
+                    <>
+                        <p>{msg("copyCodeInstruction")}</p>
+                        <input id="code" className={getClassName("kcTextareaClass")} value={code.code} />
+                    </>
+                ) : (
+                    <p id="error">{code.error}</p>
+                )}
+            </div>
+        </Template>
+    );
+}