feat: add getDefaultValue to signin & signup form fields

CHANGELOG.md

@@ -5,6 +5,46 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html)
 
+## [0.36.0] - 2023-10-30
+
+### Added
+
+-   Introduced the capability to utilize custom components in the Email-Password based recipes' signup form fields by exposing inputComponent types.
+-   Implemented the functionality to assign default values to the form fields in the Email-Password based recipes.
+-   Enhanced the onChange function to operate independently without requiring an id field.
+
+Following is an example of how to use above features.
+
+```tsx
+EmailPassword.init({
+    signInAndUpFeature: {
+        signUpForm: {
+            formFields: [
+                {
+                    id: "select-dropdown",
+                    label: "Select Option",
+                    getDefaultValue: () => "option 2",
+                    inputComponent: ({ value, name, onChange }) => (
+                        <select
+                            value={value}
+                            name={name}
+                            onChange={(e) => onChange(e.target.value)}
+                            placeholder="Select Option"
+                        >
+                            <option value="" disabled hidden>Select an option</option>
+                            <option value="option 1">Option 1</option>
+                            <option value="option 2">Option 2</option>
+                            <option value="option 3">Option 3</option>
+                        </select>
+                    )
+                }
+            ]
+        }
+    }
+});
+...
+```
+
 ## [0.35.6] - 2023-10-16
 
 ### Test changes

examples/for-tests/src/App.js

@@ -168,6 +168,159 @@ const formFields = [
     },
 ];
 
+const formFieldsWithDefault = [
+    {
+        id: "country",
+        label: "Your Country",
+        placeholder: "Where do you live?",
+        optional: true,
+        getDefaultValue: () => "India",
+    },
+    {
+        id: "select-dropdown",
+        label: "Select Option",
+        getDefaultValue: () => "option 2",
+        inputComponent: ({ value, name, onChange }) => (
+            <select value={value} name={name} onChange={(e) => onChange(e.target.value)}>
+                <option value="" disabled hidden>
+                    Select an option
+                </option>
+                <option value="option 1">Option 1</option>
+                <option value="option 2">Option 2</option>
+                <option value="option 3">Option 3</option>
+            </select>
+        ),
+        optional: true,
+    },
+    {
+        id: "terms",
+        label: "",
+        optional: false,
+        getDefaultValue: () => "true",
+        inputComponent: ({ name, onChange, value }) => (
+            <div
+                style={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "left",
+                }}>
+                <input
+                    value={value}
+                    checked={value === "true"}
+                    name={name}
+                    type="checkbox"
+                    onChange={(e) => onChange(e.target.checked.toString())}></input>
+                <span style={{ marginLeft: 5 }}>I agree to the terms and conditions</span>
+            </div>
+        ),
+        validate: async (value) => {
+            if (value === "true") {
+                return undefined;
+            }
+            return "Please check Terms and conditions";
+        },
+    },
+    {
+        id: "email",
+        label: "Email",
+        getDefaultValue: () => "[email protected]",
+    },
+    {
+        id: "password",
+        label: "Password",
+        getDefaultValue: () => "fakepassword123",
+    },
+];
+
+const incorrectFormFields = [
+    {
+        id: "country",
+        label: "Your Country",
+        placeholder: "Where do you live?",
+        optional: true,
+        getDefaultValue: () => 23, // return should be a string
+    },
+    {
+        id: "select-dropdown",
+        label: "Select Dropdown",
+        getDefaultValue: "option 2", // should be function
+        inputComponent: ({ value, name, onChange }) => (
+            <select value={value} name={name} onChange={(e) => onChange(e.target.value)}>
+                <option value="" disabled hidden>
+                    Select an option
+                </option>
+                <option value="option 1">Option 1</option>
+                <option value="option 2">Option 2</option>
+                <option value="option 3">Option 3</option>
+            </select>
+        ),
+        optional: true,
+    },
+    {
+        // onChange accepts only string value, here we pass boolean
+        id: "terms",
+        label: "",
+        optional: false,
+        inputComponent: ({ name, onChange }) => (
+            <div
+                style={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "left",
+                }}>
+                <input name={name} type="checkbox" onChange={(e) => onChange(e.target.checked)}></input>
+                <span style={{ marginLeft: 5 }}>I agree to the terms and conditions</span>
+            </div>
+        ),
+        validate: async (value) => {
+            if (value === "true") {
+                return undefined;
+            }
+            return "Please check Terms and conditions";
+        },
+    },
+];
+
+const customFields = [
+    {
+        id: "select-dropdown",
+        label: "Select Dropdown",
+        inputComponent: ({ value, name, onChange }) => (
+            <select value={value} name={name} onChange={(e) => onChange(e.target.value)}>
+                <option value="" disabled hidden>
+                    Select an option
+                </option>
+                <option value="option 1">Option 1</option>
+                <option value="option 2">Option 2</option>
+                <option value="option 3">Option 3</option>
+            </select>
+        ),
+        optional: true,
+    },
+    {
+        id: "terms",
+        label: "",
+        optional: false,
+        inputComponent: ({ name, onChange }) => (
+            <div
+                style={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "left",
+                }}>
+                <input name={name} type="checkbox" onChange={(e) => onChange(e.target.checked.toString())}></input>
+                <span style={{ marginLeft: 5 }}>I agree to the terms and conditions</span>
+            </div>
+        ),
+        validate: async (value) => {
+            if (value === "true") {
+                return undefined;
+            }
+            return "Please check Terms and conditions";
+        },
+    },
+];
+
 const testContext = getTestContext();
 
 let recipeList = [
@@ -552,6 +705,41 @@ function getEmailVerificationConfigs({ disableDefaultUI }) {
     });
 }
 
+function getFormFields() {
+    if (localStorage.getItem("SHOW_INCORRECT_FIELDS") === "YES") {
+        if (localStorage.getItem("INCORRECT_ONCHANGE") === "YES") {
+            // since page-error blocks all the other errors
+            // use this filter to test specific error
+            return incorrectFormFields.filter(({ id }) => id === "terms");
+        }
+        return incorrectFormFields;
+    } else if (localStorage.getItem("SHOW_CUSTOM_FIELDS_WITH_DEFAULT_VALUES") === "YES") {
+        return formFieldsWithDefault;
+    } else if (localStorage.getItem("SHOW_CUSTOM_FIELDS") === "YES") {
+        return customFields;
+    }
+    return formFields;
+}
+
+function getSignInFormFields() {
+    let showDefaultFields = localStorage.getItem("SHOW_SIGNIN_DEFAULT_FIELDS");
+    if (showDefaultFields === "YES") {
+        return {
+            formFields: [
+                {
+                    id: "email",
+                    getDefaultValue: () => "[email protected]",
+                },
+                {
+                    id: "password",
+                    getDefaultValue: () => "fakepassword123",
+                },
+            ],
+        };
+    }
+    return {};
+}
+
 function getEmailPasswordConfigs({ disableDefaultUI }) {
     return EmailPassword.init({
         style: `          
@@ -632,12 +820,13 @@ function getEmailPasswordConfigs({ disableDefaultUI }) {
             defaultToSignUp,
             signInForm: {
                 style: theme,
+                ...getSignInFormFields(),
             },
             signUpForm: {
                 style: theme,
                 privacyPolicyLink: "https://supertokens.com/legal/privacy-policy",
                 termsOfServiceLink: "https://supertokens.com/legal/terms-and-conditions",
-                formFields,
+                formFields: getFormFields(),
             },
         },
     });