keycloakify 7.0.0-rc.4 → 7.0.0-rc.7

package/src/pages/WebauthnAuthenticate.tsx

@@ -1,204 +0,0 @@
-import { useRef, useState } from "react";
-import { clsx } from "keycloakify/tools/clsx";
-import type { MessageKey } from "keycloakify/i18n/i18n";
-import { base64url } from "rfc4648";
-import { useConstCallback } from "keycloakify/tools/useConstCallback";
-import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
-import { useGetClassName } from "keycloakify/lib/useGetClassName";
-import type { KcContext } from "../kcContext";
-import type { I18n } from "../i18n";
-
-export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext, { pageId: "webauthn-authenticate.ftl" }>, I18n>) {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
-
-    const { getClassName } = useGetClassName({
-        "defaultClasses": !doUseDefaultCss ? undefined : defaultClasses,
-        classes
-    });
-
-    const { url } = kcContext;
-
-    const { msg, msgStr } = i18n;
-
-    const { authenticators, challenge, shouldDisplayAuthenticators, userVerification, rpId } = kcContext;
-    const createTimeout = Number(kcContext.createTimeout);
-    const isUserIdentified = kcContext.isUserIdentified == "true";
-
-    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, doUseDefaultCss, classes }}
-            headerNode={msg("webauthn-login-title")}
-            formNode={
-                <div id="kc-form-webauthn" className={getClassName("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={getClassName("kcFormGroupClass")}>
-                        {authenticators &&
-                            (() => (
-                                <form id="authn_select" className={getClassName("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={getClassName("kcSelectAuthListItemTitle")}>{msg("webauthn-available-authenticators")}</p>
-                                    )}
-                                    <div className={getClassName("kcFormClass")}>
-                                        {authenticators.authenticators.map(authenticator => (
-                                            <div id="kc-webauthn-authenticator" className={getClassName("kcSelectAuthListItemClass")}>
-                                                <div className={getClassName("kcSelectAuthListItemIconClass")}>
-                                                    <i
-                                                        className={clsx(
-                                                            (() => {
-                                                                const className = getClassName(authenticator.transports.iconClass as any);
-                                                                return className.includes(" ")
-                                                                    ? className
-                                                                    : [className, getClassName("kcWebAuthnDefaultIcon")];
-                                                            })(),
-                                                            getClassName("kcSelectAuthListItemIconPropertyClass")
-                                                        )}
-                                                    />
-                                                </div>
-                                                <div className={getClassName("kcSelectAuthListItemBodyClass")}>
-                                                    <div
-                                                        id="kc-webauthn-authenticator-label"
-                                                        className={getClassName("kcSelectAuthListItemHeadingClass")}
-                                                    >
-                                                        {authenticator.label}
-                                                    </div>
-
-                                                    {authenticator.transports && authenticator.transports.displayNameProperties.length && (
-                                                        <div
-                                                            id="kc-webauthn-authenticator-transport"
-                                                            className={getClassName("kcSelectAuthListItemDescriptionClass")}
-                                                        >
-                                                            {authenticator.transports.displayNameProperties.map(
-                                                                (transport: MessageKey, index: number) => (
-                                                                    <>
-                                                                        <span>{msg(transport)}</span>
-                                                                        {index < authenticator.transports.displayNameProperties.length - 1 && (
-                                                                            <span>{", "}</span>
-                                                                        )}
-                                                                    </>
-                                                                )
-                                                            )}
-                                                        </div>
-                                                    )}
-
-                                                    <div className={getClassName("kcSelectAuthListItemDescriptionClass")}>
-                                                        <span id="kc-webauthn-authenticator-created-label">{msg("webauthn-createdAt-label")}</span>
-                                                        <span id="kc-webauthn-authenticator-created">{authenticator.createdAt}</span>
-                                                    </div>
-                                                </div>
-                                                <div className={getClassName("kcSelectAuthListItemFillClass")} />
-                                            </div>
-                                        ))}
-                                    </div>
-                                </>
-                            ))()}
-                        <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
-                            <input
-                                id="authenticateWebAuthnButton"
-                                type="button"
-                                onClick={webAuthnAuthenticate}
-                                autoFocus={true}
-                                value={msgStr("webauthn-doAuthenticate")}
-                                className={clsx(
-                                    getClassName("kcButtonClass"),
-                                    getClassName("kcButtonPrimaryClass"),
-                                    getClassName("kcButtonBlockClass"),
-                                    getClassName("kcButtonLargeClass")
-                                )}
-                            />
-                        </div>
-                    </div>
-                </div>
-            }
-        />
-    );
-}

package/src/pages/shared/UserProfileCommons.tsx

@@ -1,172 +0,0 @@
-import { useEffect, Fragment } from "react";
-import type { ClassKey } from "keycloakify/pages/PageProps";
-import { clsx } from "keycloakify/tools/clsx";
-import { useFormValidation } from "keycloakify/lib/useFormValidation";
-import type { Attribute } from "keycloakify/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 } = 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}
-                                            >
-                                                {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>
-                );
-            })}
-        </>
-    );
-}