From c9e546a8fd0b827b0378439d0b6844a462836d58 Mon Sep 17 00:00:00 2001
From: garronej <joseph.garrone@data.gouv.fr>
Date: Tue, 21 Mar 2023 05:27:31 +0100
Subject: [PATCH] Fix numerous bugs, improve structure

---
 src/account/Template.tsx                      |   7 +-
 src/account/TemplateProps.ts                  |   4 +-
 src/account/kcContext/KcContext.ts            |  10 +-
 src/account/kcContext/kcContextMocks.ts       |  14 +-
 src/account/lib/useGetClassName.ts            |  12 ++
 src/account/pages/Account.tsx                 |  21 +--
 src/account/pages/PageProps.ts                |  12 +-
 src/account/pages/Password.tsx                |  19 ++-
 src/lib/useGetClassName.ts                    |  21 +--
 src/login/Template.tsx                        |   9 +-
 src/login/TemplateProps.ts                    |  82 +++++++----
 src/login/lib/useGetClassName.ts              | 100 +++++++++++++
 src/login/pages/Error.tsx                     |   2 +-
 src/login/pages/IdpReviewUserProfile.tsx      |   6 +-
 src/login/pages/Info.tsx                      |   2 +-
 src/login/pages/Login.tsx                     |   6 +-
 src/login/pages/LoginConfigTotp.tsx           |   6 +-
 src/login/pages/LoginIdpLinkConfirm.tsx       |   6 +-
 src/login/pages/LoginIdpLinkEmail.tsx         |   2 +-
 src/login/pages/LoginOtp.tsx                  |   6 +-
 src/login/pages/LoginPageExpired.tsx          |   2 +-
 src/login/pages/LoginPassword.tsx             |   6 +-
 src/login/pages/LoginResetPassword.tsx        |   6 +-
 src/login/pages/LoginUpdatePassword.tsx       |   6 +-
 src/login/pages/LoginUpdateProfile.tsx        |   6 +-
 src/login/pages/LoginUsername.tsx             |   6 +-
 src/login/pages/LoginVerifyEmail.tsx          |   2 +-
 src/login/pages/LogoutConfirm.tsx             |   6 +-
 src/login/pages/PageProps.ts                  | 137 +-----------------
 src/login/pages/Register.tsx                  |   6 +-
 src/login/pages/RegisterUserProfile.tsx       |   6 +-
 src/login/pages/Terms.tsx                     |   6 +-
 src/login/pages/UpdateUserProfile.tsx         |   6 +-
 src/login/pages/WebauthnAuthenticate.tsx      |   9 +-
 src/login/pages/shared/UserProfileCommons.tsx |   2 +-
 35 files changed, 285 insertions(+), 274 deletions(-)
 create mode 100644 src/account/lib/useGetClassName.ts
 create mode 100644 src/login/lib/useGetClassName.ts

diff --git a/src/account/Template.tsx b/src/account/Template.tsx
index 4ec3f002..beb69689 100644
--- a/src/account/Template.tsx
+++ b/src/account/Template.tsx
@@ -1,12 +1,15 @@
 import { clsx } from "keycloakify/tools/clsx";
 import { usePrepareTemplate } from "keycloakify/lib/usePrepareTemplate";
 import { type TemplateProps } from "keycloakify/account/TemplateProps";
+import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
 import type { KcContext } from "./kcContext";
 import type { I18n } from "./i18n";
 import { assert } from "keycloakify/tools/assert";
 
 export default function Template(props: TemplateProps<KcContext, I18n>) {
-    const { kcContext, i18n, doUseDefaultCss, bodyClass, active, children } = props;
+    const { kcContext, i18n, doUseDefaultCss, active, classes, children } = props;
+
+    const { getClassName } = useGetClassName({ doUseDefaultCss, classes });
 
     const { msg, changeLocale, labelBySupportedLanguageTag, currentLanguageTag } = i18n;
 
@@ -18,7 +21,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
         "stylesCommon": ["node_modules/patternfly/dist/css/patternfly.min.css", "node_modules/patternfly/dist/css/patternfly-additions.min.css"],
         "styles": ["css/account.css"],
         "htmlClassName": undefined,
-        "bodyClassName": clsx("admin-console", "user", bodyClass)
+        "bodyClassName": clsx("admin-console", "user", getClassName("kcBodyClass"))
     });
 
     if (!isReady) {
diff --git a/src/account/TemplateProps.ts b/src/account/TemplateProps.ts
index 32d37f1e..86f108b5 100644
--- a/src/account/TemplateProps.ts
+++ b/src/account/TemplateProps.ts
@@ -7,6 +7,8 @@ export type TemplateProps<KcContext extends KcContext.Common, I18nExtended exten
     i18n: I18nExtended;
     doUseDefaultCss: boolean;
     active: string;
-    bodyClass: string | undefined;
+    classes?: Partial<Record<ClassKey, string>>;
     children: ReactNode;
 };
