keycloakify 2.2.0 → 2.5.1

package/src/lib/components/Login.tsx

@@ -1,4 +1,3 @@
-
 import { useState, memo } from "react";
 import { Template } from "./Template";
 import type { KcProps } from "./KcProps";
@@ -7,13 +6,8 @@ import { useKcMessage } from "../i18n/useKcMessage";
 import { useCssAndCx } from "tss-react";
 import { useConstCallback } from "powerhooks/useConstCallback";
 
-export const Login = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Login; } & KcProps) => {
-
-    const {
-        social, realm, url,
-        usernameEditDisabled, login,
-        auth, registrationDisabled
-    } = kcContext;
+export const Login = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Login } & KcProps) => {
+    const { social, realm, url, usernameEditDisabled, login, auth, registrationDisabled } = kcContext;
 
     const { msg, msgStr } = useKcMessage();
 
@@ -21,9 +15,7 @@ export const Login = memo(({ kcContext, ...props }: { kcContext: KcContextBase.L
 
     const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
 
-    const onSubmit = useConstCallback(() =>
-        (setIsLoginButtonDisabled(true), true)
-    );
+    const onSubmit = useConstCallback(() => (setIsLoginButtonDisabled(true), true));
 
     return (
         <Template
@@ -33,125 +25,143 @@ export const Login = memo(({ kcContext, ...props }: { kcContext: KcContextBase.L
             displayWide={realm.password && social.providers !== undefined}
             headerNode={msg("doLogIn")}
             formNode={
-                <div
-                    id="kc-form"
-                    className={cx(realm.password && social.providers !== undefined && props.kcContentWrapperClass)}
-                >
+                <div id="kc-form" className={cx(realm.password && social.providers !== undefined && props.kcContentWrapperClass)}>
                     <div
                         id="kc-form-wrapper"
                         className={cx(realm.password && social.providers && [props.kcFormSocialAccountContentClass, props.kcFormSocialAccountClass])}
                     >
-                        {
-                            realm.password &&
-                            (
-                                <form id="kc-form-login" onSubmit={onSubmit} action={url.loginAction} method="post">
-                                    <div className={cx(props.kcFormGroupClass)}>
-                                        <label htmlFor="username" className={cx(props.kcLabelClass)}>
-                                            {
-                                                !realm.loginWithEmailAllowed ?
-                                                    msg("username")
-                                                    :
-                                                    (
-                                                        !realm.registrationEmailAsUsername ?
-                                                            msg("usernameOrEmail") :
-                                                            msg("email")
-                                                    )
-                                            }
-                                        </label>
-                                        <input
-                                            tabIndex={1}
-                                            id="username"
-                                            className={cx(props.kcInputClass)}
-                                            name="username"
-                                            defaultValue={login.username ?? ''}
-                                            type="text"
-                                            {...(usernameEditDisabled ? { "disabled": true } : { "autoFocus": true, "autoComplete": "off" })}
-                                        />
-                                    </div>
-                                    <div className={cx(props.kcFormGroupClass)}>
-                                        <label htmlFor="password" className={cx(props.kcLabelClass)}>
-                                            {msg("password")}
-                                        </label>
-                                        <input tabIndex={2} id="password" className={cx(props.kcInputClass)} name="password" type="password" autoComplete="off" />
-                                    </div>
-                                    <div className={cx(props.kcFormGroupClass, props.kcFormSettingClass)}>
-                                        <div id="kc-form-options">
-                                            {
-                                                (
-                                                    realm.rememberMe &&
-                                                    !usernameEditDisabled
-                                                ) &&
-                                                <div className="checkbox">
-                                                    <label>
-                                                        <input tabIndex={3} id="rememberMe" name="rememberMe" type="checkbox" {...(login.rememberMe ? { "checked": true } : {})} />
-                                                        {msg("rememberMe")}
-                                                    </label>
-                                                </div>
-                                            }
-                                        </div>
-                                        <div className={cx(props.kcFormOptionsWrapperClass)}>
-                                            {
-                                                realm.resetPasswordAllowed &&
-                                                <span>
-                                                    <a tabIndex={5} href={url.loginResetCredentialsUrl}>{msg("doForgotPassword")}</a>
-                                                </span>
-                                            }
-                                        </div>
-
+                        {realm.password && (
+                            <form id="kc-form-login" onSubmit={onSubmit} action={url.loginAction} method="post">
+                                <div className={cx(props.kcFormGroupClass)}>
+                                    <label htmlFor="username" className={cx(props.kcLabelClass)}>
+                                        {!realm.loginWithEmailAllowed
+                                            ? msg("username")
+                                            : !realm.registrationEmailAsUsername
+                                            ? msg("usernameOrEmail")
+                                            : msg("email")}
+                                    </label>
+                                    <input
+                                        tabIndex={1}
+                                        id="username"
+                                        className={cx(props.kcInputClass)}
+                                        name="username"
+                                        defaultValue={login.username ?? ""}
+                                        type="text"
+                                        {...(usernameEditDisabled
+                                            ? { "disabled": true }
+                                            : {
+                                                  "autoFocus": true,
+                                                  "autoComplete": "off",
+                                              })}
+                                    />
+                                </div>
+                                <div className={cx(props.kcFormGroupClass)}>
+                                    <label htmlFor="password" className={cx(props.kcLabelClass)}>
+                                        {msg("password")}
+                                    </label>
+                                    <input
+                                        tabIndex={2}
+                                        id="password"
+                                        className={cx(props.kcInputClass)}
+                                        name="password"
+                                        type="password"
+                                        autoComplete="off"
+                                    />
+                                </div>
+                                <div className={cx(props.kcFormGroupClass, props.kcFormSettingClass)}>
+                                    <div id="kc-form-options">
+                                        {realm.rememberMe && !usernameEditDisabled && (
+                                            <div className="checkbox">
+                                                <label>
+                                                    <input
+                                                        tabIndex={3}
+                                                        id="rememberMe"
+                                                        name="rememberMe"
+                                                        type="checkbox"
+                                                        {...(login.rememberMe
+                                                            ? {
+                                                                  "checked": true,
+                                                              }
+                                                            : {})}
+                                                    />
+                                                    {msg("rememberMe")}
+                                                </label>
+                                            </div>
+                                        )}
                                     </div>
-                                    <div id="kc-form-buttons" className={cx(props.kcFormGroupClass)}>
-                                        <input
-                                            type="hidden"
-                                            id="id-hidden-input"
-                                            name="credentialId"
-                                            {...(auth?.selectedCredential !== undefined ? { "value": auth.selectedCredential } : {})}
-                                        />
-                                        <input
-                                            tabIndex={4}
-                                            className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonBlockClass, props.kcButtonLargeClass)} name="login" id="kc-login" type="submit"
-                                            value={msgStr("doLogIn")}
-                                            disabled={isLoginButtonDisabled}
-                                        />
+                                    <div className={cx(props.kcFormOptionsWrapperClass)}>
+                                        {realm.resetPasswordAllowed && (
+                                            <span>
+                                                <a tabIndex={5} href={url.loginResetCredentialsUrl}>
+                                                    {msg("doForgotPassword")}
+                                                </a>
+                                            </span>
+                                        )}
                                     </div>
-                                </form>
-                            )
-                        }
+                                </div>
+                                <div id="kc-form-buttons" className={cx(props.kcFormGroupClass)}>
+                                    <input
+                                        type="hidden"
+                                        id="id-hidden-input"
+                                        name="credentialId"
+                                        {...(auth?.selectedCredential !== undefined
+                                            ? {
+                                                  "value": auth.selectedCredential,
+                                              }
+                                            : {})}
+                                    />
+                                    <input
+                                        tabIndex={4}
+                                        className={cx(
+                                            props.kcButtonClass,
+                                            props.kcButtonPrimaryClass,
+                                            props.kcButtonBlockClass,
+                                            props.kcButtonLargeClass,
+                                        )}
+                                        name="login"
+                                        id="kc-login"
+                                        type="submit"
+                                        value={msgStr("doLogIn")}
+                                        disabled={isLoginButtonDisabled}
+                                    />
+                                </div>
+                            </form>
+                        )}
                     </div>
-                    {
-                        (realm.password && social.providers !== undefined) &&
+                    {realm.password && social.providers !== undefined && (
                         <div id="kc-social-providers" className={cx(props.kcFormSocialAccountContentClass, props.kcFormSocialAccountClass)}>
-                            <ul className={cx(props.kcFormSocialAccountListClass, social.providers.length > 4 && props.kcFormSocialAccountDoubleListClass)}>
-                                {
-                                    social.providers.map(p =>
-                                        <li key={p.providerId} className={cx(props.kcFormSocialAccountListLinkClass)}>
-                                            <a href={p.loginUrl} id={`zocial-${p.alias}`} className={cx("zocial", p.providerId)}>
-                                                <span>{p.displayName}</span>
-                                            </a>
-                                        </li>
-                                    )
-                                }
+                            <ul
+                                className={cx(
+                                    props.kcFormSocialAccountListClass,
+                                    social.providers.length > 4 && props.kcFormSocialAccountDoubleListClass,
+                                )}
+                            >
+                                {social.providers.map(p => (
+                                    <li key={p.providerId} className={cx(props.kcFormSocialAccountListLinkClass)}>
+                                        <a href={p.loginUrl} id={`zocial-${p.alias}`} className={cx("zocial", p.providerId)}>
+                                            <span>{p.displayName}</span>
+                                        </a>
+                                    </li>
+                                ))}
                             </ul>
                         </div>
-                    }
+                    )}
                 </div>
             }
             infoNode={
-                (
-                    realm.password &&
-                    realm.registrationAllowed &&
-                    !registrationDisabled
-                ) &&
-                <div id="kc-registration">
-                    <span>
-                        {msg("noAccount")}
-                        <a tabIndex={6} href={url.registrationUrl}>
-                            {msg("doRegister")}
-                        </a>
-                    </span>
-                </div>
+                realm.password &&
+                realm.registrationAllowed &&
+                !registrationDisabled && (
+                    <div id="kc-registration">
+                        <span>
+                            {msg("noAccount")}
+                            <a tabIndex={6} href={url.registrationUrl}>
+                                {msg("doRegister")}
+                            </a>
+                        </span>
+                    </div>
+                )
             }
         />
     );
 });
-
-

package/src/lib/components/LoginIdpLinkConfirm.tsx

@@ -1,4 +1,3 @@
-
 import { memo } from "react";
 import { Template } from "./Template";
 import type { KcProps } from "./KcProps";
@@ -6,56 +5,42 @@ import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { useKcMessage } from "../i18n/useKcMessage";
 import { useCssAndCx } from "tss-react";
 
-export const LoginIdpLinkConfirm = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginIdpLinkConfirm; } & KcProps) => {
-
-	const { url, idpAlias } = kcContext;
-
-	const { msg } = useKcMessage();
-
-	const { cx } = useCssAndCx();
-
-	return (
-		<Template
-			{...{ kcContext, ...props }}
-			doFetchDefaultThemeResources={true}
-			headerNode={msg("confirmLinkIdpTitle")}
-			formNode={
-				<form id="kc-register-form" action={url.loginAction} method="post">
-					<div className={cx(props.kcFormGroupClass)}>
-						<button
-							type="submit"
-							className={cx(
-								props.kcButtonClass,
-								props.kcButtonDefaultClass,
-								props.kcButtonBlockClass,
-								props.kcButtonLargeClass
-							)}
-							name="submitAction"
-							id="updateProfile"
-							value="updateProfile"
-						>
-							{msg("confirmLinkIdpReviewProfile")}
-						</button>
-						<button
-							type="submit"
-							className={cx(
-								props.kcButtonClass,
-								props.kcButtonDefaultClass,
-								props.kcButtonBlockClass,
-								props.kcButtonLargeClass
-							)}
-							name="submitAction"
-							id="linkAccount"
-							value="linkAccount"
-						>
-							{msg("confirmLinkIdpContinue", idpAlias)}
-						</button>
-					</div>
-				</form>
-			}
-		/>
-	);
-
+export const LoginIdpLinkConfirm = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginIdpLinkConfirm } & KcProps) => {
+    const { url, idpAlias } = kcContext;
+
+    const { msg } = useKcMessage();
+
+    const { cx } = useCssAndCx();
+
+    return (
+        <Template
+            {...{ kcContext, ...props }}
+            doFetchDefaultThemeResources={true}
+            headerNode={msg("confirmLinkIdpTitle")}
+            formNode={
+                <form id="kc-register-form" action={url.loginAction} method="post">
+                    <div className={cx(props.kcFormGroupClass)}>
+                        <button
+                            type="submit"
+                            className={cx(props.kcButtonClass, props.kcButtonDefaultClass, props.kcButtonBlockClass, props.kcButtonLargeClass)}
+                            name="submitAction"
+                            id="updateProfile"
+                            value="updateProfile"
+                        >
+                            {msg("confirmLinkIdpReviewProfile")}
+                        </button>
+                        <button
+                            type="submit"
+                            className={cx(props.kcButtonClass, props.kcButtonDefaultClass, props.kcButtonBlockClass, props.kcButtonLargeClass)}
+                            name="submitAction"
+                            id="linkAccount"
+                            value="linkAccount"
+                        >
+                            {msg("confirmLinkIdpContinue", idpAlias)}
+                        </button>
+                    </div>
+                </form>
+            }
+        />
+    );
 });
