feat(storybook): update formatting; introduce new pages; update keycloakify

package.json

@@ -28,7 +28,7 @@
         "evt": "^2.4.15",
         "jwt-decode": "^3.1.2",
         "keycloak-js": "^21.0.1",
-        "keycloakify": "^6.12.7",
+        "keycloakify": "^6.13.1",
         "powerhooks": "^0.26.2",
         "react": "18.1.0",
         "react-dom": "18.1.0",

src/keycloak-theme/pages/IdpReviewUserProfile.stories.tsx

@@ -1,6 +1,8 @@
-import {ComponentMeta} from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import KcApp from '../KcApp';
-import {template} from '../../../.storybook/util'
+import { template } from '../../../.storybook/util'
+
+const bind = template('idp-review-user-profile.ftl');
 
 export default {
     kind: 'Page',
@@ -11,7 +13,5 @@ export default {
     },
 } as ComponentMeta<typeof KcApp>;
 
-const bind = template('idp-review-user-profile.ftl');
-
 export const Default = bind({})
 

src/keycloak-theme/pages/IdpReviewUserProfile.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { clsx } from "keycloakify/lib/tools/clsx";
-import { UserProfileFormFields } from "./shared/UserProfileCommons";
+import { UserProfileFormFields } from "keycloakify/lib/pages/shared/UserProfileCommons";
 import type { PageProps } from "keycloakify";
 import type { KcContext } from "../kcContext";
 import type { I18n } from "../i18n";

src/keycloak-theme/pages/Info.stories.tsx

@@ -1,6 +1,8 @@
-import {ComponentMeta} from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import KcApp from '../KcApp';
-import {template} from '../../../.storybook/util'
+import { template } from '../../../.storybook/util'
+
+const bind = template('info.ftl');
 
 export default {
     kind: 'Page',
@@ -11,7 +13,6 @@ export default {
     },
 } as ComponentMeta<typeof KcApp>;
 
