diff --git a/src/bin/keycloakify/generateFtl/generateFtl.ts b/src/bin/keycloakify/generateFtl/generateFtl.ts index e1bfb3b9..5f7b3263 100644 --- a/src/bin/keycloakify/generateFtl/generateFtl.ts +++ b/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", diff --git a/src/lib/components/KcApp.tsx b/src/lib/components/KcApp.tsx index f18f64cb..f8be458d 100644 --- a/src/lib/components/KcApp.tsx +++ b/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 ; case "login-username.ftl": return ; + case "login-password.ftl": + return ; case "login-update-password.ftl": return ; case "login-update-profile.ftl": diff --git a/src/lib/components/LoginPassword.tsx b/src/lib/components/LoginPassword.tsx new file mode 100644 index 00000000..2b74cdf0 --- /dev/null +++ b/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>(e => { + e.preventDefault(); + + setIsLoginButtonDisabled(true); + + const formElement = e.target as HTMLFormElement; + + formElement.submit(); + }); + + return ( +