keycloakify 6.4.3 → 6.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "6.4.3",
+    "version": "6.5.0",
     "description": "Keycloak theme generator for Reacts app",
     "repository": {
         "type": "git",
@@ -73,6 +73,7 @@
         "src/lib/components/LoginResetPassword.tsx",
         "src/lib/components/LoginUpdatePassword.tsx",
         "src/lib/components/LoginUpdateProfile.tsx",
+        "src/lib/components/LoginUsername.tsx",
         "src/lib/components/LoginVerifyEmail.tsx",
         "src/lib/components/LogoutConfirm.tsx",
         "src/lib/components/Register.tsx",
@@ -476,6 +477,9 @@
         "lib/components/LoginUpdateProfile.d.ts",
         "lib/components/LoginUpdateProfile.js",
         "lib/components/LoginUpdateProfile.js.map",
+        "lib/components/LoginUsername.d.ts",
+        "lib/components/LoginUsername.js",
+        "lib/components/LoginUsername.js.map",
         "lib/components/LoginVerifyEmail.d.ts",
         "lib/components/LoginVerifyEmail.js",
         "lib/components/LoginVerifyEmail.js.map",
@@ -1259,6 +1263,7 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
     },
     "devDependencies": {
+        "@babel/core": "^7.0.0",
         "@emotion/react": "^11.4.1",
         "@types/memoizee": "^0.4.7",
         "@types/minimist": "^1.2.2",

package/src/bin/keycloakify/generateFtl/generateFtl.ts

@@ -13,6 +13,7 @@ import { Reflect } from "tsafe/Reflect";
 // https://github.com/keycloak/keycloak/blob/main/services/src/main/java/org/keycloak/forms/login/freemarker/Templates.java
 export const pageIds = [
     "login.ftl",
+    "login-username.ftl",
     "register.ftl",
     "register-user-profile.ftl",
     "info.ftl",

package/src/lib/components/KcApp.tsx

@@ -13,6 +13,7 @@ const LoginResetPassword = lazy(() => import("./LoginResetPassword"));
 const LoginVerifyEmail = lazy(() => import("./LoginVerifyEmail"));
 const Terms = lazy(() => import("./Terms"));
 const LoginOtp = lazy(() => import("./LoginOtp"));
+const LoginUsername = lazy(() => import("./LoginUsername"));
 const LoginUpdatePassword = lazy(() => import("./LoginUpdatePassword"));
 const LoginUpdateProfile = lazy(() => import("./LoginUpdateProfile"));
 const LoginIdpLinkConfirm = lazy(() => import("./LoginIdpLinkConfirm"));
@@ -67,6 +68,8 @@ const KcApp = memo(
                             return <Terms {...{ kcContext, ...props }} />;
                         case "login-otp.ftl":
                             return <LoginOtp {...{ kcContext, ...props }} />;
+                        case "login-username.ftl":
+                            return <LoginUsername {...{ kcContext, ...props }} />;
                         case "login-update-password.ftl":
                             return <LoginUpdatePassword {...{ kcContext, ...props }} />;
                         case "login-update-profile.ftl":

package/src/lib/components/LoginUsername.tsx

@@ -0,0 +1,168 @@
+import React, { useState, memo } from "react";
+import Template from "./Template";
+import type { KcProps } from "./KcProps";
+import type { KcContextBase } from "../getKcContext/KcContextBase";
+import { useCssAndCx } from "../tools/useCssAndCx";
+import { useConstCallback } from "powerhooks/useConstCallback";
+import type { FormEventHandler } from "react";
+import type { I18n } from "../i18n";
+
+const LoginUsername = memo(
+    ({
+        kcContext,
+        i18n,
+        doFetchDefaultThemeResources = true,
+        ...props
+    }: { kcContext: KcContextBase.LoginUsername; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
+        const { social, realm, url, usernameHidden, login, registrationDisabled } = kcContext;
+
+        const { msg, msgStr } = i18n;
+
+        const { cx } = useCssAndCx();
+
+        const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
+
+        const onSubmit = useConstCallback<FormEventHandler<HTMLFormElement>>(e => {
+            e.preventDefault();
+
+            setIsLoginButtonDisabled(true);
+
+            const formElement = e.target as HTMLFormElement;
+
+            //NOTE: Even if we login with email Keycloak expect username and password in
+            //the POST request.
+            formElement.querySelector("input[name='email']")?.setAttribute("name", "username");
+
+            formElement.submit();
+        });
+
+        return (
+            <Template
+                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
+                displayInfo={social.displayInfo}
+                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-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)}>
+                                        {!usernameHidden &&
+                                            (() => {
+                                                const label = !realm.loginWithEmailAllowed
+                                                    ? "username"
+                                                    : realm.registrationEmailAsUsername
+                                                    ? "email"
+                                                    : "usernameOrEmail";
+
+                                                const autoCompleteHelper: typeof label = label === "usernameOrEmail" ? "username" : label;
+
+                                                return (
+                                                    <>
+                                                        <label htmlFor={autoCompleteHelper} className={cx(props.kcLabelClass)}>
+                                                            {msg(label)}
+                                                        </label>
+                                                        <input
+                                                            tabIndex={1}
+                                                            id={autoCompleteHelper}
+                                                            className={cx(props.kcInputClass)}
+                                                            //NOTE: This is used by Google Chrome auto fill so we use it to tell
+                                                            //the browser how to pre fill the form but before submit we put it back
+                                                            //to username because it is what keycloak expects.
+                                                            name={autoCompleteHelper}
+                                                            defaultValue={login.username ?? ""}
+                                                            type="text"
+                                                            autoFocus={true}
+                                                            autoComplete="off"
+                                                        />
+                                                    </>
+                                                );
+                                            })()}
+                                    </div>
+                                    <div className={cx(props.kcFormGroupClass, props.kcFormSettingClass)}>
+                                        <div id="kc-form-options">
+                                            {realm.rememberMe && !usernameHidden && (
+                                                <div className="checkbox">
+                                                    <label>
+                                                        <input
+                                                            tabIndex={3}
+                                                            id="rememberMe"
+                                                            name="rememberMe"
+                                                            type="checkbox"
+                                                            {...(login.rememberMe
+                                                                ? {
+                                                                      "checked": true
+                                                                  }
+                                                                : {})}
+                                                        />
+                                                        {msg("rememberMe")}
+                                                    </label>
+                                                </div>
+                                            )}
+                                        </div>
+                                    </div>
+                                    <div id="kc-form-buttons" className={cx(props.kcFormGroupClass)}>
+                                        <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 && (
+                            <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>
+                            </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>
+                    )
+                }
+            />
+        );
+    }
+);
+
+export default LoginUsername;

package/src/lib/getKcContext/KcContextBase.ts

@@ -19,6 +19,7 @@ export type KcContextBase =
     | KcContextBase.LoginVerifyEmail
     | KcContextBase.Terms
     | KcContextBase.LoginOtp
+    | KcContextBase.LoginUsername
     | KcContextBase.LoginUpdatePassword
     | KcContextBase.LoginUpdateProfile
     | KcContextBase.LoginIdpLinkConfirm
@@ -198,6 +199,36 @@ export declare namespace KcContextBase {
         };
     };
 
