Add docs for new props on fe config, inputComponent, getDefaultValue, nonOptionalErrorMsg

v2/emailpassword/common-customizations/signin-form/changing-field-labels.mdx

@@ -4,46 +4,6 @@ title: Changing Field Labels and Placeholder text
 hide_title: true
 ---
 
-import FrontendSDKTabs from "/src/components/tabs/FrontendSDKTabs"
-import TabItem from '@theme/TabItem';
+import Redirector from '/src/components/Redirector'
 
-# Changing Field Labels and Placeholder text
-
-If you would like to modify the fields in the login widget, by changing UI labels or placeholder text, you can do so by modifying the `formFields` property when initializing SuperTokens on the frontend.
-
-<FrontendSDKTabs>
-<TabItem value="reactjs">
-
-```tsx
-import SuperTokens from "supertokens-auth-react";
-import EmailPassword from "supertokens-auth-react/recipe/emailpassword";
-import Session from "supertokens-auth-react/recipe/session";
-
-SuperTokens.init({
-    appInfo: {
-        apiDomain: "...",
-        appName: "...",
-        websiteDomain: "..."
-    },
-    recipeList: [
-        EmailPassword.init({
-            signInAndUpFeature: {
-                signInForm: {
-                    // highlight-start
-                    formFields: [{
-                        id: "email",
-                        label: "customFieldName",
-                        placeholder: "Custom value"
-                    }]
-                }
-                // highlight-end
-            }
-        }),
-        Session.init()
-    ]
-});
-```
-</TabItem>
-</FrontendSDKTabs>
-
-<img alt="Prebuilt form UI with custom labels and placeholder" src="/img/emailpassword/modified-formfields.png" />
+<Redirector to={"./customising-each-form-field"}/>

v2/emailpassword/common-customizations/signin-form/customising-each-form-field.mdx

