keycloakify 7.0.0-rc.8 → 7.0.0

package/src/account/pages/Account.tsx

@@ -1,6 +1,6 @@
 import { clsx } from "keycloakify/tools/clsx";
-import { type PageProps, defaultClasses } from "keycloakify/account/pages/PageProps";
-import { useGetClassName } from "keycloakify/lib/useGetClassName";
+import type { PageProps } from "keycloakify/account/pages/PageProps";
+import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
 import type { KcContext } from "../kcContext";
 import type { I18n } from "../i18n";
 
@@ -8,8 +8,11 @@ export default function LogoutConfirm(props: PageProps<Extract<KcContext, { page
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { getClassName } = useGetClassName({
-        "defaultClasses": !doUseDefaultCss ? undefined : defaultClasses,
-        classes
+        doUseDefaultCss,
+        "classes": {
+            ...classes,
+            "kcBodyClass": clsx(classes?.kcBodyClass, "user")
+        }
     });
 
     const { url, realm, messagesPerField, stateChecker, account } = kcContext;
@@ -17,7 +20,7 @@ export default function LogoutConfirm(props: PageProps<Extract<KcContext, { page
     const { msg } = i18n;
 
     return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="account" bodyClass="user">
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="account">
             <div className="row">
                 <div className="col-md-10">
                     <h2>{msg("editAccountHtmlTitle")}</h2>
@@ -33,7 +36,7 @@ export default function LogoutConfirm(props: PageProps<Extract<KcContext, { page
                 <input type="hidden" id="stateChecker" name="stateChecker" value={stateChecker} />
 
                 {!realm.registrationEmailAsUsername && (
-                    <div className="form-group ${messagesPerField.printIfExists('username','has-error')}">
+                    <div className={clsx("form-group", messagesPerField.printIfExists("username", "has-error"))}>
                         <div className="col-sm-2 col-md-2">
                             <label htmlFor="username" className="control-label">
                                 {msg("username")}
@@ -48,7 +51,7 @@ export default function LogoutConfirm(props: PageProps<Extract<KcContext, { page
                                 id="username"
                                 name="username"
                                 disabled={!realm.editUsernameAllowed}
-                                value="${(account.username!'')}"
+                                value={account.username ?? ""}
                             />
                         </div>
                     </div>
@@ -63,7 +66,7 @@ export default function LogoutConfirm(props: PageProps<Extract<KcContext, { page
                     </div>
 
                     <div className="col-sm-10 col-md-10">
-                        <input type="text" className="form-control" id="email" name="email" autoFocus value="${(account.email!'')}" />
+                        <input type="text" className="form-control" id="email" name="email" autoFocus value={account.email ?? ""} />
                     </div>
                 </div>
 
@@ -89,7 +92,7 @@ export default function LogoutConfirm(props: PageProps<Extract<KcContext, { page
                     </div>
 
                     <div className="col-sm-10 col-md-10">
-                        <input type="text" className="form-control" id="lastName" name="lastName" value={account.lastName || ""} />
+                        <input type="text" className="form-control" id="lastName" name="lastName" value={account.lastName ?? ""} />
                     </div>
                 </div>
 

package/src/account/pages/PageProps.ts

@@ -1,6 +1,6 @@
 import type { LazyExoticComponent } from "react";
 import type { I18n } from "keycloakify/account/i18n";
-import { type TemplateProps } from "keycloakify/account/TemplateProps";
+import type { TemplateProps, ClassKey } from "keycloakify/account/TemplateProps";
 
 export type PageProps<KcContext, I18nExtended extends I18n> = {
     Template: LazyExoticComponent<(props: TemplateProps<any, any>) => JSX.Element | null>;
@@ -9,13 +9,3 @@ export type PageProps<KcContext, I18nExtended extends I18n> = {
     doUseDefaultCss: boolean;
     classes?: Partial<Record<ClassKey, string>>;
 };
-
-export type ClassKey = "kcButtonClass" | "kcButtonPrimaryClass" | "kcButtonLargeClass" | "kcButtonDefaultClass";
-
-export const defaultClasses: Record<ClassKey, string | undefined> = {
-    /** password.ftl */
-    "kcButtonClass": "btn",
-    "kcButtonPrimaryClass": "btn-primary",
-    "kcButtonLargeClass": "btn-lg",
-    "kcButtonDefaultClass": "btn-default"
-};

package/src/account/pages/Password.tsx

@@ -1,6 +1,6 @@
 import { clsx } from "keycloakify/tools/clsx";
-import { type PageProps, defaultClasses } from "keycloakify/account/pages/PageProps";
-import { useGetClassName } from "keycloakify/lib/useGetClassName";
+import type { PageProps } from "keycloakify/account/pages/PageProps";
+import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
 import type { KcContext } from "../kcContext";
 import type { I18n } from "../i18n";
 
@@ -8,16 +8,19 @@ export default function LogoutConfirm(props: PageProps<Extract<KcContext, { page
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { getClassName } = useGetClassName({
-        "defaultClasses": !doUseDefaultCss ? undefined : defaultClasses,
-        classes
+        doUseDefaultCss,
+        "classes": {
+            ...classes,
+            "kcBodyClass": clsx(classes?.kcBodyClass, "password")
+        }
     });
 
-    const { password } = kcContext;
+    const { url, password, account } = kcContext;
 
     const { msg } = i18n;
 
     return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="password" bodyClass="password">
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="password">
             <div className="row">
                 <div className="col-md-10">
                     <h2>{msg("changePasswordHtmlTitle")}</h2>
@@ -27,12 +30,12 @@ export default function LogoutConfirm(props: PageProps<Extract<KcContext, { page
                 </div>
             </div>
 
-            <form action="${url.passwordUrl}" className="form-horizontal" method="post">
+            <form action={url.passwordUrl} className="form-horizontal" method="post">
                 <input
                     type="text"
                     id="username"
                     name="username"
-                    value="${(account.username!'')}"
+                    value={account.username ?? ""}
                     autoComplete="username"
                     readOnly
                     style={{ "display": "none;" }}

package/src/bin/keycloakify/generateFtl/ftl_object_to_js_code_declaring_an_object.ftl

@@ -110,14 +110,16 @@
         }
     };
 
-    out["pageId"] = "${pageId}";
+    <#if account??>
+        out["url"]["getLogoutUrl"] = function () {
+            <#attempt>
+                return "${url.getLogoutUrl()}";
+            <#recover>
+            </#attempt>
+        };
+    </#if>
 
-    out["url"]["getLogoutUrl"] = function () {
-        <#attempt>
-            return "${url.getLogoutUrl()}";
-        <#recover>
-        </#attempt>
-    };
+    out["pageId"] = "${pageId}";
 
     return out;
 

package/src/bin/keycloakify/keycloakify.ts

@@ -1,6 +1,6 @@
 import { generateKeycloakThemeResources } from "./generateKeycloakThemeResources";
 import { generateJavaStackFiles } from "./generateJavaStackFiles";
-import { join as pathJoin, relative as pathRelative, basename as pathBasename } from "path";
+import { join as pathJoin, relative as pathRelative, basename as pathBasename, sep as pathSep } from "path";
 import * as child_process from "child_process";
 import { generateStartKeycloakTestingContainer } from "./generateStartKeycloakTestingContainer";
 import * as fs from "fs";
@@ -42,7 +42,7 @@ export async function main() {
         "reactAppBuildDirPath": pathJoin(reactProjectDirPath, "build"),
         buildOptions,
         //We have to leave it at that otherwise we break our default theme.
-        //Problem is that we can't guarantee that the the old resources
+        //Problem is that we can`t guarantee that the the old resources
         //will still be available on the newer keycloak version.
         "keycloakVersion": "11.0.3"
     });
@@ -121,19 +121,31 @@ export async function main() {
             "",
             `To test your theme locally you can spin up a Keycloak ${containerKeycloakVersion} container image with the theme pre loaded by running:`,
             "",
-            `👉 $ ./${pathRelative(reactProjectDirPath, pathJoin(keycloakThemeBuildingDirPath, generateStartKeycloakTestingContainer.basename))} 👈`,
+            `👉 $ .${pathSep}${pathRelative(
+                reactProjectDirPath,
+                pathJoin(keycloakThemeBuildingDirPath, generateStartKeycloakTestingContainer.basename)
+            )} 👈`,
             "",
-            "Test with different Keycloak versions by editing the .sh file. see available versions here: https://quay.io/repository/keycloak/keycloak?tab=tags",
-            "",
-            "Once your container is up and running: ",
+            `Test with different Keycloak versions by editing the .sh file. see available versions here: https://quay.io/repository/keycloak/keycloak?tab=tags`,
+            ``,
+            `Once your container is up and running: `,
             "- Log into the admin console 👉 http://localhost:8080/admin username: admin, password: admin 👈",
-            '- Create a realm named "myrealm"',
-            '- Create a client with ID: "myclient", "Root URL": "https://www.keycloak.org/app/" and "Valid redirect URIs": "https://www.keycloak.org/app/*"',
-            `- Select Login Theme: ${buildOptions.themeName} (don't forget to save at the bottom of the page)`,
-            `- Go to 👉 https://www.keycloak.org/app/ 👈 Click "Save" then "Sign in". You should see your login page`,
-            "",
-            "Video demoing this process: https://youtu.be/N3wlBoH4hKg",
-            ""
+            `- Create a realm:                  myrealm`,
+            `- Enable registration:             Realm settings -> Login tab  -> User registration: on`,
+            `- Enable the Account theme:        Realm settings -> Themes tab -> Account theme, select ${buildOptions.themeName} `,
+            `- Create a client id               myclient`,
+            `  Root URL:                        https://www.keycloak.org/app/`,
+            `  Valid redirect URIs:             https://www.keycloak.org/app* http://localhost* (localhost is optional)`,
+            `  Valid post logout redirect URIs: https://www.keycloak.org/app* http://localhost*`,
+            `  Web origins:                     *`,
+            `  Login Theme:                     ${buildOptions.themeName}`,
+            `  Save (button at the bottom of the page)`,
+            ``,
+            `- Go to  👉  https://www.keycloak.org/app/ 👈 Click "Save" then "Sign in". You should see your login page`,
+            `- Got to 👉  http://localhost:8080/realms/myrealm/account 👈 to see your account theme`,
+            ``,
+            `Video tutorial: https://youtu.be/WMyGZNHQkjU`,
+            ``
         ].join("\n")
     );
 }

package/src/lib/useGetClassName.ts

@@ -1,15 +1,18 @@
 import { clsx } from "keycloakify/tools/clsx";
 import { useConstCallback } from "keycloakify/tools/useConstCallback";
 
-export function useGetClassName<ClassKey extends string>(params: {
-    defaultClasses?: Record<ClassKey, string | undefined>;
-    classes?: Partial<Record<ClassKey, string>>;
-}) {
-    const { defaultClasses, classes } = params;
+export function createUseClassName<ClassKey extends string>(params: { defaultClasses: Record<ClassKey, string | undefined> }) {
+    const { defaultClasses } = params;
 
-    const getClassName = useConstCallback((classKey: ClassKey): string => {
-        return clsx(classKey, defaultClasses?.[classKey], classes?.[classKey]);
-    });
+    function useGetClassName(params: { doUseDefaultCss: boolean; classes: Partial<Record<ClassKey, string>> | undefined }) {
+        const { classes } = params;
 
-    return { getClassName };
+        const getClassName = useConstCallback((classKey: ClassKey): string => {
+            return clsx(classKey, defaultClasses[classKey], classes?.[classKey]);
+        });
+
+        return { getClassName };
+    }
+
+    return { useGetClassName };
 }

package/src/login/Template.tsx

@@ -1,8 +1,8 @@
 import { assert } from "keycloakify/tools/assert";
 import { clsx } from "keycloakify/tools/clsx";
 import { usePrepareTemplate } from "keycloakify/lib/usePrepareTemplate";
-import { type TemplateProps, defaultTemplateClasses } from "keycloakify/login/TemplateProps";
-import { useGetClassName } from "keycloakify/lib/useGetClassName";
+import { type TemplateProps } from "keycloakify/login/TemplateProps";
+import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
 import type { KcContext } from "./kcContext";
 import type { I18n } from "./i18n";
 
@@ -23,10 +23,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
         children
     } = props;
 
-    const { getClassName } = useGetClassName({
-        "defaultClasses": !doUseDefaultCss ? undefined : defaultTemplateClasses,
-        classes
-    });
+    const { getClassName } = useGetClassName({ doUseDefaultCss, classes });
 
     const { msg, changeLocale, labelBySupportedLanguageTag, currentLanguageTag } = i18n;
 

package/src/login/TemplateProps.ts

@@ -6,7 +6,7 @@ export type TemplateProps<KcContext extends KcContext.Common, I18nExtended exten
     kcContext: KcContext;
     i18n: I18nExtended;
     doUseDefaultCss: boolean;
-    classes?: Partial<Record<TemplateClassKey, string>>;
+    classes?: Partial<Record<ClassKey, string>>;
 
     displayInfo?: boolean;
     displayMessage?: boolean;
@@ -20,7 +20,7 @@ export type TemplateProps<KcContext extends KcContext.Common, I18nExtended exten
     children: ReactNode;
 };
 
-export type TemplateClassKey =
+export type ClassKey =
     | "kcHtmlClass"
     | "kcLoginClass"
     | "kcHeaderClass"
@@ -40,27 +40,57 @@ export type TemplateClassKey =
     | "kcFormSocialAccountContentClass"
     | "kcFormSocialAccountClass"
     | "kcSignUpClass"
-    | "kcInfoAreaWrapperClass";
-
-export const defaultTemplateClasses: Record<TemplateClassKey, string | undefined> = {
-    "kcHtmlClass": "login-pf",
-    "kcLoginClass": "login-pf-page",
-    "kcContentWrapperClass": "row",
-    "kcHeaderClass": "login-pf-page-header",
-    "kcHeaderWrapperClass": undefined,
-    "kcFormCardClass": "card-pf",
-    "kcFormCardAccountClass": "login-pf-accounts",
-    "kcFormSocialAccountClass": "login-pf-social-section",
-    "kcFormSocialAccountContentClass": "col-xs-12 col-sm-6",
-    "kcFormHeaderClass": "login-pf-header",
-    "kcLocaleWrapperClass": undefined,
-    "kcFeedbackErrorIcon": "pficon pficon-error-circle-o",
-    "kcFeedbackWarningIcon": "pficon pficon-warning-triangle-o",
-    "kcFeedbackSuccessIcon": "pficon pficon-ok",
-    "kcFeedbackInfoIcon": "pficon pficon-info",
-    "kcResetFlowIcon": "pficon pficon-arrow fa-2x",
-    "kcFormGroupClass": "form-group",
-    "kcLabelWrapperClass": "col-xs-12 col-sm-12 col-md-12 col-lg-12",
-    "kcSignUpClass": "login-pf-signup",
-    "kcInfoAreaWrapperClass": undefined
-};
+    | "kcInfoAreaWrapperClass"
+    | "kcLogoClass"
+    | "kcContainerClass"
+    | "kcContentClass"
+    | "kcFeedbackAreaClass"
+    | "kcLocaleClass"
+    | "kcAlertIconClasserror"
+    | "kcFormAreaClass"
+    | "kcFormSocialAccountListClass"
+    | "kcFormSocialAccountDoubleListClass"
+    | "kcFormSocialAccountListLinkClass"
+    | "kcWebAuthnKeyIcon"
+    | "kcWebAuthnDefaultIcon"
+    | "kcFormClass"
+    | "kcFormGroupErrorClass"
+    | "kcLabelClass"
+    | "kcInputClass"
+    | "kcInputErrorMessageClass"
+    | "kcInputWrapperClass"
+    | "kcFormOptionsClass"
+    | "kcFormButtonsClass"
+    | "kcFormSettingClass"
+    | "kcTextareaClass"
+    | "kcInfoAreaClass"
+    | "kcFormGroupHeader"
+    | "kcButtonClass"
+    | "kcButtonPrimaryClass"
+    | "kcButtonDefaultClass"
+    | "kcButtonLargeClass"
+    | "kcButtonBlockClass"
+    | "kcInputLargeClass"
+    | "kcSrOnlyClass"
+    | "kcSelectAuthListClass"
+    | "kcSelectAuthListItemClass"
+    | "kcSelectAuthListItemFillClass"
+    | "kcSelectAuthListItemInfoClass"
+    | "kcSelectAuthListItemLeftClass"
+    | "kcSelectAuthListItemBodyClass"
+    | "kcSelectAuthListItemDescriptionClass"
+    | "kcSelectAuthListItemHeadingClass"
+    | "kcSelectAuthListItemHelpTextClass"
+    | "kcSelectAuthListItemIconPropertyClass"
+    | "kcSelectAuthListItemIconClass"
+    | "kcSelectAuthListItemTitle"
+    | "kcAuthenticatorDefaultClass"
+    | "kcAuthenticatorPasswordClass"
+    | "kcAuthenticatorOTPClass"
+    | "kcAuthenticatorWebAuthnClass"
+    | "kcAuthenticatorWebAuthnPasswordlessClass"
+    | "kcSelectOTPListClass"
+    | "kcSelectOTPListItemClass"
+    | "kcAuthenticatorOtpCircleClass"
+    | "kcSelectOTPItemHeadingClass"
+    | "kcFormOptionsWrapperClass";

package/src/login/kcContext/getKcContext.ts

@@ -121,6 +121,10 @@ export function getKcContext<KcContextExtension extends { pageId: string } = nev
         return { "kcContext": undefined };
     }
 
+    if (!("login" in realKcContext)) {
+        return { "kcContext": undefined };
+    }
+
     {
         const { url } = realKcContext;
 

package/src/login/lib/useGetClassName.ts

@@ -0,0 +1,100 @@
+import { createUseClassName } from "keycloakify/lib/useGetClassName";
+import type { ClassKey } from "keycloakify/login/TemplateProps";
+
+export const { useGetClassName } = createUseClassName<ClassKey>({
+    "defaultClasses": {
+        "kcHtmlClass": "login-pf",
+        "kcLoginClass": "login-pf-page",
+        "kcContentWrapperClass": "row",
+        "kcHeaderClass": "login-pf-page-header",
+        "kcHeaderWrapperClass": undefined,
+        "kcFormCardClass": "card-pf",
+        "kcFormCardAccountClass": "login-pf-accounts",
+        "kcFormSocialAccountClass": "login-pf-social-section",
+        "kcFormSocialAccountContentClass": "col-xs-12 col-sm-6",
+        "kcFormHeaderClass": "login-pf-header",
+        "kcLocaleWrapperClass": undefined,
+        "kcFeedbackErrorIcon": "pficon pficon-error-circle-o",
+        "kcFeedbackWarningIcon": "pficon pficon-warning-triangle-o",
+        "kcFeedbackSuccessIcon": "pficon pficon-ok",
+        "kcFeedbackInfoIcon": "pficon pficon-info",
+        "kcResetFlowIcon": "pficon pficon-arrow fa-2x",
+        "kcFormGroupClass": "form-group",
+        "kcLabelWrapperClass": "col-xs-12 col-sm-12 col-md-12 col-lg-12",
+        "kcSignUpClass": "login-pf-signup",
+        "kcInfoAreaWrapperClass": undefined,
+
+        "kcLogoClass": "login-pf-brand",
+        "kcContainerClass": "container-fluid",
+        "kcContentClass": "col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3",
+        "kcFeedbackAreaClass": "col-md-12",
+        "kcLocaleClass": "col-xs-12 col-sm-1",
+        "kcAlertIconClasserror": "pficon pficon-error-circle-o",
+
+        "kcFormAreaClass": "col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2",
+        "kcFormSocialAccountListClass": "login-pf-social list-unstyled login-pf-social-all",
+        "kcFormSocialAccountDoubleListClass": "login-pf-social-double-col",
+        "kcFormSocialAccountListLinkClass": "login-pf-social-link",
+        "kcWebAuthnKeyIcon": "pficon pficon-key",
+        "kcWebAuthnDefaultIcon": "pficon pficon-key",
+
+        "kcFormClass": "form-horizontal",
+        "kcFormGroupErrorClass": "has-error",
+        "kcLabelClass": "control-label",
+        "kcInputClass": "form-control",
+        "kcInputErrorMessageClass": "pf-c-form__helper-text pf-m-error required kc-feedback-text",
+        "kcInputWrapperClass": "col-xs-12 col-sm-12 col-md-12 col-lg-12",
+        "kcFormOptionsClass": "col-xs-12 col-sm-12 col-md-12 col-lg-12",
+        "kcFormButtonsClass": "col-xs-12 col-sm-12 col-md-12 col-lg-12",
+        "kcFormSettingClass": "login-pf-settings",
+        "kcTextareaClass": "form-control",
+
+        "kcInfoAreaClass": "col-xs-12 col-sm-4 col-md-4 col-lg-5 details",
+
+        // user-profile grouping
+        "kcFormGroupHeader": "pf-c-form__group",
+
+        // css classes for form buttons main class used for all buttons
+        "kcButtonClass": "btn",
+        // classes defining priority of the button - primary or default (there is typically only one priority button for the form)
+        "kcButtonPrimaryClass": "btn-primary",
+        "kcButtonDefaultClass": "btn-default",
+        // classes defining size of the button
+        "kcButtonLargeClass": "btn-lg",
+        "kcButtonBlockClass": "btn-block",
+
+        // css classes for input
+        "kcInputLargeClass": "input-lg",
+
+        // css classes for form accessability
+        "kcSrOnlyClass": "sr-only",
+
+        // css classes for select-authenticator form
+        "kcSelectAuthListClass": "list-group list-view-pf",
+        "kcSelectAuthListItemClass": "list-group-item list-view-pf-stacked",
+        "kcSelectAuthListItemFillClass": "pf-l-split__item pf-m-fill",
+        "kcSelectAuthListItemIconPropertyClass": "fa-2x select-auth-box-icon-properties",
+        "kcSelectAuthListItemIconClass": "pf-l-split__item select-auth-box-icon",
+        "kcSelectAuthListItemTitle": "select-auth-box-paragraph",
+        "kcSelectAuthListItemInfoClass": "list-view-pf-main-info",
+        "kcSelectAuthListItemLeftClass": "list-view-pf-left",
+        "kcSelectAuthListItemBodyClass": "list-view-pf-body",
+        "kcSelectAuthListItemDescriptionClass": "list-view-pf-description",
+        "kcSelectAuthListItemHeadingClass": "list-group-item-heading",
+        "kcSelectAuthListItemHelpTextClass": "list-group-item-text",
+
+        // css classes for the authenticators
+        "kcAuthenticatorDefaultClass": "fa list-view-pf-icon-lg",
+        "kcAuthenticatorPasswordClass": "fa fa-unlock list-view-pf-icon-lg",
+        "kcAuthenticatorOTPClass": "fa fa-mobile list-view-pf-icon-lg",
+        "kcAuthenticatorWebAuthnClass": "fa fa-key list-view-pf-icon-lg",
+        "kcAuthenticatorWebAuthnPasswordlessClass": "fa fa-key list-view-pf-icon-lg",
+
+        //css classes for the OTP Login Form
+        "kcSelectOTPListClass": "card-pf card-pf-view card-pf-view-select card-pf-view-single-select",
+        "kcSelectOTPListItemClass": "card-pf-body card-pf-top-element",
+        "kcAuthenticatorOtpCircleClass": "fa fa-mobile card-pf-icon-circle",
+        "kcSelectOTPItemHeadingClass": "card-pf-title text-center",
+        "kcFormOptionsWrapperClass": undefined
+    }
+});

package/src/login/pages/Error.tsx

@@ -1,4 +1,4 @@
-import { type PageProps } from "keycloakify/login/pages/PageProps";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../kcContext";
 import type { I18n } from "../i18n";
 

package/src/login/pages/IdpReviewUserProfile.tsx

@@ -1,8 +1,8 @@
 import { useState } from "react";
 import { clsx } from "keycloakify/tools/clsx";
 import { UserProfileFormFields } from "keycloakify/login/pages/shared/UserProfileCommons";
-import { type PageProps, defaultClasses } from "keycloakify/login/pages/PageProps";
-import { useGetClassName } from "keycloakify/lib/useGetClassName";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
 import type { KcContext } from "../kcContext";
 import type { I18n } from "../i18n";
 
@@ -10,7 +10,7 @@ export default function IdpReviewUserProfile(props: PageProps<Extract<KcContext,
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { getClassName } = useGetClassName({
-        "defaultClasses": !doUseDefaultCss ? undefined : defaultClasses,
+        doUseDefaultCss,
         classes
     });
 

package/src/login/pages/Info.tsx

@@ -1,5 +1,5 @@
 import { assert } from "keycloakify/tools/assert";
-import { type PageProps } from "keycloakify/login/pages/PageProps";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../kcContext";
 import type { I18n } from "../i18n";
 

package/src/login/pages/Login.tsx

@@ -1,8 +1,8 @@
 import { useState, type FormEventHandler } from "react";
 import { clsx } from "keycloakify/tools/clsx";
 import { useConstCallback } from "keycloakify/tools/useConstCallback";
-import { type PageProps, defaultClasses } from "keycloakify/login/pages/PageProps";
-import { useGetClassName } from "keycloakify/lib/useGetClassName";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
 import type { KcContext } from "../kcContext";
 import type { I18n } from "../i18n";
 
@@ -10,7 +10,7 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { getClassName } = useGetClassName({
-        "defaultClasses": !doUseDefaultCss ? undefined : defaultClasses,
+        doUseDefaultCss,
         classes
     });
 

package/src/login/pages/LoginConfigTotp.tsx

@@ -1,6 +1,6 @@
 import { clsx } from "keycloakify/tools/clsx";
-import { type PageProps, defaultClasses } from "keycloakify/login/pages/PageProps";
-import { useGetClassName } from "keycloakify/lib/useGetClassName";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
 import type { KcContext } from "../kcContext";
 import type { I18n } from "../i18n";
 
@@ -8,7 +8,7 @@ export default function LoginConfigTotp(props: PageProps<Extract<KcContext, { pa
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { getClassName } = useGetClassName({
-        "defaultClasses": !doUseDefaultCss ? undefined : defaultClasses,
+        doUseDefaultCss,
         classes
     });
 

package/src/login/pages/LoginIdpLinkConfirm.tsx

@@ -1,6 +1,6 @@
 import { clsx } from "keycloakify/tools/clsx";
-import { type PageProps, defaultClasses } from "keycloakify/login/pages/PageProps";
-import { useGetClassName } from "keycloakify/lib/useGetClassName";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
 import type { KcContext } from "../kcContext";
 import type { I18n } from "../i18n";
 
@@ -8,7 +8,7 @@ export default function LoginIdpLinkConfirm(props: PageProps<Extract<KcContext,
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { getClassName } = useGetClassName({
-        "defaultClasses": !doUseDefaultCss ? undefined : defaultClasses,
+        doUseDefaultCss,
         classes
     });
 

package/src/login/pages/LoginIdpLinkEmail.tsx

@@ -1,5 +1,5 @@
 import type { KcContext } from "keycloakify/login/kcContext";
-import { type PageProps } from "keycloakify/login/pages/PageProps";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { I18n } from "keycloakify/login/i18n";
 
 export default function LoginIdpLinkEmail(props: PageProps<Extract<KcContext, { pageId: "login-idp-link-email.ftl" }>, I18n>) {

package/src/login/pages/LoginOtp.tsx

@@ -2,8 +2,8 @@ import { useEffect } from "react";
 import { headInsert } from "keycloakify/tools/headInsert";
 import { pathJoin } from "keycloakify/bin/tools/pathJoin";
 import { clsx } from "keycloakify/tools/clsx";
-import { type PageProps, defaultClasses } from "keycloakify/login/pages/PageProps";
-import { useGetClassName } from "keycloakify/lib/useGetClassName";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
 import type { KcContext } from "../kcContext";
 import type { I18n } from "../i18n";
 
@@ -11,7 +11,7 @@ export default function LoginOtp(props: PageProps<Extract<KcContext, { pageId: "
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { getClassName } = useGetClassName({
-        "defaultClasses": !doUseDefaultCss ? undefined : defaultClasses,
+        doUseDefaultCss,
         classes
     });
 

package/src/login/pages/LoginPageExpired.tsx

@@ -1,4 +1,4 @@
-import { type PageProps } from "keycloakify/login/pages/PageProps";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../kcContext";
 import type { I18n } from "../i18n";