diff --git a/src/bin/build-keycloak-theme/generateFtl/generateFtl.ts b/src/bin/build-keycloak-theme/generateFtl/generateFtl.ts index a2e17203b..233bfd6ac 100644 --- a/src/bin/build-keycloak-theme/generateFtl/generateFtl.ts +++ b/src/bin/build-keycloak-theme/generateFtl/generateFtl.ts @@ -16,6 +16,7 @@ export const pageIds = [ "terms.ftl", "login-otp.ftl", "login-update-profile.ftl", + "login-update-password.ftl", "login-idp-link-confirm.ftl", ] as const; diff --git a/src/lib/components/KcApp.tsx b/src/lib/components/KcApp.tsx index 91190ebac..998b852d7 100644 --- a/src/lib/components/KcApp.tsx +++ b/src/lib/components/KcApp.tsx @@ -10,6 +10,7 @@ import { LoginResetPassword } from "./LoginResetPassword"; import { LoginVerifyEmail } from "./LoginVerifyEmail"; import { Terms } from "./Terms"; import { LoginOtp } from "./LoginOtp"; +import { LoginUpdatePassword } from "./LoginUpdatePassword"; import { LoginUpdateProfile } from "./LoginUpdateProfile"; import { LoginIdpLinkConfirm } from "./LoginIdpLinkConfirm"; @@ -33,6 +34,8 @@ export const KcApp = memo(({ kcContext, ...props }: { kcContext: KcContextBase } return ; case "login-otp.ftl": return ; + case "login-update-password.ftl": + return ; case "login-update-profile.ftl": return ; case "login-idp-link-confirm.ftl": diff --git a/src/lib/components/LoginUpdatePassword.tsx b/src/lib/components/LoginUpdatePassword.tsx new file mode 100644 index 000000000..379e2e6d3 --- /dev/null +++ b/src/lib/components/LoginUpdatePassword.tsx @@ -0,0 +1,117 @@ +import { memo } from "react"; +import { Template } from "./Template"; +import type { KcProps } from "./KcProps"; +import type { KcContextBase } from "../getKcContext/KcContextBase"; +import { useKcMessage } from "../i18n/useKcMessage"; +import { useCssAndCx } from "tss-react"; + +export const LoginUpdatePassword = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginUpdatePassword } & KcProps) => { + const { cx } = useCssAndCx(); + + const { msg, msgStr } = useKcMessage(); + + const { url, messagesPerField, isAppInitiatedAction, username } = kcContext; + + return ( + + + + + + + + {msg("passwordNew")} + + + + + + + + + + + {msg("passwordConfirm")} + + + + + + + + + + + {isAppInitiatedAction && ( + + + + {msgStr("logoutOtherSessions")} + + + )} + + + + + {isAppInitiatedAction ? ( + <> + + + {msg("doCancel")} + + > + ) : ( + + )} + + + + } + /> + ); +}); diff --git a/src/lib/getKcContext/KcContextBase.ts b/src/lib/getKcContext/KcContextBase.ts index 5c116154e..96eca1b1f 100644 --- a/src/lib/getKcContext/KcContextBase.ts +++ b/src/lib/getKcContext/KcContextBase.ts @@ -21,6 +21,7 @@ export type KcContextBase = | KcContextBase.LoginVerifyEmail | KcContextBase.Terms | KcContextBase.LoginOtp + | KcContextBase.LoginUpdatePassword | KcContextBase.LoginUpdateProfile | KcContextBase.LoginIdpLinkConfirm; @@ -192,6 +193,11 @@ export declare namespace KcContextBase { }; }; + export type LoginUpdatePassword = Common & { + pageId: "login-update-password.ftl"; + username: string; + }; + export type LoginUpdateProfile = Common & { pageId: "login-update-profile.ftl"; user: { diff --git a/src/lib/getKcContext/kcContextMocks/kcContextMocks.ts b/src/lib/getKcContext/kcContextMocks/kcContextMocks.ts index bd0d557cf..3218d6301 100644 --- a/src/lib/getKcContext/kcContextMocks/kcContextMocks.ts +++ b/src/lib/getKcContext/kcContextMocks/kcContextMocks.ts @@ -346,6 +346,11 @@ export const kcContextMocks: KcContextBase[] = [ ], }, }), + id({ + ...kcContextCommonMock, + "pageId": "login-update-password.ftl", + "username": "anUsername", + }), id({ ...kcContextCommonMock, "pageId": "login-update-profile.ftl",