keycloakify 6.0.0-beta.3 → 6.0.0-beta.9

package/src/lib/tools/headInsert.ts

@@ -11,7 +11,7 @@ export function headInsert(
         | {
               type: "javascript";
               src: string;
-          },
+          }
 ) {
     const htmlElement = document.createElement(
         (() => {
@@ -21,7 +21,7 @@ export function headInsert(
                 case "javascript":
                     return "script";
             }
-        })(),
+        })()
     );
 
     const dLoaded = new Deferred<void>();
@@ -37,15 +37,15 @@ export function headInsert(
                         "href": params.href,
                         "type": "text/css",
                         "rel": "stylesheet",
-                        "media": "screen,print",
+                        "media": "screen,print"
                     };
                 case "javascript":
                     return {
                         "src": params.src,
-                        "type": "text/javascript",
+                        "type": "text/javascript"
                     };
             }
-        })(),
+        })()
     );
 
     document.getElementsByTagName("head")[0][

package/src/lib/tools/useCssAndCx.ts

@@ -0,0 +1,11 @@
+import { createMakeStyles } from "tss-react";
+
+const { useStyles } = createMakeStyles({
+    "useTheme": () => ({})
+});
+
+export function useCssAndCx() {
+    const { css, cx } = useStyles();
+
+    return { css, cx };
+}

package/src/lib/tsconfig.json

@@ -0,0 +1,18 @@
+{
+    "extends": "../../tsproject.json",
+    "compilerOptions": {
+        "outDir": "../../dist/lib",
+        "rootDir": ".",
+        "module": "ES2020",
+        "target": "ES2020",
+        "lib": ["es2015", "DOM", "ES2019.Object"],
+        "moduleResolution": "node",
+        "jsx": "react",
+        "allowSyntheticDefaultImports": true
+    },
+    "references": [
+        {
+            "path": "../bin"
+        }
+    ]
+}

package/src/lib/useFormValidationSlice.tsx

@@ -1,30 +1,29 @@
 import "./tools/Array.prototype.every";
-import { useMemo, useReducer, Fragment } from "react";
+import React, { useMemo, useReducer, Fragment } from "react";
 import type { KcContextBase, Validators, Attribute } from "./getKcContext/KcContextBase";
-import type { KcLanguageTag } from "./i18n";
+import type { I18n, MessageKeyBase } from "./i18n";
 import { useConstCallback } from "powerhooks/useConstCallback";
 import { id } from "tsafe/id";
-import type { I18n, MessageKey } from "./i18n";
 import { emailRegexp } from "./tools/emailRegExp";
 
+/** Expect to be used in a component wrapped within a <I18nProvider> */
 export function useGetErrors(params: {
     kcContext: {
         messagesPerField: Pick<KcContextBase.Common["messagesPerField"], "existsError" | "get">;
         profile: {
             attributes: { name: string; value?: string; validators: Validators }[];
         };
-        locale?: { currentLanguageTag: KcLanguageTag };
     };
-    useI18n: () => I18n;
+    i18n: I18n;
 }) {
-    const { kcContext, useI18n } = params;
+    const { kcContext, i18n } = params;
 
     const {
         messagesPerField,
-        profile: { attributes },
+        profile: { attributes }
     } = kcContext;
 
-    const { msg, msgStr, advancedMsg, advancedMsgStr } = useI18n();
+    const { msg, msgStr, advancedMsg, advancedMsgStr } = i18n;
 
     const getErrors = useConstCallback((params: { name: string; fieldValueByAttributeName: Record<string, { value: string }> }) => {
         const { name, fieldValueByAttributeName } = params;
@@ -56,8 +55,8 @@ export function useGetErrors(params: {
                 {
                     "validatorName": undefined,
                     errorMessageStr,
-                    "errorMessage": <span key={0}>{errorMessageStr}</span>,
-                },
+                    "errorMessage": <span key={0}>{errorMessageStr}</span>
+                }
             ];
         }
 
@@ -88,7 +87,7 @@ export function useGetErrors(params: {
                 errors.push({
                     "errorMessage": <Fragment key={errors.length}>{msg(...msgArgs)}</Fragment>,
                     "errorMessageStr": msgStr(...msgArgs),
-                    validatorName,
+                    validatorName
                 });
             }
 
@@ -98,7 +97,7 @@ export function useGetErrors(params: {
                 errors.push({
                     "errorMessage": <Fragment key={errors.length}>{msg(...msgArgs)}</Fragment>,
                     "errorMessageStr": msgStr(...msgArgs),
-                    validatorName,
+                    validatorName
                 });
             }
         }
@@ -135,7 +134,7 @@ export function useGetErrors(params: {
 
             const msgArg = [
                 errorMessageKey ??
-                    id<MessageKey>(
+                    id<MessageKeyBase>(
                         (() => {
                             switch (shouldBe) {
                                 case "equal":
@@ -143,17 +142,17 @@ export function useGetErrors(params: {
                                 case "different":
                                     return "shouldBeDifferent";
                             }
-                        })(),
+                        })()
                     ),
                 otherName,
                 name,
-                shouldBe,
+                shouldBe
             ] as const;
 
             errors.push({
                 validatorName,
                 "errorMessage": <Fragment key={errors.length}>{advancedMsg(...msgArg)}</Fragment>,
-                "errorMessageStr": advancedMsgStr(...msgArg),
+                "errorMessageStr": advancedMsgStr(...msgArg)
             });
         }
 
@@ -176,12 +175,12 @@ export function useGetErrors(params: {
                 break scope;
             }
 
-            const msgArgs = [errorMessageKey ?? id<MessageKey>("shouldMatchPattern"), pattern] as const;
+            const msgArgs = [errorMessageKey ?? id<MessageKeyBase>("shouldMatchPattern"), pattern] as const;
 
             errors.push({
                 validatorName,
                 "errorMessage": <Fragment key={errors.length}>{advancedMsg(...msgArgs)}</Fragment>,
-                "errorMessageStr": advancedMsgStr(...msgArgs),
+                "errorMessageStr": advancedMsgStr(...msgArgs)
             });
         }
 
@@ -208,12 +207,12 @@ export function useGetErrors(params: {
                 break scope;
             }
 
-            const msgArgs = [id<MessageKey>("invalidEmailMessage")] as const;
+            const msgArgs = [id<MessageKeyBase>("invalidEmailMessage")] as const;
 
             errors.push({
                 validatorName,
                 "errorMessage": <Fragment key={errors.length}>{msg(...msgArgs)}</Fragment>,
-                "errorMessageStr": msgStr(...msgArgs),
+                "errorMessageStr": msgStr(...msgArgs)
             });
         }
 
@@ -240,7 +239,7 @@ export function useGetErrors(params: {
                 errors.push({
                     validatorName,
                     "errorMessage": <Fragment key={errors.length}>{msg(...msgArgs)}</Fragment>,
-                    "errorMessageStr": msgStr(...msgArgs),
+                    "errorMessageStr": msgStr(...msgArgs)
                 });
 
                 break scope;
@@ -252,7 +251,7 @@ export function useGetErrors(params: {
                 errors.push({
                     validatorName,
                     "errorMessage": <Fragment key={errors.length}>{msg(...msgArgs)}</Fragment>,
-                    "errorMessageStr": msgStr(...msgArgs),
+                    "errorMessageStr": msgStr(...msgArgs)
                 });
 
                 break scope;
@@ -264,7 +263,7 @@ export function useGetErrors(params: {
                 errors.push({
                     validatorName,
                     "errorMessage": <Fragment key={errors.length}>{msg(...msgArgs)}</Fragment>,
-                    "errorMessageStr": msgStr(...msgArgs),
+                    "errorMessageStr": msgStr(...msgArgs)
                 });
 
                 break scope;
@@ -288,12 +287,12 @@ export function useGetErrors(params: {
                 break scope;
             }
 
-            const msgArgs = [id<MessageKey>("notAValidOption")] as const;
+            const msgArgs = [id<MessageKeyBase>("notAValidOption")] as const;
 
             errors.push({
                 validatorName,
                 "errorMessage": <Fragment key={errors.length}>{advancedMsg(...msgArgs)}</Fragment>,
-                "errorMessageStr": advancedMsgStr(...msgArgs),
+                "errorMessageStr": advancedMsgStr(...msgArgs)
             });
         }
 
@@ -314,19 +313,19 @@ export function useFormValidationSlice(params: {
         passwordRequired: boolean;
         realm: { registrationEmailAsUsername: boolean };
     };
-    useI18n: () => I18n;
     /** NOTE: Try to avoid passing a new ref every render for better performances. */
     passwordValidators?: Validators;
+    i18n: I18n;
 }) {
     const {
         kcContext,
-        useI18n,
         passwordValidators = {
             "length": {
                 "ignore.empty.value": true,
-                "min": "4",
-            },
+                "min": "4"
+            }
         },
+        i18n
     } = params;
 
     const attributesWithPassword = useMemo(
@@ -345,17 +344,17 @@ export function useFormValidationSlice(params: {
                                         curr,
                                         id<Attribute>({
                                             "name": "password",
-                                            "displayName": id<`\${${MessageKey}}`>("${password}"),
+                                            "displayName": id<`\${${MessageKeyBase}}`>("${password}"),
                                             "required": true,
                                             "readOnly": false,
                                             "validators": passwordValidators,
                                             "annotations": {},
                                             "groupAnnotations": {},
-                                            "autocomplete": "new-password",
+                                            "autocomplete": "new-password"
                                         }),
                                         id<Attribute>({
                                             "name": "password-confirm",
-                                            "displayName": id<`\${${MessageKey}}`>("${passwordConfirm}"),
+                                            "displayName": id<`\${${MessageKeyBase}}`>("${passwordConfirm}"),
                                             "required": true,
                                             "readOnly": false,
                                             "validators": {
@@ -363,29 +362,29 @@ export function useFormValidationSlice(params: {
                                                     "name": "password",
                                                     "ignore.empty.value": true,
                                                     "shouldBe": "equal",
-                                                    "error-message": id<`\${${MessageKey}}`>("${invalidPasswordConfirmMessage}"),
-                                                },
+                                                    "error-message": id<`\${${MessageKeyBase}}`>("${invalidPasswordConfirmMessage}")
+                                                }
                                             },
                                             "annotations": {},
                                             "groupAnnotations": {},
-                                            "autocomplete": "new-password",
-                                        }),
-                                    ]),
+                                            "autocomplete": "new-password"
+                                        })
+                                    ])
                           ],
-                          [],
+                          []
                       );
                   })(),
-        [kcContext, passwordValidators],
+        [kcContext, passwordValidators]
     );
 
     const { getErrors } = useGetErrors({
         "kcContext": {
             "messagesPerField": kcContext.messagesPerField,
             "profile": {
-                "attributes": attributesWithPassword,
-            },
+                "attributes": attributesWithPassword
+            }
         },
-        useI18n,
+        i18n
     });
 
     const initialInternalState = useMemo(
@@ -397,20 +396,20 @@ export function useFormValidationSlice(params: {
                         "errors": getErrors({
                             "name": attribute.name,
                             "fieldValueByAttributeName": Object.fromEntries(
-                                attributesWithPassword.map(({ name, value }) => [name, { "value": value ?? "" }]),
-                            ),
-                        }),
+                                attributesWithPassword.map(({ name, value }) => [name, { "value": value ?? "" }])
+                            )
+                        })
                     }))
                     .map(({ attribute, errors }) => [
                         attribute.name,
                         {
                             "value": attribute.value ?? "",
                             errors,
-                            "doDisplayPotentialErrorMessages": errors.length !== 0,
-                        },
-                    ]),
+                            "doDisplayPotentialErrorMessages": errors.length !== 0
+                        }
+                    ])
             ),
