From 9c123f37c85438d7dfc37f6ad9c4361f995ac457 Mon Sep 17 00:00:00 2001
From: Joseph Garrone <joseph.garrone.gj@gmail.com>
Date: Sun, 9 Jun 2024 09:34:39 +0200
Subject: [PATCH] Make of doMakeUserConfirmPassword a prop of
 UserProfileFormFields

---
 src/login/Fallback.tsx                   |  1 +
 src/login/UserProfileFormFields.tsx      |  6 ++----
 src/login/pages/IdpReviewUserProfile.tsx | 10 ++++++++--
 src/login/pages/LoginUpdateProfile.tsx   | 10 ++++++++--
 src/login/pages/Register.tsx             | 10 ++++++++--
 src/login/pages/UpdateEmail.tsx          | 10 ++++++++--
 stories/login/KcApp.tsx                  | 10 +++++++++-
 7 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/src/login/Fallback.tsx b/src/login/Fallback.tsx
index 8b395502..23df761d 100644
--- a/src/login/Fallback.tsx
+++ b/src/login/Fallback.tsx
@@ -42,6 +42,7 @@ const WebauthnError = lazy(() => import("keycloakify/login/pages/WebauthnError")
 
 type FallbackProps = PageProps<KcContext> & {
     UserProfileFormFields: LazyOrNot<(props: UserProfileFormFieldsProps) => JSX.Element>;
+    doMakeUserConfirmPassword: boolean;
 };
 
 export default function Fallback(props: FallbackProps) {
diff --git a/src/login/UserProfileFormFields.tsx b/src/login/UserProfileFormFields.tsx
index 4216cf05..4feff26b 100644
--- a/src/login/UserProfileFormFields.tsx
+++ b/src/login/UserProfileFormFields.tsx
@@ -15,6 +15,7 @@ export type UserProfileFormFieldsProps = {
     kcContext: KcContextLike;
     kcClsx: KcClsx;
     onIsFormSubmittableValueChange: (isFormSubmittable: boolean) => void;
+    doMakeUserConfirmPassword: boolean;
     BeforeField?: (props: BeforeAfterFieldProps) => JSX.Element | null;
     AfterField?: (props: BeforeAfterFieldProps) => JSX.Element | null;
 };
@@ -28,11 +29,8 @@ type BeforeAfterFieldProps = {
     i18n: I18n;
 };
 
-// NOTE: Enabled by default but it's a UX best practice to set it to false.
-const doMakeUserConfirmPassword = true;
-
 export default function UserProfileFormFields(props: UserProfileFormFieldsProps) {
-    const { kcContext, kcClsx, onIsFormSubmittableValueChange, BeforeField, AfterField } = props;
+    const { kcContext, kcClsx, onIsFormSubmittableValueChange, doMakeUserConfirmPassword, BeforeField, AfterField } = props;
 
     const { advancedMsg } = useI18n({ kcContext });
 
diff --git a/src/login/pages/IdpReviewUserProfile.tsx b/src/login/pages/IdpReviewUserProfile.tsx
index f0922baf..cbeea618 100644
--- a/src/login/pages/IdpReviewUserProfile.tsx
+++ b/src/login/pages/IdpReviewUserProfile.tsx
@@ -8,10 +8,11 @@ import { useI18n } from "../i18n";
 
 type IdpReviewUserProfileProps = PageProps<Extract<KcContext, { pageId: "idp-review-user-profile.ftl" }>> & {
     UserProfileFormFields: LazyOrNot<(props: UserProfileFormFieldsProps) => JSX.Element>;
+    doMakeUserConfirmPassword: boolean;
 };
 
 export default function IdpReviewUserProfile(props: IdpReviewUserProfileProps) {
-    const { kcContext, doUseDefaultCss, Template, classes, UserProfileFormFields } = props;
+    const { kcContext, doUseDefaultCss, Template, classes, UserProfileFormFields, doMakeUserConfirmPassword } = props;
 
     const { kcClsx } = getKcClsx({
         doUseDefaultCss,
@@ -34,7 +35,12 @@ export default function IdpReviewUserProfile(props: IdpReviewUserProfileProps) {
             headerNode={msg("loginIdpReviewProfileTitle")}
         >
             <form id="kc-idp-review-profile-form" className={kcClsx("kcFormClass")} action={url.loginAction} method="post">
-                <UserProfileFormFields kcContext={kcContext} onIsFormSubmittableValueChange={setIsFomSubmittable} kcClsx={kcClsx} />
+                <UserProfileFormFields
+                    kcContext={kcContext}
+                    onIsFormSubmittableValueChange={setIsFomSubmittable}
+                    kcClsx={kcClsx}
+                    doMakeUserConfirmPassword={doMakeUserConfirmPassword}
+                />
                 <div className={kcClsx("kcFormGroupClass")}>
                     <div id="kc-form-options" className={kcClsx("kcFormOptionsClass")}>
                         <div className={kcClsx("kcFormOptionsWrapperClass")} />
diff --git a/src/login/pages/LoginUpdateProfile.tsx b/src/login/pages/LoginUpdateProfile.tsx
index c88fa2c9..b98e9fc1 100644
--- a/src/login/pages/LoginUpdateProfile.tsx
+++ b/src/login/pages/LoginUpdateProfile.tsx
@@ -8,10 +8,11 @@ import { useI18n } from "../i18n";
 
 type LoginUpdateProfileProps = PageProps<Extract<KcContext, { pageId: "login-update-profile.ftl" }>> & {
     UserProfileFormFields: LazyOrNot<(props: UserProfileFormFieldsProps) => JSX.Element>;
+    doMakeUserConfirmPassword: boolean;
 };
 
 export default function LoginUpdateProfile(props: LoginUpdateProfileProps) {
-    const { kcContext, doUseDefaultCss, Template, classes, UserProfileFormFields } = props;
+    const { kcContext, doUseDefaultCss, Template, classes, UserProfileFormFields, doMakeUserConfirmPassword } = props;
 
     const { kcClsx } = getKcClsx({
         doUseDefaultCss,
@@ -33,7 +34,12 @@ export default function LoginUpdateProfile(props: LoginUpdateProfileProps) {
             headerNode={msg("loginProfileTitle")}
         >
             <form id="kc-update-profile-form" className={kcClsx("kcFormClass")} action={url.loginAction} method="post">
-                <UserProfileFormFields kcContext={kcContext} kcClsx={kcClsx} onIsFormSubmittableValueChange={setIsFormSubmittable} />
+                <UserProfileFormFields
+                    kcContext={kcContext}
+                    kcClsx={kcClsx}
+                    onIsFormSubmittableValueChange={setIsFormSubmittable}
+                    doMakeUserConfirmPassword={doMakeUserConfirmPassword}
+                />
                 <div className={kcClsx("kcFormGroupClass")}>
                     <div id="kc-form-options" className={kcClsx("kcFormOptionsClass")}>
                         <div className={kcClsx("kcFormOptionsWrapperClass")} />
diff --git a/src/login/pages/Register.tsx b/src/login/pages/Register.tsx
index 7bcaad1a..1144c154 100644
--- a/src/login/pages/Register.tsx
+++ b/src/login/pages/Register.tsx
@@ -10,10 +10,11 @@ import { useI18n, type I18n } from "../i18n";
 
 type RegisterProps = PageProps<Extract<KcContext, { pageId: "register.ftl" }>> & {
     UserProfileFormFields: LazyOrNot<(props: UserProfileFormFieldsProps) => JSX.Element>;
+    doMakeUserConfirmPassword: boolean;
 };
 
 export default function Register(props: RegisterProps) {
-    const { kcContext, doUseDefaultCss, Template, classes, UserProfileFormFields } = props;
+    const { kcContext, doUseDefaultCss, Template, classes, UserProfileFormFields, doMakeUserConfirmPassword } = props;
 
     const { kcClsx } = getKcClsx({
         doUseDefaultCss,
@@ -30,7 +31,12 @@ export default function Register(props: RegisterProps) {
     return (
         <Template kcContext={kcContext} doUseDefaultCss={doUseDefaultCss} classes={classes} headerNode={msg("registerTitle")} displayRequiredFields>
             <form id="kc-register-form" className={kcClsx("kcFormClass")} action={url.registrationAction} method="post">
-                <UserProfileFormFields kcContext={kcContext} kcClsx={kcClsx} onIsFormSubmittableValueChange={setIsFormSubmittable} />
+                <UserProfileFormFields
+                    kcContext={kcContext}
+                    kcClsx={kcClsx}
+                    onIsFormSubmittableValueChange={setIsFormSubmittable}
+                    doMakeUserConfirmPassword={doMakeUserConfirmPassword}
+                />
                 {termsAcceptanceRequired && <TermsAcceptance i18n={i18n} kcClsx={kcClsx} messagesPerField={messagesPerField} />}
                 {recaptchaRequired && (
                     <div className="form-group">
diff --git a/src/login/pages/UpdateEmail.tsx b/src/login/pages/UpdateEmail.tsx
index 7ec681f5..1bc301d0 100644
--- a/src/login/pages/UpdateEmail.tsx
+++ b/src/login/pages/UpdateEmail.tsx
@@ -8,10 +8,11 @@ import { useI18n, type I18n } from "../i18n";
 
 type UpdateEmailProps = PageProps<Extract<KcContext, { pageId: "update-email.ftl" }>> & {
     UserProfileFormFields: LazyOrNot<(props: UserProfileFormFieldsProps) => JSX.Element>;
+    doMakeUserConfirmPassword: boolean;
 };
 
 export default function UpdateEmail(props: UpdateEmailProps) {
-    const { kcContext, doUseDefaultCss, Template, classes, UserProfileFormFields } = props;
+    const { kcContext, doUseDefaultCss, Template, classes, UserProfileFormFields, doMakeUserConfirmPassword } = props;
 
     const { kcClsx } = getKcClsx({
         doUseDefaultCss,
@@ -35,7 +36,12 @@ export default function UpdateEmail(props: UpdateEmailProps) {
             headerNode={msg("updateEmailTitle")}
         >
             <form id="kc-update-email-form" className={kcClsx("kcFormClass")} action={url.loginAction} method="post">
-                <UserProfileFormFields kcContext={kcContext} kcClsx={kcClsx} onIsFormSubmittableValueChange={setIsFormSubmittable} />
+                <UserProfileFormFields
+                    kcContext={kcContext}
+                    kcClsx={kcClsx}
+                    onIsFormSubmittableValueChange={setIsFormSubmittable}
+                    doMakeUserConfirmPassword={doMakeUserConfirmPassword}
+                />
 
                 <div className={kcClsx("kcFormGroupClass")}>
                     <div id="kc-form-options" className={kcClsx("kcFormOptionsClass")}>
diff --git a/stories/login/KcApp.tsx b/stories/login/KcApp.tsx
index a2765c05..1651436c 100644
--- a/stories/login/KcApp.tsx
+++ b/stories/login/KcApp.tsx
@@ -33,5 +33,13 @@ export default function KcApp(props: { kcContext: KcContext }) {
         }
     });
 
-    return <Fallback kcContext={kcContext} Template={Template} UserProfileFormFields={UserProfileFormFields} doUseDefaultCss={true} />;
+    return (
+        <Fallback
+            kcContext={kcContext}
+            Template={Template}
+            doUseDefaultCss={true}
+            UserProfileFormFields={UserProfileFormFields}
+            doMakeUserConfirmPassword={true}
+        />
+    );
 }