improv: Add the ability to pass a custom footer to specific components

The change is required by the captcha plugin in order to have a place to
render the captcha input.

Author: bcbogdan

lib/ts/recipe/emailpassword/components/themes/resetPasswordUsingToken/resetPasswordEmail.tsx

@@ -25,7 +25,11 @@ import GeneralError from "../../library/generalError";
 
 import type { EnterEmailProps, EnterEmailStatus } from "../../../types";
 
-const EmailPasswordResetPasswordEmail: React.FC<EnterEmailProps> = (props) => {
+const EmailPasswordResetPasswordEmail: React.FC<
+    EnterEmailProps & {
+        footer?: JSX.Element;
+    }
+> = (props) => {
     const t = useTranslation();
     const userContext = useUserContext();
     const [status, setStatus] = useState<EnterEmailStatus>("READY");
@@ -117,6 +121,7 @@ const EmailPasswordResetPasswordEmail: React.FC<EnterEmailProps> = (props) => {
                     }}
                     showLabels={true}
                     validateOnBlur={true}
+                    footer={props.footer}
                 />
             </div>
         </div>

lib/ts/recipe/emailpassword/components/themes/resetPasswordUsingToken/submitNewPassword.tsx

@@ -29,7 +29,11 @@ import GeneralError from "../../library/generalError";
 
 import type { SubmitNewPasswordProps, SubmitNewPasswordStatus } from "../../../types";
 
-const EmailPasswordSubmitNewPassword: React.FC<SubmitNewPasswordProps> = (props) => {
+const EmailPasswordSubmitNewPassword: React.FC<
+    SubmitNewPasswordProps & {
+        footer?: JSX.Element;
+    }
+> = (props) => {
     const t = useTranslation();
     const userContext = useUserContext();
     const [status, setStatus] = useState<SubmitNewPasswordStatus>("READY");
@@ -120,6 +124,7 @@ const EmailPasswordSubmitNewPassword: React.FC<SubmitNewPasswordProps> = (props)
                               };
                     }}
                     showLabels={true}
+                    footer={props.footer}
                 />
             </div>
         </div>

lib/ts/recipe/passwordless/components/themes/signInUpEPCombo/emailForm.tsx

