Add support for login-password.ftl

src/bin/keycloakify/generateFtl/generateFtl.ts

@@ -14,6 +14,7 @@ import { Reflect } from "tsafe/Reflect";
 export const pageIds = [
     "login.ftl",
     "login-username.ftl",
+    "login-password.ftl",
     "register.ftl",
     "register-user-profile.ftl",
     "info.ftl",

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 LoginPassword = lazy(() => import("./LoginPassword"));
 const LoginUsername = lazy(() => import("./LoginUsername"));
 const LoginUpdatePassword = lazy(() => import("./LoginUpdatePassword"));
 const LoginUpdateProfile = lazy(() => import("./LoginUpdateProfile"));
@@ -70,6 +71,8 @@ const KcApp = memo(
                             return <LoginOtp {...{ kcContext, ...props }} />;
                         case "login-username.ftl":
                             return <LoginUsername {...{ kcContext, ...props }} />;
+                        case "login-password.ftl":
+                            return <LoginPassword {...{ kcContext, ...props }} />;
                         case "login-update-password.ftl":
                             return <LoginUpdatePassword {...{ kcContext, ...props }} />;
                         case "login-update-profile.ftl":

src/lib/components/LoginPassword.tsx

@@ -0,0 +1,96 @@
+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 LoginPassword = memo(
+    ({
+        kcContext,
+        i18n,
+        doFetchDefaultThemeResources = true,
+        ...props
+    }: { kcContext: KcContextBase.LoginPassword; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
+        const { realm, url, login } = 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;
+
+            formElement.submit();
+        });
+
+        return (
+            <Template
+                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
+                headerNode={msg("doLogIn")}
+                formNode={
+                    <div id="kc-form">
+                        <div id="kc-form-wrapper">
+                            <form id="kc-form-login" onSubmit={onSubmit} action={url.loginAction} method="post">
+                                <div className={cx(props.kcFormGroupClass)}>
+                                    <hr />
+                                    <label htmlFor="password" className={cx(props.kcLabelClass)}>
+                                        {msg("password")}
+                                    </label>
+                                    <input
+                                        tabIndex={2}
+                                        id="password"
+                                        className={cx(props.kcInputClass)}
+                                        name="password"
+                                        type="password"
+                                        autoFocus={true}
+                                        autoComplete="on"
+                                        defaultValue={login.password ?? ""}
+                                    />
+                                </div>
+                                <div className={cx(props.kcFormGroupClass, props.kcFormSettingClass)}>
+                                    <div id="kc-form-options" />
+                                    <div className={cx(props.kcFormOptionsWrapperClass)}>
+                                        {realm.resetPasswordAllowed && (
+                                            <span>
+                                                <a tabIndex={5} href={url.loginResetCredentialsUrl}>
+                                                    {msg("doForgotPassword")}
+                                                </a>
+                                            </span>
+                                        )}
+                                    </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>
+                    </div>
+                }
+            />
+        );
+    }
+);
+
+export default LoginPassword;

src/lib/getKcContext/KcContextBase.ts

@@ -20,6 +20,7 @@ export type KcContextBase =
     | KcContextBase.Terms
     | KcContextBase.LoginOtp
     | KcContextBase.LoginUsername
+    | KcContextBase.LoginPassword
     | KcContextBase.LoginUpdatePassword
     | KcContextBase.LoginUpdateProfile
     | KcContextBase.LoginIdpLinkConfirm
@@ -229,6 +230,29 @@ export declare namespace KcContextBase {
         };
     };
 
+    export type LoginPassword = Common & {
+        pageId: "login-password.ftl";
+        url: {
+            loginResetCredentialsUrl: string;
+            registrationUrl: string;
+        };
+        realm: {
+            resetPasswordAllowed: boolean;
+        };
+        auth?: {
+            showUsername?: boolean;
+            showResetCredentials?: boolean;
+            showTryAnotherWayLink?: boolean;
+            attemptedUsername?: string;
+        };
+        social: {
+            displayInfo: boolean;
+        };
+        login: {
+            password?: string;
+        };
+    };
+
     export type LoginUpdatePassword = Common & {
         pageId: "login-update-password.ftl";
         username: string;

src/lib/getKcContext/kcContextMocks/kcContextMocks.ts

@@ -380,6 +380,19 @@ export const kcContextMocks: KcContextBase[] = [
         },
         "registrationDisabled": false
     }),
+    id<KcContextBase.LoginPassword>({
+        ...kcContextCommonMock,
+        "pageId": "login-password.ftl",
+        "url": loginUrl,
+        "realm": {
+            ...kcContextCommonMock.realm,
+            "resetPasswordAllowed": true
+        },
+        "social": {
+            "displayInfo": false
+        },
+        "login": {}
+    }),
     id<KcContextBase.LoginUpdatePassword>({
         ...kcContextCommonMock,
         "pageId": "login-update-password.ftl",