keycloakify 9.6.7 → 10.0.0-rc.1

package/src/login/pages/UpdateUserProfile.tsx

@@ -1,82 +0,0 @@
-import { useState } from "react";
-import { clsx } from "keycloakify/tools/clsx";
-import { UserProfileFormFields } from "keycloakify/login/pages/shared/UserProfileFormFields";
-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";
-
-export default function UpdateUserProfile(props: PageProps<Extract<KcContext, { pageId: "update-user-profile.ftl" }>, I18n>) {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
-
-    const { getClassName } = useGetClassName({
-        doUseDefaultCss,
-        classes
-    });
-
-    const { msg, msgStr } = i18n;
-
-    const { url, isAppInitiatedAction } = kcContext;
-
-    const [isFomSubmittable, setIsFomSubmittable] = useState(false);
-
-    return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("loginProfileTitle")}>
-            <form id="kc-update-profile-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
-                <UserProfileFormFields
-                    kcContext={kcContext}
-                    onIsFormSubmittableValueChange={setIsFomSubmittable}
-                    i18n={i18n}
-                    getClassName={getClassName}
-                />
-
-                <div className={getClassName("kcFormGroupClass")}>
-                    <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
-                        <div className={getClassName("kcFormOptionsWrapperClass")}></div>
-                    </div>
-
-                    <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
-                        {isAppInitiatedAction ? (
-                            <>
-                                <input
-                                    className={clsx(
-                                        getClassName("kcButtonClass"),
-                                        getClassName("kcButtonPrimaryClass"),
-                                        getClassName("kcButtonLargeClass")
-                                    )}
-                                    type="submit"
-                                    value={msgStr("doSubmit")}
-                                />
-                                <button
-                                    className={clsx(
-                                        getClassName("kcButtonClass"),
-                                        getClassName("kcButtonDefaultClass"),
-                                        getClassName("kcButtonLargeClass")
-                                    )}
-                                    type="submit"
-                                    name="cancel-aia"
-                                    value="true"
-                                    formNoValidate
-                                >
-                                    {msg("doCancel")}
-                                </button>
-                            </>
-                        ) : (
-                            <input
-                                className={clsx(
-                                    getClassName("kcButtonClass"),
-                                    getClassName("kcButtonPrimaryClass"),
-                                    getClassName("kcButtonBlockClass"),
-                                    getClassName("kcButtonLargeClass")
-                                )}
-                                type="submit"
-                                defaultValue={msgStr("doSubmit")}
-                                disabled={!isFomSubmittable}
-                            />
-                        )}
-                    </div>
-                </div>
-            </form>
-        </Template>
-    );
-}

package/src/login/pages/shared/UserProfileFormFields.tsx

