Add support for showing caution on signup page for email

Author: deepjyoti30-st

lib/ts/recipe/webauthn/components/themes/signUp/signUpForm.tsx

@@ -64,52 +64,55 @@ export const SignUpFormInner = withOverride(
         );
 
         return (
-            <FormBase
-                clearError={props.clearError}
-                onFetchError={props.onFetchError}
-                onError={props.onError}
-                formFields={[
-                    {
-                        id: "email",
-                        label: "",
-                        labelComponent: (
-                            <div data-supertokens="formLabelWithLinkWrapper">
-                                <Label value={"WEBAUTHN_SIGN_UP_LABEL"} data-supertokens="emailInputLabel" />
-                                <a
-                                    onClick={() => props.setActiveScreen(SignUpScreen.RecoverAccount)}
-                                    data-supertokens="link linkButton formLabelLinkBtn recoverAccountTrigger">
-                                    {t("WEBAUTHN_RECOVER_ACCOUNT_LABEL")}
-                                </a>
-                            </div>
-                        ),
-                        optional: false,
-                        autofocus: true,
-                        placeholder: "",
-                        autoComplete: "email",
-                        // We are using the default validator that allows any string
-                        validate: defaultEmailValidator,
-                    },
-                ]}
-                buttonLabel={"WEBAUTHN_EMAIL_CONTINUE_BUTTON"}
-                onSuccess={onEmailContinueSuccess}
-                callAPI={async (formFields) => {
-                    const email = formFields.find((field) => field.id === "email")?.value;
-                    if (email === undefined) {
-                        throw new STGeneralError("GENERAL_ERROR_EMAIL_UNDEFINED");
-                    }
-
-                    // We do not want the form to make the API call since we have
-                    // an intermediary step here so we will just mock an OK status
-                    // to render the next step.
-                    return {
-                        status: "OK",
-                        email,
-                    };
-                }}
-                validateOnBlur={false}
-                showLabels={true}
-                footer={props.footer || defaultFooter}
-            />
+            <div data-supertokens="signUpFormInnerContainer">
+                <div data-supertokens="cautionMessage">{t("WEBAUTHN_SIGN_UP_CAUTION_MESSAGE_LABEL")}</div>
+                <FormBase
+                    clearError={props.clearError}
+                    onFetchError={props.onFetchError}
+                    onError={props.onError}
+                    formFields={[
+                        {
+                            id: "email",
+                            label: "",
+                            labelComponent: (
+                                <div data-supertokens="formLabelWithLinkWrapper">
+                                    <Label value={"WEBAUTHN_SIGN_UP_LABEL"} data-supertokens="emailInputLabel" />
+                                    <a
+                                        onClick={() => props.setActiveScreen(SignUpScreen.RecoverAccount)}
+                                        data-supertokens="link linkButton formLabelLinkBtn recoverAccountTrigger">
+                                        {t("WEBAUTHN_RECOVER_ACCOUNT_LABEL")}
+                                    </a>
+                                </div>
+                            ),
+                            optional: false,
+                            autofocus: true,
+                            placeholder: "",
+                            autoComplete: "email",
+                            // We are using the default validator that allows any string
+                            validate: defaultEmailValidator,
+                        },
+                    ]}
+                    buttonLabel={"WEBAUTHN_EMAIL_CONTINUE_BUTTON"}
+                    onSuccess={onEmailContinueSuccess}
+                    callAPI={async (formFields) => {
+                        const email = formFields.find((field) => field.id === "email")?.value;
+                        if (email === undefined) {
+                            throw new STGeneralError("GENERAL_ERROR_EMAIL_UNDEFINED");
+                        }
+
+                        // We do not want the form to make the API call since we have
+                        // an intermediary step here so we will just mock an OK status
+                        // to render the next step.
+                        return {
+                            status: "OK",
+                            email,
+                        };
+                    }}
+                    validateOnBlur={false}
+                    showLabels={true}
+                    footer={props.footer || defaultFooter}
+                />
+            </div>
         );
     }
 );

lib/ts/recipe/webauthn/components/themes/styles.css

@@ -25,6 +25,21 @@
     cursor: pointer;
 }
 
+[data-supertokens~="signUpFormInnerContainer"] [data-supertokens~="cautionMessage"] {
+    padding: 14px;
+    background: #ff95001a;
+    color: #7c603e;
+    font-family: Arial;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    text-align: center;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
+    border-radius: 6px;
+    margin-bottom: 14px;
+}
+
 [data-supertokens~="passkeyConfirmationContainer"] [data-supertokens~="passkeyConfirmationEmailContainer"] {
     padding-bottom: 5px;
 }

lib/ts/recipe/webauthn/components/themes/translations.ts

@@ -38,5 +38,7 @@ export const defaultTranslationsWebauthn = {
             "The email used is invalid. Please try with a different email ID or reach out to support.",
         WEBAUTHN_ACCOUNT_RECOVERY_INVALID_GENERATED_OPTIONS_ERROR: "Failed to recover account, please try again.",
         WEBAUTHN_ACCOUNT_RECOVERY_FETCH_ERROR: "Something went wrong, please refresh the page or reach out to support.",
+        WEBAUTHN_SIGN_UP_CAUTION_MESSAGE_LABEL:
+            "Make sure your email is correct—we’ll use it to help you recover your account.",
     },
 };