Update changelog v4.2.0

Changes wget to curl because curl is awesome. -L is to follow the GitHub redirects.

CHANGELOG.md

@@ -1,3 +1,24 @@
+## **4.2.0** (2021-10-26)  
+  
+- Export types definitions for Attribue and Validator    
+  
+## **4.1.0** (2021-10-26)  
+  
+- Document what's new in v4    
+  
+# **4.0.0** (2021-10-26)  
+  
+- fix RegisterUserProfile password confirmation field  
+- Much better support for frontend field validation  
+- Fix css injection order  
+- Makes the download output predictable. This fixes the case where GitHub redirects and wget was trying to download a filename called "15.0.2", and then unzip wouldn't pick it up.
+Changes wget to curl because curl is awesome. -L is to follow the GitHub redirects.  
+- Remove duplicates    
+  
+### **3.0.2** (2021-10-18)  
+  
+- Scan deeper to retreive user attribute    
+  
 ### **3.0.1** (2021-10-17)  
   
 - Add client.description in type kcContext type def    

README.md

@@ -20,30 +20,10 @@
     <img src="https://user-images.githubusercontent.com/6702424/110260457-a1c3d380-7fac-11eb-853a-80459b65626b.png">
 </p>
 
-**NEW in v3**
+**NEW in v4**
 
