Merge remote-tracking branch 'origin/main' into lordvlad/issue125

* origin/main:
  Update KcApp.tsx
  Add RegisterUserProfile customization

package.json

@@ -1,87 +1,67 @@
 {
-  "name": "keycloakify-starter",
+    "name": "keycloakify-starter",
-  "homepage": "https://starter.keycloakify.dev",
+    "homepage": "https://starter.keycloakify.dev",
-  "version": "3.0.0",
+    "version": "3.1.0",
-  "description": "A starter/demo project for keycloakify",
+    "description": "A starter/demo project for keycloakify",
-  "repository": {
+    "repository": {
-    "type": "git",
+        "type": "git",
-    "url": "git://github.com/codegouvfr/keycloakify-starter.git"
+        "url": "git://github.com/codegouvfr/keycloakify-starter.git"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "build-keycloak-theme": "yarn build ; keycloakify",
-    "download-builtin-keycloak-theme": "download-builtin-keycloak-theme 15.0.2",
-    "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook -s public"
-  },
-  "keycloakify": {
-    "extraPages": [
-      "my-extra-page-1.ftl",
-      "my-extra-page-2.ftl"
-    ]
-  },
-  "author": "u/garronej",
-  "license": "MIT",
-  "keywords": [],
-  "dependencies": {
-    "evt": "^2.4.15",
-    "jwt-decode": "^3.1.2",
-    "keycloak-js": "^21.0.1",
-    "keycloakify": "^6.12.4",
-    "powerhooks": "^0.26.2",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
-    "tsafe": "^1.4.3"
-  },
-  "devDependencies": {
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-interactions": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/node-logger": "^6.5.16",
-    "@storybook/preset-create-react-app": "^4.1.2",
-    "@storybook/react": "^6.5.16",
-    "@storybook/testing-library": "^0.0.13",
-    "@types/node": "^15.3.1",
-    "@types/react": "18.0.9",
-    "@types/react-dom": "18.0.4",
-    "react-scripts": "5.0.0",
-    "typescript": "~4.8.0"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ],
-    "rules": {
-      "react-hooks/exhaustive-deps": "off",
-      "@typescript-eslint/no-redeclare": "off",
-      "no-labels": "off"
     },
-    "overrides": [
+    "scripts": {
-      {
+        "start": "react-scripts start",
-        "files": [
+        "build": "react-scripts build",
-          "**/*.stories.*"
+        "build-keycloak-theme": "yarn build && keycloakify",
+        "download-builtin-keycloak-theme": "download-builtin-keycloak-theme 15.0.2"
+    },
+    "keycloakify": {
+        "extraPages": [
+            "my-extra-page-1.ftl",
+            "my-extra-page-2.ftl"
+        ]
+    },
+    "author": "u/garronej",
+    "license": "MIT",
+    "keywords": [],
+    "dependencies": {
+        "evt": "^2.4.15",
+        "jwt-decode": "^3.1.2",
+        "keycloak-js": "^21.0.1",
+        "keycloakify": "^6.12.7",
+        "powerhooks": "^0.26.2",
+        "react": "18.1.0",
+        "react-dom": "18.1.0",
+        "tsafe": "^1.4.3"
+    },
+    "devDependencies": {
+        "@types/node": "^15.3.1",
+        "@types/react": "18.0.9",
+        "@types/react-dom": "18.0.4",
+        "react-scripts": "5.0.0",
+        "typescript": "~4.8.0"
+    },
+    "eslintConfig": {
+        "extends": [
+            "react-app",
+            "react-app/jest"
         ],
         "rules": {
-          "import/no-anonymous-default-export": "off"
+            "react-hooks/exhaustive-deps": "off",
+            "@typescript-eslint/no-redeclare": "off",
+            "no-labels": "off"
         }
-      }
+    }
-    ]
+]
-  },
+},
-  "browserslist": {
+"browserslist": {
-    "production": [
+"production": [
-      ">0.2%",
+    ">0.2%",
-      "not dead",
+    "not dead",
-      "not op_mini all"
+    "not op_mini all"
-    ],
+],
-    "development": [
+"development": [
-      "last 1 chrome version",
+    "last 1 chrome version",
-      "last 1 firefox version",
+    "last 1 firefox version",
-      "last 1 safari version"
+    "last 1 safari version"
-    ]
+]
-  }
 }
+}

src/keycloak-theme/KcApp.tsx

@@ -5,13 +5,15 @@ 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
 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 +63,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>
+            }
+        />
+    );
+}