@@ -1,177 +0,0 @@
-import { useEffect, Fragment } from "react";
-import type { ClassKey } from "keycloakify/login/TemplateProps";
-import { clsx } from "keycloakify/tools/clsx";
-import { useFormValidation } from "keycloakify/login/lib/useFormValidation";
-import type { Attribute } from "keycloakify/login/kcContext/KcContext";
-import type { I18n } from "../../i18n";
-
-export type UserProfileFormFieldsProps = {
-    kcContext: Parameters<typeof useFormValidation>[0]["kcContext"];
-    i18n: I18n;
-    getClassName: (classKey: ClassKey) => string;
-    onIsFormSubmittableValueChange: (isFormSubmittable: boolean) => void;
-    BeforeField?: (props: { attribute: Attribute }) => JSX.Element | null;
-    AfterField?: (props: { attribute: Attribute }) => JSX.Element | null;
-};
-
-export function UserProfileFormFields(props: UserProfileFormFieldsProps) {
-    const { kcContext, onIsFormSubmittableValueChange, i18n, getClassName, BeforeField, AfterField } = props;
-
-    const { advancedMsg, msg } = i18n;
-
-    const {
-        formValidationState: { fieldStateByAttributeName, isFormSubmittable },
-        formValidationDispatch,
-        attributesWithPassword
-    } = useFormValidation({
-        kcContext,
-        i18n
-    });
-
-    useEffect(() => {
-        onIsFormSubmittableValueChange(isFormSubmittable);
-    }, [isFormSubmittable]);
-
-    let currentGroup = "";
-
-    return (
-        <>
-            {attributesWithPassword.map((attribute, i) => {
-                const { group = "", groupDisplayHeader = "", groupDisplayDescription = "" } = attribute;
-
-                const { value, displayableErrors } = fieldStateByAttributeName[attribute.name];
-
-                const formGroupClassName = clsx(
-                    getClassName("kcFormGroupClass"),
-                    displayableErrors.length !== 0 && getClassName("kcFormGroupErrorClass")
-                );
-
-                return (
-                    <Fragment key={i}>
-                        {group !== currentGroup && (currentGroup = group) !== "" && (
-                            <div className={formGroupClassName}>
-                                <div className={getClassName("kcContentWrapperClass")}>
-                                    <label id={`header-${group}`} className={getClassName("kcFormGroupHeader")}>
-                                        {advancedMsg(groupDisplayHeader) || currentGroup}
-                                    </label>
-                                </div>
-                                {groupDisplayDescription !== "" && (
-                                    <div className={getClassName("kcLabelWrapperClass")}>
-                                        <label id={`description-${group}`} className={getClassName("kcLabelClass")}>
-                                            {advancedMsg(groupDisplayDescription)}
-                                        </label>
-                                    </div>
-                                )}
-                            </div>
-                        )}
-
-                        {BeforeField && <BeforeField attribute={attribute} />}
-
-                        <div className={formGroupClassName}>
-                            <div className={getClassName("kcLabelWrapperClass")}>
-                                <label htmlFor={attribute.name} className={getClassName("kcLabelClass")}>
-                                    {advancedMsg(attribute.displayName ?? "")}
-                                </label>
-                                {attribute.required && <>*</>}
-                            </div>
-                            <div className={getClassName("kcInputWrapperClass")}>
-                                {(() => {
-                                    const { options } = attribute.validators;
-
-                                    if (options !== undefined) {
-                                        return (
-                                            <select
-                                                id={attribute.name}
-                                                name={attribute.name}
-                                                onChange={event =>
-                                                    formValidationDispatch({
-                                                        "action": "update value",
-                                                        "name": attribute.name,
-                                                        "newValue": event.target.value
-                                                    })
-                                                }
-                                                onBlur={() =>
-                                                    formValidationDispatch({
-                                                        "action": "focus lost",
-                                                        "name": attribute.name
-                                                    })
-                                                }
-                                                value={value}
-                                            >
-                                                <>
-                                                    <option value="" selected disabled hidden>
-                                                        {msg("selectAnOption")}
-                                                    </option>
-                                                    {options.options.map(option => (
-                                                        <option key={option} value={option}>
-                                                            {option}
-                                                        </option>
-                                                    ))}
-                                                </>
-                                            </select>
-                                        );
-                                    }
-
-                                    return (
-                                        <input
-                                            type={(() => {
-                                                switch (attribute.name) {
-                                                    case "password-confirm":
-                                                    case "password":
-                                                        return "password";
-                                                    default:
-                                                        return "text";
-                                                }
-                                            })()}
-                                            id={attribute.name}
-                                            name={attribute.name}
-                                            value={value}
-                                            onChange={event =>
-                                                formValidationDispatch({
-                                                    "action": "update value",
-                                                    "name": attribute.name,
-                                                    "newValue": event.target.value
-                                                })
-                                            }
-                                            onBlur={() =>
-                                                formValidationDispatch({
-                                                    "action": "focus lost",
-                                                    "name": attribute.name
-                                                })
-                                            }
-                                            className={getClassName("kcInputClass")}
-                                            aria-invalid={displayableErrors.length !== 0}
-                                            disabled={attribute.readOnly}
-                                            autoComplete={attribute.autocomplete}
-                                        />
-                                    );
-                                })()}
-                                {displayableErrors.length !== 0 &&
-                                    (() => {
-                                        const divId = `input-error-${attribute.name}`;
-
-                                        return (
-                                            <>
-                                                <style>{`#${divId} > span: { display: block; }`}</style>
-                                                <span
-                                                    id={divId}
-                                                    className={getClassName("kcInputErrorMessageClass")}
-                                                    style={{
-                                                        "position": displayableErrors.length === 1 ? "absolute" : undefined
-                                                    }}
-                                                    aria-live="polite"
-                                                >
-                                                    {displayableErrors.map(({ errorMessage }) => errorMessage)}
-                                                </span>
-                                            </>
-                                        );
-                                    })()}
-                            </div>
-                        </div>
-                        {AfterField && <AfterField attribute={attribute} />}
-                    </Fragment>
-                );
-            })}
-        </>
-    );
-}

package/src/tools/headInsert.ts

