From 1d579f20e3ab364e7c8e420e3bd5c3000b6dfc87 Mon Sep 17 00:00:00 2001
From: garronej <joseph.garrone@data.gouv.fr>
Date: Wed, 8 Mar 2023 23:17:40 +0100
Subject: [PATCH 1/2] Add RegisterUserProfile customization

---
 package.json                                  |   4 +-
 src/keycloak-theme/KcApp.tsx                  |   2 +
 .../pages/RegisterUserProfile.tsx             |  61 ++++++
 .../pages/shared/UserProfileCommons.tsx       | 176 ++++++++++++++++++
 yarn.lock                                     |  10 +-
 5 files changed, 246 insertions(+), 7 deletions(-)
 create mode 100644 src/keycloak-theme/pages/RegisterUserProfile.tsx
 create mode 100644 src/keycloak-theme/pages/shared/UserProfileCommons.tsx

diff --git a/package.json b/package.json
index cc9c07c..ec574af 100755
--- a/package.json
+++ b/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",
diff --git a/src/keycloak-theme/KcApp.tsx b/src/keycloak-theme/KcApp.tsx
index efe0cf6..e7f8a0c 100644
--- a/src/keycloak-theme/KcApp.tsx
+++ b/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 }} />;
diff --git a/src/keycloak-theme/pages/RegisterUserProfile.tsx b/src/keycloak-theme/pages/RegisterUserProfile.tsx
new file mode 100644
index 0000000..492e82b
--- /dev/null
+++ b/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>
+            }
+        />
+    );
+}
diff --git a/src/keycloak-theme/pages/shared/UserProfileCommons.tsx b/src/keycloak-theme/pages/shared/UserProfileCommons.tsx
new file mode 100644
index 0000000..08b9442
--- /dev/null
+++ b/src/keycloak-theme/pages/shared/UserProfileCommons.tsx
@@ -0,0 +1,176 @@
+//NOTE: Copy pasted from: https://github.com/InseeFrLab/keycloakify/blob/main/src/lib/pages/shared/UserProfileCommons.tsx
+
+import { useEffect, Fragment } from "react";
+import type { KcProps } from "keycloakify/lib/KcProps";
+import { clsx } from "keycloakify/lib/tools/clsx";
+import type { I18nBase } from "keycloakify/lib/i18n";
+import type { Attribute } from "keycloakify/lib/getKcContext";
+import { useFormValidation } from "keycloakify/lib/pages/shared/UserProfileCommons";
+
+export type UserProfileFormFieldsProps = {
+    kcContext: Parameters<typeof useFormValidation>[0]["kcContext"];
+    i18n: I18nBase;
+} & KcProps &
+    Partial<Record<"BeforeField" | "AfterField", (props: { attribute: Attribute }) => JSX.Element | null>> & {
+        onIsFormSubmittableValueChange: (isFormSubmittable: boolean) => void;
+    };
+
+export function UserProfileFormFields({
+    kcContext,
+    onIsFormSubmittableValueChange,
+    i18n,
+    BeforeField,
+    AfterField,
+    ...props
+}: UserProfileFormFieldsProps) {
+    const { advancedMsg } = i18n;
+
+    const {
+        formValidationState: { fieldStateByAttributeName, isFormSubmittable },
+        formValidationDispatch,
+        attributesWithPassword
+    } = useFormValidation({
+        kcContext,
+        i18n
+    });
+
+    useEffect(() => {
+        onIsFormSubmittableValueChange(isFormSubmittable);
+    }, [isFormSubmittable]);
+
+    let currentGroup = "";
+
+    return (
+        <>
+            {attributesWithPassword.map((attribute, i) => {
+                const { group = "", groupDisplayHeader = "", groupDisplayDescription = "" } = attribute;
+
+                const { value, displayableErrors } = fieldStateByAttributeName[attribute.name];
+
+                const formGroupClassName = clsx(props.kcFormGroupClass, displayableErrors.length !== 0 && props.kcFormGroupErrorClass);
+
+                return (
+                    <Fragment key={i}>
+                        {group !== currentGroup && (currentGroup = group) !== "" && (
+                            <div className={formGroupClassName}>
+                                <div className={clsx(props.kcContentWrapperClass)}>
+                                    <label id={`header-${group}`} className={clsx(props.kcFormGroupHeader)}>
+                                        {advancedMsg(groupDisplayHeader) || currentGroup}
+                                    </label>
+                                </div>
+                                {groupDisplayDescription !== "" && (
+                                    <div className={clsx(props.kcLabelWrapperClass)}>
+                                        <label id={`description-${group}`} className={`${clsx(props.kcLabelClass)}`}>
+                                            {advancedMsg(groupDisplayDescription)}
+                                        </label>
+                                    </div>
+                                )}
+                            </div>
+                        )}
+
+                        {BeforeField && <BeforeField attribute={attribute} />}
+
+                        <div className={formGroupClassName}>
+                            <div className={clsx(props.kcLabelWrapperClass)}>
+                                <label htmlFor={attribute.name} className={clsx(props.kcLabelClass)}>
+                                    {advancedMsg(attribute.displayName ?? "")}
+                                </label>
+                                {attribute.required && <>*</>}
+                            </div>
+                            <div className={clsx(props.kcInputWrapperClass)}>
+                                {(() => {
+                                    const { options } = attribute.validators;
+
+                                    if (options !== undefined) {
+                                        return (
+                                            <select
+                                                id={attribute.name}
+                                                name={attribute.name}
+                                                onChange={event =>
+                                                    formValidationDispatch({
+                                                        "action": "update value",
+                                                        "name": attribute.name,
+                                                        "newValue": event.target.value
+                                                    })
+                                                }
+                                                onBlur={() =>
+                                                    formValidationDispatch({
+                                                        "action": "focus lost",
+                                                        "name": attribute.name
+                                                    })
+                                                }
+                                                value={value}
+                                            >
+                                                {options.options.map(option => (
+                                                    <option key={option} value={option}>
+                                                        {option}
+                                                    </option>
+                                                ))}
+                                            </select>
+                                        );
+                                    }
+
+                                    return (
+                                        <input
+                                            type={(() => {
+                                                switch (attribute.name) {
+                                                    case "password-confirm":
+                                                    case "password":
+                                                        return "password";
+                                                    default:
+                                                        return "text";
+                                                }
+                                            })()}
+                                            id={attribute.name}
+                                            name={attribute.name}
+                                            value={value}
+                                            onChange={event =>
+                                                formValidationDispatch({
+                                                    "action": "update value",
+                                                    "name": attribute.name,
+                                                    "newValue": event.target.value
+                                                })
+                                            }
+                                            onBlur={() =>
+                                                formValidationDispatch({
+                                                    "action": "focus lost",
+                                                    "name": attribute.name
+                                                })
+                                            }
+                                            className={clsx(props.kcInputClass)}
+                                            aria-invalid={displayableErrors.length !== 0}
+                                            disabled={attribute.readOnly}
+                                            autoComplete={attribute.autocomplete}
+                                        />
+                                    );
+                                })()}
+                                {displayableErrors.length !== 0 &&
+                                    (() => {
+                                        const divId = `input-error-${attribute.name}`;
+
+                                        return (
+                                            <>
+                                                <style>{`#${divId} > span: { display: block; }`}</style>
+                                                <span
+                                                    id={divId}
+                                                    className={clsx(props.kcInputErrorMessageClass)}
+                                                    style={{
+                                                        "position": displayableErrors.length === 1 ? "absolute" : undefined
+                                                    }}
+                                                    aria-live="polite"
+                                                >
+                                                    {displayableErrors.map(({ errorMessage }) => errorMessage)}
+                                                </span>
+                                            </>
+                                        );
+                                    })()}
+                            </div>
+                        </div>
+                        {AfterField && <AfterField attribute={attribute} />}
+                    </Fragment>
+                );
+            })}
+        </>
+    );
+}
+
diff --git a/yarn.lock b/yarn.lock
index 8d02291..0417560 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6012,15 +6012,15 @@ keycloak-js@^21.0.1:
     base64-js "^1.5.1"
     js-sha256 "^0.9.0"
 
