Add RegisterUserProfile customization

package.json

@@ -1,7 +1,7 @@
 {
     "name": "keycloakify-starter",
     "homepage": "https://starter.keycloakify.dev",
-    "version": "3.0.0",
+    "version": "3.1.0",
     "description": "A starter/demo project for keycloakify",
     "repository": {
         "type": "git",
@@ -26,7 +26,7 @@
         "evt": "^2.4.15",
         "jwt-decode": "^3.1.2",
         "keycloak-js": "^21.0.1",
-        "keycloakify": "^6.12.4",
+        "keycloakify": "^6.12.7",
         "powerhooks": "^0.26.2",
         "react": "18.1.0",
         "react-dom": "18.1.0",

src/keycloak-theme/KcApp.tsx

@@ -12,6 +12,7 @@ console.log(`Values passed by the main app in the URL parameter:`, { foo, bar })
 const Login = lazy(()=> import("./pages/Login"));
 // If you can, favor register-user-profile.ftl over register.ftl, see: https://docs.keycloakify.dev/realtime-input-validation
 const Register = lazy(() => import("./pages/Register"));
+const RegisterUserProfile = lazy(() => import("./pages/RegisterUserProfile"));
 const Terms = lazy(() => import("./pages/Terms"));
 const MyExtraPage1 = lazy(() => import("./pages/MyExtraPage1"));
 const MyExtraPage2 = lazy(() => import("./pages/MyExtraPage2"));
@@ -61,6 +62,7 @@ export default function App(props: { kcContext: KcContext; }) {
                 switch (kcContext.pageId) {
                     case "login.ftl": return <Login {...{ kcContext, ...pageProps }} />;
                     case "register.ftl": return <Register {...{ kcContext, ...pageProps }} />;
+                    case "register-user-profile.ftl": return <RegisterUserProfile {...{ kcContext, ...pageProps }} />
                     case "terms.ftl": return <Terms {...{ kcContext, ...pageProps }} />;
                     case "my-extra-page-1.ftl": return <MyExtraPage1 {...{ kcContext, ...pageProps }} />;
                     case "my-extra-page-2.ftl": return <MyExtraPage2 {...{ kcContext, ...pageProps }} />;

src/keycloak-theme/pages/RegisterUserProfile.tsx

@@ -0,0 +1,61 @@
+// Copy pasted from: https://github.com/InseeFrLab/keycloakify/blob/main/src/lib/pages/RegisterUserProfile.tsx
+import { useState } from "react";
+import { clsx } from "keycloakify/lib/tools/clsx";
+import { UserProfileFormFields } from "./shared/UserProfileCommons";
+import type { PageProps } from "keycloakify/lib/KcProps";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+
+export default function RegisterUserProfile(props: PageProps<Extract<KcContext, { pageId: "register-user-profile.ftl" }>, I18n>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
+
+    const { url, messagesPerField, recaptchaRequired, recaptchaSiteKey } = kcContext;
+
+    const { msg, msgStr } = i18n;
+
+    const [isFomSubmittable, setIsFomSubmittable] = useState(false);
+
+    return (
+        <Template
+            {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
+            displayMessage={messagesPerField.exists("global")}
+            displayRequiredFields={true}
+            headerNode={msg("registerTitle")}
+            formNode={
+                <form id="kc-register-form" className={clsx(kcProps.kcFormClass)} action={url.registrationAction} method="post">
+                    <UserProfileFormFields kcContext={kcContext} onIsFormSubmittableValueChange={setIsFomSubmittable} i18n={i18n} {...kcProps} />
+                    {recaptchaRequired && (
+                        <div className="form-group">
+                            <div className={clsx(kcProps.kcInputWrapperClass)}>
+                                <div className="g-recaptcha" data-size="compact" data-sitekey={recaptchaSiteKey} />
+                            </div>
+                        </div>
+                    )}
+                    <div className={clsx(kcProps.kcFormGroupClass)} style={{ "marginBottom": 30 }}>
+                        <div id="kc-form-options" className={clsx(kcProps.kcFormOptionsClass)}>
+                            <div className={clsx(kcProps.kcFormOptionsWrapperClass)}>
+                                <span>
+                                    <a href={url.loginUrl}>{msg("backToLogin")}</a>
+                                </span>
+                            </div>
+                        </div>
+
+                        <div id="kc-form-buttons" className={clsx(kcProps.kcFormButtonsClass)}>
+                            <input
+                                className={clsx(
+                                    kcProps.kcButtonClass,
+                                    kcProps.kcButtonPrimaryClass,
+                                    kcProps.kcButtonBlockClass,
+                                    kcProps.kcButtonLargeClass
+                                )}
+                                type="submit"
+                                value={msgStr("doRegister")}
+                                disabled={!isFomSubmittable}
+                            />
+                        </div>
+                    </div>
+                </form>
+            }
+        />
+    );
+}