Custom form fields

CHANGELOG.md

@@ -5,6 +5,81 @@ 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.35.7] - 2023-11-16
+
+### Added
+
+-   EmailPassword and ThirdPartyEmailPassword recipe enhancements:
+    -   Introduced the capability to utilize custom components by exposing `inputComponent` types.
+    -   Allow setting default values in signup/signin form fields.
+    -   Made the `onChange` prop in `inputComponent` simpler by removing the need for an `id` attribute.
+    -   Added a feature to customize the "Field is not optional" error message for each form field with the `nonOptionalErrorMsg` prop.
+
+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",
+                    nonOptionalErrorMsg: "Select dropdown is required",
+                    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>
+                    ),
+                },
+            ],
+        },
+    },
+});
+
+ThirdPartyEmailPassword.init({
+    signInAndUpFeature: {
+        signUpForm: {
+            formFields: [
+                {
+                    id: "terms",
+                    label: "",
+                    optional: false,
+                    getDefaultValue: () => "true",
+                    nonOptionalErrorMsg: "You must accept the terms and conditions",
+                    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>
+                    ),
+                },
+            ],
+        },
+    },
+});
+```
+
 ## [0.35.6] - 2023-10-16
 
 ### Test changes

examples/for-tests/src/App.js

@@ -168,6 +168,167 @@ 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";
+        },
+    },
+    {
+        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>
+                    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,
+        nonOptionalErrorMsg: "You must accept the terms and conditions",
+        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,7 +713,51 @@ function getEmailVerificationConfigs({ disableDefaultUI }) {
     });
 }
 
-function getEmailPasswordConfigs({ disableDefaultUI }) {
+function getSignUpFormFields(formType) {
+    switch (formType) {
+        case "INCORRECT_FIELDS":
+            return incorrectFormFields;
+        case "INCORRECT_ONCHANGE":
+            return incorrectFormFields.filter(({ id }) => id === "terms");
+        case "INCORRECT_NON_OPTIONAL_ERROR_MSG":
+            return incorrectFormFields.filter(({ id }) => id === "city");
+        case "INCORRECT_GETDEFAULT":
+            return incorrectFormFields.filter(({ id }) => id === "country");
+        case "CUSTOM_FIELDS_WITH_DEFAULT_VALUES":
+            return formFieldsWithDefault;
+        case "CUSTOM_FIELDS":
+            return customFields;
+        default:
+            return formFields;
+    }
+}
+
+function getSignInFormFields(formType) {
+    switch (formType) {
+        case "DEFAULT_FIELDS":
+            return [
+                {
+                    id: "email",
+                    getDefaultValue: () => "[email protected]",
+                },
+                {
+                    id: "password",
+                    getDefaultValue: () => "fakepassword123",
+                },
+            ];
+        case "FIELDS_WITH_NON_OPTIONAL_ERROR_MESSAGE":
+            return [
+                {
+                    id: "email",
+                    nonOptionalErrorMsg: "Please add email",
+                },
+            ];
+        default:
+            return;
+    }
+}
+
+function getEmailPasswordConfigs({ disableDefaultUI, formFieldType }) {
     return EmailPassword.init({
         style: `          
             [data-supertokens~=container] {
@@ -632,12 +837,13 @@ function getEmailPasswordConfigs({ disableDefaultUI }) {
             defaultToSignUp,
             signInForm: {
                 style: theme,
+                formFields: getSignInFormFields(formFieldType.signIn),
             },
             signUpForm: {
                 style: theme,
                 privacyPolicyLink: "https://supertokens.com/legal/privacy-policy",
                 termsOfServiceLink: "https://supertokens.com/legal/terms-and-conditions",
-                formFields,
+                formFields: getSignUpFormFields(formFieldType.signUp),
             },
         },
     });
@@ -981,7 +1187,12 @@ function getThirdPartyConfigs({ staticProviderList, disableDefaultUI, thirdParty
     });
 }
 
-function getThirdPartyEmailPasswordConfigs({ staticProviderList, disableDefaultUI, thirdPartyRedirectURL }) {
+function getThirdPartyEmailPasswordConfigs({
+    staticProviderList,
+    disableDefaultUI,
+    thirdPartyRedirectURL,
+    formFieldType,
+}) {
     let providers = [
         ThirdParty.Github.init(),
         ThirdParty.Google.init(),
@@ -1160,9 +1371,11 @@ function getThirdPartyEmailPasswordConfigs({ staticProviderList, disableDefaultU
         },
         signInAndUpFeature: {
             disableDefaultUI,
-            signInForm: {},
+            signInForm: {
+                formFields: getSignInFormFields(formFieldType.signIn),
+            },
             signUpForm: {
-                formFields,
+                formFields: getSignUpFormFields(formFieldType.signUp),
                 privacyPolicyLink: "https://supertokens.com/legal/privacy-policy",
                 termsOfServiceLink: "https://supertokens.com/legal/terms-and-conditions",
             },

examples/for-tests/src/testContext.js

@@ -14,6 +14,10 @@ export function getTestContext() {
         staticProviderList: localStorage.getItem("staticProviderList"),
         mockTenantId: localStorage.getItem("mockTenantId"),
         clientType: localStorage.getItem("clientType") || undefined,
+        formFieldType: {
+            signIn: localStorage.getItem("SIGNIN_SETTING_TYPE"),
+            signUp: localStorage.getItem("SIGNUP_SETTING_TYPE"),
+        },
     };
     return ret;
 }