@@ -30,7 +30,11 @@ import type { SignInUpEPComboEmailFormProps } from "../../../types";
 
 export const EPComboEmailForm = withOverride(
     "PasswordlessEPComboEmailForm",
-    function PasswordlessEPComboEmailForm(props: SignInUpEPComboEmailFormProps): JSX.Element {
+    function PasswordlessEPComboEmailForm(
+        props: SignInUpEPComboEmailFormProps & {
+            footer?: JSX.Element;
+        }
+    ): JSX.Element {
         const t = useTranslation();
 
         const formFields: FormFieldThemeProps[] = [
@@ -46,6 +50,19 @@ export const EPComboEmailForm = withOverride(
             },
         ];
 
+        let footer = props.footer;
+        if (!footer && props.showContinueWithPasswordlessLink) {
+            footer = (
+                <ContinueWithPasswordlessFooter
+                    isPhoneNumber={false}
+                    onContinueWithPasswordlessClick={props.onContinueWithPasswordlessClick}
+                    onError={props.onError}
+                    config={props.config}
+                    validatePhoneNumber={props.validatePhoneNumber}
+                />
+            );
+        }
+
         if (props.showPasswordField) {
             formFields.push({
                 id: "password",
@@ -67,7 +84,8 @@ export const EPComboEmailForm = withOverride(
                                     props.navigate
                                 )
                             }
-                            data-supertokens="link linkButton formLabelLinkBtn forgotPasswordLink">
+                            data-supertokens="link linkButton formLabelLinkBtn forgotPasswordLink"
+                        >
                             {t("PWLESS_COMBO_FORGOT_PW_LINK")}
                         </a>
                     </div>
@@ -100,17 +118,7 @@ export const EPComboEmailForm = withOverride(
                 }}
                 validateOnBlur={false}
                 showLabels={true}
-                footer={
-                    props.showContinueWithPasswordlessLink ? (
-                        <ContinueWithPasswordlessFooter
-                            isPhoneNumber={false}
-                            onContinueWithPasswordlessClick={props.onContinueWithPasswordlessClick}
-                            onError={props.onError}
-                            config={props.config}
-                            validatePhoneNumber={props.validatePhoneNumber}
-                        />
-                    ) : undefined
-                }
+                footer={footer}
             />
         );
     }

lib/ts/recipe/passwordless/components/themes/signInUpEPCombo/emailOrPhoneForm.tsx

@@ -34,7 +34,11 @@ import type { SignInUpEPComboEmailOrPhoneFormProps } from "../../../types";
 
 export const EPComboEmailOrPhoneForm = withOverride(
     "PasswordlessEPComboEmailOrPhoneForm",
-    function PasswordlessEPComboEmailOrPhoneForm(props: SignInUpEPComboEmailOrPhoneFormProps): JSX.Element {
+    function PasswordlessEPComboEmailOrPhoneForm(
+        props: SignInUpEPComboEmailOrPhoneFormProps & {
+            footer?: JSX.Element;
+        }
+    ): JSX.Element {
         const t = useTranslation();
 
         useEffect(() => {
@@ -48,6 +52,19 @@ export const EPComboEmailOrPhoneForm = withOverride(
                 }),
             [props.config.signInUpFeature.defaultCountry]
         );
+
+        let footer = props.footer;
+        if (!footer && props.showContinueWithPasswordlessLink) {
+            footer = (
+                <ContinueWithPasswordlessFooter
+                    isPhoneNumber={props.isPhoneNumber}
+                    onContinueWithPasswordlessClick={props.onContinueWithPasswordlessClick}
+                    validatePhoneNumber={props.validatePhoneNumber}
+                    onError={props.onError}
+                    config={props.config}
+                />
+            );
+        }
         const formFields: FormFieldThemeProps[] = props.isPhoneNumber
             ? [
                   {
@@ -59,7 +76,8 @@ export const EPComboEmailOrPhoneForm = withOverride(
                               <Label value={"PWLESS_SIGN_IN_UP_PHONE_LABEL"} />
                               <a
                                   onClick={() => props.setIsPhoneNumber(false)}
-                                  data-supertokens="link linkButton formLabelLinkBtn contactMethodSwitcher">
+                                  data-supertokens="link linkButton formLabelLinkBtn contactMethodSwitcher"
+                              >
                                   {t("PWLESS_SIGN_IN_UP_SWITCH_TO_EMAIL")}
                               </a>
                           </div>
@@ -82,7 +100,8 @@ export const EPComboEmailOrPhoneForm = withOverride(
                               <Label value={"PWLESS_SIGN_IN_UP_EMAIL_LABEL"} />
                               <a
                                   onClick={() => props.setIsPhoneNumber(true)}
-                                  data-supertokens="link linkButton formLabelLinkBtn contactMethodSwitcher">
+                                  data-supertokens="link linkButton formLabelLinkBtn contactMethodSwitcher"
+                              >
                                   {t("PWLESS_SIGN_IN_UP_SWITCH_TO_PHONE")}
                               </a>
                           </div>
@@ -117,7 +136,8 @@ export const EPComboEmailOrPhoneForm = withOverride(
                                     props.navigate
                                 )
                             }
-                            data-supertokens="link linkButton formLabelLinkBtn forgotPasswordLink">
+                            data-supertokens="link linkButton formLabelLinkBtn forgotPasswordLink"
+                        >
                             {t("PWLESS_COMBO_FORGOT_PW_LINK")}
                         </a>
                     </div>
@@ -165,17 +185,7 @@ export const EPComboEmailOrPhoneForm = withOverride(
                 validateOnBlur={false}
                 showLabels={true}
                 onSuccess={props.onSuccess}
-                footer={
-                    props.showContinueWithPasswordlessLink ? (
-                        <ContinueWithPasswordlessFooter
-                            isPhoneNumber={props.isPhoneNumber}
-                            onContinueWithPasswordlessClick={props.onContinueWithPasswordlessClick}
-                            validatePhoneNumber={props.validatePhoneNumber}
-                            onError={props.onError}
-                            config={props.config}
-                        />
-                    ) : undefined
-                }
+                footer={footer}
             />
         );
     }