keycloakify 6.7.1 → 6.8.0

package/src/lib/components/UpdateUserProfile.tsx

@@ -1,77 +1,80 @@
 import React, { useState, memo } from "react";
-import Template from "./Template";
+import DefaultTemplate from "./Template";
+import type { TemplateProps } from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { useCssAndCx } from "../tools/useCssAndCx";
 import type { I18n } from "../i18n";
 import { UserProfileFormFields } from "./shared/UserProfileCommons";
 
-const UpdateUserProfile = memo(
-    ({
-        kcContext,
-        i18n,
-        doFetchDefaultThemeResources = true,
-        ...props
-    }: { kcContext: KcContextBase.UpdateUserProfile; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
-        const { cx } = useCssAndCx();
+export type UpdateUserProfileProps = KcProps & {
+    kcContext: KcContextBase.UpdateUserProfile;
+    i18n: I18n;
+    doFetchDefaultThemeResources?: boolean;
+    Template?: (props: TemplateProps) => JSX.Element | null;
+};
 
-        const { msg, msgStr } = i18n;
+const UpdateUserProfile = memo((props: UpdateUserProfileProps) => {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
 
-        const { url, isAppInitiatedAction } = kcContext;
+    const { cx } = useCssAndCx();
 
-        const [isFomSubmittable, setIsFomSubmittable] = useState(false);
+    const { msg, msgStr } = i18n;
 
-        return (
-            <Template
-                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
-                headerNode={msg("loginProfileTitle")}
-                formNode={
-                    <form id="kc-update-profile-form" className={cx(props.kcFormClass)} action={url.loginAction} method="post">
-                        <UserProfileFormFields kcContext={kcContext} onIsFormSubmittableValueChange={setIsFomSubmittable} i18n={i18n} {...props} />
+    const { url, isAppInitiatedAction } = kcContext;
 
-                        <div className={cx(props.kcFormGroupClass)}>
-                            <div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
-                                <div className={cx(props.kcFormOptionsWrapperClass)}></div>
-                            </div>
+    const [isFomSubmittable, setIsFomSubmittable] = useState(false);
 
-                            <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
-                                {isAppInitiatedAction ? (
-                                    <>
-                                        <input
-                                            className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonLargeClass)}
-                                            type="submit"
-                                            value={msgStr("doSubmit")}
-                                        />
-                                        <button
-                                            className={cx(props.kcButtonClass, props.kcButtonDefaultClass, props.kcButtonLargeClass)}
-                                            type="submit"
-                                            name="cancel-aia"
-                                            value="true"
-                                            formNoValidate
-                                        >
-                                            {msg("doCancel")}
-                                        </button>
-                                    </>
-                                ) : (
+    return (
+        <Template
+            {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
+            headerNode={msg("loginProfileTitle")}
+            formNode={
+                <form id="kc-update-profile-form" className={cx(kcProps.kcFormClass)} action={url.loginAction} method="post">
+                    <UserProfileFormFields kcContext={kcContext} onIsFormSubmittableValueChange={setIsFomSubmittable} i18n={i18n} {...kcProps} />
+
+                    <div className={cx(kcProps.kcFormGroupClass)}>
+                        <div id="kc-form-options" className={cx(kcProps.kcFormOptionsClass)}>
+                            <div className={cx(kcProps.kcFormOptionsWrapperClass)}></div>
+                        </div>
+
+                        <div id="kc-form-buttons" className={cx(kcProps.kcFormButtonsClass)}>
+                            {isAppInitiatedAction ? (
+                                <>
                                     <input
-                                        className={cx(
-                                            props.kcButtonClass,
-                                            props.kcButtonPrimaryClass,
-                                            props.kcButtonBlockClass,
-                                            props.kcButtonLargeClass
-                                        )}
+                                        className={cx(kcProps.kcButtonClass, kcProps.kcButtonPrimaryClass, kcProps.kcButtonLargeClass)}
                                         type="submit"
-                                        defaultValue={msgStr("doSubmit")}
-                                        disabled={!isFomSubmittable}
+                                        value={msgStr("doSubmit")}
                                     />
-                                )}
-                            </div>
+                                    <button
+                                        className={cx(kcProps.kcButtonClass, kcProps.kcButtonDefaultClass, kcProps.kcButtonLargeClass)}
+                                        type="submit"
+                                        name="cancel-aia"
+                                        value="true"
+                                        formNoValidate
+                                    >
+                                        {msg("doCancel")}
+                                    </button>
+                                </>
+                            ) : (
+                                <input
+                                    className={cx(
+                                        kcProps.kcButtonClass,
+                                        kcProps.kcButtonPrimaryClass,
+                                        kcProps.kcButtonBlockClass,
+                                        kcProps.kcButtonLargeClass
+                                    )}
+                                    type="submit"
+                                    defaultValue={msgStr("doSubmit")}
+                                    disabled={!isFomSubmittable}
+                                />
+                            )}
                         </div>
-                    </form>
-                }
-            />
-        );
-    }
-);
+                    </div>
+                </form>
+            }
+        />
+    );
+});
 
 export default UpdateUserProfile;