+
+export type ClassKey = "kcBodyClass" | "kcButtonClass" | "kcButtonPrimaryClass" | "kcButtonLargeClass" | "kcButtonDefaultClass";
diff --git a/src/account/kcContext/KcContext.ts b/src/account/kcContext/KcContext.ts
index 507f5468..f722390e 100644
--- a/src/account/kcContext/KcContext.ts
+++ b/src/account/kcContext/KcContext.ts
@@ -51,6 +51,12 @@ export declare namespace KcContext {
             get: (fieldName: string) => string;
             exists: (fieldName: string) => boolean;
         };
+        account: {
+            email?: string;
+            firstName: string;
+            lastName?: string;
+            username?: string;
+        };
     };
 
     export type Password = Common & {
@@ -71,10 +77,6 @@ export declare namespace KcContext {
             editUsernameAllowed: boolean;
         };
         stateChecker: string;
-        account: {
-            firstName: string;
-            lastName?: string;
-        };
     };
 }
 
diff --git a/src/account/kcContext/kcContextMocks.ts b/src/account/kcContext/kcContextMocks.ts
index 57a8cd03..7915006d 100644
--- a/src/account/kcContext/kcContextMocks.ts
+++ b/src/account/kcContext/kcContextMocks.ts
@@ -139,7 +139,13 @@ export const kcContextCommonMock: KcContext.Common = {
         "log": true,
         "passwordUpdateSupported": true
     },
-    "referrer": undefined
+    "referrer": undefined,
+    "account": {
+        "firstName": "john",
+        "lastName": "doe",
+        "email": "john.doe@code.gouv.fr",
+        "username": "doe_j"
+    }
 };
 
 export const kcContextMocks: KcContext[] = [
@@ -163,10 +169,6 @@ export const kcContextMocks: KcContext[] = [
             "registrationEmailAsUsername": true,
             "editUsernameAllowed": true
         },
-        "stateChecker": "",
-        "account": {
-            "firstName": "john",
-            "lastName": "doe"
-        }
+        "stateChecker": ""
     })
 ];
diff --git a/src/account/lib/useGetClassName.ts b/src/account/lib/useGetClassName.ts
new file mode 100644
index 00000000..0febe339
--- /dev/null
+++ b/src/account/lib/useGetClassName.ts
@@ -0,0 +1,12 @@
+import { createUseClassName } from "keycloakify/lib/useGetClassName";
+import type { ClassKey } from "keycloakify/account/TemplateProps";
+
+export const { useGetClassName } = createUseClassName<ClassKey>({
+    "defaultClasses": {
+        "kcBodyClass": undefined,
+        "kcButtonClass": "btn",
+        "kcButtonPrimaryClass": "btn-primary",
+        "kcButtonLargeClass": "btn-lg",
+        "kcButtonDefaultClass": "btn-default"
+    }
+});
diff --git a/src/account/pages/Account.tsx b/src/account/pages/Account.tsx
index 43c018c5..89a10034 100644
--- a/src/account/pages/Account.tsx
+++ b/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>
 
diff --git a/src/account/pages/PageProps.ts b/src/account/pages/PageProps.ts
index ba048ac0..afd32504 100644
--- a/src/account/pages/PageProps.ts
+++ b/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"
-};
diff --git a/src/account/pages/Password.tsx b/src/account/pages/Password.tsx
index d9cdcc52..c92b4d19 100644
--- a/src/account/pages/Password.tsx
+++ b/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;" }}
diff --git a/src/lib/useGetClassName.ts b/src/lib/useGetClassName.ts
index df106049..9d84876c 100644
--- a/src/lib/useGetClassName.ts
+++ b/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 };
 }
