Update changelog v0.3.5

CHANGELOG.md

@@ -1,3 +1,23 @@
+### **0.3.5** (2021-03-22)  
+  
+- support homepage with urlPath    
+  
+### **0.3.4** (2021-03-22)  
+  
+- Bugfix: Import assets from CSS    
+  
+### **0.3.3** (2021-03-22)  
+  
+- Fix submit not receving correct text    
+  
+### **0.3.2** (2021-03-21)  
+  
+- Fix broken previous release    
+  
+### **0.3.1** (2021-03-21)  
+  
+- kcHeaderClass can be updated after initial mount    
+  
 ## **0.3.0** (2021-03-20)  
   
 - Bump version  

README.md

@@ -45,12 +45,11 @@ Tested with the following Keycloak versions:
     - [Just changing the look](#just-changing-the-look)
     - [Changing the look **and** feel](#changing-the-look-and-feel)
     - [Hot reload](#hot-reload)
-- [Implement context persistance (optional)](#implement-context-persistance-optional)
 - [GitHub Actions](#github-actions)
 - [REQUIREMENTS](#requirements)
 - [API Reference](#api-reference)
   - [The build tool](#the-build-tool)
-  - [The fronted lib ( imported into your react app )](#the-fronted-lib--imported-into-your-react-app-)
+- [Implement context persistance (optional)](#implement-context-persistance-optional)
 
 # How to use
 ## Setting up the build tool
@@ -152,6 +151,37 @@ Checkout [this concrete example](https://github.com/garronej/keycloakify-demo-ap
 
 *NOTE: keycloak-react-theming was renamed keycloakify since this video was recorded*
 [![kickstart_video](https://user-images.githubusercontent.com/6702424/108877866-f146ee80-75ff-11eb-8120-003b3c5f6dd8.png)](https://youtu.be/xTz0Rj7i2v8)
+
+# GitHub Actions
+
+![image](https://user-images.githubusercontent.com/6702424/110708305-c44b2c00-81fa-11eb-8152-eeaaac0883d6.png)
+
+[Here is a demo repo](https://github.com/garronej/keycloakify-demo-app) to show how to automate
+the building and publishing of the theme (the .jar file).
+
+# REQUIREMENTS
+
+This tools assumes you are bundling your app with Webpack (tested with 4.44.2) .
+It assumes there is a `build/` directory at the root of your react project directory containing a `index.html` file
+and a `static/` directory generated by webpack.
+
+**All this is defaults with [`create-react-app`](https://create-react-app.dev)** (tested with 4.0.3=)
+
+- For building the theme: `mvn` (Maven) must be installed
+- For development, (testing the theme in a local container ): `rm`, `mkdir`, `wget`, `unzip` are assumed to be available
+  and `docker` up and running.
+
+NOTE: This build tool has only be tested on MacOS.
+
+# API Reference 
+
+## The build tool 
+
+Part of the lib that runs with node, at build time.
+
+- `npx build-keycloak-theme`: Builds the theme, the CWD is assumed to be the root of your react project.
+- `npx download-sample-keycloak-themes`: Downloads the keycloak default themes (for development purposes)
+
 # Implement context persistance (optional)
 
 If, before logging in, a user has selected a specific language 
@@ -210,40 +240,3 @@ keycloakInstance.init({
 If you really want to go the extra miles and avoid having the white
 flash of the blank html before the js bundle have been evaluated
 [here is a snippet](https://github.com/InseeFrLab/onyxia-ui/blob/a77eb502870cfe6878edd0d956c646d28746d053/public/index.html#L5-L54) that you can place in your `public/index.html` if you are using `powerhooks/useGlobalState`.
-
-# GitHub Actions
-
-![image](https://user-images.githubusercontent.com/6702424/110708305-c44b2c00-81fa-11eb-8152-eeaaac0883d6.png)
-
-[Here is a demo repo](https://github.com/garronej/keycloakify-demo-app) to show how to automate
-the building and publishing of the theme (the .jar file).
-
-# REQUIREMENTS
-
-This tools assumes you are bundling your app with Webpack (tested with 4.44.2) .
-It assumes there is a `build/` directory at the root of your react project directory containing a `index.html` file
-and a `static/` directory generated by webpack.
-
-**All this is defaults with [`create-react-app`](https://create-react-app.dev)** (tested with 4.0.3=)
-
-- For building the theme: `mvn` (Maven) must be installed
-- For development, (testing the theme in a local container ): `rm`, `mkdir`, `wget`, `unzip` are assumed to be available
-  and `docker` up and running.
-
-NOTE: This build tool has only be tested on MacOS.
-
-# API Reference 
-
-## The build tool 
-
-Part of the lib that runs with node, at build time.
-
-- `npx build-keycloak-theme`: Builds the theme, the CWD is assumed to be the root of your react project.
-- `npx download-sample-keycloak-themes`: Downloads the keycloak default themes (for development purposes)
-
-## The fronted lib ( imported into your react app )
-
-Part of the lib that you import in your react project and runs on the browser.
-
-**TODO**
-

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "0.3.0",
+    "version": "0.3.5",
     "description": "Keycloak theme generator for Reacts app",
     "repository": {
         "type": "git",

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

@@ -11,9 +11,9 @@ import { objectKeys } from "evt/tools/typeSafety/objectKeys";
 
 export const pageIds = ["login.ftl", "register.ftl", "info.ftl", "error.ftl", "login-reset-password.ftl", "login-verify-email.ftl"] as const;
 
-export type PageId =  typeof pageIds[number];
+export type PageId = typeof pageIds[number];
 
-function loadAdjacentFile(fileBasename: string){
+function loadAdjacentFile(fileBasename: string) {
     return fs.readFileSync(pathJoin(__dirname, fileBasename))
         .toString("utf8");
 };
@@ -34,10 +34,11 @@ export function generateFtlFilesCodeFactory(
         ftlValuesGlobalName: string;
         cssGlobalsToDefine: Record<string, string>;
         indexHtmlCode: string;
+        urlPathname: string;
     }
 ) {
 
-    const { ftlValuesGlobalName, cssGlobalsToDefine, indexHtmlCode } = params;
+    const { ftlValuesGlobalName, cssGlobalsToDefine, indexHtmlCode, urlPathname } = params;
 
     const $ = cheerio.load(indexHtmlCode);
 
@@ -60,11 +61,17 @@ export function generateFtlFilesCodeFactory(
 
             const href = $(element).attr(attrName);
 
-            if (!href?.startsWith("/")) {
+            if (href === undefined) {
                 return;
             }
 
-            $(element).attr(attrName, "${url.resourcesPath}/build" + href);
+            $(element).attr(
+                attrName,
+                href.replace(
+                    new RegExp(`^${urlPathname.replace(/\//g, "\\/")}`),
+                    "${url.resourcesPath}/build/"
+                )
+            );
 
         })
     );
@@ -89,9 +96,10 @@ export function generateFtlFilesCodeFactory(
             ...(Object.keys(cssGlobalsToDefine).length === 0 ? [] : [
                 '',
                 '<style>',
-                generateCssCodeToDefineGlobals(
-                    { cssGlobalsToDefine }
-                ).cssCodeToPrependInHead,
+                generateCssCodeToDefineGlobals({ 
+                    cssGlobalsToDefine,
+                    urlPathname
+                }).cssCodeToPrependInHead,
                 '</style>',
                 ''
             ]),

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

@@ -16,13 +16,14 @@ import { isInside } from "../tools/isInside";
 
 export function generateKeycloakThemeResources(
     params: {
+        urlPathname: string;
         themeName: string;
         reactAppBuildDirPath: string;
         keycloakThemeBuildingDirPath: string;
     }
 ) {
 
-    const { themeName, reactAppBuildDirPath, keycloakThemeBuildingDirPath } = params;
+    const { themeName, reactAppBuildDirPath, keycloakThemeBuildingDirPath, urlPathname } = params;
 
     const themeDirPath = pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme", themeName, "login");
 
@@ -80,7 +81,8 @@ export function generateKeycloakThemeResources(
         ftlValuesGlobalName,
         "indexHtmlCode": fs.readFileSync(
             pathJoin(reactAppBuildDirPath, "index.html")
-        ).toString("utf8")
+        ).toString("utf8"),
+        urlPathname
     });
 
     pageIds.forEach(pageId => {

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

@@ -6,6 +6,7 @@ import type { ParsedPackageJson } from "./generateJavaStackFiles";
 import { join as pathJoin, relative as pathRelative, basename as pathBasename } from "path";
 import * as child_process from "child_process";
 import { generateDebugFiles, containerLaunchScriptBasename } from "./generateDebugFiles";
+import { URL } from "url";
 
 
 const reactProjectDirPath = process.cwd();
@@ -22,7 +23,16 @@ if (require.main === module) {
     generateKeycloakThemeResources({
         keycloakThemeBuildingDirPath,
         "reactAppBuildDirPath": pathJoin(reactProjectDirPath, "build"),
-        "themeName": parsedPackageJson.name
+        "themeName": parsedPackageJson.name,
+        "urlPathname": (()=>{
+
+            const { homepage } = parsedPackageJson;
+
+            return homepage === undefined ? 
+                "/" : 
+                new URL(homepage).pathname.replace(/([^/])$/, "$1/");
+
+        })()
     });
 
     const { jarFilePath } = generateJavaStackFiles({

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

@@ -11,8 +11,8 @@ export function replaceImportFromStaticInJsCode(
     const { jsCode, ftlValuesGlobalName } = params;
 
     const fixedJsCode = jsCode!.replace(
-        /"static\//g,
-        `window.${ftlValuesGlobalName}.url.resourcesPath.replace(/^\\//,"") + "/build/static/`
+        / [^ ]+"static\//g,
+        ` window.${ftlValuesGlobalName}.url.resourcesPath + "/build/static/`
     );
 
     return { fixedJsCode };
@@ -32,7 +32,7 @@ export function replaceImportFromStaticInCssCode(
 
     const cssGlobalsToDefine: Record<string, string> = {};
 
-    new Set(cssCode.match(/(url\(\/[^)]+\))/g) ?? [])
+    new Set(cssCode.match(/url\(\/[^)]+\)[^;}]*/g) ?? [])
         .forEach(match =>
             cssGlobalsToDefine[
             "url" + crypto
@@ -60,12 +60,13 @@ export function replaceImportFromStaticInCssCode(
 export function generateCssCodeToDefineGlobals(
     params: {
         cssGlobalsToDefine: Record<string, string>;
+        urlPathname: string; 
     }
 ): {
     cssCodeToPrependInHead: string;
 } {
 
-    const { cssGlobalsToDefine } = params;
+    const { cssGlobalsToDefine, urlPathname } = params;
 
     return {
         "cssCodeToPrependInHead": [
@@ -73,12 +74,8 @@ export function generateCssCodeToDefineGlobals(
             ...Object.keys(cssGlobalsToDefine)
                 .map(cssVariableName => [
                     `--${cssVariableName}:`,
-                    [
-                        "url(",
-                        "${url.resourcesPath}/build" +
-                        cssGlobalsToDefine[cssVariableName].match(/^url\(([^)]+)\)$/)![1],
-                        ")"
-                    ].join("")
+                    cssGlobalsToDefine[cssVariableName]
+                        .replace(new RegExp(`url\\(${urlPathname.replace(/\//g,"\\/")}`, "g"),"url(${url.resourcesPath}/build/")
                 ].join(" "))
                 .map(line => `    ${line};`),
             "}"

src/lib/components/LoginResetPassword.tsx

@@ -66,7 +66,7 @@ export const LoginResetPassword = memo(({ kcContext, ...props }: { kcContext: Kc
                                     props.kcButtonBlockClass, props.kcButtonLargeClass
                                 )}
                                 type="submit"
-                                defaultValue={msgStr("doSubmit")}
+                                value={msgStr("doSubmit")}
                             />
                         </div>
                     </div>

src/lib/components/Register.tsx

@@ -113,7 +113,7 @@ export const Register = memo(({ kcContext, ...props }: { kcContext: KcContext.Re
 
                         <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
                             <input className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonBlockClass, props.kcButtonLargeClass)} type="submit"
-                                defaultValue={msgStr("doRegister")} />
+                                value={msgStr("doRegister")} />
                         </div>
                     </div>
                 </form >

src/lib/components/Template.tsx

@@ -25,8 +25,7 @@ export type TemplateProps = {
     showUsernameNode?: ReactNode;
     formNode: ReactNode;
     infoNode?: ReactNode;
-} & { kcContext: KcContext.Template; }  & KcTemplateProps;
-
+} & { kcContext: KcContext.Template; } & KcTemplateProps;
 
 export const Template = memo((props: TemplateProps) => {
 
@@ -60,34 +59,35 @@ export const Template = memo((props: TemplateProps) => {
     );
 
     const {
-        realm, locale, auth, 
+        realm, locale, auth,
         url, message, isAppInitiatedAction
-    }= kcContext;
+    } = kcContext;
 
-    useEffect(()=>{
+    useEffect(() => {
 
-        if( !realm.internationalizationEnabled ){
+        if (!realm.internationalizationEnabled) {
             return;
         }
 
-        assert( locale !== undefined );
+        assert(locale !== undefined);
 
-        if( kcLanguageTag === getBestMatchAmongKcLanguageTag(locale.current) ){
+        if (kcLanguageTag === getBestMatchAmongKcLanguageTag(locale.current)) {
             return;
         }
 
-        window.location.href = 
+        window.location.href =
             locale.supported.find(({ languageTag }) => languageTag === kcLanguageTag)!.url;
 
-    },[kcLanguageTag]);
+    }, [kcLanguageTag]);
 
     const [isExtraCssLoaded, setExtraCssLoaded] = useReducer(() => true, false);
 
     useEffect(() => {
 
         let isUnmounted = false;
+        const cleanups: (() => void)[] = [];
 
-        const toArr = (x: string | readonly string[] | undefined) => 
+        const toArr = (x: string | readonly string[] | undefined) =>
             typeof x === "string" ? x.split(" ") : x ?? [];
 
         Promise.all(
@@ -116,15 +116,27 @@ export const Template = memo((props: TemplateProps) => {
 
         if (props.kcHtmlClass !== undefined) {
 
-            document.getElementsByTagName("html")[0]
-                .classList
-                .add(...cx(props.kcHtmlClass).split(" "));
+            const htmlClassList =
+                document.getElementsByTagName("html")[0]
+                    .classList;
+
+            const tokens = cx(props.kcHtmlClass).split(" ")
+
+            htmlClassList.add(...tokens);
+
+            cleanups.push(() => htmlClassList.remove(...tokens));
 
         }
 
-        return () => { isUnmounted = true; };
+        return () => {
 
-    }, []);
+            isUnmounted = true;
+
+            cleanups.forEach(f => f());
+
+        };
+
+    }, [props.kcHtmlClass]);
 
     if (!isExtraCssLoaded) {
         return null;

src/test/generateKeycloakThemeResources.ts

@@ -9,8 +9,9 @@ import {
 setupSampleReactProject();
 
 generateKeycloakThemeResources({
-    "themeName": "onyxia-ui",
+    "themeName": "keycloakify-demo-app",
     "reactAppBuildDirPath": pathJoin(sampleReactProjectDirPath, "build"),
-    "keycloakThemeBuildingDirPath": pathJoin(sampleReactProjectDirPath, "build_keycloak_theme")
+    "keycloakThemeBuildingDirPath": pathJoin(sampleReactProjectDirPath, "build_keycloak_theme"),
+    "urlPathname": "/keycloakify-demo-app/"
 });
 

src/test/replaceImportFromStatic.ts

@@ -45,6 +45,6 @@ const { fixedCssCode, cssGlobalsToDefine } = replaceImportFromStaticInCssCode({
 console.log({ fixedCssCode, cssGlobalsToDefine });
 
 
-const { cssCodeToPrependInHead } = generateCssCodeToDefineGlobals({ cssGlobalsToDefine });
+const { cssCodeToPrependInHead } = generateCssCodeToDefineGlobals({ cssGlobalsToDefine, "urlPathname": "/" });
 
 console.log({ cssCodeToPrependInHead });