-
-

package/src/lib/components/LoginOtp.tsx

@@ -1,5 +1,3 @@
-
-
 import { useEffect, memo } from "react";
 import { Template } from "./Template";
 import type { KcProps } from "./KcProps";
@@ -9,38 +7,29 @@ import { appendHead } from "../tools/appendHead";
 import { join as pathJoin } from "path";
 import { useCssAndCx } from "tss-react";
 
-export const LoginOtp = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginOtp; } & KcProps) => {
-
+export const LoginOtp = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginOtp } & KcProps) => {
     const { otpLogin, url } = kcContext;
 
     const { cx } = useCssAndCx();
 
     const { msg, msgStr } = useKcMessage();
 
-    useEffect(
-        () => {
-
-            let isCleanedUp = false;
-
-            appendHead({
-                "type": "javascript",
-                "src": pathJoin(
-                    kcContext.url.resourcesCommonPath,
-                    "node_modules/jquery/dist/jquery.min.js"
-                )
-            }).then(() => {
+    useEffect(() => {
+        let isCleanedUp = false;
 
-                if (isCleanedUp) return;
+        appendHead({
+            "type": "javascript",
+            "src": pathJoin(kcContext.url.resourcesCommonPath, "node_modules/jquery/dist/jquery.min.js"),
+        }).then(() => {
+            if (isCleanedUp) return;
 
-                evaluateInlineScript();
-
-            });
-
-            return () => { isCleanedUp = true };
+            evaluateInlineScript();
+        });
 
-        },
-        []
-    );
+        return () => {
+            isCleanedUp = true;
+        };
+    }, []);
 
     return (
         <Template
@@ -48,33 +37,22 @@ export const LoginOtp = memo(({ kcContext, ...props }: { kcContext: KcContextBas
             doFetchDefaultThemeResources={true}
             headerNode={msg("doLogIn")}
             formNode={
-
-                <form
-                    id="kc-otp-login-form"
-                    className={cx(props.kcFormClass)}
-                    action={url.loginAction}
-                    method="post"
-                >
-                    {
-                        otpLogin.userOtpCredentials.length > 1 &&
+                <form id="kc-otp-login-form" className={cx(props.kcFormClass)} action={url.loginAction} method="post">
+                    {otpLogin.userOtpCredentials.length > 1 && (
                         <div className={cx(props.kcFormGroupClass)}>
                             <div className={cx(props.kcInputWrapperClass)}>
-                                {
-                                    otpLogin.userOtpCredentials.map(otpCredential =>
-                                        <div key={otpCredential.id} className={cx(props.kcSelectOTPListClass)}>
-                                            <input type="hidden" value="${otpCredential.id}" />
-                                            <div className={cx(props.kcSelectOTPListItemClass)}>
-                                                <span className={cx(props.kcAuthenticatorOtpCircleClass)} />
-                                                <h2 className={cx(props.kcSelectOTPItemHeadingClass)}>
-                                                    {otpCredential.userLabel}
-                                                </h2>
-                                            </div>
+                                {otpLogin.userOtpCredentials.map(otpCredential => (
+                                    <div key={otpCredential.id} className={cx(props.kcSelectOTPListClass)}>
+                                        <input type="hidden" value="${otpCredential.id}" />
+                                        <div className={cx(props.kcSelectOTPListItemClass)}>
+                                            <span className={cx(props.kcAuthenticatorOtpCircleClass)} />
+                                            <h2 className={cx(props.kcSelectOTPItemHeadingClass)}>{otpCredential.userLabel}</h2>
                                         </div>
-                                    )
-                                }
+                                    </div>
+                                ))}
                             </div>
                         </div>
-                    }
+                    )}
                     <div className={cx(props.kcFormGroupClass)}>
                         <div className={cx(props.kcLabelWrapperClass)}>
                             <label htmlFor="otp" className={cx(props.kcLabelClass)}>
@@ -83,14 +61,7 @@ export const LoginOtp = memo(({ kcContext, ...props }: { kcContext: KcContextBas
                         </div>
 
                         <div className={cx(props.kcInputWrapperClass)}>
-                            <input
-                                id="otp"
-                                name="otp"
-                                autoComplete="off"
-                                type="text"
-                                className={cx(props.kcInputClass)}
-                                autoFocus
-                            />
+                            <input id="otp" name="otp" autoComplete="off" type="text" className={cx(props.kcInputClass)} autoFocus />
                         </div>
                     </div>
 
@@ -101,12 +72,7 @@ export const LoginOtp = memo(({ kcContext, ...props }: { kcContext: KcContextBas
 
                         <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
                             <input
-                                className={cx(
-                                    props.kcButtonClass,
-                                    props.kcButtonPrimaryClass,
-                                    props.kcButtonBlockClass,
-                                    props.kcButtonLargeClass
-                                )}
+                                className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonBlockClass, props.kcButtonLargeClass)}
                                 name="login"
                                 id="kc-login"
                                 type="submit"
@@ -114,35 +80,32 @@ export const LoginOtp = memo(({ kcContext, ...props }: { kcContext: KcContextBas
                             />
                         </div>
                     </div>
-                </form >
-
+                </form>
             }
         />
     );
 });
 
-
-
-
 declare const $: any;
 
 function evaluateInlineScript() {
-
     $(document).ready(function () {
         // Card Single Select
-        $('.card-pf-view-single-select').click(function (this: any) {
-            if ($(this).hasClass('active')) { $(this).removeClass('active'); $(this).children().removeAttr('name'); }
-            else {
-                $('.card-pf-view-single-select').removeClass('active');
-                $('.card-pf-view-single-select').children().removeAttr('name');
-                $(this).addClass('active'); $(this).children().attr('name', 'selectedCredentialId');
+        $(".card-pf-view-single-select").click(function (this: any) {
+            if ($(this).hasClass("active")) {
+                $(this).removeClass("active");
+                $(this).children().removeAttr("name");
+            } else {
+                $(".card-pf-view-single-select").removeClass("active");
+                $(".card-pf-view-single-select").children().removeAttr("name");
+                $(this).addClass("active");
+                $(this).children().attr("name", "selectedCredentialId");
             }
         });
 
-        var defaultCred = $('.card-pf-view-single-select')[0];
+        var defaultCred = $(".card-pf-view-single-select")[0];
         if (defaultCred) {
             defaultCred.click();
         }
     });
-
-}
+}

package/src/lib/components/LoginResetPassword.tsx

@@ -1,4 +1,3 @@
-
 import { memo } from "react";
 import { Template } from "./Template";
 import type { KcProps } from "./KcProps";
@@ -6,13 +5,8 @@ import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { useKcMessage } from "../i18n/useKcMessage";
 import { useCssAndCx } from "tss-react";
 
-export const LoginResetPassword = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginResetPassword; } & KcProps) => {
-
-    const {
-        url,
-        realm,
-        auth
-    } = kcContext;
+export const LoginResetPassword = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginResetPassword } & KcProps) => {
+    const { url, realm, auth } = kcContext;
 
     const { msg, msgStr } = useKcMessage();
 
@@ -29,14 +23,11 @@ export const LoginResetPassword = memo(({ kcContext, ...props }: { kcContext: Kc
                     <div className={cx(props.kcFormGroupClass)}>
                         <div className={cx(props.kcLabelWrapperClass)}>
                             <label htmlFor="username" className={cx(props.kcLabelClass)}>
-                                {
-                                    !realm.loginWithEmailAllowed ?
-                                        msg("username")
-                                        :
-                                        !realm.registrationEmailAsUsername ?
-                                            msg("usernameOrEmail") :
-                                            msg("email")
-                                }
+                                {!realm.loginWithEmailAllowed
+                                    ? msg("username")
+                                    : !realm.registrationEmailAsUsername
+                                    ? msg("usernameOrEmail")
+                                    : msg("email")}
                             </label>
                         </div>
                         <div className={cx(props.kcInputWrapperClass)}>
@@ -46,10 +37,7 @@ export const LoginResetPassword = memo(({ kcContext, ...props }: { kcContext: Kc
                                 name="username"
                                 className={cx(props.kcInputClass)}
                                 autoFocus
-                                defaultValue={
-                                    auth !== undefined && auth.showUsername ?
-                                        auth.attemptedUsername : undefined
-                                }
+                                defaultValue={auth !== undefined && auth.showUsername ? auth.attemptedUsername : undefined}
                             />
                         </div>
                     </div>
@@ -64,10 +52,7 @@ export const LoginResetPassword = memo(({ kcContext, ...props }: { kcContext: Kc
 
                         <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
                             <input
-                                className={cx(
-                                    props.kcButtonClass, props.kcButtonPrimaryClass,
-                                    props.kcButtonBlockClass, props.kcButtonLargeClass
-                                )}
+                                className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonBlockClass, props.kcButtonLargeClass)}
                                 type="submit"
                                 value={msgStr("doSubmit")}
                             />
@@ -79,5 +64,3 @@ export const LoginResetPassword = memo(({ kcContext, ...props }: { kcContext: Kc
         />
     );
 });
-
-