- For the login form, the bindable values are form.errorMessage , which is an error message present when the form.error condition is true.
- If an onSubmit attribute is set on a form, then the handled function attached to that attribute will be called once a form is submitted.
- For the login form, the available conditions are form.processing , which is true when the form is loading, and form.error , which is set to true when there is a bindable error message.
- If you’re interested in seeing what fields can be mapped for the registration or reset password form, take a look at the Stormpath React documentation .
- < input type = "submit" value = "Login" / >
Introducing custom user login, registration and reset password forms for the Stormpath React SDK
@goStormpath: With the new custom forms feature we’ve added, building forms is fun again! #ReactJS
Building forms has never really been any fun. But with the new custom forms feature that we’ve added to the Stormpath React SDK, it suddenly is. This custom forms functionality means you’ll have the ability to plug in your own markup to the forms for user login, registration and reset password without having to think about any of the logic behind them.
React developers can now simply style the form quickly, and Stormpath will take care of all the rest.
Before we get started: If you haven’t played around with React or want to try these examples in a sample application, then take a look at our previous blog post Build a React.js Application With User Authentication or play along with the example project.
Forms in the Stormpath React SDK still work as previously. If no markup is provided, the form will simply render with the default Bootstrap markup, i.e.
This actually turns into:
) available depend on the form used.
To demonstrate this, a simple, stripped-down login form can look like:
As previously mentioned, when markup is provided to a form, that markup is processed and input fields are mapped, with available fields varying by form.
(the password to login with).
field, all you have to do is to set the input name to the field name:
If you’re interested in seeing what fields can be mapped for the registration or reset password form, take a look at the Stormpath React documentation.
conditions that you can use.
, which is set to true when there is a bindable error message.
conditions are available for the registration or reset password form, take a look at the Stormpath React documentation.
condition is true.
attribute on an element, as shown below:
values are available for the registration or reset password form, take a look at the Stormpath React documentation.
handler for the login form would look like:
As you’ve just seen demonstrated, the new custom forms feature really makes building forms a lot easier. It’s one of the many improvements we have added to the React SDK lately.
If you have any feedback on the custom forms feature or the React SDK in general. Feel free to leave that in the comment section below.