diff --git a/src/account/Fallback.tsx b/src/account/Fallback.tsx index e8ef395c..ab93e0f6 100644 --- a/src/account/Fallback.tsx +++ b/src/account/Fallback.tsx @@ -2,7 +2,6 @@ import { lazy, Suspense } from "react"; import { assert, type Equals } from "tsafe/assert"; import type { PageProps } from "keycloakify/account/pages/PageProps"; import type { KcContext } from "./KcContext"; -import type { I18n } from "./i18n"; const Password = lazy(() => import("keycloakify/account/pages/Password")); const Account = lazy(() => import("keycloakify/account/pages/Account")); @@ -12,7 +11,7 @@ const Applications = lazy(() => import("keycloakify/account/pages/Applications") const Log = lazy(() => import("keycloakify/account/pages/Log")); const FederatedIdentity = lazy(() => import("keycloakify/account/pages/FederatedIdentity")); -export default function Fallback(props: PageProps) { +export default function Fallback(props: PageProps) { const { kcContext, ...rest } = props; return ( diff --git a/src/account/Template.tsx b/src/account/Template.tsx index 63ce6e34..a6d12832 100644 --- a/src/account/Template.tsx +++ b/src/account/Template.tsx @@ -1,7 +1,7 @@ import { useEffect } from "react"; import { assert } from "keycloakify/tools/assert"; import { clsx } from "keycloakify/tools/clsx"; -import { useGetClassName } from "keycloakify/account/lib/useGetClassName"; +import { getKcClsx } from "keycloakify/account/lib/kcClsx"; import { useInsertLinkTags } from "keycloakify/tools/useInsertLinkTags"; import { useSetClassName } from "keycloakify/tools/useSetClassName"; import type { TemplateProps } from "keycloakify/account/TemplateProps"; @@ -11,7 +11,7 @@ import { useI18n } from "./i18n"; export default function Template(props: TemplateProps) { const { kcContext, doUseDefaultCss, active, classes, children } = props; - const { getClassName } = useGetClassName({ doUseDefaultCss, classes }); + const { kcClsx } = getKcClsx({ doUseDefaultCss, classes }); const { msg, msgStr, getChangeLocalUrl, labelBySupportedLanguageTag, currentLanguageTag } = useI18n({ kcContext }); @@ -23,12 +23,12 @@ export default function Template(props: TemplateProps) { useSetClassName({ qualifiedName: "html", - className: getClassName("kcHtmlClass") + className: kcClsx("kcHtmlClass") }); useSetClassName({ qualifiedName: "body", - className: clsx("admin-console", "user", getClassName("kcBodyClass")) + className: clsx("admin-console", "user", kcClsx("kcBodyClass")) }); useEffect(() => { diff --git a/src/account/lib/useGetClassName.ts b/src/account/lib/kcClsx.ts similarity index 77% rename from src/account/lib/useGetClassName.ts rename to src/account/lib/kcClsx.ts index ab0216da..330e0c4f 100644 --- a/src/account/lib/useGetClassName.ts +++ b/src/account/lib/kcClsx.ts @@ -1,7 +1,7 @@ -import { createUseClassName } from "keycloakify/lib/useGetClassName"; +import { createGetKcClsx } from "keycloakify/lib/getKcClsx"; import type { ClassKey } from "keycloakify/account/TemplateProps"; -export const { useGetClassName } = createUseClassName({ +export const { getKcClsx } = createGetKcClsx({ defaultClasses: { kcHtmlClass: undefined, kcBodyClass: undefined, @@ -19,3 +19,7 @@ export const { useGetClassName } = createUseClassName({ "pf-c-form__helper-text pf-m-error required kc-feedback-text" } }); + +export type { ClassKey }; + +export type KcClsx = ReturnType["kcClsx"]; diff --git a/src/account/pages/Account.tsx b/src/account/pages/Account.tsx index beb3b929..2dc0a296 100644 --- a/src/account/pages/Account.tsx +++ b/src/account/pages/Account.tsx @@ -1,18 +1,20 @@ import { clsx } from "keycloakify/tools/clsx"; import type { PageProps } from "keycloakify/account/pages/PageProps"; -import { useGetClassName } from "keycloakify/account/lib/useGetClassName"; +import { getKcClsx } from "keycloakify/account/lib/kcClsx"; import type { KcContext } from "../KcContext"; import { useI18n } from "../i18n"; export default function Account(props: PageProps>) { - const { kcContext, doUseDefaultCss, Template, classes } = props; + const { kcContext, doUseDefaultCss, Template } = props; - const { getClassName } = useGetClassName({ + const classes = { + ...props.classes, + kcBodyClass: clsx(props.classes?.kcBodyClass, "user") + }; + + const { kcClsx } = getKcClsx({ doUseDefaultCss, - classes: { - ...classes, - kcBodyClass: clsx(classes?.kcBodyClass, "user") - } + classes }); const { url, realm, messagesPerField, stateChecker, account, referrer } = kcContext; @@ -102,11 +104,7 @@ export default function Account(props: PageProps{msg("backToApplication")}} diff --git a/src/account/pages/Totp.tsx b/src/account/pages/Totp.tsx index b33bd9e5..6c614557 100644 --- a/src/account/pages/Totp.tsx +++ b/src/account/pages/Totp.tsx @@ -1,5 +1,5 @@ import { clsx } from "keycloakify/tools/clsx"; -import { useGetClassName } from "keycloakify/account/lib/useGetClassName"; +import { getKcClsx } from "keycloakify/account/lib/kcClsx"; import type { PageProps } from "keycloakify/account/pages/PageProps"; import type { KcContext } from "../KcContext"; import { useI18n } from "../i18n"; @@ -7,7 +7,7 @@ import { useI18n } from "../i18n"; export default function Totp(props: PageProps>) { const { kcContext, doUseDefaultCss, Template, classes } = props; - const { getClassName } = useGetClassName({ + const { kcClsx } = getKcClsx({ doUseDefaultCss, classes }); @@ -140,9 +140,9 @@ export default function Totp(props: PageProps
-
+ -
+
-
+
-
-
-
+
+
); } function InputTag(props: InputFiledByTypeProps & { fieldIndex: number | undefined }) { - const { attribute, fieldIndex, getClassName, formValidationDispatch, valueOrValues, i18n, displayableErrors } = props; + const { attribute, fieldIndex, kcClsx, dispatchFormAction, valueOrValues, i18n, displayableErrors } = props; return ( <> @@ -330,7 +321,7 @@ function InputTag(props: InputFiledByTypeProps & { fieldIndex: number | undefine return valueOrValues; })()} - className={getClassName("kcInputClass")} + className={kcClsx("kcInputClass")} aria-invalid={displayableErrors.find(error => error.fieldIndex === fieldIndex) !== undefined} disabled={attribute.readOnly} autoComplete={attribute.autocomplete} @@ -348,7 +339,7 @@ function InputTag(props: InputFiledByTypeProps & { fieldIndex: number | undefine step={attribute.annotations.inputTypeStep} {...Object.fromEntries(Object.entries(attribute.html5DataAnnotations ?? {}).map(([key, value]) => [`data-${key}`, value]))} onChange={event => - formValidationDispatch({ + dispatchFormAction({ action: "update", name: attribute.name, valueOrValues: (() => { @@ -369,7 +360,7 @@ function InputTag(props: InputFiledByTypeProps & { fieldIndex: number | undefine }) } onBlur={() => - formValidationDispatch({ + dispatchFormAction({ action: "focus lost", name: attribute.name, fieldIndex: fieldIndex @@ -387,17 +378,12 @@ function InputTag(props: InputFiledByTypeProps & { fieldIndex: number | undefine return ( <> - + @@ -464,7 +450,7 @@ function AddRemoveButtonsMultiValuedAttribute(props: { } function InputTagSelects(props: InputFiledByTypeProps) { - const { attribute, formValidationDispatch, getClassName, valueOrValues } = props; + const { attribute, dispatchFormAction, kcClsx, valueOrValues } = props; const { advancedMsg } = props.i18n; @@ -477,16 +463,16 @@ function InputTagSelects(props: InputFiledByTypeProps) { case "select-radiobuttons": return { inputType: "radio", - classDiv: getClassName("kcInputClassRadio"), - classInput: getClassName("kcInputClassRadioInput"), - classLabel: getClassName("kcInputClassRadioLabel") + classDiv: kcClsx("kcInputClassRadio"), + classInput: kcClsx("kcInputClassRadioInput"), + classLabel: kcClsx("kcInputClassRadioLabel") }; case "multiselect-checkboxes": return { inputType: "checkbox", - classDiv: getClassName("kcInputClassCheckbox"), - classInput: getClassName("kcInputClassCheckboxInput"), - classLabel: getClassName("kcInputClassCheckboxLabel") + classDiv: kcClsx("kcInputClassCheckbox"), + classInput: kcClsx("kcInputClassCheckboxInput"), + classLabel: kcClsx("kcInputClassCheckboxLabel") }; } })(); @@ -529,7 +515,7 @@ function InputTagSelects(props: InputFiledByTypeProps) { disabled={attribute.readOnly} checked={valueOrValues instanceof Array ? valueOrValues.includes(option) : valueOrValues === option} onChange={event => - formValidationDispatch({ + dispatchFormAction({ action: "update", name: attribute.name, valueOrValues: (() => { @@ -552,7 +538,7 @@ function InputTagSelects(props: InputFiledByTypeProps) { }) } onBlur={() => - formValidationDispatch({ + dispatchFormAction({ action: "focus lost", name: attribute.name, fieldIndex: undefined @@ -561,7 +547,7 @@ function InputTagSelects(props: InputFiledByTypeProps) { /> @@ -572,7 +558,7 @@ function InputTagSelects(props: InputFiledByTypeProps) { } function TextareaTag(props: InputFiledByTypeProps) { - const { attribute, formValidationDispatch, getClassName, displayableErrors, valueOrValues } = props; + const { attribute, dispatchFormAction, kcClsx, displayableErrors, valueOrValues } = props; assert(typeof valueOrValues === "string"); @@ -582,7 +568,7 @@ function TextareaTag(props: InputFiledByTypeProps) {