keycloakify 10.0.0-rc.2 → 10.0.0-rc.21

package/src/login/pages/Code.tsx

@@ -24,7 +24,7 @@ export default function Code(props: PageProps<Extract<KcContext, { pageId: "code
                 {code.success ? (
                     <>
                         <p>{msg("copyCodeInstruction")}</p>
-                        <input id="code" className={getClassName("kcTextareaClass")} value={code.code} />
+                        <input id="code" className={getClassName("kcTextareaClass")} defaultValue={code.code} />
                     </>
                 ) : (
                     <p id="error">{code.error}</p>

package/src/login/pages/DeleteAccountConfirm.tsx

@@ -19,12 +19,18 @@ export default function DeleteAccountConfirm(props: PageProps<Extract<KcContext,
     return (
         <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("deleteAccountConfirm")}>
             <form action={url.loginAction} className="form-vertical" method="post">
-                <div className="alert alert-warning" style={{ "marginTop": "0", "marginBottom": "30px" }}>
+                <div className="alert alert-warning" style={{ marginTop: "0", marginBottom: "30px" }}>
                     <span className="pficon pficon-warning-triangle-o"></span>
                     {msg("irreversibleAction")}
                 </div>
                 <p>{msg("deletingImplies")}</p>
-                <ul style={{ "color": "#72767b", "listStyle": "disc", "listStylePosition": "inside" }}>
+                <ul
+                    style={{
+                        color: "#72767b",
+                        listStyle: "disc",
+                        listStylePosition: "inside"
+                    }}
+                >
                     <li>{msg("loggingOutImmediately")}</li>
                     <li>{msg("errasingData")}</li>
                 </ul>
@@ -38,7 +44,7 @@ export default function DeleteAccountConfirm(props: PageProps<Extract<KcContext,
                     {triggered_from_aia && (
                         <button
                             className={clsx(getClassName("kcButtonClass"), getClassName("kcButtonDefaultClass"), getClassName("kcButtonLargeClass"))}
-                            style={{ "marginLeft": "calc(100% - 220px)" }}
+                            style={{ marginLeft: "calc(100% - 220px)" }}
                             type="submit"
                             name="cancel-aia"
                             value="true"

package/src/login/pages/FrontchannelLogout.tsx

@@ -27,7 +27,7 @@ export default function FrontchannelLogout(props: PageProps<Extract<KcContext, {
                 {logout.clients.map(client => (
                     <li key={client.name}>
                         {client.name}
-                        <iframe src={client.frontChannelLogoutUrl} style={{ "display": "none" }} />
+                        <iframe src={client.frontChannelLogoutUrl} style={{ display: "none" }} />
                     </li>
                 ))}
             </ul>

package/src/login/pages/IdpReviewUserProfile.tsx

@@ -29,7 +29,7 @@ export default function IdpReviewUserProfile(props: IdpReviewUserProfileProps) {
         <Template
             {...{ kcContext, i18n, doUseDefaultCss, classes }}
             displayMessage={messagesPerField.exists("global")}
-            displayRequiredFields={true}
+            displayRequiredFields
             headerNode={msg("loginIdpReviewProfileTitle")}
         >
             <form id="kc-idp-review-profile-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">

package/src/login/pages/Login.tsx

@@ -96,15 +96,15 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
                                         {!realm.loginWithEmailAllowed
                                             ? msg("username")
                                             : !realm.registrationEmailAsUsername
-                                            ? msg("usernameOrEmail")
-                                            : msg("email")}
+                                              ? msg("usernameOrEmail")
+                                              : msg("email")}
                                     </label>
                                     <input
                                         tabIndex={2}
                                         id="username"
                                         className={getClassName("kcInputClass")}
                                         name="username"
-                                        value={login.username ?? ""}
+                                        defaultValue={login.username ?? ""}
                                         type="text"
                                         autoFocus
                                         autoComplete="username"

package/src/login/pages/LoginRecoveryAuthnCodeConfig.tsx

@@ -21,10 +21,10 @@ export default function LoginRecoveryAuthnCodeConfig(props: PageProps<Extract<Kc
     const { msg, msgStr } = i18n;
 
     const { insertScriptTags } = useInsertScriptTags({
-        "scriptTags": [
+        scriptTags: [
             {
-                "type": "text/javascript",
-                "textContent": `
+                type: "text/javascript",
+                textContent: `
 
                     /* copy recovery codes  */
                     function copyRecoveryCodes() {

package/src/login/pages/LoginResetPassword.tsx

@@ -31,8 +31,8 @@ export default function LoginResetPassword(props: PageProps<Extract<KcContext, {
                             {!realm.loginWithEmailAllowed
                                 ? msg("username")
                                 : !realm.registrationEmailAsUsername
-                                ? msg("usernameOrEmail")
-                                : msg("email")}
+                                  ? msg("usernameOrEmail")
+                                  : msg("email")}
                         </label>
                     </div>
                     <div className={getClassName("kcInputWrapperClass")}>

package/src/login/pages/LoginUpdateProfile.tsx

@@ -26,7 +26,7 @@ export default function LoginUpdateProfile(props: LoginUpdateProfileProps) {
     const [isFormSubmittable, setIsFormSubmittable] = useState(false);
 
     return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("loginProfileTitle")}>
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayRequiredFields headerNode={msg("loginProfileTitle")}>
             <form id="kc-update-profile-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
                 <UserProfileFormFields
                     {...{

package/src/login/pages/LoginUsername.tsx

@@ -93,15 +93,15 @@ export default function LoginUsername(props: PageProps<Extract<KcContext, { page
                                         {!realm.loginWithEmailAllowed
                                             ? msg("username")
                                             : !realm.registrationEmailAsUsername
-                                            ? msg("usernameOrEmail")
-                                            : msg("email")}
+                                              ? msg("usernameOrEmail")
+                                              : msg("email")}
                                     </label>
                                     <input
                                         tabIndex={2}
                                         id="username"
                                         className={getClassName("kcInputClass")}
                                         name="username"
-                                        value={login.username ?? ""}
+                                        defaultValue={login.username ?? ""}
                                         type="text"
                                         autoFocus
                                         autoComplete="off"

package/src/login/pages/Register.tsx

@@ -28,7 +28,7 @@ export default function Register(props: RegisterProps) {
     const [isFormSubmittable, setIsFormSubmittable] = useState(false);
 
     return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("registerTitle")}>
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("registerTitle")} displayRequiredFields>
             <form id="kc-register-form" className={getClassName("kcFormClass")} action={url.registrationAction} method="post">
                 <UserProfileFormFields
                     {...{

package/src/login/pages/UpdateEmail.tsx

@@ -29,7 +29,7 @@ export default function UpdateEmail(props: UpdateEmailProps) {
         <Template
             {...{ kcContext, i18n, doUseDefaultCss, classes }}
             displayMessage={messagesPerField.exists("global")}
-            displayRequiredFields={true}
+            displayRequiredFields
             headerNode={msg("updateEmailTitle")}
         >
             <form id="kc-update-email-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">

package/src/login/pages/WebauthnAuthenticate.tsx

@@ -32,18 +32,18 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
     const { msg, msgStr } = i18n;
 
     const { insertScriptTags } = useInsertScriptTags({
-        "scriptTags": [
+        scriptTags: [
             {
-                "type": "text/javascript",
-                "src": `${url.resourcesCommonPath}/node_modules/jquery/dist/jquery.min.js`
+                type: "text/javascript",
+                src: `${url.resourcesCommonPath}/node_modules/jquery/dist/jquery.min.js`
             },
             {
-                "type": "text/javascript",
-                "src": `${url.resourcesPath}/js/base64url.js`
+                type: "text/javascript",
+                src: `${url.resourcesPath}/js/base64url.js`
             },
             {
-                "type": "text/javascript",
-                "textContent": `
+                type: "text/javascript",
+                textContent: `
 
                     function webAuthnAuthenticate() {
                         let isUserIdentified = ${isUserIdentified};
@@ -206,7 +206,10 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
                                                             className={getClassName("kcSelectAuthListItemDescriptionClass")}
                                                         >
                                                             {authenticator.transports.displayNameProperties
-                                                                .map((nameProperty, i, arr) => ({ nameProperty, "hasNext": i !== arr.length - 1 }))
+                                                                .map((nameProperty, i, arr) => ({
+                                                                    nameProperty,
+                                                                    hasNext: i !== arr.length - 1
+                                                                }))
                                                                 .map(({ nameProperty, hasNext }) => (
                                                                     <Fragment key={nameProperty}>
                                                                         <span>{msg(nameProperty)}</span>

package/src/login/pages/WebauthnRegister.tsx

@@ -35,18 +35,18 @@ export default function WebauthnRegister(props: PageProps<Extract<KcContext, { p
     const { msg, msgStr } = i18n;
 
     const { insertScriptTags } = useInsertScriptTags({
-        "scriptTags": [
+        scriptTags: [
             {
-                "type": "text/javascript",
-                "src": `${url.resourcesCommonPath}/node_modules/jquery/dist/jquery.min.js`
+                type: "text/javascript",
+                src: `${url.resourcesCommonPath}/node_modules/jquery/dist/jquery.min.js`
             },
             {
-                "type": "text/javascript",
-                "src": `${url.resourcesPath}/js/base64url.js`
+                type: "text/javascript",
+                src: `${url.resourcesPath}/js/base64url.js`
             },
             {
-                "type": "text/javascript",
-                "textContent": `
+                type: "text/javascript",
+                textContent: `
                 function registerSecurityKey() {
 
                     // Check if WebAuthn is supported by this browser
@@ -275,7 +275,7 @@ function LogoutOtherSessions(props: { i18n: I18n; getClassName: ReturnType<typeo
             <div className={getClassName("kcFormOptionsWrapperClass")}>
                 <div className="checkbox">
                     <label>
-                        <input type="checkbox" id="logout-sessions" name="logout-sessions" value="on" checked />
+                        <input type="checkbox" id="logout-sessions" name="logout-sessions" value="on" defaultChecked={true} />
                         {msg("logoutOtherSessions")}
                     </label>
                 </div>

package/src/tools/AndByDiscriminatingKey.ts

@@ -10,16 +10,22 @@ export declare namespace AndByDiscriminatingKey {
         U1,
         U1Again extends Record<DiscriminatingKey, string>,
         U2 extends Record<DiscriminatingKey, string>
-    > = U1 extends Pick<U2, DiscriminatingKey>
-        ? Tf2<DiscriminatingKey, U1, U2, U1Again>
-        : U1Again[DiscriminatingKey] & U2[DiscriminatingKey] extends never
-        ? U1 | U2
-        : U1;
+    > =
+        U1 extends Pick<U2, DiscriminatingKey>
+            ? Tf2<DiscriminatingKey, U1, U2, U1Again>
+            : U1Again[DiscriminatingKey] & U2[DiscriminatingKey] extends never
+              ? U1 | U2
+              : U1;
 
     export type Tf2<
         DiscriminatingKey extends string,
         SingletonU1 extends Record<DiscriminatingKey, string>,
         U2,
         U1 extends Record<DiscriminatingKey, string>
-    > = U2 extends Pick<SingletonU1, DiscriminatingKey> ? U2 & SingletonU1 : U2 extends Pick<U1, DiscriminatingKey> ? never : U2;
+    > =
+        U2 extends Pick<SingletonU1, DiscriminatingKey>
+            ? U2 & SingletonU1
+            : U2 extends Pick<U1, DiscriminatingKey>
+              ? never
+              : U2;
 }

package/src/tools/Array.prototype.every.ts

@@ -17,7 +17,10 @@ if (!Array.prototype.every) {
         var len = O.length >>> 0;
 
         // 4. If IsCallable(callbackfn) is false, throw a TypeError exception.
-        if (typeof callbackfn !== "function" && Object.prototype.toString.call(callbackfn) !== "[object Function]") {
+        if (
+            typeof callbackfn !== "function" &&
+            Object.prototype.toString.call(callbackfn) !== "[object Function]"
+        ) {
             throw new TypeError();
         }
 

package/src/tools/LazyOrNot.ts

@@ -1,3 +1,5 @@
 import type { LazyExoticComponent, ComponentType } from "react";
 
-export type LazyOrNot<Component extends ComponentType<any>> = LazyExoticComponent<Component> | Component;
+export type LazyOrNot<Component extends ComponentType<any>> =
+    | LazyExoticComponent<Component>
+    | Component;

package/src/tools/StatefulObservable/README.md

@@ -0,0 +1,16 @@
+`StatefulObservable` is a construct that allow to avoid having to depend on [EVT](https://evt.land).
+
+A `StatefulObservable` can be converted to an evt with:
+
+```ts
+import { statefulObservableToStatefulEvt } from "powerhooks/tools/StatefulObservable/statefulObservableToStatefulEvt";
+
+const evtXyz = statefulObservableToStatefulEvt({
+    statefulObservable: $xyz
+    //Optionally you can pass a Ctx
+});
+```
+
+WARNING: Unlike `StatefulEvt`, `StatefulObservable` do not post when we first attach.
+If the current value was not yet evaluated `next()` is called on the initial value returned by the function that
+returns it.

package/src/tools/StatefulObservable/StatefulObservable.ts

@@ -0,0 +1,58 @@
+import { assert } from "tsafe/assert";
+import { is } from "tsafe/is";
+
+export type StatefulObservable<T> = {
+    current: T;
+    subscribe: (next: (data: T) => void) => Subscription;
+};
+
+export type Subscription = {
+    unsubscribe(): void;
+};
+
+export function createStatefulObservable<T>(
+    getInitialValue: () => T
+): StatefulObservable<T> {
+    const nextFunctions: ((data: T) => void)[] = [];
+
+    const { get, set } = (() => {
+        let wrappedState: [T] | undefined = undefined;
+
+        function set(data: T) {
+            wrappedState = [data];
+
+            nextFunctions.forEach(next => next(data));
+        }
+
+        return {
+            get: () => {
+                if (wrappedState === undefined) {
+                    set(getInitialValue());
+                    assert(!is<undefined>(wrappedState));
+                }
+                return wrappedState[0];
+            },
+            set
+        };
+    })();
+
+    return Object.defineProperty(
+        {
+            current: null as any as T,
+            subscribe: (next: (data: T) => void) => {
+                nextFunctions.push(next);
+
+                return {
+                    unsubscribe: () =>
+                        nextFunctions.splice(nextFunctions.indexOf(next), 1)
+                };
+            }
+        },
+        "current",
+        {
+            enumerable: true,
+            get,
+            set
+        }
+    );
+}

package/src/tools/StatefulObservable/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from "./useObservable";
+export * from "./useRerenderOnChange";

package/src/tools/StatefulObservable/hooks/useObservable.ts

@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+import type { Subscription } from "../StatefulObservable";
+
+/**
+ * Equivalent of https://docs.evt.land/api/react-hooks
+ */
+export function useObservable(
+    effect: (params: {
+        registerSubscription: (subscription: Subscription) => void;
+    }) => void,
+    deps: React.DependencyList
+): void {
+    useEffect(() => {
+        const subscriptions: Subscription[] = [];
+
+        effect({
+            registerSubscription: subscription => subscriptions.push(subscription)
+        });
+
+        return () => {
+            subscriptions.forEach(subscription => subscription.unsubscribe());
+            subscriptions.length = 0;
+        };
+    }, deps);
+}

package/src/tools/StatefulObservable/hooks/useRerenderOnChange.ts

@@ -0,0 +1,19 @@
+import { useObservable } from "./useObservable";
+import { useState } from "react";
+import type { StatefulObservable } from "../StatefulObservable";
+
+/**
+ * Equivalent of https://docs.evt.land/api/react-hooks
+ * */
+export function useRerenderOnChange($: StatefulObservable<unknown>): void {
+    //NOTE: We use function in case the state is a function
+    const [, setCurrent] = useState(() => $.current);
+
+    useObservable(
+        ({ registerSubscription }) => {
+            const subscription = $.subscribe(current => setCurrent(() => current));
+            registerSubscription(subscription);
+        },
+        [$]
+    );
+}

package/src/tools/StatefulObservable/index.ts

@@ -0,0 +1,2 @@
+export * from "./StatefulObservable";
+export * from "./hooks";

package/src/tools/clsx.ts

@@ -1,7 +1,13 @@
 import { assert } from "tsafe/assert";
 import { typeGuard } from "tsafe/typeGuard";
 
-export type CxArg = undefined | null | string | boolean | Partial<Record<string, boolean | null | undefined>> | readonly CxArg[];
+export type CxArg =
+    | undefined
+    | null
+    | string
+    | boolean
+    | Partial<Record<string, boolean | null | undefined>>
+    | readonly CxArg[];
 
 export const clsx = (...args: CxArg[]): string => {
     const len = args.length;

package/src/tools/deepAssign.ts

@@ -3,7 +3,10 @@ import { is } from "tsafe/is";
 import { deepClone } from "./deepClone";
 
 //Warning: Be mindful that because of array this is not idempotent.
-export function deepAssign(params: { target: Record<string, unknown>; source: Record<string, unknown> }) {
+export function deepAssign(params: {
+    target: Record<string, unknown>;
+    source: Record<string, unknown>;
+}) {
     const { target } = params;
 
     const source = deepClone(params.source);
@@ -11,12 +14,16 @@ export function deepAssign(params: { target: Record<string, unknown>; source: Re
     Object.keys(source).forEach(key => {
         var dereferencedSource = source[key];
 
-        if (target[key] === undefined || dereferencedSource instanceof Function || !(dereferencedSource instanceof Object)) {
+        if (
+            target[key] === undefined ||
+            dereferencedSource instanceof Function ||
+            !(dereferencedSource instanceof Object)
+        ) {
             Object.defineProperty(target, key, {
-                "enumerable": true,
-                "writable": true,
-                "configurable": true,
-                "value": dereferencedSource
+                enumerable: true,
+                writable: true,
+                configurable: true,
+                value: dereferencedSource
             });
 
             return;
@@ -37,8 +44,8 @@ export function deepAssign(params: { target: Record<string, unknown>; source: Re
         assert(is<Record<string, unknown>>(dereferencedSource));
 
         deepAssign({
-            "target": dereferencedTarget,
-            "source": dereferencedSource
+            target: dereferencedTarget,
+            source: dereferencedSource
         });
     });
 }

package/src/tools/deepClone.ts

@@ -13,5 +13,7 @@ export function deepClone<T>(o: T): T {
         return o.map(deepClone) as any;
     }
 
-    return Object.fromEntries(Object.entries(o).map(([key, value]) => [key, deepClone(value)])) as any;
+    return Object.fromEntries(
+        Object.entries(o).map(([key, value]) => [key, deepClone(value)])
+    ) as any;
 }

package/src/tools/formatNumber.ts

@@ -11,7 +11,10 @@ export const formatNumber = (input: string, format: string): string => {
     }
 
     // calculate the maximum size of the given pattern based on the sum of the expected digits
-    const maxSize = digitPattern.reduce((total, p) => total + parseInt(p.replace("{", "").replace("}", "")), 0);
+    const maxSize = digitPattern.reduce(
+        (total, p) => total + parseInt(p.replace("{", "").replace("}", "")),
+        0
+    );
 
     // keep only digits
     let rawValue = input.replace(/\D+/g, "");

package/src/tools/useConstCallback.ts

@@ -2,7 +2,9 @@ import { useRef, useState } from "react";
 import { Parameters } from "tsafe/Parameters";
 
 /** https://stackoverflow.com/questions/65890278/why-cant-usecallback-always-return-the-same-ref */
-export function useConstCallback<T extends ((...args: any[]) => unknown) | undefined | null>(callback: NonNullable<T>): T {
+export function useConstCallback<
+    T extends ((...args: any[]) => unknown) | undefined | null
+>(callback: NonNullable<T>): T {
     const callbackRef = useRef<typeof callback>(null as any);
 
     callbackRef.current = callback;

package/src/tools/useInsertLinkTags.ts

@@ -13,14 +13,20 @@ export function createUseInsertLinkTags() {
     function useInsertLinkTags(params: { hrefs: string[] }) {
         const { hrefs } = params;
 
-        const [areAllStyleSheetsLoaded, setAllStyleSheetLoaded] = useReducer(() => true, hrefs.length === 0);
+        const [areAllStyleSheetsLoaded, setAllStyleSheetLoaded] = useReducer(
+            () => true,
+            hrefs.length === 0
+        );
 
         useEffect(() => {
             let isActive = true;
 
             mount_link_tags: {
                 if (linkTagsContext !== undefined) {
-                    if (JSON.stringify(linkTagsContext.styleSheetHrefs) === JSON.stringify(hrefs)) {
+                    if (
+                        JSON.stringify(linkTagsContext.styleSheetHrefs) ===
+                        JSON.stringify(hrefs)
+                    ) {
                         break mount_link_tags;
                     }
 
@@ -37,14 +43,21 @@ export function createUseInsertLinkTags() {
                 for (const href of hrefs) {
                     const htmlElement = document.createElement("link");
 
-                    prs.push(new Promise<void>(resolve => htmlElement.addEventListener("load", () => resolve())));
+                    prs.push(
+                        new Promise<void>(resolve =>
+                            htmlElement.addEventListener("load", () => resolve())
+                        )
+                    );
 
                     htmlElement.rel = "stylesheet";
 
                     htmlElement.href = href;
 
                     if (lastMountedHtmlElement !== undefined) {
-                        lastMountedHtmlElement.insertAdjacentElement("afterend", htmlElement);
+                        lastMountedHtmlElement.insertAdjacentElement(
+                            "afterend",
+                            htmlElement
+                        );
                     } else {
                         document.head.prepend(htmlElement);
                     }
@@ -57,9 +70,9 @@ export function createUseInsertLinkTags() {
                 }
 
                 linkTagsContext = {
-                    "styleSheetHrefs": hrefs,
-                    "prAreAllStyleSheetsLoaded": Promise.all(prs).then(() => undefined),
-                    "remove": () => removeFns.forEach(fn => fn())
+                    styleSheetHrefs: hrefs,
+                    prAreAllStyleSheetsLoaded: Promise.all(prs).then(() => undefined),
+                    remove: () => removeFns.forEach(fn => fn())
                 };
             }
 

package/src/tools/useInsertScriptTags.ts

@@ -23,7 +23,9 @@ export function createUseInsertScriptTags() {
     function useInsertScriptTags(params: { scriptTags: ScriptTag[] }) {
         const { scriptTags } = params;
 
-        const currentScriptTagsRef = useConst(() => ({ "current": scriptTags }));
+        const currentScriptTagsRef = useConst(() => ({
+            current: scriptTags
+        }));
 
         currentScriptTagsRef.current = scriptTags;
 
@@ -42,7 +44,10 @@ export function createUseInsertScriptTags() {
                         })
                         .join("---");
 
-                if (getFingerprint(scriptTags) !== getFingerprint(currentScriptTagsRef.current)) {
+                if (
+                    getFingerprint(scriptTags) !==
+                    getFingerprint(currentScriptTagsRef.current)
+                ) {
                     // NOTE: This is for when the scripts imported in the Template have changed switching
                     // from one page to another in storybook.
                     window.location.reload();

package/src/tools/useSetClassName.ts

@@ -1,6 +1,9 @@
 import { useEffect } from "react";
 
-export function useSetClassName(params: { qualifiedName: "html" | "body"; className: string | undefined }) {
+export function useSetClassName(params: {
+    qualifiedName: "html" | "body";
+    className: string | undefined;
+}) {
     const { qualifiedName, className } = params;
 
     useEffect(() => {

package/src/vite-plugin/tsconfig.json

@@ -8,7 +8,8 @@
         "outDir": "../../dist/vite-plugin",
         "rootDir": ".",
         // https://github.com/vitejs/vite/issues/15112#issuecomment-1823908010
-        "skipLibCheck": true
+        "skipLibCheck": true,
+        "sourceMap": false
     },
     "references": [
         {