Done with the new Register page (not yet retrocompatible)

src/login/kcContext/KcContext.ts

@@ -201,6 +201,12 @@ export declare namespace KcContext {
          * A Keycloak Java extension used as dependency in Keycloakify.
          */
         passwordPolicies?: PasswordPolicies;
+        url: {
+            registrationAction: string;
+        };
+        passwordRequired: boolean;
+        recaptchaRequired: boolean;
+        recaptchaSiteKey?: string;
     };
 
     export type RegisterUserProfile = Common & {
@@ -215,15 +221,6 @@ export declare namespace KcContext {
         passwordRequired: boolean;
         recaptchaRequired: boolean;
         recaptchaSiteKey?: string;
-        social: {
-            displayInfo: boolean;
-            providers?: {
-                loginUrl: string;
-                alias: string;
-                providerId: string;
-                displayName: string;
-            }[];
-        };
     };
 
     export type Info = Common & {

src/login/pages/Register.tsx

@@ -1,152 +1,45 @@
+import { useState } from "react";
 import { clsx } from "keycloakify/tools/clsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
 import type { KcContext } from "../kcContext";
 import type { I18n } from "../i18n";
+import type { LazyOrNot } from "keycloakify/tools/LazyOrNot";
+import type { PropsOfUserProfileFormFields } from "keycloakify/login/UserProfileFormFields";
+import type { PropsOfTermsAcceptance } from "../TermsAcceptance";
 
-export default function Register(props: PageProps<Extract<KcContext, { pageId: "register.ftl" }>, I18n>) {
+type Props = PageProps<Extract<KcContext, { pageId: "register.ftl" }>, I18n> & {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+    UserProfileFormFields: LazyOrNot<(props: PropsOfUserProfileFormFields) => JSX.Element>;
+    TermsAcceptance: LazyOrNot<(props: PropsOfTermsAcceptance) => JSX.Element | null>;
+};
+
+export default function Register(props: Props) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes, UserProfileFormFields, TermsAcceptance } = props;
 
     const { getClassName } = useGetClassName({
         doUseDefaultCss,
         classes
     });
 
-    const { url, messagesPerField, register, realm, passwordRequired, recaptchaRequired, recaptchaSiteKey } = kcContext;
+    const { url, messagesPerField, recaptchaRequired, recaptchaSiteKey } = kcContext;
 
     const { msg, msgStr } = i18n;
 
+    const [isFormSubmittable, setIsFormSubmittable] = useState(false);
+
     return (
         <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("registerTitle")}>
             <form id="kc-register-form" className={getClassName("kcFormClass")} action={url.registrationAction} method="post">
-                <div
+                <UserProfileFormFields
-                    className={clsx(
+                    {...{
-                        getClassName("kcFormGroupClass"),
+                        kcContext,
-                        messagesPerField.printIfExists("firstName", getClassName("kcFormGroupErrorClass"))
+                        i18n,
-                    )}
+                        getClassName,
-                >
+                        messagesPerField
-                    <div className={getClassName("kcLabelWrapperClass")}>
+                    }}
-                        <label htmlFor="firstName" className={getClassName("kcLabelClass")}>
+                    onIsFormSubmittableValueChange={setIsFormSubmittable}
-                            {msg("firstName")}
+                />
-                        </label>
+                <TermsAcceptance {...{ kcContext, i18n, getClassName }} />
-                    </div>
-                    <div className={getClassName("kcInputWrapperClass")}>
-                        <input
-                            type="text"
-                            id="firstName"
-                            className={getClassName("kcInputClass")}
-                            name="firstName"
-                            defaultValue={register.formData.firstName ?? ""}
-                        />
-                    </div>
-                </div>
-
-                <div
-                    className={clsx(
-                        getClassName("kcFormGroupClass"),
-                        messagesPerField.printIfExists("lastName", getClassName("kcFormGroupErrorClass"))
-                    )}
-                >
-                    <div className={getClassName("kcLabelWrapperClass")}>
-                        <label htmlFor="lastName" className={getClassName("kcLabelClass")}>
-                            {msg("lastName")}
-                        </label>
-                    </div>
-                    <div className={getClassName("kcInputWrapperClass")}>
-                        <input
-                            type="text"
-                            id="lastName"
-                            className={getClassName("kcInputClass")}
-                            name="lastName"
-                            defaultValue={register.formData.lastName ?? ""}
-                        />
-                    </div>
-                </div>
-
-                <div
-                    className={clsx(getClassName("kcFormGroupClass"), messagesPerField.printIfExists("email", getClassName("kcFormGroupErrorClass")))}
-                >
-                    <div className={getClassName("kcLabelWrapperClass")}>
-                        <label htmlFor="email" className={getClassName("kcLabelClass")}>
-                            {msg("email")}
-                        </label>
-                    </div>
-                    <div className={getClassName("kcInputWrapperClass")}>
-                        <input
-                            type="text"
-                            id="email"
-                            className={getClassName("kcInputClass")}
-                            name="email"
-                            defaultValue={register.formData.email ?? ""}
-                            autoComplete="email"
-                        />
-                    </div>
-                </div>
-                {!realm.registrationEmailAsUsername && (
-                    <div
-                        className={clsx(
-                            getClassName("kcFormGroupClass"),
-                            messagesPerField.printIfExists("username", getClassName("kcFormGroupErrorClass"))
-                        )}
-                    >
-                        <div className={getClassName("kcLabelWrapperClass")}>
-                            <label htmlFor="username" className={getClassName("kcLabelClass")}>
-                                {msg("username")}
-                            </label>
-                        </div>
-                        <div className={getClassName("kcInputWrapperClass")}>
-                            <input
-                                type="text"
-                                id="username"
-                                className={getClassName("kcInputClass")}
-                                name="username"
-                                defaultValue={register.formData.username ?? ""}
-                                autoComplete="username"
-                            />
-                        </div>
-                    </div>
-                )}
-                {passwordRequired && (
-                    <>
-                        <div
-                            className={clsx(
-                                getClassName("kcFormGroupClass"),
-                                messagesPerField.printIfExists("password", getClassName("kcFormGroupErrorClass"))
-                            )}
-                        >
-                            <div className={getClassName("kcLabelWrapperClass")}>
-                                <label htmlFor="password" className={getClassName("kcLabelClass")}>
-                                    {msg("password")}
-                                </label>
-                            </div>
-                            <div className={getClassName("kcInputWrapperClass")}>
-                                <input
-                                    type="password"
-                                    id="password"
-                                    className={getClassName("kcInputClass")}
-                                    name="password"
-                                    autoComplete="new-password"
-                                />
-                            </div>
-                        </div>
-
-                        <div
-                            className={clsx(
-                                getClassName("kcFormGroupClass"),
-                                messagesPerField.printIfExists("password-confirm", getClassName("kcFormGroupErrorClass"))
-                            )}
-                        >
-                            <div className={getClassName("kcLabelWrapperClass")}>
-                                <label htmlFor="password-confirm" className={getClassName("kcLabelClass")}>
-                                    {msg("passwordConfirm")}
-                                </label>
-                            </div>
-                            <div className={getClassName("kcInputWrapperClass")}>
-                                <input type="password" id="password-confirm" className={getClassName("kcInputClass")} name="password-confirm" />
-                            </div>
-                        </div>
-                    </>
-                )}
                 {recaptchaRequired && (
                     <div className="form-group">
                         <div className={getClassName("kcInputWrapperClass")}>
@@ -162,9 +55,9 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
                             </span>
                         </div>
                     </div>
-
                     <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
                         <input
+                            disabled={!isFormSubmittable}
                             className={clsx(
                                 getClassName("kcButtonClass"),
                                 getClassName("kcButtonPrimaryClass"),