From 1606c2884d4f1b5c8b663720fd4a3c1932cb5dfd Mon Sep 17 00:00:00 2001
From: Joseph Garrone <joseph.garrone.gj@gmail.com>
Date: Sun, 21 Mar 2021 22:10:33 +0100
Subject: [PATCH] kcHeaderClass can be updated after initial mount

---
 package.json                    |  2 +-
 src/lib/components/Template.tsx | 43 +++++++++++++++++++++------------
 2 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index 082869a4..e30d41ab 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "0.3.0",
+    "version": "0.3.1",
     "description": "Keycloak theme generator for Reacts app",
     "repository": {
         "type": "git",
diff --git a/src/lib/components/Template.tsx b/src/lib/components/Template.tsx
index 5af66edd..777b21ee 100644
--- a/src/lib/components/Template.tsx
+++ b/src/lib/components/Template.tsx
@@ -25,7 +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 +60,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 +117,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.kcHeaderClass]);
 
     if (!isExtraCssLoaded) {
         return null;