keycloakify 6.13.2 → 7.0.0-rc.3

package/src/lib/pages/RegisterUserProfile.tsx

@@ -1,60 +0,0 @@
-import React, { useState } from "react";
-import { clsx } from "../tools/clsx";
-import { UserProfileFormFields } from "./shared/UserProfileCommons";
-import type { PageProps } from "../KcProps";
-import type { KcContextBase } from "../getKcContext";
-import type { I18nBase } from "../i18n";
-
-export default function RegisterUserProfile(props: PageProps<Extract<KcContextBase, { pageId: "register-user-profile.ftl" }>, I18nBase>) {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
-
-    const { url, messagesPerField, recaptchaRequired, recaptchaSiteKey } = kcContext;
-
-    const { msg, msgStr } = i18n;
-
-    const [isFomSubmittable, setIsFomSubmittable] = useState(false);
-
-    return (
-        <Template
-            {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
-            displayMessage={messagesPerField.exists("global")}
-            displayRequiredFields={true}
-            headerNode={msg("registerTitle")}
-            formNode={
-                <form id="kc-register-form" className={clsx(kcProps.kcFormClass)} action={url.registrationAction} method="post">
-                    <UserProfileFormFields kcContext={kcContext} onIsFormSubmittableValueChange={setIsFomSubmittable} i18n={i18n} {...kcProps} />
-                    {recaptchaRequired && (
-                        <div className="form-group">
-                            <div className={clsx(kcProps.kcInputWrapperClass)}>
-                                <div className="g-recaptcha" data-size="compact" data-sitekey={recaptchaSiteKey} />
-                            </div>
-                        </div>
-                    )}
-                    <div className={clsx(kcProps.kcFormGroupClass)} style={{ "marginBottom": 30 }}>
-                        <div id="kc-form-options" className={clsx(kcProps.kcFormOptionsClass)}>
-                            <div className={clsx(kcProps.kcFormOptionsWrapperClass)}>
-                                <span>
-                                    <a href={url.loginUrl}>{msg("backToLogin")}</a>
-                                </span>
-                            </div>
-                        </div>
-
-                        <div id="kc-form-buttons" className={clsx(kcProps.kcFormButtonsClass)}>
-                            <input
-                                className={clsx(
-                                    kcProps.kcButtonClass,
-                                    kcProps.kcButtonPrimaryClass,
-                                    kcProps.kcButtonBlockClass,
-                                    kcProps.kcButtonLargeClass
-                                )}
-                                type="submit"
-                                value={msgStr("doRegister")}
-                                disabled={!isFomSubmittable}
-                            />
-                        </div>
-                    </div>
-                </form>
-            }
-        />
-    );
-}

package/src/lib/pages/Terms.tsx

@@ -1,105 +0,0 @@
-import React, { useEffect } from "react";
-import { memoize } from "../tools/memoize";
-import { clsx } from "../tools/clsx";
-import { Evt } from "evt";
-import { useRerenderOnStateChange } from "evt/hooks";
-import { assert } from "tsafe/assert";
-import { fallbackLanguageTag } from "../i18n";
-import { useConst } from "../tools/useConst";
-import { useConstCallback } from "../tools/useConstCallback";
-import { Markdown } from "../tools/Markdown";
-import type { Extends } from "tsafe";
-import type { PageProps } from "../KcProps";
-import type { KcContextBase } from "../getKcContext";
-import type { I18nBase } from "../i18n";
-
-export default function Terms(props: PageProps<Extract<KcContextBase, { pageId: "terms.ftl" }>, I18nBase>) {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
-
-    const { msg, msgStr } = i18n;
-
-    useRerenderOnStateChange(evtTermMarkdown);
-
-    const { url } = kcContext;
-
-    if (evtTermMarkdown.state === undefined) {
-        return null;
-    }
-
-    return (
-        <Template
-            {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
-            displayMessage={false}
-            headerNode={msg("termsTitle")}
-            formNode={
-                <>
-                    <div id="kc-terms-text">{evtTermMarkdown.state && <Markdown>{evtTermMarkdown.state}</Markdown>}</div>
-                    <form className="form-actions" action={url.loginAction} method="POST">
-                        <input
-                            className={clsx(
-                                kcProps.kcButtonClass,
-                                kcProps.kcButtonClass,
-                                kcProps.kcButtonClass,
-                                kcProps.kcButtonPrimaryClass,
-                                kcProps.kcButtonLargeClass
-                            )}
-                            name="accept"
-                            id="kc-accept"
-                            type="submit"
-                            value={msgStr("doAccept")}
-                        />
-                        <input
-                            className={clsx(kcProps.kcButtonClass, kcProps.kcButtonDefaultClass, kcProps.kcButtonLargeClass)}
-                            name="cancel"
-                            id="kc-decline"
-                            type="submit"
-                            value={msgStr("doDecline")}
-                        />
-                    </form>
-                    <div className="clearfix" />
-                </>
-            }
-        />
-    );
-}
-
-export const evtTermMarkdown = Evt.create<string | undefined>(undefined);
-
-export type KcContextLike = {
-    pageId: KcContextBase["pageId"];
-    locale?: {
-        currentLanguageTag: string;
-    };
-};
-
-assert<Extends<KcContextBase, KcContextLike>>();
-
-/** Allow to avoid bundling the terms and download it on demand*/
-export function useDownloadTerms(params: {
-    kcContext: KcContextLike;
-    downloadTermMarkdown: (params: { currentLanguageTag: string }) => Promise<string>;
-}) {
-    const { kcContext } = params;
-
-    const { downloadTermMarkdownMemoized } = (function useClosure() {
-        const { downloadTermMarkdown } = params;
-
-        const downloadTermMarkdownConst = useConstCallback(downloadTermMarkdown);
-
-        const downloadTermMarkdownMemoized = useConst(() =>
-            memoize((currentLanguageTag: string) => downloadTermMarkdownConst({ currentLanguageTag }))
-        );
-
-        return { downloadTermMarkdownMemoized };
-    })();
-
-    useEffect(() => {
-        if (kcContext.pageId !== "terms.ftl") {
-            return;
-        }
-
-        downloadTermMarkdownMemoized(kcContext.locale?.currentLanguageTag ?? fallbackLanguageTag).then(
-            thermMarkdown => (evtTermMarkdown.state = thermMarkdown)
-        );
-    }, []);
-}

package/src/lib/pages/UpdateUserProfile.tsx

@@ -1,67 +0,0 @@
-import React, { useState } from "react";
-import { clsx } from "../tools/clsx";
-import { UserProfileFormFields } from "./shared/UserProfileCommons";
-import type { PageProps } from "../KcProps";
-import type { KcContextBase } from "../getKcContext";
-import type { I18nBase } from "../i18n";
-
-export default function UpdateUserProfile(props: PageProps<Extract<KcContextBase, { pageId: "update-user-profile.ftl" }>, I18nBase>) {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
-
-    const { msg, msgStr } = i18n;
-
-    const { url, isAppInitiatedAction } = kcContext;
-
-    const [isFomSubmittable, setIsFomSubmittable] = useState(false);
-
-    return (
-        <Template
-            {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
-            headerNode={msg("loginProfileTitle")}
-            formNode={
-                <form id="kc-update-profile-form" className={clsx(kcProps.kcFormClass)} action={url.loginAction} method="post">
-                    <UserProfileFormFields kcContext={kcContext} onIsFormSubmittableValueChange={setIsFomSubmittable} i18n={i18n} {...kcProps} />
-
-                    <div className={clsx(kcProps.kcFormGroupClass)}>
-                        <div id="kc-form-options" className={clsx(kcProps.kcFormOptionsClass)}>
-                            <div className={clsx(kcProps.kcFormOptionsWrapperClass)}></div>
-                        </div>
-
-                        <div id="kc-form-buttons" className={clsx(kcProps.kcFormButtonsClass)}>
-                            {isAppInitiatedAction ? (
-                                <>
-                                    <input
-                                        className={clsx(kcProps.kcButtonClass, kcProps.kcButtonPrimaryClass, kcProps.kcButtonLargeClass)}
-                                        type="submit"
-                                        value={msgStr("doSubmit")}
-                                    />
-                                    <button
-                                        className={clsx(kcProps.kcButtonClass, kcProps.kcButtonDefaultClass, kcProps.kcButtonLargeClass)}
-                                        type="submit"
-                                        name="cancel-aia"
-                                        value="true"
-                                        formNoValidate
-                                    >
-                                        {msg("doCancel")}
-                                    </button>
-                                </>
-                            ) : (
-                                <input
-                                    className={clsx(
-                                        kcProps.kcButtonClass,
-                                        kcProps.kcButtonPrimaryClass,
-                                        kcProps.kcButtonBlockClass,
-                                        kcProps.kcButtonLargeClass
-                                    )}
-                                    type="submit"
-                                    defaultValue={msgStr("doSubmit")}
-                                    disabled={!isFomSubmittable}
-                                />
-                            )}
-                        </div>
-                    </div>
-                </form>
-            }
-        />
-    );
-}

package/src/lib/pages/WebauthnAuthenticate.tsx

@@ -1,193 +0,0 @@
-import React, { useRef, useState } from "react";
-import { clsx } from "../tools/clsx";
-import type { MessageKeyBase } from "../i18n";
-import { base64url } from "rfc4648";
-import { useConstCallback } from "../tools/useConstCallback";
-import type { PageProps } from "../KcProps";
-import type { KcContextBase } from "../getKcContext";
-import type { I18nBase } from "../i18n";
-
-export default function WebauthnAuthenticate(props: PageProps<Extract<KcContextBase, { pageId: "webauthn-authenticate.ftl" }>, I18nBase>) {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
-
-    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, doFetchDefaultThemeResources, ...kcProps }}
-            headerNode={msg("webauthn-login-title")}
-            formNode={
-                <div id="kc-form-webauthn" className={clsx(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={clsx(kcProps.kcFormGroupClass)}>
-                        {authenticators &&
-                            (() => (
-                                <form id="authn_select" className={clsx(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={clsx(kcProps.kcSelectAuthListItemTitle)}>{msg("webauthn-available-authenticators")}</p>
-                                    )}
-                                    <div className={clsx(kcProps.kcFormClass)}>
-                                        {authenticators.authenticators.map(authenticator => (
-                                            <div id="kc-webauthn-authenticator" className={clsx(kcProps.kcSelectAuthListItemClass)}>
-                                                <div className={clsx(kcProps.kcSelectAuthListItemIconClass)}>
-                                                    <i
-                                                        className={clsx(
-                                                            kcProps[authenticator.transports.iconClass] ?? kcProps.kcWebAuthnDefaultIcon,
-                                                            kcProps.kcSelectAuthListItemIconPropertyClass
-                                                        )}
-                                                    />
-                                                </div>
-                                                <div className={clsx(kcProps.kcSelectAuthListItemBodyClass)}>
-                                                    <div
-                                                        id="kc-webauthn-authenticator-label"
-                                                        className={clsx(kcProps.kcSelectAuthListItemHeadingClass)}
-                                                    >
-                                                        {authenticator.label}
-                                                    </div>
-
-                                                    {authenticator.transports && authenticator.transports.displayNameProperties.length && (
-                                                        <div
-                                                            id="kc-webauthn-authenticator-transport"
-                                                            className={clsx(kcProps.kcSelectAuthListItemDescriptionClass)}
-                                                        >
-                                                            {authenticator.transports.displayNameProperties.map(
-                                                                (transport: MessageKeyBase, index: number) => (
-                                                                    <>
-                                                                        <span>{msg(transport)}</span>
-                                                                        {index < authenticator.transports.displayNameProperties.length - 1 && (
-                                                                            <span>{", "}</span>
-                                                                        )}
-                                                                    </>
-                                                                )
-                                                            )}
-                                                        </div>
-                                                    )}
-
-                                                    <div className={clsx(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>
-                                                <div className={clsx(kcProps.kcSelectAuthListItemFillClass)} />
-                                            </div>
-                                        ))}
-                                    </div>
-                                </>
-                            ))()}
-                        <div id="kc-form-buttons" className={clsx(kcProps.kcFormButtonsClass)}>
-                            <input
-                                id="authenticateWebAuthnButton"
-                                type="button"
-                                onClick={webAuthnAuthenticate}
-                                autoFocus={true}
-                                value={msgStr("webauthn-doAuthenticate")}
-                                className={clsx(
-                                    kcProps.kcButtonClass,
-                                    kcProps.kcButtonPrimaryClass,
-                                    kcProps.kcButtonBlockClass,
-                                    kcProps.kcButtonLargeClass
-                                )}
-                            />
-                        </div>
-                    </div>
-                </div>
-            }
-        />
-    );
-}