feat: add nonOptionalErrorMsg props (#757)

* Add nonOptionalErr types

* Now supports nonOptionalErrorMsg attribute

* Add tests and fix signin types to include nonOptionalMsg

* Enforce no api request are made on blank forms

* Clean up signup

* Throw error if invalid nonOptionalErrorMsg, add tests for the same

* Better error message

* Handle incorrect optional flag

* fixes redundant normalisation

---------

Co-authored-by: rishabhpoddar <[email protected]>

examples/for-tests/src/App.js

@@ -279,12 +279,19 @@ const incorrectFormFields = [
             return "Please check Terms and conditions";
         },
     },
+    {
+        id: "city",
+        label: "Your city",
+        optional: false,
+        nonOptionalErrorMsg: "", // empty string should throw error
+    },
 ];
 
 const customFields = [
     {
         id: "select-dropdown",
         label: "Select Dropdown",
+        nonOptionalErrorMsg: "Select dropdown is not an optional",
         inputComponent: ({ value, name, onChange }) => (
             <select value={value} name={name} onChange={(e) => onChange(e.target.value)}>
                 <option value="" disabled hidden>
@@ -301,6 +308,7 @@ const customFields = [
         id: "terms",
         label: "",
         optional: false,
+        nonOptionalErrorMsg: "You must accept the terms and conditions",
         inputComponent: ({ name, onChange }) => (
             <div
                 style={{
@@ -711,6 +719,10 @@ function getFormFields() {
             // since page-error blocks all the other errors
             // use this filter to test specific error
             return incorrectFormFields.filter(({ id }) => id === "terms");
+        } else if (localStorage.getItem("INCORRECT_NON_OPTIONAL_ERROR_MSG") === "YES") {
+            return incorrectFormFields.filter(({ id }) => id === "city");
+        } else if (localStorage.getItem("INCORRECT_GETDEFAULT") === "YES") {
+            return incorrectFormFields.filter(({ id }) => id === "country");
         }
         return incorrectFormFields;
     } else if (localStorage.getItem("SHOW_CUSTOM_FIELDS_WITH_DEFAULT_VALUES") === "YES") {
@@ -723,6 +735,7 @@ function getFormFields() {
 
 function getSignInFormFields() {
     let showDefaultFields = localStorage.getItem("SHOW_SIGNIN_DEFAULT_FIELDS");
+    let showFieldsWithNonOptionalErrMsg = localStorage.getItem("SHOW_SIGNIN_WITH_NON_OPTIONAL_ERROR_MESSAGE");
     if (showDefaultFields === "YES") {
         return {
             formFields: [
@@ -736,6 +749,15 @@ function getSignInFormFields() {
                 },
             ],
         };
+    } else if (showFieldsWithNonOptionalErrMsg === "YES") {
+        return {
+            formFields: [
+                {
+                    id: "email",
+                    nonOptionalErrorMsg: "Please add email",
+                },
+            ],
+        };
     }
     return {};
 }

lib/ts/recipe/emailpassword/components/library/formBase.tsx

@@ -251,10 +251,18 @@ export const FormBase: React.FC<FormBaseProps<any>> = (props) => {
                     // If field error.
                     if (result.status === "FIELD_ERROR") {
                         const errorFields = result.formFields;
-
-                        setFieldStates((os) =>
-                            os.map((fs) => ({ ...fs, error: errorFields.find((ef: any) => ef.id === fs.id)?.error }))
-                        );
+                        const getErrorMessage = (fs: FieldState) => {
+                            const errorMessage = errorFields.find((ef: any) => ef.id === fs.id)?.error;
+                            if (errorMessage === "Field is not optional") {
+                                const fieldConfigData = props.formFields.find((f) => f.id === fs.id);
+                                // replace non-optional server error message from nonOptionalErrorMsg
+                                if (fieldConfigData?.nonOptionalErrorMsg !== undefined) {
+                                    return fieldConfigData?.nonOptionalErrorMsg;
+                                }
+                            }
+                            return errorMessage;
+                        };
+                        setFieldStates((os) => os.map((fs) => ({ ...fs, error: getErrorMessage(fs) })));
                     }
                 }
             } catch (e) {

lib/ts/recipe/emailpassword/utils.ts

@@ -338,11 +338,18 @@ export function mergeFormFields(
 }
 
 export function getFormattedFormField(field: NormalisedFormField): NormalisedFormField {
+    // Fields with the 'nonOptionalErrorMsg' property must have a valid message defined
+    if (field.optional === false && field.nonOptionalErrorMsg === "") {
+        throw new Error(`nonOptionalErrorMsg for field ${field.id} cannot be an empty string`);
+    }
     return {
         ...field,
         validate: async (value: any): Promise<string | undefined> => {
             // Absent or not optional empty field
             if (value === "" && field.optional === false) {
+                if (field.nonOptionalErrorMsg !== undefined) {
+                    return field.nonOptionalErrorMsg;
+                }
                 return "ERROR_NON_OPTIONAL";
             }
 

lib/ts/types.ts

@@ -227,6 +227,11 @@ export type FormFieldBaseConfig = {
      *Ability to provide default value to input field.
      */
     getDefaultValue?: () => string;
+
+    /*
+     * Error message for non optional field.
+     */
+    nonOptionalErrorMsg?: string;
 };
 
 export type FormField = FormFieldBaseConfig & {
@@ -279,6 +284,11 @@ export type NormalisedFormField = {
      */
     optional: boolean;
 
+    /*
+     * Error message for non optional field.
+     */
+    nonOptionalErrorMsg?: string;
+
     /*
      * Autocomplete input.
      */

test/end-to-end/signin.test.js

@@ -758,6 +758,50 @@ describe("SuperTokens SignIn", function () {
             }
         });
     });
+
+    describe("Check if nonOptionalErrorMsg works as expected", function () {
+        it("Check on blank form submit nonOptionalErrorMsg gets displayed as expected", async function () {
+            await page.evaluate(() => localStorage.removeItem("SHOW_SIGNIN_DEFAULT_FIELDS"));
+
+            // set cookie and reload which loads the form with custom field
+            await page.evaluate(() =>
+                window.localStorage.setItem("SHOW_SIGNIN_WITH_NON_OPTIONAL_ERROR_MESSAGE", "YES")
+            );
+            await page.reload({
+                waitUntil: "domcontentloaded",
+            });
+
+            let apiCallMade = false;
+
+            const requestHandler = (request) => {
+                const url = request.url();
+                if (url === SIGN_IN_API) {
+                    apiCallMade = true;
+                    request.continue();
+                } else {
+                    request.continue();
+                }
+            };
+
+            await page.setRequestInterception(true);
+            page.on("request", requestHandler);
+
+            try {
+                await submitForm(page);
+                let formFieldErrors = await getFieldErrors(page);
+
+                // Also standard non-optional-error is displayed if nonOptionalErrorMsg is not provided
+                assert.deepStrictEqual(formFieldErrors, ["Please add email", "Field is not optional"]);
+            } finally {
+                page.off("request", requestHandler);
+                await page.setRequestInterception(false);
+            }
+
+            if (apiCallMade) {
+                throw new Error("Empty form making API request to signin");
+            }
+        });
+    });
 });
 
 describe("SuperTokens SignIn => Server Error", function () {