-No breaking changes except that `@emotion/react`, [`tss-react`](https://www.npmjs.com/package/tss-react) and [`powerhooks`](https://www.npmjs.com/package/powerhooks) are now `peerDependencies` instead of being just dependencies.  
-It's important to avoid problem when using `keycloakify` alongside [`mui`](https://mui.com) and
-[when passing params from the app to the login page](https://github.com/InseeFrLab/keycloakify#implement-context-persistence-optional).
-
-**NEW in v2.5**
-
--   User Profile ([`register-user-profile.ftl`](https://github.com/InseeFrLab/keycloakify/blob/main/src/lib/components/RegisterUserProfile.tsx))
-    is now supported! 🎉  
-    It enables to [define, from the admin console](https://user-images.githubusercontent.com/6702424/136872461-1f5b64ef-d2ef-4c6b-bb8d-07d4729552b3.png),
-    what information you want to collect on your users in the register page and to validate inputs
-    [**on the frontend**, in realtime](https://github.com/InseeFrLab/keycloakify/blob/6dca6a93d8cfe634ee4d8574ad0c091641220092/src/lib/getKcContext/KcContextBase.ts#L225-L261)!  
-    NOTE: User profile is only available in Keycloak 15 and it's a beta feature that
-    [needs to be enabled when launching keycloak](https://github.com/InseeFrLab/keycloakify/blob/59f106bf9e210b63b190826da2bf5f75fc8b7644/src/bin/build-keycloak-theme/build-keycloak-theme.ts#L116-L117) and [enabled in the console](https://user-images.githubusercontent.com/6702424/136874428-b071d614-c7f7-440d-9b2e-670faadc0871.png).
--   Feature [Use advanced message](https://github.com/InseeFrLab/keycloakify/blob/59f106bf9e210b63b190826da2bf5f75fc8b7644/src/lib/i18n/useKcMessage.tsx#L53-L66)
-    and [`messagesPerFields`](https://github.com/InseeFrLab/keycloakify/blob/59f106bf9e210b63b190826da2bf5f75fc8b7644/src/lib/getKcContext/KcContextBase.ts#L70-L75) (implementation [here](https://github.com/InseeFrLab/keycloakify/blob/59f106bf9e210b63b190826da2bf5f75fc8b7644/src/bin/build-keycloak-theme/generateFtl/common.ftl#L130-L189))
--   Test container now uses Keycloak version `15.0.2`.
-
-**NEW in v2**
-
--   It's now possible to implement custom `.ftl` pages.
--   Support for Keycloak plugins that introduce non standard ftl values.
-    (Like for example [this plugin](https://github.com/micedre/keycloak-mail-whitelisting) that define `authorizedMailDomains` in `register.ftl`).
+-   Out of the box [frontend form validation](#user-profile-and-frontend-form-validation) 🥳
+-   Improvements (and breaking changes in `import { useKcMessage } from "keycloakify"`.
 
 # Motivations
 
@@ -85,6 +65,7 @@ If you already have a Keycloak custom theme, it can be easily ported to Keycloak
         -   [Advanced pages configuration](#advanced-pages-configuration)
         -   [Hot reload](#hot-reload)
     -   [Enable loading in a blink of an eye of login pages ⚡ (--external-assets)](#enable-loading-in-a-blink-of-an-eye-of-login-pages----external-assets)
+-   [User profile and frontend form validation](#user-profile-and-frontend-form-validation)
 -   [Support for Terms and conditions](#support-for-terms-and-conditions)
 -   [Some pages still have the default theme. Why?](#some-pages-still-have-the-default-theme-why)
 -   [GitHub Actions](#github-actions)
@@ -98,6 +79,11 @@ If you already have a Keycloak custom theme, it can be easily ported to Keycloak
 -   [About the errors related to `objectToJson` in Keycloak logs.](#about-the-errors-related-to-objecttojson-in-keycloak-logs)
 -   [Adding custom message (to `i18n/useKcMessage.tsx`)](#adding-custom-message-to-i18nusekcmessagetsx)
 -   [Email domain whitelist](#email-domain-whitelist)
+-   [Changelog highlights](#changelog-highlights)
+    -   [v4](#v4)
+    -   [v3](#v3)
+    -   [v2.5](#v25)
+    -   [v2](#v2)
 
 # Requirements
 
@@ -117,7 +103,7 @@ For more information see [this issue](https://github.com/InseeFrLab/keycloakify/
 
 **All this is defaults with [`create-react-app`](https://create-react-app.dev)** (tested with 4.0.3)
 
--   `mvn` ([Maven](https://maven.apache.org/)), `rm`, `mkdir`, `wget`, `unzip` are assumed to be available.
+-   `mvn` ([Maven](https://maven.apache.org/)), `rm`, `mkdir`, `curl`, `unzip` are assumed to be available.
 -   `docker` must be up and running when running `yarn keycloak`.
 
 On Windows you'll have to use [WSL](https://docs.microsoft.com/en-us/windows/wsl/install-win10).
@@ -313,6 +299,29 @@ performance boost if you jump through those hoops:
 
 Checkout a complete setup [here](https://github.com/garronej/keycloakify-demo-app#about-keycloakify)
 
+# User profile and frontend form validation
+
+<p align="center">
+    <a href="https://github.com/InseeFrLab/keycloakify/releases/download/v0.0.1/keycloakify_fontend_validation.mp4">
+        <img src="https://user-images.githubusercontent.com/6702424/138880146-6fef3280-c4a5-46d2-bbb3-8b9598c057a5.gif">
+    </a>
+</p>
+
+User Profile is a Keycloak feature that enables to
+[define, from the admin console](https://user-images.githubusercontent.com/6702424/136872461-1f5b64ef-d2ef-4c6b-bb8d-07d4729552b3.png),
+what information you want to collect on your users in the register page and to validate inputs
+[**on the frontend**, in realtime](https://github.com/InseeFrLab/keycloakify/blob/6dca6a93d8cfe634ee4d8574ad0c091641220092/src/lib/getKcContext/KcContextBase.ts#L225-L261)!
+
+NOTE: User profile is only available in Keycloak 15 and it's a beta feature that
+[needs to be enabled when launching keycloak](https://github.com/InseeFrLab/keycloakify/blob/59f106bf9e210b63b190826da2bf5f75fc8b7644/src/bin/build-keycloak-theme/build-keycloak-theme.ts#L116-L117)
+and [enabled in the console](https://user-images.githubusercontent.com/6702424/136874428-b071d614-c7f7-440d-9b2e-670faadc0871.png).
+
+Keycloakify, in [`register-user-profile.ftl`](https://github.com/InseeFrLab/keycloakify/blob/main/src/lib/components/RegisterUserProfile.tsx),
+provides frontend validation out of the box.
+
+For implementing your own `register-user-profile.ftl` page, you can use [`import { useFormValidationSlice } from "keycloakify";`](https://github.com/InseeFrLab/keycloakify/blob/main/src/lib/useFormValidationSlice.tsx).  
+Find usage example [`here`](https://github.com/InseeFrLab/keycloakify/blob/d3a07edfcb3739e30032dc96fc2a55944dfc3387/src/lib/components/RegisterUserProfile.tsx#L79-L112).
+
 # Support for Terms and conditions
 
 [Many organizations have a requirement that when a new user logs in for the first time, they need to agree to the terms and conditions of the website.](https://www.keycloak.org/docs/4.8/server_admin/#terms-and-conditions).
@@ -455,3 +464,28 @@ This approach is a bit hacky as it doesn't provide type safety but it works.
 
 If you want to restrict the emails domain that can register, you can use [this plugin](https://github.com/micedre/keycloak-mail-whitelisting)
 and `kcRegisterContext["authorizedMailDomains"]` to validate on.
+
+# Changelog highlights
+
+## v4
+
+-   Out of the box [frontend form validation](#user-profile-and-frontend-form-validation) 🥳
+-   Improvements (and breaking changes in `import { useKcMessage } from "keycloakify"`.
+
+## v3
+
+No breaking changes except that `@emotion/react`, [`tss-react`](https://www.npmjs.com/package/tss-react) and [`powerhooks`](https://www.npmjs.com/package/powerhooks) are now `peerDependencies` instead of being just dependencies.  
+It's important to avoid problem when using `keycloakify` alongside [`mui`](https://mui.com) and
+[when passing params from the app to the login page](https://github.com/InseeFrLab/keycloakify#implement-context-persistence-optional).
+
+## v2.5
+
+-   Feature [Use advanced message](https://github.com/InseeFrLab/keycloakify/blob/59f106bf9e210b63b190826da2bf5f75fc8b7644/src/lib/i18n/useKcMessage.tsx#L53-L66)
+    and [`messagesPerFields`](https://github.com/InseeFrLab/keycloakify/blob/59f106bf9e210b63b190826da2bf5f75fc8b7644/src/lib/getKcContext/KcContextBase.ts#L70-L75) (implementation [here](https://github.com/InseeFrLab/keycloakify/blob/59f106bf9e210b63b190826da2bf5f75fc8b7644/src/bin/build-keycloak-theme/generateFtl/common.ftl#L130-L189))
+-   Test container now uses Keycloak version `15.0.2`.
+
+## v2
+
+-   It's now possible to implement custom `.ftl` pages.
+-   Support for Keycloak plugins that introduce non standard ftl values.
+    (Like for example [this plugin](https://github.com/micedre/keycloak-mail-whitelisting) that define `authorizedMailDomains` in `register.ftl`).

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "3.0.1",
+    "version": "4.2.0",
     "description": "Keycloak theme generator for Reacts app",
     "repository": {
         "type": "git",
@@ -55,25 +55,25 @@
     ],
     "homepage": "https://github.com/garronej/keycloakify",
     "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "powerhooks": "^0.11.0",
         "react": "^16.8.0 || ^17.0.0",
-        "tss-react": "^1.1.0",
-        "powerhooks": "^0.9.6",
-        "@emotion/react": "^11.4.1"
+        "tss-react": "^1.1.0"
     },
     "devDependencies": {
-        "tss-react": "^1.1.0",
         "@emotion/react": "^11.4.1",
-        "powerhooks": "^0.9.6",
         "@types/node": "^10.0.0",
         "@types/react": "^17.0.0",
         "copyfiles": "^2.4.1",
+        "husky": "^4.3.8",
+        "lint-staged": "^11.0.0",
+        "powerhooks": "^0.11.0",
+        "prettier": "^2.3.0",
         "properties-parser": "^0.3.1",
         "react": "^17.0.1",
         "rimraf": "^3.0.2",
-        "typescript": "^4.2.3",
-        "husky": "^4.3.8",
-        "lint-staged": "^11.0.0",
-        "prettier": "^2.3.0"
+        "tss-react": "^1.1.0",
+        "typescript": "^4.2.3"
     },
     "dependencies": {
         "cheerio": "^1.0.0-rc.5",

src/bin/build-keycloak-theme/generateFtl/common.ftl

@@ -40,7 +40,7 @@
                     <#continue>
                 </#attempt>
 
-                <#if depth gt 4>
+                <#if depth gt 7>
                     /* Avoid calling recustively too many times depth: ${depth}, key: ${key} */
                     <#continue>
                 </#if>

src/bin/tools/downloadAndUnzip.ts

@@ -1,7 +1,7 @@
 import { basename as pathBasename, join as pathJoin } from "path";
 import { execSync } from "child_process";
 import fs from "fs";
-import { transformCodebase } from "../tools/transformCodebase";
+import { transformCodebase } from "./transformCodebase";
 import { rm_rf, rm, rm_r } from "./rm";
 
 /** assert url ends with .zip */
@@ -9,14 +9,15 @@ export function downloadAndUnzip(params: { url: string; destDirPath: string; pat
     const { url, destDirPath, pathOfDirToExtractInArchive } = params;
 
     const tmpDirPath = pathJoin(destDirPath, "..", "tmp_xxKdOxnEdx");
+    const zipFilePath = pathBasename(url);
 
     rm_rf(tmpDirPath);
 
     fs.mkdirSync(tmpDirPath, { "recursive": true });
 
-    execSync(`wget ${url}`, { "cwd": tmpDirPath });
+    execSync(`curl -L ${url} -o ${zipFilePath}`, { "cwd": tmpDirPath });
 
-    execSync(`unzip ${pathBasename(url)}${pathOfDirToExtractInArchive === undefined ? "" : ` "${pathOfDirToExtractInArchive}/*"`}`, {
+    execSync(`unzip ${zipFilePath}${pathOfDirToExtractInArchive === undefined ? "" : ` "${pathOfDirToExtractInArchive}/*"`}`, {
         "cwd": tmpDirPath,
     });
 

src/lib/components/KcProps.ts

@@ -20,16 +20,12 @@ export type KcTemplateClassKey =
     | "kcLocaleWrapperClass"
     | "kcContentWrapperClass"
     | "kcLabelWrapperClass"
-    | "kcContentWrapperClass"
-    | "kcLabelWrapperClass"
     | "kcFormGroupClass"
     | "kcResetFlowIcon"
-    | "kcResetFlowIcon"
     | "kcFeedbackSuccessIcon"
     | "kcFeedbackWarningIcon"
     | "kcFeedbackErrorIcon"
     | "kcFeedbackInfoIcon"
-    | "kcContentWrapperClass"
     | "kcFormSocialAccountContentClass"
     | "kcFormSocialAccountClass"
     | "kcSignUpClass"

src/lib/components/LoginOtp.tsx

@@ -3,7 +3,7 @@ import { Template } from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { useKcMessage } from "../i18n/useKcMessage";
-import { appendHead } from "../tools/appendHead";
+import { headInsert } from "../tools/headInsert";
 import { join as pathJoin } from "path";
 import { useCssAndCx } from "tss-react";
 
@@ -17,7 +17,7 @@ export const LoginOtp = memo(({ kcContext, ...props }: { kcContext: KcContextBas
     useEffect(() => {
         let isCleanedUp = false;
 
-        appendHead({
+        headInsert({
             "type": "javascript",
             "src": pathJoin(kcContext.url.resourcesCommonPath, "node_modules/jquery/dist/jquery.min.js"),
         }).then(() => {

src/lib/components/RegisterUserProfile.tsx

@@ -1,17 +1,29 @@
-import { memo, Fragment } from "react";
+import { useMemo, memo, useEffect, useState, Fragment } from "react";
 import { Template } from "./Template";
 import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
+import type { KcContextBase, Attribute } from "../getKcContext/KcContextBase";
 import { useKcMessage } from "../i18n/useKcMessage";
 import { useCssAndCx } from "tss-react";
 import type { ReactComponent } from "../tools/ReactComponent";
+import { useCallbackFactory } from "powerhooks/useCallbackFactory";
+import { useFormValidationSlice } from "../useFormValidationSlice";
 
-export const RegisterUserProfile = memo(({ kcContext, ...props }: { kcContext: KcContextBase.RegisterUserProfile } & KcProps) => {
-    const { url, messagesPerField, realm, passwordRequired, recaptchaRequired, recaptchaSiteKey } = kcContext;
+export const RegisterUserProfile = memo(({ kcContext, ...props_ }: { kcContext: KcContextBase.RegisterUserProfile } & KcProps) => {
+    const { url, messagesPerField, recaptchaRequired, recaptchaSiteKey } = kcContext;
 
     const { msg, msgStr } = useKcMessage();
 
-    const { cx } = useCssAndCx();
+    const { cx, css } = useCssAndCx();
+
+    const props = useMemo(
+        () => ({
+            ...props_,
+            "kcFormGroupClass": cx(props_.kcFormGroupClass, css({ "marginBottom": 20 })),
+        }),
+        [cx, css],
+    );
+
+    const [isFomSubmittable, setIsFomSubmittable] = useState(false);
 
     return (
         <Template
@@ -22,71 +34,7 @@ export const RegisterUserProfile = memo(({ kcContext, ...props }: { kcContext: K
             headerNode={msg("registerTitle")}
             formNode={
                 <form id="kc-register-form" className={cx(props.kcFormClass)} action={url.registrationAction} method="post">
-                    <UserProfileFormFields
-                        kcContext={kcContext}
-                        {...props}
-                        AfterField={({ attribute }) =>
-                            /*render password fields just under the username or email (if used as username)*/
-                            (passwordRequired &&
-                                (attribute.name == "username" || (attribute.name == "email" && realm.registrationEmailAsUsername)) && (
-                                    <>
-                                        <div className={cx(props.kcFormGroupClass)}>
-                                            <div className={cx(props.kcLabelWrapperClass)}>
-                                                <label htmlFor="password" className={cx(props.kcLabelClass)}>
-                                                    {msg("password")}
-                                                </label>{" "}
-                                                *
-                                            </div>
-                                            <div className={cx(props.kcInputWrapperClass)}>
-                                                <input
-                                                    type="password"
-                                                    id="password"
-                                                    className={cx(props.kcInputClass)}
-                                                    name="password"
-                                                    autoComplete="new-password"
-                                                    aria-invalid={
-                                                        messagesPerField.existsError("password") || messagesPerField.existsError("password-confirm")
-                                                    }
-                                                />
-                                                {messagesPerField.existsError("password") && (
-                                                    <span id="input-error-password" className={cx(props.kcInputErrorMessageClass)} aria-live="polite">
-                                                        {messagesPerField.get("password")}
-                                                    </span>
-                                                )}
-                                            </div>
-                                        </div>
-                                        <div className={cx(props.kcFormGroupClass)}>
-                                            <div className={cx(props.kcLabelWrapperClass)}>
-                                                <label htmlFor="password-confirm" className={cx(props.kcLabelClass)}>
-                                                    {msg("passwordConfirm")}
-                                                </label>{" "}
-                                                *
-                                            </div>
-                                            <div className={cx(props.kcInputWrapperClass)}>
-                                                <input
-                                                    type="password"
-                                                    id="password-confirm"
-                                                    className={cx(props.kcInputClass)}
-                                                    name="password-confirm"
-                                                    autoComplete="new-password"
-                                                    aria-invalid={messagesPerField.existsError("password-confirm")}
-                                                />
-                                                {messagesPerField.existsError("password-confirm") && (
-                                                    <span
-                                                        id="input-error-password-confirm"
-                                                        className={cx(props.kcInputErrorMessageClass)}
-                                                        aria-live="polite"
-                                                    >
-                                                        {messagesPerField.get("password-confirm")}
-                                                    </span>
-                                                )}
-                                            </div>
-                                        </div>
-                                    </>
-                                )) ||
-                            null
-                        }
-                    />
+                    <UserProfileFormFields kcContext={kcContext} onIsFormSubmittableValueChange={setIsFomSubmittable} {...props} />
                     {recaptchaRequired && (
                         <div className="form-group">
                             <div className={cx(props.kcInputWrapperClass)}>
@@ -108,6 +56,7 @@ export const RegisterUserProfile = memo(({ kcContext, ...props }: { kcContext: K
                                 className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonBlockClass, props.kcButtonLargeClass)}
                                 type="submit"
                                 value={msgStr("doRegister")}
+                                disabled={!isFomSubmittable}
                             />
                         </div>
                     </div>
@@ -117,85 +66,141 @@ export const RegisterUserProfile = memo(({ kcContext, ...props }: { kcContext: K
     );
 });
 
-const UserProfileFormFields = memo(
-    ({
+type UserProfileFormFieldsProps = { kcContext: KcContextBase.RegisterUserProfile } & KcProps &
+    Partial<Record<"BeforeField" | "AfterField", ReactComponent<{ attribute: Attribute }>>> & {
+        onIsFormSubmittableValueChange: (isFormSubmittable: boolean) => void;
+    };
+
+const UserProfileFormFields = memo(({ kcContext, onIsFormSubmittableValueChange, ...props }: UserProfileFormFieldsProps) => {
+    const { cx, css } = useCssAndCx();
+
+    const { advancedMsg } = useKcMessage();
+
+    const {
+        formValidationState: { fieldStateByAttributeName, isFormSubmittable },
+        formValidationReducer,
+        attributesWithPassword,
+    } = useFormValidationSlice({
         kcContext,
-        BeforeField = () => null,
-        AfterField = () => null,
-        ...props
-    }: { kcContext: KcContextBase.RegisterUserProfile } & KcProps &
-        Partial<
-            Record<
-                "BeforeField" | "AfterField",
-                ReactComponent<{
-                    attribute: KcContextBase.RegisterUserProfile["profile"]["attributes"][number];
-                }>
-            >
-        >) => {
-        const { messagesPerField } = kcContext;
+    });
 
-        const { cx } = useCssAndCx();
+    useEffect(() => {
+        onIsFormSubmittableValueChange(isFormSubmittable);
+    }, [isFormSubmittable]);
 
-        const { advancedMsg } = useKcMessage();
+    const onChangeFactory = useCallbackFactory(
+        (
+            [name]: [string],
+            [
+                {
+                    target: { value },
+                },
+            ]: [React.ChangeEvent<HTMLInputElement>],
+        ) =>
+            formValidationReducer({
+                "action": "update value",
+                name,
+                "newValue": value,
+            }),
+    );
 
-        let currentGroup = "";
+    const onBlurFactory = useCallbackFactory(([name]: [string]) =>
+        formValidationReducer({
+            "action": "focus lost",
+            name,
+        }),
+    );
 
-        return (
-            <>
-                {kcContext.profile.attributes
-                    .map(attribute => [attribute, attribute])
-                    .map(([attribute, { group = "", groupDisplayHeader = "", groupDisplayDescription = "" }], i) => (
-                        <Fragment key={i}>
-                            {group !== currentGroup && (currentGroup = group) !== "" && (
-                                <div className={cx(props.kcFormGroupClass)}>
-                                    <div className={cx(props.kcContentWrapperClass)}>
-                                        <label id={`header-${group}`} className={cx(props.kcFormGroupHeader)}>
-                                            {(groupDisplayHeader !== "" && advancedMsg(groupDisplayHeader)) || currentGroup}
+    let currentGroup = "";
+
+    return (
+        <>
+            {attributesWithPassword.map((attribute, i) => {
+                const { group = "", groupDisplayHeader = "", groupDisplayDescription = "" } = attribute;
+
+                const { value, displayableErrors } = fieldStateByAttributeName[attribute.name];
+
+                const formGroupClassName = cx(props.kcFormGroupClass, displayableErrors.length !== 0 && props.kcFormGroupErrorClass);
+
+                return (
+                    <Fragment key={i}>
+                        {group !== currentGroup && (currentGroup = group) !== "" && (
+                            <div className={formGroupClassName}>
+                                <div className={cx(props.kcContentWrapperClass)}>
+                                    <label id={`header-${group}`} className={cx(props.kcFormGroupHeader)}>
+                                        {advancedMsg(groupDisplayHeader) || currentGroup}
+                                    </label>
+                                </div>
+                                {groupDisplayDescription !== "" && (
+                                    <div className={cx(props.kcLabelWrapperClass)}>
+                                        <label id={`description-${group}`} className={`${cx(props.kcLabelClass)}`}>
+                                            {advancedMsg(groupDisplayDescription)}
                                         </label>
                                     </div>
-                                    {groupDisplayDescription !== "" && (
-                                        <div className={cx(props.kcLabelWrapperClass)}>
-                                            <label id={`description-${group}`} className={`${cx(props.kcLabelClass)}`}>
-                                                {advancedMsg(groupDisplayDescription) ?? ""}
-                                            </label>
-                                        </div>
-                                    )}
-                                </div>
-                            )}
-                            <BeforeField attribute={attribute} />
-                            <div className={cx(props.kcFormGroupClass)}>
-                                <div className={cx(props.kcLabelWrapperClass)}>
-                                    <label htmlFor={attribute.name} className={cx(props.kcLabelClass)}>
-                                        {advancedMsg(attribute.displayName ?? "")}
-                                    </label>
-                                    {attribute.required && <>*</>}
-                                </div>
-                                <div className={cx(props.kcInputWrapperClass)}>
-                                    <input
-                                        type="text"
-                                        id={attribute.name}
-                                        name={attribute.name}
-                                        defaultValue={attribute.value ?? ""}
-                                        className={cx(props.kcInputClass)}
-                                        aria-invalid={messagesPerField.existsError(attribute.name)}
-                                        disabled={attribute.readOnly}
-                                        {...(attribute.autocomplete === undefined
-                                            ? {}
-                                            : {
-                                                  "autoComplete": attribute.autocomplete,
-                                              })}
-                                    />
-                                    {kcContext.messagesPerField.existsError(attribute.name) && (
-                                        <span id={`input-error-${attribute.name}`} className={cx(props.kcInputErrorMessageClass)} aria-live="polite">
-                                            {messagesPerField.get(attribute.name)}
-                                        </span>
-                                    )}
-                                </div>
+                                )}
                             </div>
-                            <AfterField attribute={attribute} />
-                        </Fragment>
-                    ))}
-            </>
-        );
-    },
-);
+                        )}
+                        <div className={formGroupClassName}>
+                            <div className={cx(props.kcLabelWrapperClass)}>
+                                <label htmlFor={attribute.name} className={cx(props.kcLabelClass)}>
+                                    {advancedMsg(attribute.displayName ?? "")}
+                                </label>
+                                {attribute.required && <>*</>}
+                            </div>
+                            <div className={cx(props.kcInputWrapperClass)}>
+                                <input
+                                    autoComplete={(() => {
+                                        switch (attribute.name) {
+                                            case "password-confirm":
+                                            case "password":
+                                                return "new-password";
+                                            default:
+                                                return undefined;
+                                        }
+                                    })()}
+                                    type={(() => {
+                                        switch (attribute.name) {
+                                            case "password-confirm":
+                                            case "password":
+                                                return "password";
+                                            default:
+                                                return "text";
+                                        }
+                                    })()}
+                                    id={attribute.name}
+                                    name={attribute.name}
+                                    value={value}
+                                    onChange={onChangeFactory(attribute.name)}
+                                    className={cx(props.kcInputClass)}
+                                    aria-invalid={displayableErrors.length !== 0}
+                                    disabled={attribute.readOnly}
+                                    {...(attribute.autocomplete === undefined
+                                        ? {}
+                                        : {
+                                              "autoComplete": attribute.autocomplete,
+                                          })}
+                                    onBlur={onBlurFactory(attribute.name)}
+                                />
+                                {displayableErrors.length !== 0 && (
+                                    <span
+                                        id={`input-error-${attribute.name}`}
+                                        className={cx(
+                                            props.kcInputErrorMessageClass,
+                                            css({
+                                                "position": displayableErrors.length === 1 ? "absolute" : undefined,
+                                                "& > span": { "display": "block" },
+                                            }),
+                                        )}
+                                        aria-live="polite"
+                                    >
+                                        {displayableErrors.map(({ errorMessage }) => errorMessage)}
+                                    </span>
+                                )}
+                            </div>
+                        </div>
+                    </Fragment>
+                );
+            })}
+        </>
+    );
+});

src/lib/components/Template.tsx

@@ -8,7 +8,7 @@ import type { KcLanguageTag } from "../i18n/KcLanguageTag";
 import { getBestMatchAmongKcLanguageTag } from "../i18n/KcLanguageTag";
 import { getKcLanguageTagLabel } from "../i18n/KcLanguageTag";
 import { useCallbackFactory } from "powerhooks/useCallbackFactory";
-import { appendHead } from "../tools/appendHead";
+import { headInsert } from "../tools/headInsert";
 import { join as pathJoin } from "path";
 import { useConstCallback } from "powerhooks/useConstCallback";
 import type { KcTemplateProps } from "./KcProps";
@@ -92,12 +92,15 @@ export const Template = memo((props: TemplateProps) => {
             [
                 ...toArr(props.stylesCommon).map(relativePath => pathJoin(url.resourcesCommonPath, relativePath)),
                 ...toArr(props.styles).map(relativePath => pathJoin(url.resourcesPath, relativePath)),
-            ].map(href =>
-                appendHead({
-                    "type": "css",
-                    href,
-                }),
-            ),
+            ]
+                .reverse()
+                .map(href =>
+                    headInsert({
+                        "type": "css",
+                        href,
+                        "position": "prepend",
+                    }),
+                ),
         ).then(() => {
             if (isUnmounted) {
                 return;
@@ -107,7 +110,7 @@ export const Template = memo((props: TemplateProps) => {
         });
 
         toArr(props.scripts).forEach(relativePath =>
-            appendHead({
+            headInsert({
                 "type": "javascript",
                 "src": pathJoin(url.resourcesPath, relativePath),
             }),

src/lib/getKcContext/KcContextBase.ts

@@ -243,6 +243,12 @@ export type Validators = Partial<{
     "person-name-prohibited-characters": Validators.DoIgnoreEmpty & Validators.ErrorMessage;
     uri: Validators.DoIgnoreEmpty;
     "username-prohibited-characters": Validators.DoIgnoreEmpty & Validators.ErrorMessage;
+    /** Made up validator that only exists in Keycloakify */
+    _compareToOther: Validators.DoIgnoreEmpty &
+        Validators.ErrorMessage & {
+            name: string;
+            shouldBe: "equal" | "different";
+        };
 }>;
 
 export declare namespace Validators {
@@ -256,8 +262,8 @@ export declare namespace Validators {
 
     export type Range = {
         /** "0", "1", "2"... yeah I know, don't tell me */
-        min?: string;
-        max?: string;
+        min?: `${number}`;
+        max?: `${number}`;
     };
 }
 

src/lib/getKcContext/index.ts

@@ -1,2 +1,2 @@
-export type { KcContextBase } from "./KcContextBase";
+export type { KcContextBase, Attribute, Validators } from "./KcContextBase";
 export { getKcContext } from "./getKcContext";

src/lib/getKcContext/kcContextMocks/kcContextMocks.ts

@@ -210,6 +210,7 @@ export const kcContextMocks: KcContextBase[] = [
                                 "autocomplete": "username",
                                 "readOnly": false,
                                 "name": "username",
+                                "value": "xxxx",
                             },
                             {
                                 "validators": {
@@ -226,6 +227,10 @@ export const kcContextMocks: KcContextBase[] = [
                                     "email": {
                                         "ignore.empty.value": true,
                                     },
+                                    "pattern": {
+                                        "ignore.empty.value": true,
+                                        "pattern": "gmail\\.com$",
+                                    },
                                 },
                                 "displayName": "${email}",
                                 "annotations": {},

src/lib/i18n/kcMessages/login.ts

@@ -1,7 +1,27 @@
-import { kcMessages } from "../generated_kcMessages/15.0.2/login";
+import { kcMessages as kcMessagesBase } from "../generated_kcMessages/15.0.2/login";
 import { Evt } from "evt";
 import { objectKeys } from "tsafe/objectKeys";
 
+const kcMessages = {
+    ...kcMessagesBase,
+    "en": {
+        ...kcMessagesBase["en"],
+        "shouldBeEqual": "{0} should be equal to {1}",
+        "shouldBeDifferent": "{0} should be different to {1}",
+        "shouldMatchPattern": "Pattern should match: `/{0}/`",
+        "mustBeAnInteger": "Must be an integer",
+    },
+    "fr": {
+        ...kcMessagesBase["fr"],
+        /* spell-checker: disable */
+        "shouldBeEqual": "{0} doit être egale à {1}",
+        "shouldBeDifferent": "{0} doit être différent de {1}",
+        "shouldMatchPattern": "Dois respecter le schéma: `/{0}/`",
+        "mustBeAnInteger": "Doit être un nombre entiers",
+        /* spell-checker: enable */
+    },
+};
+
 export const evtTermsUpdated = Evt.asNonPostable(Evt.create<void>());
 
 (["termsText", "doAccept", "doDecline", "termsTitle"] as const).forEach(key =>

src/lib/i18n/useKcMessage.tsx

@@ -1,21 +1,95 @@
-import { useCallback, useReducer } from "react";
+import "minimal-polyfills/Object.fromEntries";
+import { useReducer } from "react";
 import { useKcLanguageTag } from "./useKcLanguageTag";
 import { kcMessages, evtTermsUpdated } from "./kcMessages/login";
 import { useEvt } from "evt/hooks";
 //NOTE for later: https://github.com/remarkjs/react-markdown/blob/236182ecf30bd89c1e5a7652acaf8d0bf81e6170/src/renderers.js#L7-L35
 import ReactMarkdown from "react-markdown";
-import { id } from "tsafe/id";
+import { useGuaranteedMemo } from "powerhooks/useGuaranteedMemo";
 
 export { kcMessages };
 
 export type MessageKey = keyof typeof kcMessages["en"];
 
+function resolveMsg<Key extends string, DoRenderMarkdown extends boolean>(props: {
+    key: Key;
+    args: (string | undefined)[];
+    kcLanguageTag: string;
+    doRenderMarkdown: DoRenderMarkdown;
+}): Key extends MessageKey ? (DoRenderMarkdown extends true ? JSX.Element : string) : undefined {
+    const { key, args, kcLanguageTag, doRenderMarkdown } = props;
+
+    let str = kcMessages[kcLanguageTag as any as "en"][key as MessageKey] ?? kcMessages["en"][key as MessageKey];
+
+    if (str === undefined) {
+        return undefined as any;
+    }
+
+    str = (() => {
+        const startIndex = str
+            .match(/(?<={)[0-9]+(?=})/g)
+            ?.map(g => parseInt(g))
+            .sort((a, b) => a - b)[0];
+
+        if (startIndex === undefined) {
+            return str;
+        }
+
+        args.forEach((arg, i) => {
+            if (arg === undefined) {
+                return;
+            }
+
+            str = str.replace(new RegExp(`\\{${i + startIndex}\\}`, "g"), arg);
+        });
+
+        return str;
+    })();
+
+    return (
+        doRenderMarkdown ? (
+            <ReactMarkdown allowDangerousHtml renderers={key === "termsText" ? undefined : { "paragraph": "span" }}>
+                {str}
+            </ReactMarkdown>
+        ) : (
+            str
+        )
+    ) as any;
+}
+
+function resolveMsgAdvanced<Key extends string, DoRenderMarkdown extends boolean>(props: {
+    key: Key;
+    args: (string | undefined)[];
+    kcLanguageTag: string;
+    doRenderMarkdown: DoRenderMarkdown;
+}): DoRenderMarkdown extends true ? JSX.Element : string {
+    const { key, args, kcLanguageTag, doRenderMarkdown } = props;
+
+    const match = key.match(/^\$\{([^{]+)\}$/);
+
+    const resolvedKey = match === null ? key : match[1];
+
+    const out = resolveMsg({
+        "key": resolvedKey,
+        args,
+        kcLanguageTag,
+        doRenderMarkdown,
+    });
+
+    return (out !== undefined ? out : match === null ? doRenderMarkdown ? <span>{key}</span> : key : undefined) as any;
+}
+
 /**
  * When the language is switched the page is reloaded, this may appear
  * as a bug as you might notice that the language successfully switch before
  * reload.
  * However we need to tell Keycloak that the user have changed the language
  * during login so we can retrieve the "local" field of the JWT encoded accessToken.
+ * https://user-images.githubusercontent.com/6702424/138096682-351bb61f-f24e-4caf-91b7-cca8cfa2cb58.mov
+ *
+ * advancedMsg("${access-denied}") === advancedMsg("access-denied") === msg("access-denied")
+ * advancedMsg("${not-a-message-key}") === advancedMsg(not-a-message-key") === "not-a-message-key"
+ *
  */
 export function useKcMessage() {
     const { kcLanguageTag } = useKcLanguageTag();
@@ -24,46 +98,17 @@ export function useKcMessage() {
 
     useEvt(ctx => evtTermsUpdated.attach(ctx, forceUpdate), []);
 
-    const msgStr = useCallback(
-        (key: MessageKey, ...args: (string | undefined)[]): string => {
-            let str: string = kcMessages[kcLanguageTag as any as "en"][key] ?? kcMessages["en"][key];
-
-            args.forEach((arg, i) => {
-                if (arg === undefined) {
-                    return;
-                }
-
-                str = str.replace(new RegExp(`\\{${i}\\}`, "g"), arg);
-            });
-
-            return str;
-        },
+    return useGuaranteedMemo(
+        () => ({
+            "msgStr": (key: MessageKey, ...args: (string | undefined)[]): string =>
+                resolveMsg({ key, args, kcLanguageTag, "doRenderMarkdown": false }),
+            "msg": (key: MessageKey, ...args: (string | undefined)[]): JSX.Element =>
+                resolveMsg({ key, args, kcLanguageTag, "doRenderMarkdown": true }),
+            "advancedMsg": <Key extends string>(key: Key, ...args: (string | undefined)[]): JSX.Element =>
+                resolveMsgAdvanced({ key, args, kcLanguageTag, "doRenderMarkdown": true }),
+            "advancedMsgStr": <Key extends string>(key: Key, ...args: (string | undefined)[]): string =>
+                resolveMsgAdvanced({ key, args, kcLanguageTag, "doRenderMarkdown": false }),
+        }),
         [kcLanguageTag, trigger],
     );
-
-    const msg = useCallback<(...args: Parameters<typeof msgStr>) => JSX.Element>(
-        (key, ...args) => (
-            <ReactMarkdown allowDangerousHtml renderers={key === "termsText" ? undefined : { "paragraph": "span" }}>
-                {msgStr(key, ...args)}
-            </ReactMarkdown>
-        ),
-        [msgStr],
-    );
-
-    const advancedMsg = useCallback(
-        (key: string): string | undefined => {
-            const match = key.match(/^\$\{([^{]+)\}$/);
-
-            const resolvedKey = match === null ? key : match[1];
-
-            const out =
-                id<Record<string, string | undefined>>(kcMessages[kcLanguageTag])[resolvedKey] ??
-                id<Record<string, string | undefined>>(kcMessages["en"])[resolvedKey];
-
-            return out !== undefined ? out : match === null ? key : undefined;
-        },
-        [msgStr],
-    );
-
-    return { msg, msgStr, advancedMsg };
 }

src/lib/index.ts

@@ -14,5 +14,6 @@ export * from "./components/Error";
 export * from "./components/LoginResetPassword";
 export * from "./components/LoginVerifyEmail";
 export * from "./keycloakJsAdapter";
+export * from "./useFormValidationSlice";
 
 export * from "./tools/assert";

src/lib/tools/Array.prototype.every.ts

@@ -0,0 +1,64 @@
+if (!Array.prototype.every) {
+    Array.prototype.every = function (callbackfn: any, thisArg: any) {
+        "use strict";
+        var T, k;
+
+        if (this == null) {
+            throw new TypeError("this is null or not defined");
+        }
+
+        // 1. Let O be the result of calling ToObject passing the this
+        //    value as the argument.
+        var O = Object(this);
+
+        // 2. Let lenValue be the result of calling the Get internal method
+        //    of O with the argument "length".
+        // 3. Let len be ToUint32(lenValue).
+        var len = O.length >>> 0;
+
+        // 4. If IsCallable(callbackfn) is false, throw a TypeError exception.
+        if (typeof callbackfn !== "function" && Object.prototype.toString.call(callbackfn) !== "[object Function]") {
+            throw new TypeError();
+        }
+
+        // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
+        if (arguments.length > 1) {
+            T = thisArg;
+        }
+
+        // 6. Let k be 0.
+        k = 0;
+
+        // 7. Repeat, while k < len
+        while (k < len) {
+            var kValue;
+
+            // a. Let Pk be ToString(k).
+            //   This is implicit for LHS operands of the in operator
+            // b. Let kPresent be the result of calling the HasProperty internal
+            //    method of O with argument Pk.
+            //   This step can be combined with c
+            // c. If kPresent is true, then
+            if (k in O) {
+                var testResult;
+                // i. Let kValue be the result of calling the Get internal method
+                //    of O with argument Pk.
+                kValue = O[k];
+
+                // ii. Let testResult be the result of calling the Call internal method
+                // of callbackfn with T as the this value if T is not undefined
+                // else is the result of calling callbackfn
+                // and argument list containing kValue, k, and O.
+                if (T) testResult = callbackfn.call(T, kValue, k, O);
+                else testResult = callbackfn(kValue, k, O);
+
+                // iii. If ToBoolean(testResult) is false, return false.
+                if (!testResult) {
+                    return false;
+                }
+            }
+            k++;
+        }
+        return true;
+    };
+}

src/lib/tools/HTMLElement.prototype.prepend.ts

@@ -0,0 +1,9 @@
+if (!HTMLElement.prototype.prepend) {
+    HTMLElement.prototype.prepend = function (childNode) {
+        if (typeof childNode === "string") {
+            throw new Error("Error with HTMLElement.prototype.appendFirst polyfill");
+        }
+
+        this.insertBefore(childNode, this.firstChild);
+    };
+}

src/lib/tools/emailRegExp.ts

@@ -0,0 +1,2 @@
+export const emailRegexp =
+    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

src/lib/tools/headInsert.ts

@@ -1,10 +1,12 @@
+import "./HTMLElement.prototype.prepend";
 import { Deferred } from "evt/tools/Deferred";
 
-export function appendHead(
+export function headInsert(
     params:
         | {
               type: "css";
               href: string;
+              position: "append" | "prepend";
           }
         | {
               type: "javascript";
@@ -46,7 +48,23 @@ export function appendHead(
         })(),
     );
 
-    document.getElementsByTagName("head")[0].appendChild(htmlElement);
+    document.getElementsByTagName("head")[0][
+        (() => {
+            switch (params.type) {
+                case "javascript":
+                    return "appendChild";
+                case "css":
+                    return (() => {
+                        switch (params.position) {
+                            case "append":
+                                return "appendChild";
+                            case "prepend":
+                                return "prepend";
+                        }
+                    })();
+            }
+        })()
+    ](htmlElement);
 
     return dLoaded.pr;
 }

src/lib/useFormValidationSlice.tsx

@@ -0,0 +1,428 @@
+import "./tools/Array.prototype.every";
+import { useMemo, useReducer, Fragment } from "react";
+import type { KcContextBase, Validators, Attribute } from "./getKcContext/KcContextBase";
+import { useKcMessage } from "./i18n/useKcMessage";
+import { useConstCallback } from "powerhooks/useConstCallback";
+import { id } from "tsafe/id";
+import type { MessageKey } from "./i18n/useKcMessage";
+import { useConst } from "powerhooks/useConst";
+import { emailRegexp } from "./tools/emailRegExp";
+
+export type KcContextLike = {
+    messagesPerField: Pick<KcContextBase.Common["messagesPerField"], "existsError" | "get">;
+    attributes: { name: string; value?: string; validators: Validators }[];
+    passwordRequired: boolean;
+    realm: { registrationEmailAsUsername: boolean };
+};
+
+export function useGetErrors(params: {
+    kcContext: {
+        messagesPerField: Pick<KcContextBase.Common["messagesPerField"], "existsError" | "get">;
+        profile: {
+            attributes: { name: string; value?: string; validators: Validators }[];
+        };
+    };
+}) {
+    const {
+        kcContext: {
+            messagesPerField,
+            profile: { attributes },
+        },
+    } = params;
+
+    const { msg, msgStr, advancedMsg, advancedMsgStr } = useKcMessage();
+
+    const getErrors = useConstCallback((params: { name: string; fieldValueByAttributeName: Record<string, { value: string }> }) => {
+        const { name, fieldValueByAttributeName } = params;
+
+        const { value } = fieldValueByAttributeName[name];
+
+        const { value: defaultValue, validators } = attributes.find(attribute => attribute.name === name)!;
+
+        if (defaultValue === value && messagesPerField.existsError(value)) {
+            const errorMessageStr = messagesPerField.get(value);
+
+            return [
+                {
+                    "validatorName": undefined,
+                    errorMessageStr,
+                    "errorMessage": <span key={0}>{errorMessageStr}</span>,
+                },
+            ];
+        }
+
+        const errors: {
+            errorMessage: JSX.Element;
+            errorMessageStr: string;
+            validatorName: keyof Validators | undefined;
+        }[] = [];
+
+        scope: {
+            const validatorName = "length";
+
+            const validator = validators[validatorName];
+
+            if (validator === undefined) {
+                break scope;
+            }
+
+            const { "ignore.empty.value": ignoreEmptyValue = false, max, min } = validator;
+
+            if (ignoreEmptyValue && value === "") {
+                break scope;
+            }
+
+            if (max !== undefined && value.length > parseInt(max)) {
+                const msgArgs = ["error-invalid-length-too-long", max] as const;
+
+                errors.push({
+                    "errorMessage": <Fragment key={errors.length}>{msg(...msgArgs)}</Fragment>,
+                    "errorMessageStr": msgStr(...msgArgs),
+                    validatorName,
+                });
+            }
+
+            if (min !== undefined && value.length < parseInt(min)) {
+                const msgArgs = ["error-invalid-length-too-short", min] as const;
+
+                errors.push({
+                    "errorMessage": <Fragment key={errors.length}>{msg(...msgArgs)}</Fragment>,
+                    "errorMessageStr": msgStr(...msgArgs),
+                    validatorName,
+                });
+            }
+        }
+
+        scope: {
+            const validatorName = "_compareToOther";
+
+            const validator = validators[validatorName];
+
+            if (validator === undefined) {
+                break scope;
+            }
+
+            const { "ignore.empty.value": ignoreEmptyValue = false, name: otherName, shouldBe, "error-message": errorMessageKey } = validator;
+
+            if (ignoreEmptyValue && value === "") {
+                break scope;
+            }
+
+            const { value: otherValue } = fieldValueByAttributeName[otherName];
+
+            const isValid = (() => {
+                switch (shouldBe) {
+                    case "different":
+                        return otherValue !== value;
+                    case "equal":
+                        return otherValue === value;
+                }
+            })();
+
+            if (isValid) {
+                break scope;
+            }
+
+            const msgArg = [
+                errorMessageKey ??
+                    id<MessageKey>(
+                        (() => {
+                            switch (shouldBe) {
+                                case "equal":
+                                    return "shouldBeEqual";
+                                case "different":
+                                    return "shouldBeDifferent";
+                            }
+                        })(),
+                    ),
+                otherName,
+                name,
+                shouldBe,
+            ] as const;
+
+            errors.push({
+                validatorName,
+                "errorMessage": <Fragment key={errors.length}>{advancedMsg(...msgArg)}</Fragment>,
+                "errorMessageStr": advancedMsgStr(...msgArg),
+            });
+        }
+
+        scope: {
+            const validatorName = "pattern";
+
+            const validator = validators[validatorName];
+
+            if (validator === undefined) {
+                break scope;
+            }
+
+            const { "ignore.empty.value": ignoreEmptyValue = false, pattern, "error-message": errorMessageKey } = validator;
+
+            if (ignoreEmptyValue && value === "") {
+                break scope;
+            }
+
+            if (new RegExp(pattern).test(value)) {
+                break scope;
+            }
+
+            const msgArgs = [errorMessageKey ?? id<MessageKey>("shouldMatchPattern"), pattern] as const;
+
+            errors.push({
+                validatorName,
+                "errorMessage": <Fragment key={errors.length}>{advancedMsg(...msgArgs)}</Fragment>,
+                "errorMessageStr": advancedMsgStr(...msgArgs),
+            });
+        }
+
+        scope: {
+            if ([...errors].reverse()[0]?.validatorName === "pattern") {
+                break scope;
+            }
+
+            const validatorName = "email";
+
+            const validator = validators[validatorName];
+
+            if (validator === undefined) {
+                break scope;
+            }
+
+            const { "ignore.empty.value": ignoreEmptyValue = false } = validator;
+
+            if (ignoreEmptyValue && value === "") {
+                break scope;
+            }
+
+            if (emailRegexp.test(value)) {
+                break scope;
+            }
+
+            const msgArgs = ["invalidEmailMessage"] as const;
+
+            errors.push({
+                validatorName,
+                "errorMessage": <Fragment key={errors.length}>{msg(...msgArgs)}</Fragment>,
+                "errorMessageStr": msgStr(...msgArgs),
+            });
+        }
+
+        scope: {
+            const validatorName = "integer";
+
+            const validator = validators[validatorName];
+
+            if (validator === undefined) {
+                break scope;
+            }
+
+            const { "ignore.empty.value": ignoreEmptyValue = false, max, min } = validator;
+
+            if (ignoreEmptyValue && value === "") {
+                break scope;
+            }
+
+            const intValue = parseInt(value);
+
+            if (isNaN(intValue)) {
+                const msgArgs = ["mustBeAnInteger"] as const;
+
+                errors.push({
+                    validatorName,
+                    "errorMessage": <Fragment key={errors.length}>{msg(...msgArgs)}</Fragment>,
+                    "errorMessageStr": msgStr(...msgArgs),
+                });
+
+                break scope;
+            }
+
+            if (max !== undefined && intValue > parseInt(max)) {
+                const msgArgs = ["error-number-out-of-range-too-big", max] as const;
+
+                errors.push({
+                    validatorName,
+                    "errorMessage": <Fragment key={errors.length}>{msg(...msgArgs)}</Fragment>,
+                    "errorMessageStr": msgStr(...msgArgs),
+                });
+
+                break scope;
+            }
+
+            if (min !== undefined && intValue < parseInt(min)) {
+                const msgArgs = ["error-number-out-of-range-too-small", min] as const;
+
+                errors.push({
+                    validatorName,
+                    "errorMessage": <Fragment key={errors.length}>{msg(...msgArgs)}</Fragment>,
+                    "errorMessageStr": msgStr(...msgArgs),
+                });
+
+                break scope;
+            }
+        }
+
+        //TODO: Implement missing validators.
+
+        return errors;
+    });
+
+    return { getErrors };
+}
+
+export function useFormValidationSlice(params: {
+    kcContext: {
+        messagesPerField: Pick<KcContextBase.Common["messagesPerField"], "existsError" | "get">;
+        profile: {
+            attributes: Attribute[];
+        };
+        passwordRequired: boolean;
+        realm: { registrationEmailAsUsername: boolean };
+    };
+    passwordValidators?: Validators;
+}) {
+    const {
+        kcContext,
+        passwordValidators = {
+            "length": {
+                "ignore.empty.value": true,
+                "min": "4",
+            },
+        },
+    } = params;
+
+    const attributesWithPassword = useConst(() =>
+        !kcContext.passwordRequired
+            ? kcContext.profile.attributes
+            : (() => {
+                  const name = kcContext.realm.registrationEmailAsUsername ? "email" : "username";
+
+                  return kcContext.profile.attributes.reduce<Attribute[]>(
+                      (prev, curr) => [
+                          ...prev,
+                          ...(curr.name !== name
+                              ? [curr]
+                              : [
+                                    curr,
+                                    id<Attribute>({
+                                        "name": "password",
+                                        "displayName": id<`\${${MessageKey}}`>("${password}"),
+                                        "required": true,
+                                        "readOnly": false,
+                                        "validators": passwordValidators,
+                                        "annotations": {},
+                                        "groupAnnotations": {},
+                                    }),
+                                    id<Attribute>({
+                                        "name": "password-confirm",
+                                        "displayName": id<`\${${MessageKey}}`>("${passwordConfirm}"),
+                                        "required": true,
+                                        "readOnly": false,
+                                        "validators": {
+                                            "_compareToOther": {
+                                                "name": "password",
+                                                "ignore.empty.value": true,
+                                                "shouldBe": "equal",
+                                                "error-message": id<`\${${MessageKey}}`>("${invalidPasswordConfirmMessage}"),
+                                            },
+                                        },
+                                        "annotations": {},
+                                        "groupAnnotations": {},
+                                    }),
+                                ]),
+                      ],
+                      [],
+                  );
+              })(),
+    );
+
+    const { getErrors } = useGetErrors({
+        "kcContext": {
+            "messagesPerField": kcContext.messagesPerField,
+            "profile": {
+                "attributes": attributesWithPassword,
+            },
+        },
+    });
+
+    const initialInternalState = useConst(() =>
+        Object.fromEntries(
+            attributesWithPassword
+                .map(attribute => ({
+                    attribute,
+                    "errors": getErrors({
+                        "name": attribute.name,
+                        "fieldValueByAttributeName": Object.fromEntries(
+                            attributesWithPassword.map(({ name, value }) => [name, { "value": value ?? "" }]),
+                        ),
+                    }),
+                }))
+                .map(({ attribute, errors }) => [
+                    attribute.name,
+                    {
+                        "value": attribute.value ?? "",
+                        errors,
+                        "doDisplayPotentialErrorMessages": errors.length !== 0,
+                    },
+                ]),
+        ),
+    );
+
+    type InternalState = typeof initialInternalState;
+
+    const [formValidationInternalState, formValidationReducer] = useReducer(
+        (
+            state: InternalState,
+            params:
+                | {
+                      action: "update value";
+                      name: string;
+                      newValue: string;
+                  }
+                | {
+                      action: "focus lost";
+                      name: string;
+                  },
+        ): InternalState => ({
+            ...state,
+            [params.name]: {
+                ...state[params.name],
+                ...(() => {
+                    switch (params.action) {
+                        case "focus lost":
+                            return { "doDisplayPotentialErrorMessages": true };
+                        case "update value":
+                            return {
+                                "value": params.newValue,
+                                "errors": getErrors({
+                                    "name": params.name,
+                                    "fieldValueByAttributeName": {
+                                        ...state,
+                                        [params.name]: { "value": params.newValue },
+                                    },
+                                }),
+                            };
+                    }
+                })(),
+            },
+        }),
+        initialInternalState,
+    );
+
+    const formValidationState = useMemo(
+        () => ({
+            "fieldStateByAttributeName": Object.fromEntries(
+                Object.entries(formValidationInternalState).map(([name, { value, errors, doDisplayPotentialErrorMessages }]) => [
+                    name,
+                    { value, "displayableErrors": doDisplayPotentialErrorMessages ? errors : [] },
+                ]),
+            ),
+            "isFormSubmittable": Object.entries(formValidationInternalState).every(
+                ([name, { value, errors }]) =>
+                    errors.length === 0 && (value !== "" || !attributesWithPassword.find(attribute => attribute.name === name)!.required),
+            ),
+        }),
+        [formValidationInternalState],
+    );
+
+    return { formValidationState, formValidationReducer, attributesWithPassword };
+}

yarn.lock

@@ -1221,10 +1221,10 @@ please-upgrade-node@^3.2.0:
   dependencies:
     semver-compare "^1.0.0"
 
-powerhooks@^0.9.6:
-  version "0.9.6"
-  resolved "https://registry.yarnpkg.com/powerhooks/-/powerhooks-0.9.6.tgz#45bdd7e7713d0a620b1b099cf2685e5f56cebd8f"
-  integrity sha512-vXGcC5Ty3e5wxnRP37c7rnTE/UY86VVLwAj3tqAMvC9xf1C9wOmu2Q7xTj/4FGK1oGvgqbTiiWuxd+WK4C7kEQ==
+powerhooks@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/powerhooks/-/powerhooks-0.11.0.tgz#923749ed405a1189759cd3f16d36bd5efacfd40c"
+  integrity sha512-I48J5vJqlTRiR3eH6svxiIYLutdedu2YEd3uhCmK+pRg2jcuourVwp1UYORI/EzbKC9vv0X/0Vd/SZ6e07rYtA==
   dependencies:
     evt "2.0.0-beta.38"
     memoizee "^0.4.15"