diff --git a/src/login/Template.tsx b/src/login/Template.tsx
index 44ff7444..98b0d07d 100644
--- a/src/login/Template.tsx
+++ b/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;
 
diff --git a/src/login/TemplateProps.ts b/src/login/TemplateProps.ts
index 5782dc97..b898c6a5 100644
--- a/src/login/TemplateProps.ts
+++ b/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";
diff --git a/src/login/lib/useGetClassName.ts b/src/login/lib/useGetClassName.ts
new file mode 100644
index 00000000..f7c23e29
--- /dev/null
+++ b/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
+    }
+});
diff --git a/src/login/pages/Error.tsx b/src/login/pages/Error.tsx
index 9e3e83ef..144b71b1 100644
--- a/src/login/pages/Error.tsx
+++ b/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";
 
diff --git a/src/login/pages/IdpReviewUserProfile.tsx b/src/login/pages/IdpReviewUserProfile.tsx
index 80c5f870..a6d2fbdf 100644
--- a/src/login/pages/IdpReviewUserProfile.tsx
+++ b/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
     });
 
diff --git a/src/login/pages/Info.tsx b/src/login/pages/Info.tsx
index 84fb6c5b..20bf0f5c 100644
--- a/src/login/pages/Info.tsx
+++ b/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";
 
diff --git a/src/login/pages/Login.tsx b/src/login/pages/Login.tsx
index f89c2597..c15af59d 100644
--- a/src/login/pages/Login.tsx
+++ b/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
     });
 
diff --git a/src/login/pages/LoginConfigTotp.tsx b/src/login/pages/LoginConfigTotp.tsx
index 5f1a5f31..24c0c148 100644
--- a/src/login/pages/LoginConfigTotp.tsx
+++ b/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
     });
 
diff --git a/src/login/pages/LoginIdpLinkConfirm.tsx b/src/login/pages/LoginIdpLinkConfirm.tsx
index 1cd1de13..f1f2b3e8 100644
--- a/src/login/pages/LoginIdpLinkConfirm.tsx
+++ b/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
     });
 
diff --git a/src/login/pages/LoginIdpLinkEmail.tsx b/src/login/pages/LoginIdpLinkEmail.tsx
index b2b2b11a..a4ac98c1 100644
--- a/src/login/pages/LoginIdpLinkEmail.tsx
+++ b/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>) {
diff --git a/src/login/pages/LoginOtp.tsx b/src/login/pages/LoginOtp.tsx
index 0701bdfa..3007c128 100644
--- a/src/login/pages/LoginOtp.tsx
+++ b/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
     });
 
diff --git a/src/login/pages/LoginPageExpired.tsx b/src/login/pages/LoginPageExpired.tsx
index b8eadfd6..504544fd 100644
--- a/src/login/pages/LoginPageExpired.tsx
+++ b/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";
 
diff --git a/src/login/pages/LoginPassword.tsx b/src/login/pages/LoginPassword.tsx
index 186e24b4..8d5e0596 100644
--- a/src/login/pages/LoginPassword.tsx
+++ b/src/login/pages/LoginPassword.tsx
@@ -2,8 +2,8 @@ import { useState } from "react";
 import { clsx } from "keycloakify/tools/clsx";
 import { useConstCallback } from "keycloakify/tools/useConstCallback";
 import type { FormEventHandler } from "react";
