-
Notifications
You must be signed in to change notification settings - Fork 76
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #744 from supertokens/docs-for-input-component
Add docs for new props on fe config, inputComponent, getDefaultValue, nonOptionalErrorMsg
- Loading branch information
Showing
34 changed files
with
1,613 additions
and
204 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
195 changes: 195 additions & 0 deletions
195
v2/emailpassword/common-customizations/signin-form/customising-each-form-field.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,195 @@ | ||
| --- | ||
| 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 | ||
|
|
||
|
|
||
| <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](#modify-labels-and-placeholder-text) | ||
| * [Setting Default Values](#setting-default-values) | ||
| * [Changing Optional Error Message](#changing-optional-error-message) | ||
|
|
||
|
|
||
| ## 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> |
Oops, something went wrong.