keycloakify 10.0.0-rc.12 → 10.0.0-rc.121

package/src/login/Template.tsx

@@ -1,16 +1,13 @@
 import { useEffect } from "react";
 import { assert } from "keycloakify/tools/assert";
 import { clsx } from "keycloakify/tools/clsx";
-import { type TemplateProps } from "keycloakify/login/TemplateProps";
-import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
-import { createUseInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
-import { createUseInsertLinkTags } from "keycloakify/tools/useInsertLinkTags";
+import type { TemplateProps } from "keycloakify/login/TemplateProps";
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
+import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
+import { useInsertLinkTags } from "keycloakify/tools/useInsertLinkTags";
 import { useSetClassName } from "keycloakify/tools/useSetClassName";
-import type { KcContext } from "./kcContext";
 import type { I18n } from "./i18n";
-
-const { useInsertLinkTags } = createUseInsertLinkTags();
-const { useInsertScriptTags } = createUseInsertScriptTags();
+import type { KcContext } from "./KcContext";
 
 export default function Template(props: TemplateProps<KcContext, I18n>) {
     const {
@@ -18,7 +15,6 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
         displayMessage = true,
         displayRequiredFields = false,
         headerNode,
-        showUsernameNode = null,
         socialProvidersNode = null,
         infoNode = null,
         documentTitle,
@@ -30,9 +26,9 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
         children
     } = props;
 
-    const { getClassName } = useGetClassName({ doUseDefaultCss, classes });
+    const { kcClsx } = getKcClsx({ doUseDefaultCss, classes });
 
-    const { msg, msgStr, getChangeLocalUrl, labelBySupportedLanguageTag, currentLanguageTag } = i18n;
+    const { msg, msgStr, getChangeLocaleUrl, labelBySupportedLanguageTag, currentLanguageTag } = i18n;
 
     const { realm, locale, auth, url, message, isAppInitiatedAction, authenticationSession, scripts } = kcContext;
 
@@ -41,13 +37,13 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
     }, []);
 
     useSetClassName({
-        "qualifiedName": "html",
-        "className": getClassName("kcHtmlClass")
+        qualifiedName: "html",
+        className: kcClsx("kcHtmlClass")
     });
 
     useSetClassName({
-        "qualifiedName": "body",
-        "className": bodyClassName ?? getClassName("kcBodyClass")
+        qualifiedName: "body",
+        className: bodyClassName ?? kcClsx("kcBodyClass")
     });
 
     useEffect(() => {
@@ -63,7 +59,8 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
     }, []);
 
     const { areAllStyleSheetsLoaded } = useInsertLinkTags({
-        "hrefs": !doUseDefaultCss
+        componentOrHookName: "Template",
+        hrefs: !doUseDefaultCss
             ? []
             : [
                   `${url.resourcesCommonPath}/node_modules/@patternfly/patternfly/patternfly.min.css`,
@@ -75,17 +72,18 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
     });
 
     const { insertScriptTags } = useInsertScriptTags({
-        "scriptTags": [
+        componentOrHookName: "Template",
+        scriptTags: [
             {
-                "type": "module",
-                "src": `${url.resourcesPath}/js/menu-button-links.js`
+                type: "module",
+                src: `${url.resourcesPath}/js/menu-button-links.js`
             },
             ...(authenticationSession === undefined
                 ? []
                 : [
                       {
-                          "type": "module",
-                          "textContent": [
+                          type: "module",
+                          textContent: [
                               `import { checkCookiesAndSetTimer } from "${url.resourcesPath}/js/authChecker.js";`,
                               ``,
                               `checkCookiesAndSetTimer(`,
@@ -99,9 +97,9 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
             ...scripts.map(
                 script =>
                     ({
-                        "type": "text/javascript",
-                        "src": script
-                    } as const)
+                        type: "text/javascript",
+                        src: script
+                    }) as const
             )
         ]
     });
@@ -117,24 +115,23 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
     }
 
     return (
-        <div className={getClassName("kcLoginClass")}>
-            <div id="kc-header" className={getClassName("kcHeaderClass")}>
-                <div id="kc-header-wrapper" className={getClassName("kcHeaderWrapperClass")}>
+        <div className={kcClsx("kcLoginClass")}>
+            <div id="kc-header" className={kcClsx("kcHeaderClass")}>
+                <div id="kc-header-wrapper" className={kcClsx("kcHeaderWrapperClass")}>
                     {msg("loginTitleHtml", realm.displayNameHtml)}
                 </div>
             </div>
 
-            <div className={getClassName("kcFormCardClass")}>
-                <header className={getClassName("kcFormHeaderClass")}>
+            <div className={kcClsx("kcFormCardClass")}>
+                <header className={kcClsx("kcFormHeaderClass")}>
                     {realm.internationalizationEnabled && (assert(locale !== undefined), locale.supported.length > 1) && (
-                        <div className={getClassName("kcLocaleMainClass")} id="kc-locale">
-                            <div id="kc-locale-wrapper" className={getClassName("kcLocaleWrapperClass")}>
-                                <div id="kc-locale-dropdown" className={clsx("menu-button-links", getClassName("kcLocaleDropDownClass"))}>
-                                    {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                        <div className={kcClsx("kcLocaleMainClass")} id="kc-locale">
+                            <div id="kc-locale-wrapper" className={kcClsx("kcLocaleWrapperClass")}>
+                                <div id="kc-locale-dropdown" className={clsx("menu-button-links", kcClsx("kcLocaleDropDownClass"))}>
                                     <button
                                         tabIndex={1}
                                         id="kc-current-locale-link"
-                                        aria-label={msgStr("languages" as any)}
+                                        aria-label={msgStr("languages")}
                                         aria-haspopup="true"
                                         aria-expanded="false"
                                         aria-controls="language-switch1"
@@ -147,15 +144,15 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                                         aria-labelledby="kc-current-locale-link"
                                         aria-activedescendant=""
                                         id="language-switch1"
-                                        className={getClassName("kcLocaleListClass")}
+                                        className={kcClsx("kcLocaleListClass")}
                                     >
                                         {locale.supported.map(({ languageTag }, i) => (
-                                            <li key={languageTag} className={getClassName("kcLocaleListItemClass")} role="none">
+                                            <li key={languageTag} className={kcClsx("kcLocaleListItemClass")} role="none">
                                                 <a
                                                     role="menuitem"
                                                     id={`language-${i + 1}`}
-                                                    className={getClassName("kcLocaleItemClass")}
-                                                    href={getChangeLocalUrl(languageTag)}
+                                                    className={kcClsx("kcLocaleItemClass")}
+                                                    href={getChangeLocaleUrl(languageTag)}
                                                 >
                                                     {labelBySupportedLanguageTag[languageTag]}
                                                 </a>
@@ -166,56 +163,37 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                             </div>
                         </div>
                     )}
-                    {!(auth !== undefined && auth.showUsername && !auth.showResetCredentials) ? (
-                        displayRequiredFields ? (
-                            <div className={getClassName("kcContentWrapperClass")}>
-                                <div className={clsx(getClassName("kcLabelWrapperClass"), "subtitle")}>
-                                    <span className="subtitle">
-                                        <span className="required">*</span>
-                                        {msg("requiredFields")}
-                                    </span>
-                                </div>
-                                <div className="col-md-10">
-                                    <h1 id="kc-page-title">{headerNode}</h1>
-                                </div>
-                            </div>
-                        ) : (
+                    {(() => {
+                        const node = !(auth !== undefined && auth.showUsername && !auth.showResetCredentials) ? (
                             <h1 id="kc-page-title">{headerNode}</h1>
-                        )
-                    ) : displayRequiredFields ? (
-                        <div className={getClassName("kcContentWrapperClass")}>
-                            <div className={clsx(getClassName("kcLabelWrapperClass"), "subtitle")}>
-                                <span className="subtitle">
-                                    <span className="required">*</span> {msg("requiredFields")}
-                                </span>
-                            </div>
-                            <div className="col-md-10">
-                                {showUsernameNode}
-                                <div id="kc-username" className={getClassName("kcFormGroupClass")}>
-                                    <label id="kc-attempted-username">{auth.attemptedUsername}</label>
-                                    <a id="reset-login" href={url.loginRestartFlowUrl} aria-label={msgStr("restartLoginTooltip")}>
-                                        <div className="kc-login-tooltip">
-                                            <i className={getClassName("kcResetFlowIcon")}></i>
-                                            <span className="kc-tooltip-text">{msg("restartLoginTooltip")}</span>
-                                        </div>
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                    ) : (
-                        <>
-                            {showUsernameNode}
-                            <div id="kc-username" className={getClassName("kcFormGroupClass")}>
+                        ) : (
+                            <div id="kc-username" className={kcClsx("kcFormGroupClass")}>
                                 <label id="kc-attempted-username">{auth.attemptedUsername}</label>
                                 <a id="reset-login" href={url.loginRestartFlowUrl} aria-label={msgStr("restartLoginTooltip")}>
                                     <div className="kc-login-tooltip">
-                                        <i className={getClassName("kcResetFlowIcon")}></i>
+                                        <i className={kcClsx("kcResetFlowIcon")}></i>
                                         <span className="kc-tooltip-text">{msg("restartLoginTooltip")}</span>
                                     </div>
                                 </a>
                             </div>
-                        </>
-                    )}
+                        );
+
+                        if (displayRequiredFields) {
+                            return (
+                                <div className={kcClsx("kcContentWrapperClass")}>
+                                    <div className={clsx(kcClsx("kcLabelWrapperClass"), "subtitle")}>
+                                        <span className="subtitle">
+                                            <span className="required">*</span>
+                                            {msg("requiredFields")}
+                                        </span>
+                                    </div>
+                                    <div className="col-md-10">{node}</div>
+                                </div>
+                            );
+                        }
+
+                        return node;
+                    })()}
                 </header>
                 <div id="kc-content">
                     <div id="kc-content-wrapper">
@@ -224,20 +202,20 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                             <div
                                 className={clsx(
                                     `alert-${message.type}`,
-                                    getClassName("kcAlertClass"),
+                                    kcClsx("kcAlertClass"),
                                     `pf-m-${message?.type === "error" ? "danger" : message.type}`
                                 )}
                             >
                                 <div className="pf-c-alert__icon">
-                                    {message.type === "success" && <span className={getClassName("kcFeedbackSuccessIcon")}></span>}
-                                    {message.type === "warning" && <span className={getClassName("kcFeedbackWarningIcon")}></span>}
-                                    {message.type === "error" && <span className={getClassName("kcFeedbackErrorIcon")}></span>}
-                                    {message.type === "info" && <span className={getClassName("kcFeedbackInfoIcon")}></span>}
+                                    {message.type === "success" && <span className={kcClsx("kcFeedbackSuccessIcon")}></span>}
+                                    {message.type === "warning" && <span className={kcClsx("kcFeedbackWarningIcon")}></span>}
+                                    {message.type === "error" && <span className={kcClsx("kcFeedbackErrorIcon")}></span>}
+                                    {message.type === "info" && <span className={kcClsx("kcFeedbackInfoIcon")}></span>}
                                 </div>
                                 <span
-                                    className={getClassName("kcAlertTitleClass")}
+                                    className={kcClsx("kcAlertTitleClass")}
                                     dangerouslySetInnerHTML={{
-                                        "__html": message.summary
+                                        __html: message.summary
                                     }}
                                 />
                             </div>
@@ -245,10 +223,9 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                         {children}
                         {auth !== undefined && auth.showTryAnotherWayLink && (
                             <form id="kc-select-try-another-way-form" action={url.loginAction} method="post">
-                                <div className={getClassName("kcFormGroupClass")}>
-                                    <div className={getClassName("kcFormGroupClass")}>
+                                <div className={kcClsx("kcFormGroupClass")}>
+                                    <div className={kcClsx("kcFormGroupClass")}>
                                         <input type="hidden" name="tryAnotherWay" value="on" />
-                                        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
                                         <a
                                             href="#"
                                             id="try-another-way"
@@ -265,8 +242,8 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                         )}
                         {socialProvidersNode}
                         {displayInfo && (
-                            <div id="kc-info" className={getClassName("kcSignUpClass")}>
-                                <div id="kc-info-wrapper" className={getClassName("kcInfoAreaWrapperClass")}>
+                            <div id="kc-info" className={kcClsx("kcSignUpClass")}>
+                                <div id="kc-info-wrapper" className={kcClsx("kcInfoAreaWrapperClass")}>
                                     {infoNode}
                                 </div>
                             </div>

package/src/login/TemplateProps.ts

@@ -1,25 +1,21 @@
 import type { ReactNode } from "react";
-import type { KcContext } from "./kcContext";
-import type { I18n } from "./i18n";
 
-export type TemplateProps<KcContext extends KcContext.Common, I18nExtended extends I18n> = {
+export type TemplateProps<KcContext, I18n> = {
     kcContext: KcContext;
-    i18n: I18nExtended;
+    i18n: I18n;
     doUseDefaultCss: boolean;
     classes?: Partial<Record<ClassKey, string>>;
+    children: ReactNode;
 
     displayInfo?: boolean;
     displayMessage?: boolean;
     displayRequiredFields?: boolean;
     showAnotherWayIfPresent?: boolean;
     headerNode: ReactNode;
-    showUsernameNode?: ReactNode;
     socialProvidersNode?: ReactNode;
     infoNode?: ReactNode;
     documentTitle?: string;
     bodyClassName?: string;
-
-    children: ReactNode;
 };
 
 export type ClassKey =