-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 LoginPassword(props: PageProps<Extract<KcContext, { "pag
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { getClassName } = useGetClassName({
-        "defaultClasses": !doUseDefaultCss ? undefined : defaultClasses,
+        doUseDefaultCss,
         classes
     });
 
diff --git a/src/login/pages/LoginResetPassword.tsx b/src/login/pages/LoginResetPassword.tsx
index 36ebc248..3fcc1de5 100644
--- a/src/login/pages/LoginResetPassword.tsx
+++ b/src/login/pages/LoginResetPassword.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 LoginResetPassword(props: PageProps<Extract<KcContext, {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { getClassName } = useGetClassName({
-        "defaultClasses": !doUseDefaultCss ? undefined : defaultClasses,
+        doUseDefaultCss,
         classes
     });
 
diff --git a/src/login/pages/LoginUpdatePassword.tsx b/src/login/pages/LoginUpdatePassword.tsx
index 52b091fa..c738f797 100644
--- a/src/login/pages/LoginUpdatePassword.tsx
+++ b/src/login/pages/LoginUpdatePassword.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 LoginUpdatePassword(props: PageProps<Extract<KcContext,
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { getClassName } = useGetClassName({
-        "defaultClasses": !doUseDefaultCss ? undefined : defaultClasses,
+        doUseDefaultCss,
         classes
     });
 
diff --git a/src/login/pages/LoginUpdateProfile.tsx b/src/login/pages/LoginUpdateProfile.tsx
index 3c487bd8..59d1f89b 100644
--- a/src/login/pages/LoginUpdateProfile.tsx
+++ b/src/login/pages/LoginUpdateProfile.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 LoginUpdateProfile(props: PageProps<Extract<KcContext, {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { getClassName } = useGetClassName({
-        "defaultClasses": !doUseDefaultCss ? undefined : defaultClasses,
+        doUseDefaultCss,
         classes
     });
 
diff --git a/src/login/pages/LoginUsername.tsx b/src/login/pages/LoginUsername.tsx
index 858c68dc..05b68d41 100644
--- a/src/login/pages/LoginUsername.tsx
+++ b/src/login/pages/LoginUsername.tsx
@@ -2,8 +2,8 @@ import type { FormEventHandler } from "react";
 import { useState } 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";
 
@@ -11,7 +11,7 @@ export default function LoginUsername(props: PageProps<Extract<KcContext, { page
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { getClassName } = useGetClassName({
-        "defaultClasses": !doUseDefaultCss ? undefined : defaultClasses,
+        doUseDefaultCss,
         classes
     });
 
diff --git a/src/login/pages/LoginVerifyEmail.tsx b/src/login/pages/LoginVerifyEmail.tsx
index 5dc7ba28..2373d778 100644
--- a/src/login/pages/LoginVerifyEmail.tsx
+++ b/src/login/pages/LoginVerifyEmail.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";
 
diff --git a/src/login/pages/LogoutConfirm.tsx b/src/login/pages/LogoutConfirm.tsx
index 818b588a..2239b9c8 100644
--- a/src/login/pages/LogoutConfirm.tsx
+++ b/src/login/pages/LogoutConfirm.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 LogoutConfirm(props: PageProps<Extract<KcContext, { page
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { getClassName } = useGetClassName({
-        "defaultClasses": !doUseDefaultCss ? undefined : defaultClasses,
+        doUseDefaultCss,
         classes
     });
 
diff --git a/src/login/pages/PageProps.ts b/src/login/pages/PageProps.ts
index db2863c2..32fbb534 100644
--- a/src/login/pages/PageProps.ts
+++ b/src/login/pages/PageProps.ts
@@ -1,144 +1,11 @@
 import type { LazyExoticComponent } from "react";
 import type { I18n } from "keycloakify/login/i18n";
-import { type TemplateProps, type TemplateClassKey, defaultTemplateClasses } from "keycloakify/login/TemplateProps";
+import { type TemplateProps, type ClassKey } from "keycloakify/login/TemplateProps";
 
 export type PageProps<KcContext, I18nExtended extends I18n> = {
     Template: LazyExoticComponent<(props: TemplateProps<any, any>) => JSX.Element | null>;
     kcContext: KcContext;
     i18n: I18nExtended;
     doUseDefaultCss: boolean;
-    classes?: Partial<Record<TemplateClassKey | ClassKey, string>>;
-};
-
-export type ClassKey =
-    | TemplateClassKey
-    | "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";
-
-export const defaultClasses: Record<ClassKey, string | undefined> = {
-    ...defaultTemplateClasses,
-
-    "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
+    classes?: Partial<Record<ClassKey, string>>;
 };
diff --git a/src/login/pages/Register.tsx b/src/login/pages/Register.tsx
index 20fbed0b..316c9bce 100644
--- a/src/login/pages/Register.tsx
+++ b/src/login/pages/Register.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 Register(props: PageProps<Extract<KcContext, { pageId: "
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { getClassName } = useGetClassName({
-        "defaultClasses": !doUseDefaultCss ? undefined : defaultClasses,
+        doUseDefaultCss,
         classes
     });
 
diff --git a/src/login/pages/RegisterUserProfile.tsx b/src/login/pages/RegisterUserProfile.tsx
index 1955845e..a5ed80cf 100644
--- a/src/login/pages/RegisterUserProfile.tsx
+++ b/src/login/pages/RegisterUserProfile.tsx
@@ -1,8 +1,8 @@
 import { useState } from "react";
 import { clsx } from "keycloakify/tools/clsx";
 import { UserProfileFormFields } from "./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 RegisterUserProfile(props: PageProps<Extract<KcContext,
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { getClassName } = useGetClassName({
-        "defaultClasses": !doUseDefaultCss ? undefined : defaultClasses,
+        doUseDefaultCss,
         classes
     });
 
diff --git a/src/login/pages/Terms.tsx b/src/login/pages/Terms.tsx
index 819db533..2333a3af 100644
--- a/src/login/pages/Terms.tsx
+++ b/src/login/pages/Terms.tsx
@@ -1,8 +1,8 @@
 import { clsx } from "keycloakify/tools/clsx";
 import { useRerenderOnStateChange } from "evt/hooks";
 import { Markdown } from "keycloakify/tools/Markdown";
-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 { evtTermMarkdown } from "keycloakify/login/lib/useDownloadTerms";
 import type { KcContext } from "../kcContext";
 import type { I18n } from "../i18n";
@@ -11,7 +11,7 @@ export default function Terms(props: PageProps<Extract<KcContext, { pageId: "ter
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { getClassName } = useGetClassName({
-        "defaultClasses": !doUseDefaultCss ? undefined : defaultClasses,
+        doUseDefaultCss,
         classes
     });
 
diff --git a/src/login/pages/UpdateUserProfile.tsx b/src/login/pages/UpdateUserProfile.tsx
index ee567027..18983f3f 100644
--- a/src/login/pages/UpdateUserProfile.tsx
+++ b/src/login/pages/UpdateUserProfile.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 UpdateUserProfile(props: PageProps<Extract<KcContext, {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { getClassName } = useGetClassName({
-        "defaultClasses": !doUseDefaultCss ? undefined : defaultClasses,
+        doUseDefaultCss,
         classes
     });
 
diff --git a/src/login/pages/WebauthnAuthenticate.tsx b/src/login/pages/WebauthnAuthenticate.tsx
index eb0591cd..7e34f8ed 100644
--- a/src/login/pages/WebauthnAuthenticate.tsx
+++ b/src/login/pages/WebauthnAuthenticate.tsx
@@ -3,18 +3,15 @@ import { clsx } from "keycloakify/tools/clsx";
 import type { MessageKey } from "keycloakify/login/i18n/i18n";
 import { base64url } from "rfc4648";
 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";
 
 export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext, { pageId: "webauthn-authenticate.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
-    const { getClassName } = useGetClassName({
-        "defaultClasses": !doUseDefaultCss ? undefined : defaultClasses,
-        classes
-    });
+    const { getClassName } = useGetClassName({ doUseDefaultCss, classes });
 
     const { url } = kcContext;
 
diff --git a/src/login/pages/shared/UserProfileCommons.tsx b/src/login/pages/shared/UserProfileCommons.tsx
index 0a50bfd9..3b2b7a4d 100644
--- a/src/login/pages/shared/UserProfileCommons.tsx
+++ b/src/login/pages/shared/UserProfileCommons.tsx
@@ -1,5 +1,5 @@
 import { useEffect, Fragment } from "react";
-import type { ClassKey } from "keycloakify/login/pages/PageProps";
+import type { ClassKey } from "keycloakify/login/TemplateProps";
 import { clsx } from "keycloakify/tools/clsx";
 import { useFormValidation } from "keycloakify/login/lib/useFormValidation";
 import type { Attribute } from "keycloakify/login/kcContext/KcContext";