-        [attributesWithPassword],
+        [attributesWithPassword]
     );
 
     type InternalState = typeof initialInternalState;
@@ -427,7 +426,7 @@ export function useFormValidationSlice(params: {
                 | {
                       action: "focus lost";
                       name: string;
-                  },
+                  }
         ): InternalState => ({
             ...state,
             [params.name]: {
@@ -443,15 +442,15 @@ export function useFormValidationSlice(params: {
                                     "name": params.name,
                                     "fieldValueByAttributeName": {
                                         ...state,
-                                        [params.name]: { "value": params.newValue },
-                                    },
-                                }),
+                                        [params.name]: { "value": params.newValue }
+                                    }
+                                })
                             };
                     }
-                })(),
-            },
+                })()
+            }
         }),
-        initialInternalState,
+        initialInternalState
     );
 
     const formValidationState = useMemo(
@@ -459,15 +458,15 @@ export function useFormValidationSlice(params: {
             "fieldStateByAttributeName": Object.fromEntries(
                 Object.entries(formValidationInternalState).map(([name, { value, errors, doDisplayPotentialErrorMessages }]) => [
                     name,
-                    { value, "displayableErrors": doDisplayPotentialErrorMessages ? errors : [] },
-                ]),
+                    { value, "displayableErrors": doDisplayPotentialErrorMessages ? errors : [] }
+                ])
             ),
             "isFormSubmittable": Object.entries(formValidationInternalState).every(
                 ([name, { value, errors }]) =>
-                    errors.length === 0 && (value !== "" || !attributesWithPassword.find(attribute => attribute.name === name)!.required),
-            ),
+                    errors.length === 0 && (value !== "" || !attributesWithPassword.find(attribute => attribute.name === name)!.required)
+            )
         }),