-const bind = template('info.ftl');
 
 export const Default = bind({
     messageHeader: 'Yo, get this:',

src/keycloak-theme/pages/Login.stories.tsx

@@ -1,6 +1,8 @@
-import {ComponentMeta} from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import KcApp from '../KcApp';
-import {socialProviders, template} from '../../../.storybook/util'
+import { socialProviders, template } from '../../../.storybook/util'
+
+const bind = template('login.ftl');
 
 export default {
     kind: 'Page',
@@ -11,17 +13,15 @@ export default {
     },
 } as ComponentMeta<typeof KcApp>;
 
-const bind = template('login.ftl');
-
 export const Default = bind({})
-export const WithoutPasswordField = bind({realm: {password: false}})
+export const WithoutPasswordField = bind({ realm: { password: false } })
-export const WithoutRegistration = bind({realm: {registrationAllowed: false}})
+export const WithoutRegistration = bind({ realm: { registrationAllowed: false } })
-export const WithoutRememberMe = bind({realm: {rememberMe: false}})
+export const WithoutRememberMe = bind({ realm: { rememberMe: false } })
-export const WithoutPasswordReset = bind({realm: {resetPasswordAllowed: false}})
+export const WithoutPasswordReset = bind({ realm: { resetPasswordAllowed: false } })
-export const WithEmailAsUsername = bind({realm: {loginWithEmailAllowed: false}})
+export const WithEmailAsUsername = bind({ realm: { loginWithEmailAllowed: false } })
-export const WithPresetUsername = bind({login: {username: 'max.mustermann@mail.com'}})
+export const WithPresetUsername = bind({ login: { username: 'max.mustermann@mail.com' } })
 export const WithImmutablePresetUsername = bind({
-    login: {username: 'max.mustermann@mail.com'},
+    login: { username: 'max.mustermann@mail.com' },
     usernameEditDisabled: true
 })
-export const WithSocialProviders = bind({social: {displayInfo: true, providers: socialProviders}})
+export const WithSocialProviders = bind({ social: { displayInfo: true, providers: socialProviders } })

src/keycloak-theme/pages/LoginConfigTotp.stories.tsx

@@ -1,6 +1,8 @@
-import {ComponentMeta} from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import KcApp from '../KcApp';
-import {template} from '../../../.storybook/util'
+import { template } from '../../../.storybook/util'
+
+const bind = template('login-config-totp.ftl');
 
 export default {
     kind: 'Page',
@@ -11,17 +13,15 @@ export default {
     },
 } as ComponentMeta<typeof KcApp>;
 
-const bind = template('login-config-totp.ftl');
-
 export const Default = bind({})
 
-export const WithManualSetUp = bind({mode: 'manual'})
+export const WithManualSetUp = bind({ mode: 'manual' })
 export const WithError = bind({
     messagesPerField: {
         get: (fieldName: string) => fieldName === 'totp' ? 'Invalid TOTP' : undefined,
         exists: (fieldName: string) => fieldName === 'totp',
         existsError: (fieldName: string) => fieldName === 'totp',
-        printIfExists: <T, >(fieldName: string, x: T) => fieldName === 'totp' ? x : undefined
+        printIfExists: <T,>(fieldName: string, x: T) => fieldName === 'totp' ? x : undefined
     }
 })
 

src/keycloak-theme/pages/LoginIdpLinkConfirm.stories.tsx

@@ -1,6 +1,8 @@
-import {ComponentMeta} from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import KcApp from '../KcApp';
-import {template} from '../../../.storybook/util'
+import { template } from '../../../.storybook/util'
+
+const bind = template('login-idp-link-confirm.ftl');
 
 export default {
     kind: 'Page',
@@ -11,7 +13,5 @@ export default {
     },
 } as ComponentMeta<typeof KcApp>;
 
-const bind = template('login-idp-link-confirm.ftl');
-
 export const Default = bind({})
 

src/keycloak-theme/pages/LoginIdpLinkEmail.stories.tsx

@@ -1,6 +1,8 @@
-import {ComponentMeta} from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import KcApp from '../KcApp';
-import {template} from '../../../.storybook/util'
+import { template } from '../../../.storybook/util'
+
+const bind = template('login-idp-link-email.ftl');
 
 export default {
     kind: 'Page',
@@ -11,7 +13,5 @@ export default {
     },
 } as ComponentMeta<typeof KcApp>;
 
-const bind = template('login-idp-link-email.ftl');
-
 export const Default = bind({})
 

src/keycloak-theme/pages/LoginOtp.stories.tsx

@@ -1,6 +1,8 @@
-import {ComponentMeta} from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import KcApp from '../KcApp';
-import {template} from '../../../.storybook/util'
+import { template } from '../../../.storybook/util'
+
+const bind = template('login-otp.ftl');
 
 export default {
     kind: 'Page',
@@ -11,6 +13,4 @@ export default {
     },
 } as ComponentMeta<typeof KcApp>;
 
-const bind = template('login-otp.ftl');
-
 export const Default = bind({})

src/keycloak-theme/pages/LoginPageExpired.stories.tsx

@@ -1,6 +1,8 @@
-import {ComponentMeta} from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import KcApp from '../KcApp';
-import {socialProviders, template} from '../../../.storybook/util'
+import { template } from '../../../.storybook/util'
+
+const bind = template('login-page-expired.ftl');
 
 export default {
     kind: 'Page',
@@ -11,6 +13,4 @@ export default {
     },
 } as ComponentMeta<typeof KcApp>;
 
-const bind = template('login-page-expired.ftl');
-
 export const Default = bind({})

src/keycloak-theme/pages/LoginPassword.stories.tsx

@@ -1,16 +1,16 @@
-import {ComponentMeta} from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import KcApp from '../KcApp';
-import {template} from '../../../.storybook/util'
+import { template } from '../../../.storybook/util'
+
+const bind = template('login-password.ftl');
 
 export default {
     kind: 'Page',
-    title: 'Theme/Pages/Login/Password Only',
+    title: 'Theme/Pages/Login/Password',
     component: KcApp,
     parameters: {
         layout: 'fullscreen',
     },
 } as ComponentMeta<typeof KcApp>;
 
-const bind = template('login-password.ftl');
-
 export const Default = bind({})

src/keycloak-theme/pages/LoginResetPassword.stories.tsx

@@ -1,6 +1,8 @@
-import {ComponentMeta} from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import KcApp from '../KcApp';
-import {template} from '../../../.storybook/util'
+import { template } from '../../../.storybook/util'
+
+const bind = template('login-reset-password.ftl');
 
 export default {
     kind: 'Page',
@@ -11,7 +13,5 @@ export default {
     },
 } as ComponentMeta<typeof KcApp>;
 
-const bind = template('login-reset-password.ftl');
-
 export const Default = bind({})
-export const WithEmailAsUsername = bind({realm: {loginWithEmailAllowed: true, registrationEmailAsUsername: true}})
+export const WithEmailAsUsername = bind({ realm: { loginWithEmailAllowed: true, registrationEmailAsUsername: true } })

src/keycloak-theme/pages/LoginUpdatePassword.stories.tsx

@@ -1,6 +1,8 @@
-import {ComponentMeta} from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import KcApp from '../KcApp';
-import {template} from '../../../.storybook/util'
+import { template } from '../../../.storybook/util'
+
+const bind = template('login-update-password.ftl');
 
 export default {
     kind: 'Page',
@@ -11,6 +13,4 @@ export default {
     },
 } as ComponentMeta<typeof KcApp>;
 
-const bind = template('login-update-password.ftl');
-
 export const Default = bind({})

src/keycloak-theme/pages/LoginUsername.stories.tsx

@@ -0,0 +1,17 @@
+import { ComponentMeta } from '@storybook/react';
+import KcApp from '../KcApp';
+import { template } from '../../../.storybook/util'
+
+const bind = template('login-username.ftl');
+
+export default {
+    kind: 'Page',
+    title: 'Theme/Pages/Login/Username',
+    component: KcApp,
+    parameters: {
+        layout: 'fullscreen',
+    },
+} as ComponentMeta<typeof KcApp>;
+
+export const Default = bind({})
+export const WithEmailAsUsername = bind({ realm: { loginWithEmailAllowed: true, registrationEmailAsUsername: true } })

src/keycloak-theme/pages/LoginUsername.tsx

@@ -0,0 +1,158 @@
+import React, { useState } from "react";
+import { clsx } from "keycloakify/lib/tools/clsx";
+import { useConstCallback } from "keycloakify/lib/tools/useConstCallback";
+import type { FormEventHandler } from "react";
+import type { PageProps } from "keycloakify";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+
+export default function LoginUsername(props: PageProps<Extract<KcContext, { pageId: "login-username.ftl" }>, I18n>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
+
+    const { social, realm, url, usernameHidden, login, registrationDisabled } = kcContext;
+
+    const { msg, msgStr } = i18n;
+
+    const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
+
+    const onSubmit = useConstCallback<FormEventHandler<HTMLFormElement>>(e => {
+        e.preventDefault();
+
+        setIsLoginButtonDisabled(true);
+
+        const formElement = e.target as HTMLFormElement;
+
+        //NOTE: Even if we login with email Keycloak expect username and password in
+        //the POST request.
+        formElement.querySelector("input[name='email']")?.setAttribute("name", "username");
+
+        formElement.submit();
+    });
+
+    return (
+        <Template
+            {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
+            displayInfo={social.displayInfo}
+            displayWide={realm.password && social.providers !== undefined}
+            headerNode={msg("doLogIn")}
+            formNode={
+                <div id="kc-form" className={clsx(realm.password && social.providers !== undefined && kcProps.kcContentWrapperClass)}>
+                    <div
+                        id="kc-form-wrapper"
+                        className={clsx(
+                            realm.password && social.providers && [kcProps.kcFormSocialAccountContentClass, kcProps.kcFormSocialAccountClass]
+                        )}
+                    >
+                        {realm.password && (
+                            <form id="kc-form-login" onSubmit={onSubmit} action={url.loginAction} method="post">
+                                <div className={clsx(kcProps.kcFormGroupClass)}>
+                                    {!usernameHidden &&
+                                        (() => {
+                                            const label = !realm.loginWithEmailAllowed
+                                                ? "username"
+                                                : realm.registrationEmailAsUsername
+                                                ? "email"
+                                                : "usernameOrEmail";
+
+                                            const autoCompleteHelper: typeof label = label === "usernameOrEmail" ? "username" : label;
+
+                                            return (
+                                                <>
+                                                    <label htmlFor={autoCompleteHelper} className={clsx(kcProps.kcLabelClass)}>
+                                                        {msg(label)}
+                                                    </label>
+                                                    <input
+                                                        tabIndex={1}
+                                                        id={autoCompleteHelper}
+                                                        className={clsx(kcProps.kcInputClass)}
+                                                        // NOTE: This is used by Google Chrome auto fill so we use it to tell
+                                                        // the browser how to pre fill the form but before submit we put it back
+                                                        // to username because it is what keycloak expects.
+                                                        name={autoCompleteHelper}
+                                                        defaultValue={login.username ?? ""}
+                                                        type="text"
+                                                        autoFocus={true}
+                                                        autoComplete="off"
+                                                    />
+                                                </>
+                                            );
+                                        })()}
+                                </div>
+                                <div className={clsx(kcProps.kcFormGroupClass, kcProps.kcFormSettingClass)}>
+                                    <div id="kc-form-options">
+                                        {realm.rememberMe && !usernameHidden && (
+                                            <div className="checkbox">
+                                                <label>
+                                                    <input
+                                                        tabIndex={3}
+                                                        id="rememberMe"
+                                                        name="rememberMe"
+                                                        type="checkbox"
+                                                        {...(login.rememberMe
+                                                            ? {
+                                                                  "checked": true
+                                                              }
+                                                            : {})}
+                                                    />
+                                                    {msg("rememberMe")}
+                                                </label>
+                                            </div>
+                                        )}
+                                    </div>
+                                </div>
+                                <div id="kc-form-buttons" className={clsx(kcProps.kcFormGroupClass)}>
+                                    <input
+                                        tabIndex={4}
+                                        className={clsx(
+                                            kcProps.kcButtonClass,
+                                            kcProps.kcButtonPrimaryClass,
+                                            kcProps.kcButtonBlockClass,
+                                            kcProps.kcButtonLargeClass
+                                        )}
+                                        name="login"
+                                        id="kc-login"
+                                        type="submit"
+                                        value={msgStr("doLogIn")}
+                                        disabled={isLoginButtonDisabled}
+                                    />
+                                </div>
+                            </form>
+                        )}
+                    </div>
+                    {realm.password && social.providers !== undefined && (
+                        <div id="kc-social-providers" className={clsx(kcProps.kcFormSocialAccountContentClass, kcProps.kcFormSocialAccountClass)}>
+                            <ul
+                                className={clsx(
+                                    kcProps.kcFormSocialAccountListClass,
+                                    social.providers.length > 4 && kcProps.kcFormSocialAccountDoubleListClass
+                                )}
+                            >
+                                {social.providers.map(p => (
+                                    <li key={p.providerId} className={clsx(kcProps.kcFormSocialAccountListLinkClass)}>
+                                        <a href={p.loginUrl} id={`zocial-${p.alias}`} className={clsx("zocial", p.providerId)}>
+                                            <span>{p.displayName}</span>
+                                        </a>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+                    )}
+                </div>
+            }
+            infoNode={
+                realm.password &&
+                realm.registrationAllowed &&
+                !registrationDisabled && (
+                    <div id="kc-registration">
+                        <span>
+                            {msg("noAccount")}
+                            <a tabIndex={6} href={url.registrationUrl}>
+                                {msg("doRegister")}
+                            </a>
+                        </span>
+                    </div>
+                )
+            }
+        />
+    );
+}

src/keycloak-theme/pages/LoginVerifyEmail.stories.tsx

@@ -0,0 +1,16 @@
+import { ComponentMeta } from '@storybook/react';
+import KcApp from '../KcApp';
+import { template } from '../../../.storybook/util'
+
+const bind = template('login-verify-email.ftl');
+
+export default {
+    kind: 'Page',
+    title: 'Theme/Pages/Login/Verify Email',
+    component: KcApp,
+    parameters: {
+        layout: 'fullscreen',
+    },
+} as ComponentMeta<typeof KcApp>;
+
+export const Default = bind({})

src/keycloak-theme/pages/LoginVerifyEmail.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import type { PageProps } from "keycloakify";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+
+export default function LoginVerifyEmail(props: PageProps<Extract<KcContext, { pageId: "login-verify-email.ftl" }>, I18n>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
+
+    const { msg } = i18n;
+
+    const { url, user } = kcContext;
+
+    return (
+        <Template
+            {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
+            displayMessage={false}
+            headerNode={msg("emailVerifyTitle")}
+            formNode={
+                <>
+                    <p className="instruction">{msg("emailVerifyInstruction1", user?.email)}</p>
+                    <p className="instruction">
+                        {msg("emailVerifyInstruction2")}
+                        <br />
+                        <a href={url.loginAction}>{msg("doClickHere")}</a>
+                        &nbsp;
+                        {msg("emailVerifyInstruction3")}
+                    </p>
+                </>
+            }
+        />
+    );
+}

src/keycloak-theme/pages/LogoutConfirm.stories.tsx

@@ -0,0 +1,16 @@
+import { ComponentMeta } from '@storybook/react';
+import KcApp from '../KcApp';
+import { template } from '../../../.storybook/util'
+
+const bind = template('logout-confirm.ftl');
+
+export default {
+    kind: 'Page',
+    title: 'Theme/Pages/Login/Logout Confirmation',
+    component: KcApp,
+    parameters: {
+        layout: 'fullscreen',
+    },
+} as ComponentMeta<typeof KcApp>;
+
+export const Default = bind({})

src/keycloak-theme/pages/LogoutConfirm.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { clsx } from "keycloakify/lib/tools/clsx";
+import type { PageProps } from "keycloakify/lib/KcProps";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+
+export default function LogoutConfirm(props: PageProps<Extract<KcContext, { pageId: "logout-confirm.ftl" }>, I18n>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
+
+    const { url, client, logoutConfirm } = kcContext;
+
+    const { msg, msgStr } = i18n;
+
+    return (
+        <Template
+            {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
+            displayMessage={false}
+            headerNode={msg("logoutConfirmTitle")}
+            formNode={
+                <>
+                    <div id="kc-logout-confirm" className="content-area">
+                        <p className="instruction">{msg("logoutConfirmHeader")}</p>
+                        <form className="form-actions" action={url.logoutConfirmAction} method="POST">
+                            <input type="hidden" name="session_code" value={logoutConfirm.code} />
+                            <div className={clsx(kcProps.kcFormGroupClass)}>
+                                <div id="kc-form-options">
+                                    <div className={clsx(kcProps.kcFormOptionsWrapperClass)}></div>
+                                </div>
+                                <div id="kc-form-buttons" className={clsx(kcProps.kcFormGroupClass)}>
+                                    <input
+                                        tabIndex={4}
+                                        className={clsx(
+                                            kcProps.kcButtonClass,
+                                            kcProps.kcButtonPrimaryClass,
+                                            kcProps.kcButtonBlockClass,
+                                            kcProps.kcButtonLargeClass
+                                        )}
+                                        name="confirmLogout"
+                                        id="kc-logout"
+                                        type="submit"
+                                        value={msgStr("doLogout")}
+                                    />
+                                </div>
+                            </div>
+                        </form>
+                        <div id="kc-info-message">
+                            {!logoutConfirm.skipLink && client.baseUrl && (
+                                <p>
+                                    <a href={client.baseUrl} dangerouslySetInnerHTML={{ __html: msgStr("backToApplication") }} />
+                                </p>
+                            )}
+                        </div>
+                    </div>
+                </>
+            }
+        />
+    );
+}

src/keycloak-theme/pages/MyExtraPage1.stories.tsx

@@ -1,6 +1,8 @@
-import {ComponentMeta} from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import KcApp from '../KcApp';
-import {template} from '../../../.storybook/util'
+import { template } from '../../../.storybook/util'
+
+const bind = template('my-extra-page-1.ftl')
 
 export default {
     kind: 'Page',
@@ -11,6 +13,4 @@ export default {
     },
 } as ComponentMeta<typeof KcApp>;
 
-const bind = template('my-extra-page-1.ftl')
-
 export const Default = bind({})

src/keycloak-theme/pages/MyExtraPage2.stories.tsx

@@ -1,6 +1,8 @@
-import {ComponentMeta} from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import KcApp from '../KcApp';
-import {template} from '../../../.storybook/util'
+import { template } from '../../../.storybook/util'
+
+const bind = template('my-extra-page-2.ftl')
 
 export default {
     kind: 'Page',
@@ -11,8 +13,6 @@ export default {
     },
 } as ComponentMeta<typeof KcApp>;
 
-const bind = template('my-extra-page-2.ftl')
-
 export const Default = bind({})
 
-export const WithCustomValue = bind({someCustomValue: 'Foo Bar Baz'})
+export const WithCustomValue = bind({ someCustomValue: 'Foo Bar Baz' })

src/keycloak-theme/pages/Register.stories.tsx

@@ -1,6 +1,8 @@
-import {ComponentMeta} from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import KcApp from '../KcApp';
-import {template} from '../../../.storybook/util'
+import { template } from '../../../.storybook/util'
+
+const bind = template('register.ftl')
 
 export default {
     kind: 'Page',
@@ -11,8 +13,6 @@ export default {
     },
 } as ComponentMeta<typeof KcApp>;
 
-const bind = template('register.ftl')
-
 export const Default = bind({})
 
 export const WithFieldError = bind({
@@ -25,12 +25,12 @@ export const WithFieldError = bind({
         existsError: (fieldName: string) => fieldName === "email",
         exists: (fieldName: string) => fieldName === "email",
         get: (fieldName: string) => fieldName === "email" ? "I don't like your email address" : undefined,
-        printIfExists: <T, >(fieldName: string, x: T) => fieldName === "email" ? x : undefined,
+        printIfExists: <T,>(fieldName: string, x: T) => fieldName === "email" ? x : undefined,
     }
 })
 
 export const WithEmailAsUsername = bind({
-    realm: {registrationEmailAsUsername: true}
+    realm: { registrationEmailAsUsername: true }
 })
 
 export const WithoutPassword = bind({

src/keycloak-theme/pages/RegisterUserProfile.stories.tsx

@@ -1,6 +1,6 @@
-import {ComponentMeta} from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import KcApp from '../KcApp';
-import {template} from '../../../.storybook/util'
+import { template } from '../../../.storybook/util'
 
 const bind = template('register-user-profile.ftl')
 
@@ -8,11 +8,12 @@ export default {
     kind: 'Page',
     title: 'Theme/Pages/Register/Modern',
     component: KcApp,
-    parameters: {layout: 'fullscreen'},
+    parameters: { layout: 'fullscreen' },
 } as ComponentMeta<typeof KcApp>;
 
 export const Default = bind({})
 
+/*
 export const WithFieldError = bind({
     profile: {
         attributes: [
@@ -77,3 +78,5 @@ export const WithImmutablePresets = bind({
         ]
     }
 })
+
+*/

src/keycloak-theme/pages/RegisterUserProfile.tsx

@@ -1,7 +1,7 @@
 // Copy pasted from: https://github.com/InseeFrLab/keycloakify/blob/main/src/lib/pages/RegisterUserProfile.tsx
 import { useState } from "react";
 import { clsx } from "keycloakify/lib/tools/clsx";
-import { UserProfileFormFields } from "./shared/UserProfileCommons";
+import { UserProfileFormFields } from "keycloakify/lib/pages/shared/UserProfileCommons";
 import type { PageProps } from "keycloakify/lib/KcProps";
 import type { KcContext } from "../kcContext";
 import type { I18n } from "../i18n";

src/keycloak-theme/pages/Terms.stories.tsx

@@ -1,8 +1,9 @@
-import {ComponentMeta} from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import KcApp from '../KcApp';
-import {template} from '../../../.storybook/util'
+import { template } from '../../../.storybook/util'
 
 const bind = template('terms.ftl');
+
 export default {
     kind: 'Page',
     title: 'Theme/Pages/Actions/Terms',

src/keycloak-theme/pages/UpdateUserProfile.stories.tsx

@@ -0,0 +1,16 @@
+import { ComponentMeta } from '@storybook/react';
+import KcApp from '../KcApp';
+import { template } from '../../../.storybook/util'
+
+const bind = template('update-user-profile.ftl');
+
+export default {
+    kind: 'Page',
+    title: 'Theme/Pages/Actions/Update User Profile',
+    component: KcApp,
+    parameters: {
+        layout: 'fullscreen',
+    },
+} as ComponentMeta<typeof KcApp>;
+
+export const Default = bind({})

src/keycloak-theme/pages/UpdateUserProfile.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import { clsx } from "keycloakify/lib/tools/clsx";
+import { UserProfileFormFields } from "keycloakify/lib/pages/shared/UserProfileCommons";
+import type { PageProps } from "keycloakify/lib/KcProps";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+
+export default function UpdateUserProfile(props: PageProps<Extract<KcContext, { pageId: "update-user-profile.ftl" }>, I18n>) {
+    const { kcContext, i18n, 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>
+            }
+        />
+    );
+}

src/keycloak-theme/pages/WebauthnAuthenticate.stories.tsx

@@ -0,0 +1,16 @@
+import { ComponentMeta } from '@storybook/react';
+import KcApp from '../KcApp';
+import { template } from '../../../.storybook/util'
+
+const bind = template('webauthn-authenticate.ftl');
+
+export default {
+    kind: 'Page',
+    title: 'Theme/Pages/Login/Webauthn',
+    component: KcApp,
+    parameters: {
+        layout: 'fullscreen',
+    },
+} as ComponentMeta<typeof KcApp>;
+
+export const Default = bind({})

src/keycloak-theme/pages/WebauthnAuthenticate.tsx

@@ -0,0 +1,193 @@
+import React, { useRef, useState } from "react";
+import { clsx } from "keycloakify/lib/tools/clsx";
+import type { MessageKeyBase } from "keycloakify/lib/i18n";
+import { base64url } from "rfc4648";
+import { useConstCallback } from "keycloakify/lib/tools/useConstCallback";
+import type { PageProps } from "keycloakify/lib/KcProps";
+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, 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>
+            }
+        />
+    );
+}

yarn.lock

@@ -2282,6 +2282,13 @@
     "@gar/promisify" "^1.0.1"
     semver "^7.3.5"
 
+"@npmcli/fs@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@npmcli/fs/-/fs-3.1.0.tgz#233d43a25a91d68c3a863ba0da6a3f00924a173e"
+  integrity sha512-7kZUAaLscfgbwBQRbvdMYaZOWyMEcPTH/tJjnyAWJ/dvvs9Ef+CERx/qJb9GExJpl1qipaDGn7KqHnFGGixd0w==
+  dependencies:
+    semver "^7.3.5"
+
 "@npmcli/move-file@^1.0.1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@npmcli/move-file/-/move-file-1.1.2.tgz#1a82c3e372f7cae9253eb66d72543d6b8685c674"
@@ -3584,6 +3591,11 @@
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
   integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
 
+"@tootallnate/once@2":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
+  integrity sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==
+
 "@trysound/sax@0.2.0":
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
@@ -4485,13 +4497,22 @@ adjust-sourcemap-loader@^4.0.0:
     loader-utils "^2.0.0"
     regex-parser "^2.2.11"
 
-agent-base@6:
+agent-base@6, agent-base@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
   integrity sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==
   dependencies:
     debug "4"
 
+agentkeepalive@^4.2.1:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/agentkeepalive/-/agentkeepalive-4.3.0.tgz#bb999ff07412653c1803b3ced35e50729830a255"
+  integrity sha512-7Epl1Blf4Sy37j4v9f9FjICCh4+KAQOyXgHEwlyBiAQLbhKdq/i2QQU3amQalS/wPhdPzDXPL5DMR5bkn+YeWg==
+  dependencies:
+    debug "^4.1.0"
+    depd "^2.0.0"
+    humanize-ms "^1.2.1"
+
 aggregate-error@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.1.0.tgz#92670ff50f5359bdb7a3e0d40d0ec30c5737687a"
@@ -5604,6 +5625,25 @@ cacache@^15.0.5:
     tar "^6.0.2"
     unique-filename "^1.1.1"
 
+cacache@^17.0.0:
+  version "17.0.4"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-17.0.4.tgz#5023ed892ba8843e3b7361c26d0ada37e146290c"
+  integrity sha512-Z/nL3gU+zTUjz5pCA5vVjYM8pmaw2kxM7JEiE0fv3w77Wj+sFbi70CrBruUWH0uNcEdvLDixFpgA2JM4F4DBjA==
+  dependencies:
+    "@npmcli/fs" "^3.1.0"
+    fs-minipass "^3.0.0"
+    glob "^8.0.1"
+    lru-cache "^7.7.1"
+    minipass "^4.0.0"
+    minipass-collect "^1.0.2"
+    minipass-flush "^1.0.5"
+    minipass-pipeline "^1.2.4"
+    p-map "^4.0.0"
+    promise-inflight "^1.0.1"
+    ssri "^10.0.0"
+    tar "^6.1.11"
+    unique-filename "^3.0.0"
+
 cache-base@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
@@ -6608,7 +6648,7 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
   dependencies:
     ms "2.0.0"
 
-debug@4, debug@^4.0.0, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4:
+debug@4, debug@^4.0.0, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -6749,7 +6789,7 @@ delegates@^1.0.0:
   resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
   integrity sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==
 
-depd@2.0.0:
+depd@2.0.0, depd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
   integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==
@@ -7098,6 +7138,13 @@ encodeurl@~1.0.2:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
 
+encoding@^0.1.13:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9"
+  integrity sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==
+  dependencies:
+    iconv-lite "^0.6.2"
+
 end-of-stream@^1.0.0, end-of-stream@^1.1.0:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@@ -7141,6 +7188,11 @@ entities@^4.2.0, entities@^4.3.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-4.3.1.tgz#c34062a94c865c322f9d67b4384e4169bcede6a4"
   integrity sha512-o4q/dYJlmyjP2zfnaWDUC6A3BQFmVTX+tZPezK7k0GLSU9QYCauscf5Y+qcEPzKL+EixVouYDgLQK5H9GrLpkg==
 
+err-code@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/err-code/-/err-code-2.0.3.tgz#23c2f3b756ffdfc608d30e27c9a941024807e7f9"
+  integrity sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==
+
 errno@^0.1.3, errno@~0.1.7:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
@@ -8232,6 +8284,13 @@ fs-minipass@^2.0.0:
   dependencies:
     minipass "^3.0.0"
 
+fs-minipass@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-3.0.1.tgz#853809af15b6d03e27638d1ab6432e6b378b085d"
+  integrity sha512-MhaJDcFRTuLidHrIttu0RDGyyXs/IYHVmlcxfLAEFIWjc1vdLAkdwT7Ace2u7DbitWC0toKMl5eJZRYNVreIMw==
+  dependencies:
+    minipass "^4.0.0"
+
 fs-monkey@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/fs-monkey/-/fs-monkey-1.0.3.tgz#ae3ac92d53bb328efe0e9a1d9541f6ad8d48e2d3"
@@ -8429,6 +8488,17 @@ glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@^8.0.1:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-8.1.0.tgz#d388f656593ef708ee3e34640fdfb99a9fd1c33e"
+  integrity sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^5.0.1"
+    once "^1.3.0"
+
 global-modules@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-2.0.0.tgz#997605ad2345f27f51539bea26574421215c7780"
@@ -8860,6 +8930,11 @@ htmlparser2@^8.0, htmlparser2@^8.0.1:
     domutils "^3.0.1"
     entities "^4.3.0"
 
+http-cache-semantics@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz#abe02fcb2985460bf0323be664436ec3476a6d5a"
+  integrity sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==
+
 http-deceiver@^1.2.7:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
@@ -8900,6 +8975,15 @@ http-proxy-agent@^4.0.1:
     agent-base "6"
     debug "4"
 
+http-proxy-agent@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz#5129800203520d434f142bc78ff3c170800f2b43"
+  integrity sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==
+  dependencies:
+    "@tootallnate/once" "2"
+    agent-base "6"
+    debug "4"
+
 http-proxy-middleware@^2.0.3:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz#e1a4dd6979572c7ab5a4e4b55095d1f32a74963f"
@@ -8938,6 +9022,13 @@ human-signals@^2.1.0:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
   integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
 
+humanize-ms@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/humanize-ms/-/humanize-ms-1.2.1.tgz#c46e3159a293f6b896da29316d8b6fe8bb79bbed"
+  integrity sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==
+  dependencies:
+    ms "^2.0.0"
+
 iconv-lite@0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -8945,7 +9036,7 @@ iconv-lite@0.4.24:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
-iconv-lite@^0.6.3:
+iconv-lite@^0.6.2, iconv-lite@^0.6.3:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
   integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
@@ -9340,6 +9431,11 @@ is-hexadecimal@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
   integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
 
+is-lambda@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-lambda/-/is-lambda-1.0.1.tgz#3d9877899e6a53efc0160504cde15f82e6f061d5"
+  integrity sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ==
+
 is-map@^2.0.1, is-map@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127"
@@ -10336,15 +10432,16 @@ keycloak-js@^21.0.1:
     base64-js "^1.5.1"
     js-sha256 "^0.9.0"
 
-keycloakify@^6.12.7:
+keycloakify@^6.13.0:
-  version "6.12.7"
+  version "6.13.0"
-  resolved "https://registry.yarnpkg.com/keycloakify/-/keycloakify-6.12.7.tgz#7ec97117c6b83be13999cd95cb01d27eaf4411a9"
+  resolved "https://registry.yarnpkg.com/keycloakify/-/keycloakify-6.13.0.tgz#526b51cfdf8bd2a1d6bcc0eda7875bd29ae724b9"
-  integrity sha512-qCPrkD6bDjXh2/8ISqLga056Y0eExAspfn1pWZE6LE5DP7gIUsAieOCR1tgswGXxGJfgBZn2IgU2UYipm5FnYg==
+  integrity sha512-aedNUp8UguwUFR5Hd/96vaeHxkR48tsC5gvt/T3b54+dIk3vdPt/z2a7eKu/PqX2M1R1XAgSBlPDzdVwCVLTlw==
   dependencies:
     "@octokit/rest" "^18.12.0"
     cheerio "^1.0.0-rc.5"
     cli-select "^1.1.2"
     evt "^2.4.15"
+    make-fetch-happen "^11.0.3"
     minimal-polyfills "^2.2.2"
     minimist "^1.2.6"
     path-browserify "^1.0.1"
@@ -10595,6 +10692,11 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+lru-cache@^7.7.1:
+  version "7.18.3"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-7.18.3.tgz#f793896e0fd0e954a59dfdd82f0773808df6aa89"
+  integrity sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==
+
 lru-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/lru-queue/-/lru-queue-0.1.0.tgz#2738bd9f0d3cf4f84490c5736c48699ac632cda3"
@@ -10629,6 +10731,27 @@ make-dir@^3.0.0, make-dir@^3.0.2, make-dir@^3.1.0:
   dependencies:
     semver "^6.0.0"
 
+make-fetch-happen@^11.0.3:
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/make-fetch-happen/-/make-fetch-happen-11.0.3.tgz#ed83dd3685b97f75607156d2721848f6eca561b9"
+  integrity sha512-oPLh5m10lRNNZDjJ2kP8UpboUx2uFXVaVweVe/lWut4iHWcQEmfqSVJt2ihZsFI8HbpwyyocaXbCAWf0g1ukIA==
+  dependencies:
+    agentkeepalive "^4.2.1"
+    cacache "^17.0.0"
+    http-cache-semantics "^4.1.1"
+    http-proxy-agent "^5.0.0"
+    https-proxy-agent "^5.0.0"
+    is-lambda "^1.0.1"
+    lru-cache "^7.7.1"
+    minipass "^4.0.0"
+    minipass-fetch "^3.0.0"
+    minipass-flush "^1.0.5"
+    minipass-pipeline "^1.2.4"
+    negotiator "^0.6.3"
+    promise-retry "^2.0.1"
+    socks-proxy-agent "^7.0.0"
+    ssri "^10.0.0"
+
 makeerror@1.0.12:
   version "1.0.12"
   resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.12.tgz#3e5dd2079a82e812e983cc6610c4a2cb0eaa801a"
@@ -11007,6 +11130,17 @@ minipass-collect@^1.0.2:
   dependencies:
     minipass "^3.0.0"
 
+minipass-fetch@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/minipass-fetch/-/minipass-fetch-3.0.1.tgz#bae3789f668d82ffae3ea47edc6b78b8283b3656"
+  integrity sha512-t9/wowtf7DYkwz8cfMSt0rMwiyNIBXf5CKZ3S5ZMqRqMYT0oLTp0x1WorMI9WTwvaPg21r1JbFxJMum8JrLGfw==
+  dependencies:
+    minipass "^4.0.0"
+    minipass-sized "^1.0.3"
+    minizlib "^2.1.2"
+  optionalDependencies:
+    encoding "^0.1.13"
+
 minipass-flush@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/minipass-flush/-/minipass-flush-1.0.5.tgz#82e7135d7e89a50ffe64610a787953c4c4cbb373"
@@ -11014,13 +11148,20 @@ minipass-flush@^1.0.5:
   dependencies:
     minipass "^3.0.0"
 
-minipass-pipeline@^1.2.2:
+minipass-pipeline@^1.2.2, minipass-pipeline@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz#68472f79711c084657c067c5c6ad93cddea8214c"
   integrity sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==
   dependencies:
     minipass "^3.0.0"
 
+minipass-sized@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/minipass-sized/-/minipass-sized-1.0.3.tgz#70ee5a7c5052070afacfbc22977ea79def353b70"
+  integrity sha512-MbkQQ2CTiBMlA2Dm/5cY+9SWFEN8pzzOXi6rlM5Xxq0Yqbda5ZQy9sU75a673FE9ZK0Zsbr6Y5iP6u9nktfg2g==
+  dependencies:
+    minipass "^3.0.0"
+
 minipass@^3.0.0, minipass@^3.1.1:
   version "3.3.6"
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.3.6.tgz#7bba384db3a1520d18c9c0e5251c3444e95dd94a"
@@ -11033,7 +11174,7 @@ minipass@^4.0.0:
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-4.2.4.tgz#7d0d97434b6a19f59c5c3221698b48bbf3b2cd06"
   integrity sha512-lwycX3cBMTvcejsHITUgYj6Gy6A7Nh4Q6h9NP4sTHY1ccJlC7yKzDmiShEHsJ16Jf1nKGDEaiHxiltsJEvk0nQ==
 
-minizlib@^2.1.1:
+minizlib@^2.1.1, minizlib@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-2.1.2.tgz#e90d3466ba209b932451508a11ce3d3632145931"
   integrity sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==
@@ -11104,7 +11245,7 @@ ms@2.1.2:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-ms@2.1.3, ms@^2.1.1:
+ms@2.1.3, ms@^2.0.0, ms@^2.1.1:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
@@ -11149,7 +11290,7 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
-negotiator@0.6.3:
+negotiator@0.6.3, negotiator@^0.6.3:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
   integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
@@ -12697,6 +12838,14 @@ promise-inflight@^1.0.1:
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
   integrity sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==
 
+promise-retry@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/promise-retry/-/promise-retry-2.0.1.tgz#ff747a13620ab57ba688f5fc67855410c370da22"
+  integrity sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==
+  dependencies:
+    err-code "^2.0.2"
+    retry "^0.12.0"
+
 promise.allsettled@^1.0.0:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/promise.allsettled/-/promise.allsettled-1.0.6.tgz#8dc8ba8edf429feb60f8e81335b920e109c94b6e"
@@ -13541,6 +13690,11 @@ ret@~0.1.10:
   resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
   integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
 
+retry@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/retry/-/retry-0.12.0.tgz#1b42a6266a21f07421d1b0b54b7dc167b01c013b"
+  integrity sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==
+
 retry@^0.13.1:
   version "0.13.1"
   resolved "https://registry.yarnpkg.com/retry/-/retry-0.13.1.tgz#185b1587acf67919d63b357349e03537b2484658"
@@ -13973,6 +14127,11 @@ slash@^4.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7"
   integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
 
+smart-buffer@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.2.0.tgz#6e1d71fa4f18c05f7d0ff216dd16a481d0e8d9ae"
+  integrity sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==
+
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
@@ -14012,6 +14171,23 @@ sockjs@^0.3.24:
     uuid "^8.3.2"
     websocket-driver "^0.7.4"
 
+socks-proxy-agent@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/socks-proxy-agent/-/socks-proxy-agent-7.0.0.tgz#dc069ecf34436621acb41e3efa66ca1b5fed15b6"
+  integrity sha512-Fgl0YPZ902wEsAyiQ+idGd1A7rSFx/ayC1CQVMw5P+EQx2V0SgpGtf6OKFhVjPflPUl9YMmEOnmfjCdMUsygww==
+  dependencies:
+    agent-base "^6.0.2"
+    debug "^4.3.3"
+    socks "^2.6.2"
+
+socks@^2.6.2:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/socks/-/socks-2.7.1.tgz#d8e651247178fde79c0663043e07240196857d55"
+  integrity sha512-7maUZy1N7uo6+WVEX6psASxtNlKaNVMlGQKkG/63nEDdLOWNbiUMoLK7X4uYoLhQstau72mLgfEWcXcwsaHbYQ==
+  dependencies:
+    ip "^2.0.0"
+    smart-buffer "^4.2.0"
+
 source-list-map@^2.0.0, source-list-map@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
@@ -14148,6 +14324,13 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
 
+ssri@^10.0.0:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/ssri/-/ssri-10.0.1.tgz#c61f85894bbc6929fc3746f05e31cf5b44c030d5"
+  integrity sha512-WVy6di9DlPOeBWEjMScpNipeSX2jIZBGEn5Uuo8Q7aIuFEuDX0pw8RxcOjlD1TWP4obi24ki7m/13+nFpcbXrw==
+  dependencies:
+    minipass "^4.0.0"
+
 ssri@^6.0.1:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.2.tgz#157939134f20464e7301ddba3e90ffa8f7728ac5"
@@ -14618,7 +14801,7 @@ tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
   integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
 
-tar@^6.0.2:
+tar@^6.0.2, tar@^6.1.11:
   version "6.1.13"
   resolved "https://registry.yarnpkg.com/tar/-/tar-6.1.13.tgz#46e22529000f612180601a6fe0680e7da508847b"
   integrity sha512-jdIBIN6LTIe2jqzay/2vtYLlBHa3JF42ot3h1dW8Q0PaAG4v8rm0cvpVePtau5C6OKXGGcgO9q2AMNSWxiLqKw==
@@ -15142,6 +15325,13 @@ unique-filename@^1.1.1:
   dependencies:
     unique-slug "^2.0.0"
 
+unique-filename@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-3.0.0.tgz#48ba7a5a16849f5080d26c760c86cf5cf05770ea"
+  integrity sha512-afXhuC55wkAmZ0P18QsVE6kp8JaxrEokN2HGIoIVv2ijHQd419H0+6EigAFcIzXeMIkcIkNBpB3L/DXB3cTS/g==
+  dependencies:
+    unique-slug "^4.0.0"
+
 unique-slug@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/unique-slug/-/unique-slug-2.0.2.tgz#baabce91083fc64e945b0f3ad613e264f7cd4e6c"
@@ -15149,6 +15339,13 @@ unique-slug@^2.0.0:
   dependencies:
     imurmurhash "^0.1.4"
 
+unique-slug@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/unique-slug/-/unique-slug-4.0.0.tgz#6bae6bb16be91351badd24cdce741f892a6532e3"
+  integrity sha512-WrcA6AyEfqDX5bWige/4NQfPZMtASNVxdmWR76WESYQVAACSgWcR6e9i0mofqqBxYFtL4oAxPIptY73/0YE1DQ==
+  dependencies:
+    imurmurhash "^0.1.4"
+
 unique-string@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-2.0.0.tgz#39c6451f81afb2749de2b233e3f7c5e8843bd89d"