@@ -0,0 +1,194 @@
+---
+id: customising-each-form-field
+title: Customising each form field
+hide_title: true
+show_ui_switcher: true
+---
+
+<!-- COPY DOCS -->
+<!-- ./emailpassword/common-customizations/signin-form/customising-each-form-field.mdx -->
+
+import TabItem from '@theme/TabItem'
+import {PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher"
+import FrontendPreBuiltUITabs from "/src/components/tabs/FrontendPreBuiltUITabs";
+
+
+# Customising each form field
+
+* [Modify Labels and Placeholder Text](#modify-labels-and-placeholder-text)
+* [Setting Default Values](#setting-default-values)
+* [Changing Optional Error Message](#changing-optional-error-message)
+
+
+<PreBuiltOrCustomUISwitcher>
+
+<CustomUIContent>
+
+:::caution Not applicable
+This section is not relevant for custom UI, as you will be creating your own UI and already have control over the form fields.
+:::
+
+</CustomUIContent>
+
+<PreBuiltUIContent>
+
+## Modify Labels and Placeholder Text
+
+If you would like to modify the fields in the login widget, by changing UI labels or placeholder text, you can do so by modifying the `formFields` property when initializing SuperTokens on the frontend.
+
+<FrontendPreBuiltUITabs>
+<TabItem value="reactjs">
+
+```tsx
+import SuperTokens from "supertokens-auth-react";
+import ^{recipeNameCapitalLetters} from "supertokens-auth-react/recipe/^{codeImportRecipeName}";
+import Session from "supertokens-auth-react/recipe/session";
+
+SuperTokens.init({
+    appInfo: {
+        apiDomain: "...",
+        appName: "...",
+        websiteDomain: "..."
+    },
+    recipeList: [
+         ^{recipeNameCapitalLetters}.init({
+            signInAndUpFeature: {
+                signInForm: {
+                    // highlight-start
+                    formFields: [{
+                        id: "email",
+                        label: "customFieldName",
+                        placeholder: "Custom value"
+                    }]
+                }
+                // highlight-end
+            }
+        }),
+        Session.init()
+    ]
+});
+```
+</TabItem>
+</FrontendPreBuiltUITabs>
+
+<img alt="Prebuilt form UI with custom labels and placeholder" src="/img/^{codeImportRecipeName}/modified-formfields.png" />
+
+</PreBuiltUIContent>
+</PreBuiltOrCustomUISwitcher>
+
+
+<PreBuiltOrCustomUISwitcher>
+<PreBuiltUIContent>
+
+## Setting Default Values
+
+To fill in the form fields with preset values in the login widget, add a `getDefaultValue` option to the `formFields` config when initializing SuperTokens on the frontend.
+
+<FrontendPreBuiltUITabs>
+<TabItem value="reactjs">
+
+```tsx
+import SuperTokens from "supertokens-auth-react"; 
+import ^{recipeNameCapitalLetters} from "supertokens-auth-react/recipe/^{codeImportRecipeName}";
+import Session from "supertokens-auth-react/recipe/session";
+
+SuperTokens.init({
+    appInfo: {
+        apiDomain: "...",
+        appName: "...",
+        websiteDomain: "..."
+    },
+    recipeList: [
+        ^{recipeNameCapitalLetters}.init({
+            signInAndUpFeature: {
+                signInForm: {
+                    formFields: [{
+                        id: "email",
+                        label: "Your Email",
+                    // highlight-start
+                        getDefaultValue: () => "[email protected]"
+                    // highlight-end
+                    }]
+                }
+            }
+        }),
+        Session.init()
+    ]
+});
+```
+</TabItem>
+</FrontendPreBuiltUITabs>
+
+<img alt="Prebuilt signin form UI with default values for fields" src="/img/^{codeImportRecipeName}/signin-with-default-values.png" />
+
+
+:::important
+
+The return value of  `getDefaultValue` function must be a string
+
+:::
+
+</PreBuiltUIContent>
+</PreBuiltOrCustomUISwitcher>
+
+
+<PreBuiltOrCustomUISwitcher>
+<PreBuiltUIContent>
+
+## Changing Optional Error Message
+
+
+When you try to submit login form without filling in required / non-optional fields, the SDK will, by default, show an error stating that the `Field is not optional`. You can customize this error message with `nonOptionalErrorMsg` property in the formField config.
+
+Let's see how to achieve it.
+
+<FrontendPreBuiltUITabs>
+<TabItem value="reactjs">
+
+```tsx
+import SuperTokens from "supertokens-auth-react";
+import ^{recipeNameCapitalLetters} from "supertokens-auth-react/recipe/^{codeImportRecipeName}";
+import Session from "supertokens-auth-react/recipe/session";
+
+SuperTokens.init({
+    appInfo: {
+        apiDomain: "...",
+        appName: "...",
+        websiteDomain: "..."
+    },
+    recipeList: [
+        ^{recipeNameCapitalLetters}.init({
+            signInAndUpFeature: {
+                signInForm: {
+                    formFields: [{
+                        id: "email",
+                        label: "Your Email",
+                        placeholder: "Email",
+                    // highlight-start
+                        nonOptionalErrorMsg: "Please add your email"
+                    // highlight-end
+                    }]
+                }
+            }
+        }),
+        Session.init()
+    ]
+});
+```
+</TabItem>
+</FrontendPreBuiltUITabs>
+
+<img alt="Prebuilt form UI with custom error message" src="/img/^{codeImportRecipeName}/signin-with-custom-error-msg.png" />
+
+
+Observe how the `password` field displays the standard error message because a custom message wasn't assigned using `nonOptionalErrorMsg` for that field.
+
+:::tip
+
+To display an error message for required/non-optional fields, make use of the `nonOptionalErrorMsg` property.
+For complex validations of fields, make use of [field validators](/docs/^{docsLinkRecipeName}/common-customizations/signin-form/field-validators). 
+
+:::
+
+</PreBuiltUIContent>
+</PreBuiltOrCustomUISwitcher>

v2/emailpassword/common-customizations/signup-form/changing-field-labels.mdx

@@ -4,46 +4,6 @@ title: Changing Field Labels and Placeholder text
 hide_title: true
 ---
 
-import FrontendSDKTabs from "/src/components/tabs/FrontendSDKTabs"
-import TabItem from '@theme/TabItem';
+import Redirector from '/src/components/Redirector'
 
-# Changing Field Labels and Placeholder text
-
-If you would like to modify the fields in the login widget, by changing UI labels or placeholder text, you can do so by modifying the `formFields` property when initializing SuperTokens on the frontend.
-
-<FrontendSDKTabs>
-<TabItem value="reactjs">
-
-```tsx
-import SuperTokens from "supertokens-auth-react";
-import EmailPassword from "supertokens-auth-react/recipe/emailpassword";
-import Session from "supertokens-auth-react/recipe/session";
-
-SuperTokens.init({
-    appInfo: {
-        apiDomain: "...",
-        appName: "...",
-        websiteDomain: "..."
-    },
-    recipeList: [
-        EmailPassword.init({
-            signInAndUpFeature: {
-                signUpForm: {
-                    // highlight-start
-                    formFields: [{
-                        id: "email",
-                        label: "customFieldName",
-                        placeholder: "Custom value"
-                    }]
-                }
-                // highlight-end
-            }
-        }),
-        Session.init()
-    ]
-});
-```
-</TabItem>
-</FrontendSDKTabs>
-
-<img alt="Prebuilt form UI with custom labels and placeholder" src="/img/emailpassword/custom-field-name-signup-ep.png" />
+<Redirector to={"./customising-each-form-field"}/>