+    export type LoginUsername = Common & {
+        pageId: "login-username.ftl";
+        url: {
+            loginResetCredentialsUrl: string;
+            registrationUrl: string;
+        };
+        realm: {
+            loginWithEmailAllowed: boolean;
+            rememberMe: boolean;
+            password: boolean;
+            resetPasswordAllowed: boolean;
+            registrationAllowed: boolean;
+        };
+        registrationDisabled: boolean;
+        login: {
+            username?: string;
+            rememberMe?: boolean;
+        };
+        usernameHidden?: boolean;
+        social: {
+            displayInfo: boolean;
+            providers?: {
+                loginUrl: string;
+                alias: string;
+                providerId: string;
+                displayName: string;
+            }[];
+        };
+    };
+
     export type LoginUpdatePassword = Common & {
         pageId: "login-update-password.ftl";
         username: string;

package/src/lib/getKcContext/kcContextMocks/kcContextMocks.ts

@@ -359,6 +359,27 @@ export const kcContextMocks: KcContextBase[] = [
             ]
         }
     }),
+    id<KcContextBase.LoginUsername>({
+        ...kcContextCommonMock,
+        "pageId": "login-username.ftl",
+        "url": loginUrl,
+        "realm": {
+            ...kcContextCommonMock.realm,
+            "loginWithEmailAllowed": true,
+            "rememberMe": true,
+            "password": true,
+            "resetPasswordAllowed": true,
+            "registrationAllowed": true
+        },
+        "social": {
+            "displayInfo": true
+        },
+        "usernameHidden": false,
+        "login": {
+            "rememberMe": false
+        },
+        "registrationDisabled": false
+    }),
     id<KcContextBase.LoginUpdatePassword>({
         ...kcContextCommonMock,
         "pageId": "login-update-password.ftl",