@@ -1,73 +0,0 @@
-import "./HTMLElement.prototype.prepend";
-import { Deferred } from "evt/tools/Deferred";
-
-export function headInsert(
-    params:
-        | {
-              type: "css";
-              href: string;
-              position: "append" | "prepend";
-          }
-        | {
-              type: "javascript";
-              src: string;
-          }
-): { remove: () => void; prLoaded: Promise<void> } {
-    const htmlElement = document.createElement(
-        (() => {
-            switch (params.type) {
-                case "css":
-                    return "link";
-                case "javascript":
-                    return "script";
-            }
-        })()
-    );
-
-    const dLoaded = new Deferred<void>();
-
-    htmlElement.addEventListener("load", () => dLoaded.resolve());
-
-    Object.assign(
-        htmlElement,
-        (() => {
-            switch (params.type) {
-                case "css":
-                    return {
-                        "href": params.href,
-                        "type": "text/css",
-                        "rel": "stylesheet",
-                        "media": "screen,print"
-                    };
-                case "javascript":
-                    return {
-                        "src": params.src,
-                        "type": "text/javascript"
-                    };
-            }
-        })()
-    );
-
-    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 {
-        "prLoaded": dLoaded.pr,
-        "remove": () => htmlElement.remove()
-    };
-}

package/tools/headInsert.d.ts

@@ -1,12 +0,0 @@
-import "./HTMLElement.prototype.prepend";
-export declare function headInsert(params: {
-    type: "css";
-    href: string;
-    position: "append" | "prepend";
-} | {
-    type: "javascript";
-    src: string;
-}): {
-    remove: () => void;
-    prLoaded: Promise<void>;
-};

package/tools/headInsert.js

@@ -1,50 +0,0 @@
-import "./HTMLElement.prototype.prepend";
-import { Deferred } from "evt/tools/Deferred";
-export function headInsert(params) {
-    const htmlElement = document.createElement((() => {
-        switch (params.type) {
-            case "css":
-                return "link";
-            case "javascript":
-                return "script";
-        }
-    })());
-    const dLoaded = new Deferred();
-    htmlElement.addEventListener("load", () => dLoaded.resolve());
-    Object.assign(htmlElement, (() => {
-        switch (params.type) {
-            case "css":
-                return {
-                    "href": params.href,
-                    "type": "text/css",
-                    "rel": "stylesheet",
-                    "media": "screen,print"
-                };
-            case "javascript":
-                return {
-                    "src": params.src,
-                    "type": "text/javascript"
-                };
-        }
-    })());
-    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 {
-        "prLoaded": dLoaded.pr,
-        "remove": () => htmlElement.remove()
-    };
-}
-//# sourceMappingURL=headInsert.js.map

package/tools/headInsert.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"headInsert.js","sourceRoot":"","sources":["../src/tools/headInsert.ts"],"names":[],"mappings":"AAAA,OAAO,iCAAiC,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,MAAM,UAAU,UAAU,CACtB,MASO;IAEP,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CACtC,CAAC,GAAG,EAAE;QACF,QAAQ,MAAM,CAAC,IAAI,EAAE;YACjB,KAAK,KAAK;gBACN,OAAO,MAAM,CAAC;YAClB,KAAK,YAAY;gBACb,OAAO,QAAQ,CAAC;SACvB;IACL,CAAC,CAAC,EAAE,CACP,CAAC;IAEF,MAAM,OAAO,GAAG,IAAI,QAAQ,EAAQ,CAAC;IAErC,WAAW,CAAC,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC;IAE9D,MAAM,CAAC,MAAM,CACT,WAAW,EACX,CAAC,GAAG,EAAE;QACF,QAAQ,MAAM,CAAC,IAAI,EAAE;YACjB,KAAK,KAAK;gBACN,OAAO;oBACH,MAAM,EAAE,MAAM,CAAC,IAAI;oBACnB,MAAM,EAAE,UAAU;oBAClB,KAAK,EAAE,YAAY;oBACnB,OAAO,EAAE,cAAc;iBAC1B,CAAC;YACN,KAAK,YAAY;gBACb,OAAO;oBACH,KAAK,EAAE,MAAM,CAAC,GAAG;oBACjB,MAAM,EAAE,iBAAiB;iBAC5B,CAAC;SACT;IACL,CAAC,CAAC,EAAE,CACP,CAAC;IAEF,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CACpC,CAAC,GAAG,EAAE;QACF,QAAQ,MAAM,CAAC,IAAI,EAAE;YACjB,KAAK,YAAY;gBACb,OAAO,aAAa,CAAC;YACzB,KAAK,KAAK;gBACN,OAAO,CAAC,GAAG,EAAE;oBACT,QAAQ,MAAM,CAAC,QAAQ,EAAE;wBACrB,KAAK,QAAQ;4BACT,OAAO,aAAa,CAAC;wBACzB,KAAK,SAAS;4BACV,OAAO,SAAS,CAAC;qBACxB;gBACL,CAAC,CAAC,EAAE,CAAC;SACZ;IACL,CAAC,CAAC,EAAE,CACP,CAAC,WAAW,CAAC,CAAC;IAEf,OAAO;QACH,UAAU,EAAE,OAAO,CAAC,EAAE;QACtB,QAAQ,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,MAAM,EAAE;KACvC,CAAC;AACN,CAAC"}