-keycloakify@^6.12.4:
-  version "6.12.4"
-  resolved "https://registry.yarnpkg.com/keycloakify/-/keycloakify-6.12.4.tgz#96aa3cab5e3f76e550f20e9b4de7e6b425df79ad"
-  integrity sha512-Po3GfnAsAUVVEzIuNiVi/Wz2Jxb4VCLHre8FheLAZilt0MFZ6h2NJ5EK7oaCb6I5pe4Ip4LsxnrM2DP2/kqcaQ==
+keycloakify@^6.12.7:
+  version "6.12.7"
+  resolved "https://registry.yarnpkg.com/keycloakify/-/keycloakify-6.12.7.tgz#7ec97117c6b83be13999cd95cb01d27eaf4411a9"
+  integrity sha512-qCPrkD6bDjXh2/8ISqLga056Y0eExAspfn1pWZE6LE5DP7gIUsAieOCR1tgswGXxGJfgBZn2IgU2UYipm5FnYg==
   dependencies:
     "@octokit/rest" "^18.12.0"
     cheerio "^1.0.0-rc.5"
     cli-select "^1.1.2"
-    evt "^2.4.13"
+    evt "^2.4.15"
     minimal-polyfills "^2.2.2"
     minimist "^1.2.6"
     path-browserify "^1.0.1"

From 3197c9f0256599bb9e35dc940b69d90dd3c1e0a0 Mon Sep 17 00:00:00 2001
From: Joseph Garrone <joseph.garrone.gj@gmail.com>
Date: Fri, 10 Mar 2023 13:45:28 +0100
Subject: [PATCH 2/2] Update KcApp.tsx

Signed-off-by: Joseph Garrone <joseph.garrone.gj@gmail.com>
---
 src/keycloak-theme/KcApp.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/keycloak-theme/KcApp.tsx b/src/keycloak-theme/KcApp.tsx
index e7f8a0c..1235b6b 100644
--- a/src/keycloak-theme/KcApp.tsx
+++ b/src/keycloak-theme/KcApp.tsx
@@ -5,9 +5,10 @@ import { useI18n } from "./i18n";
 import Fallback, { defaultKcProps, type KcProps, type PageProps } from "keycloakify";
 import Template from "./Template";
 import DefaultTemplate from "keycloakify/lib/Template";
-import { foo, bar } from "./valuesTransferredOverUrl";
 
-console.log(`Values passed by the main app in the URL parameter:`, { foo, bar });
+// You can uncomment this to see the values passed by the main app before redirecting.  
+//import { foo, bar } from "./valuesTransferredOverUrl";
+//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