package/src/lib/components/WebauthnAuthenticate.tsx

@@ -1,5 +1,6 @@
 import React, { useRef, useState, memo } from "react";
-import Template from "./Template";
+import DefaultTemplate from "./Template";
+import type { TemplateProps } from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { useCssAndCx } from "../tools/useCssAndCx";
@@ -7,198 +8,198 @@ import type { I18n, MessageKeyBase } from "../i18n";
 import { base64url } from "rfc4648";
 import { useConstCallback } from "powerhooks/useConstCallback";
 
-const WebauthnAuthenticate = memo(
-    ({
-        kcContext,
-        i18n,
-        doFetchDefaultThemeResources = true,
-        ...props
-    }: { kcContext: KcContextBase.WebauthnAuthenticate; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
-        const { url } = kcContext;
+export type WebauthnAuthenticateProps = KcProps & {
+    kcContext: KcContextBase.WebauthnAuthenticate;
+    i18n: I18n;
+    doFetchDefaultThemeResources?: boolean;
+    Template?: (props: TemplateProps) => JSX.Element | null;
+};
 
-        const { msg, msgStr } = i18n;
+const WebauthnAuthenticate = memo((props: WebauthnAuthenticateProps) => {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
 
-        const { authenticators, challenge, shouldDisplayAuthenticators, userVerification, rpId } = kcContext;
-        const createTimeout = Number(kcContext.createTimeout);
-        const isUserIdentified = kcContext.isUserIdentified == "true";
+    const { url } = kcContext;
 
-        const { cx } = useCssAndCx();
+    const { msg, msgStr } = i18n;
 
-        const webAuthnAuthenticate = useConstCallback(async () => {
-            if (!isUserIdentified) {
-                return;
-            }
-            const allowCredentials = authenticators.authenticators.map(
-                authenticator =>
-                    ({
-                        id: base64url.parse(authenticator.credentialId, { loose: true }),
-                        type: "public-key"
-                    } as PublicKeyCredentialDescriptor)
-            );
-            // Check if WebAuthn is supported by this browser
-            if (!window.PublicKeyCredential) {
-                setError(msgStr("webauthn-unsupported-browser-text"));
-                submitForm();
-                return;
-            }
-
-            const publicKey: PublicKeyCredentialRequestOptions = {
-                rpId,
-                challenge: base64url.parse(challenge, { loose: true })
-            };
-
-            if (createTimeout !== 0) {
-                publicKey.timeout = createTimeout * 1000;
-            }
-
-            if (allowCredentials.length) {
-                publicKey.allowCredentials = allowCredentials;
-            }
+    const { authenticators, challenge, shouldDisplayAuthenticators, userVerification, rpId } = kcContext;
+    const createTimeout = Number(kcContext.createTimeout);
+    const isUserIdentified = kcContext.isUserIdentified == "true";
 
-            if (userVerification !== "not specified") {
-                publicKey.userVerification = userVerification;
-            }
+    const { cx } = useCssAndCx();
 
-            try {
-                const resultRaw = await navigator.credentials.get({ publicKey });
-                if (!resultRaw || resultRaw.type != "public-key") return;
-                const result = resultRaw as PublicKeyCredential;
-                if (!("authenticatorData" in result.response)) return;
-                const response = result.response as AuthenticatorAssertionResponse;
-                const clientDataJSON = response.clientDataJSON;
-                const authenticatorData = response.authenticatorData;
-                const signature = response.signature;
-
-                setClientDataJSON(base64url.stringify(new Uint8Array(clientDataJSON), { pad: false }));
-                setAuthenticatorData(base64url.stringify(new Uint8Array(authenticatorData), { pad: false }));
-                setSignature(base64url.stringify(new Uint8Array(signature), { pad: false }));
-                setCredentialId(result.id);
-                setUserHandle(base64url.stringify(new Uint8Array(response.userHandle!), { pad: false }));
-                submitForm();
-            } catch (err) {
-                setError(String(err));
-                submitForm();
-            }
-        });
-
-        const webAuthForm = useRef<HTMLFormElement>(null);
-        const submitForm = useConstCallback(() => {
-            webAuthForm.current!.submit();
-        });
-
-        const [clientDataJSON, setClientDataJSON] = useState("");
-        const [authenticatorData, setAuthenticatorData] = useState("");
-        const [signature, setSignature] = useState("");
-        const [credentialId, setCredentialId] = useState("");
-        const [userHandle, setUserHandle] = useState("");
-        const [error, setError] = useState("");
-
-        return (
-            <Template
-                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
-                headerNode={msg("webauthn-login-title")}
-                formNode={
-                    <div id="kc-form-webauthn" className={cx(props.kcFormClass)}>
-                        <form id="webauth" action={url.loginAction} ref={webAuthForm} method="post">
-                            <input type="hidden" id="clientDataJSON" name="clientDataJSON" value={clientDataJSON} />
-                            <input type="hidden" id="authenticatorData" name="authenticatorData" value={authenticatorData} />
-                            <input type="hidden" id="signature" name="signature" value={signature} />
-                            <input type="hidden" id="credentialId" name="credentialId" value={credentialId} />
-                            <input type="hidden" id="userHandle" name="userHandle" value={userHandle} />
-                            <input type="hidden" id="error" name="error" value={error} />
-                        </form>
-                        <div className={cx(props.kcFormGroupClass)}>
-                            {authenticators &&
-                                (() => (
-                                    <form id="authn_select" className={cx(props.kcFormClass)}>
+    const webAuthnAuthenticate = useConstCallback(async () => {
+        if (!isUserIdentified) {
+            return;
+        }
+        const allowCredentials = authenticators.authenticators.map(
+            authenticator =>
+                ({
+                    id: base64url.parse(authenticator.credentialId, { loose: true }),
+                    type: "public-key"
+                } as PublicKeyCredentialDescriptor)
+        );
+        // Check if WebAuthn is supported by this browser
+        if (!window.PublicKeyCredential) {
+            setError(msgStr("webauthn-unsupported-browser-text"));
+            submitForm();
+            return;
+        }
+
+        const publicKey: PublicKeyCredentialRequestOptions = {
+            rpId,
+            challenge: base64url.parse(challenge, { loose: true })
+        };
+
+        if (createTimeout !== 0) {
+            publicKey.timeout = createTimeout * 1000;
+        }
+
+        if (allowCredentials.length) {
+            publicKey.allowCredentials = allowCredentials;
+        }
+
+        if (userVerification !== "not specified") {
+            publicKey.userVerification = userVerification;
+        }
+
+        try {
+            const resultRaw = await navigator.credentials.get({ publicKey });
+            if (!resultRaw || resultRaw.type != "public-key") return;
+            const result = resultRaw as PublicKeyCredential;
+            if (!("authenticatorData" in result.response)) return;
+            const response = result.response as AuthenticatorAssertionResponse;
+            const clientDataJSON = response.clientDataJSON;
+            const authenticatorData = response.authenticatorData;
+            const signature = response.signature;
+
+            setClientDataJSON(base64url.stringify(new Uint8Array(clientDataJSON), { pad: false }));
+            setAuthenticatorData(base64url.stringify(new Uint8Array(authenticatorData), { pad: false }));
+            setSignature(base64url.stringify(new Uint8Array(signature), { pad: false }));
+            setCredentialId(result.id);
+            setUserHandle(base64url.stringify(new Uint8Array(response.userHandle!), { pad: false }));
+            submitForm();
+        } catch (err) {
+            setError(String(err));
+            submitForm();
+        }
+    });
+
+    const webAuthForm = useRef<HTMLFormElement>(null);
+    const submitForm = useConstCallback(() => {
+        webAuthForm.current!.submit();
+    });
+
+    const [clientDataJSON, setClientDataJSON] = useState("");
+    const [authenticatorData, setAuthenticatorData] = useState("");
+    const [signature, setSignature] = useState("");
+    const [credentialId, setCredentialId] = useState("");
+    const [userHandle, setUserHandle] = useState("");
+    const [error, setError] = useState("");
+
+    return (
+        <Template
+            {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
+            headerNode={msg("webauthn-login-title")}
+            formNode={
+                <div id="kc-form-webauthn" className={cx(kcProps.kcFormClass)}>
+                    <form id="webauth" action={url.loginAction} ref={webAuthForm} method="post">
+                        <input type="hidden" id="clientDataJSON" name="clientDataJSON" value={clientDataJSON} />
+                        <input type="hidden" id="authenticatorData" name="authenticatorData" value={authenticatorData} />
+                        <input type="hidden" id="signature" name="signature" value={signature} />
+                        <input type="hidden" id="credentialId" name="credentialId" value={credentialId} />
+                        <input type="hidden" id="userHandle" name="userHandle" value={userHandle} />
+                        <input type="hidden" id="error" name="error" value={error} />
+                    </form>
+                    <div className={cx(kcProps.kcFormGroupClass)}>
+                        {authenticators &&
+                            (() => (
+                                <form id="authn_select" className={cx(kcProps.kcFormClass)}>
+                                    {authenticators.authenticators.map(authenticator => (
+                                        <input
+                                            type="hidden"
+                                            name="authn_use_chk"
+                                            value={authenticator.credentialId}
+                                            key={authenticator.credentialId}
+                                        />
+                                    ))}
+                                </form>
+                            ))()}
+                        {authenticators &&
+                            shouldDisplayAuthenticators &&
+                            (() => (
+                                <>
+                                    {authenticators.authenticators.length > 1 && (
+                                        <p className={cx(kcProps.kcSelectAuthListItemTitle)}>{msg("webauthn-available-authenticators")}</p>
+                                    )}
+                                    <div className={cx(kcProps.kcFormClass)}>
                                         {authenticators.authenticators.map(authenticator => (
-                                            <input
-                                                type="hidden"
-                                                name="authn_use_chk"
-                                                value={authenticator.credentialId}
-                                                key={authenticator.credentialId}
-                                            />
-                                        ))}
-                                    </form>
-                                ))()}
-                            {authenticators &&
-                                shouldDisplayAuthenticators &&
-                                (() => (
-                                    <>
-                                        {authenticators.authenticators.length > 1 && (
-                                            <p className={cx(props.kcSelectAuthListItemTitle)}>{msg("webauthn-available-authenticators")}</p>
-                                        )}
-                                        <div className={cx(props.kcFormClass)}>
-                                            {authenticators.authenticators.map(authenticator => (
-                                                <div id="kc-webauthn-authenticator" className={cx(props.kcSelectAuthListItemClass)}>
-                                                    <div className={cx(props.kcSelectAuthListItemIconClass)}>
-                                                        <i
-                                                            className={cx(
-                                                                props[authenticator.transports.iconClass] ?? props.kcWebAuthnDefaultIcon,
-                                                                props.kcSelectAuthListItemIconPropertyClass
-                                                            )}
-                                                        />
+                                            <div id="kc-webauthn-authenticator" className={cx(kcProps.kcSelectAuthListItemClass)}>
+                                                <div className={cx(kcProps.kcSelectAuthListItemIconClass)}>
+                                                    <i
+                                                        className={cx(
+                                                            kcProps[authenticator.transports.iconClass] ?? kcProps.kcWebAuthnDefaultIcon,
+                                                            kcProps.kcSelectAuthListItemIconPropertyClass
+                                                        )}
+                                                    />
+                                                </div>
+                                                <div className={cx(kcProps.kcSelectAuthListItemBodyClass)}>
+                                                    <div
+                                                        id="kc-webauthn-authenticator-label"
+                                                        className={cx(kcProps.kcSelectAuthListItemHeadingClass)}
+                                                    >
+                                                        {authenticator.label}
                                                     </div>
-                                                    <div className={cx(props.kcSelectAuthListItemBodyClass)}>
+
+                                                    {authenticator.transports && authenticator.transports.displayNameProperties.length && (
                                                         <div
-                                                            id="kc-webauthn-authenticator-label"
-                                                            className={cx(props.kcSelectAuthListItemHeadingClass)}
+                                                            id="kc-webauthn-authenticator-transport"
+                                                            className={cx(kcProps.kcSelectAuthListItemDescriptionClass)}
                                                         >
-                                                            {authenticator.label}
+                                                            {authenticator.transports.displayNameProperties.map(
+                                                                (transport: MessageKeyBase, index: number) => (
+                                                                    <>
+                                                                        <span>{msg(transport)}</span>
+                                                                        {index < authenticator.transports.displayNameProperties.length - 1 && (
+                                                                            <span>{", "}</span>
+                                                                        )}
+                                                                    </>
+                                                                )
+                                                            )}
                                                         </div>
+                                                    )}
 
-                                                        {authenticator.transports && authenticator.transports.displayNameProperties.length && (
-                                                            <div
-                                                                id="kc-webauthn-authenticator-transport"
-                                                                className={cx(props.kcSelectAuthListItemDescriptionClass)}
-                                                            >
-                                                                {authenticator.transports.displayNameProperties.map(
-                                                                    (transport: MessageKeyBase, index: number) => (
-                                                                        <>
-                                                                            <span>{msg(transport)}</span>
-                                                                            {index < authenticator.transports.displayNameProperties.length - 1 && (
-                                                                                <span>{", "}</span>
-                                                                            )}
-                                                                        </>
-                                                                    )
-                                                                )}
-                                                            </div>
-                                                        )}
-
-                                                        <div className={cx(props.kcSelectAuthListItemDescriptionClass)}>
-                                                            <span id="kc-webauthn-authenticator-created-label">
-                                                                {msg("webauthn-createdAt-label")}
-                                                            </span>
-                                                            <span id="kc-webauthn-authenticator-created">{authenticator.createdAt}</span>
-                                                        </div>
+                                                    <div className={cx(kcProps.kcSelectAuthListItemDescriptionClass)}>
+                                                        <span id="kc-webauthn-authenticator-created-label">{msg("webauthn-createdAt-label")}</span>
+                                                        <span id="kc-webauthn-authenticator-created">{authenticator.createdAt}</span>
                                                     </div>
-                                                    <div className={cx(props.kcSelectAuthListItemFillClass)} />
                                                 </div>
-                                            ))}
-                                        </div>
-                                    </>
-                                ))()}
-                            <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
-                                <input
-                                    id="authenticateWebAuthnButton"
-                                    type="button"
-                                    onClick={webAuthnAuthenticate}
-                                    autoFocus={true}
-                                    value={msgStr("webauthn-doAuthenticate")}
-                                    className={cx(
-                                        props.kcButtonClass,
-                                        props.kcButtonPrimaryClass,
-                                        props.kcButtonBlockClass,
-                                        props.kcButtonLargeClass
-                                    )}
-                                />
-                            </div>
+                                                <div className={cx(kcProps.kcSelectAuthListItemFillClass)} />
+                                            </div>
+                                        ))}
+                                    </div>
+                                </>
+                            ))()}
+                        <div id="kc-form-buttons" className={cx(kcProps.kcFormButtonsClass)}>
+                            <input
+                                id="authenticateWebAuthnButton"
+                                type="button"
+                                onClick={webAuthnAuthenticate}
+                                autoFocus={true}
+                                value={msgStr("webauthn-doAuthenticate")}
+                                className={cx(
+                                    kcProps.kcButtonClass,
+                                    kcProps.kcButtonPrimaryClass,
+                                    kcProps.kcButtonBlockClass,
+                                    kcProps.kcButtonLargeClass
+                                )}
+                            />
                         </div>
                     </div>
-                }
-            />
-        );
-    }
-);
+                </div>
+            }
+        />
+    );
+});
 
 export default WebauthnAuthenticate;