-        [formValidationInternalState, attributesWithPassword],
+        [formValidationInternalState, attributesWithPassword]
     );
 
     return { formValidationState, formValidationReducer, attributesWithPassword };

package/src/test/bin/generateKeycloakThemeResources.ts

@@ -0,0 +1,19 @@
+import { join as pathJoin } from "path";
+import { generateKeycloakThemeResources } from "../../bin/keycloakify/generateKeycloakThemeResources";
+import { setupSampleReactProject, sampleReactProjectDirPath } from "./setupSampleReactProject";
+
+setupSampleReactProject();
+
+generateKeycloakThemeResources({
+    "reactAppBuildDirPath": pathJoin(sampleReactProjectDirPath, "build"),
+    "keycloakThemeBuildingDirPath": pathJoin(sampleReactProjectDirPath, "build_keycloak_theme"),
+    "keycloakThemeEmailDirPath": pathJoin(sampleReactProjectDirPath, "keycloak_email"),
+    "keycloakVersion": "11.0.3",
+    "buildOptions": {
+        "themeName": "keycloakify-demo-app",
+        "extraPages": ["my-custom-page.ftl"],
+        "extraThemeProperties": ["env=test"],
+        "isStandalone": true,
+        "urlPathname": "/keycloakify-demo-app/"
+    }
+});

package/src/test/bin/index.ts

@@ -0,0 +1 @@
+import "./replaceImportFromStatic";

package/src/test/bin/main.ts

@@ -0,0 +1,17 @@
+import "./replaceImportFromStatic";
+import { setupSampleReactProject, sampleReactProjectDirPath } from "./setupSampleReactProject";
+import * as st from "scripting-tools";
+import { join as pathJoin } from "path";
+import { getProjectRoot } from "../../bin/tools/getProjectRoot.js";
+
+setupSampleReactProject();
+
+const binDirPath = pathJoin(getProjectRoot(), "dist_test", "bin");
+
+st.execSyncTrace(
+    //`node ${pathJoin(binDirPath, "keycloakify")} --external-assets`,
+    `node ${pathJoin(binDirPath, "keycloakify")}`,
+    { "cwd": sampleReactProjectDirPath }
+);
+
+st.execSyncTrace(`node ${pathJoin(binDirPath, "download-builtin-keycloak-theme")}`, { "cwd": sampleReactProjectDirPath });