diff --git a/docs/api.md b/docs/api.md index a93a01d..a7512bf 100644 --- a/docs/api.md +++ b/docs/api.md @@ -259,6 +259,7 @@ Customize the form by providing your own markup.

+

``` @@ -349,7 +350,7 @@ Specify `hideSocial` to hide the ability to register with a social provider. ``` -Customize the form by providing your own markup. +Customize the form by providing your own markup. By default, the registration form will render these four fields, and they will be required by the user: `givenName`, `surname`, `email`, and `password`. Express.js users who want to make `givenName` and/or `surname` optional, or to add new required fields (like `username`), can refer to [Stormpath Express Library Guide](https://docs.stormpath.com/nodejs/express/latest/registration.html). @@ -381,6 +382,7 @@ By default, the registration form will render these four fields, and they will b

+

@@ -492,6 +494,7 @@ Customize the form by providing your own markup.

+

@@ -556,6 +559,7 @@ Customize the form by providing your own markup.

+

@@ -669,6 +673,7 @@ Customize the form by providing your own markup.

+

``` diff --git a/src/components/LoginForm.js b/src/components/LoginForm.js index 1627865..04cdf2d 100644 --- a/src/components/LoginForm.js +++ b/src/components/LoginForm.js @@ -155,6 +155,16 @@ export default class LoginForm extends React.Component { isFormProcessing: false }; + _reset() { + this.setState({ + fields: { + username: '', + password: '', + }, + errorMessage: null, + }); + } + onFormSubmit(e) { e.preventDefault(); e.persist(); @@ -293,7 +303,7 @@ export default class LoginForm extends React.Component { return (
- {utils.makeForm(this, this._mapFormFieldHandler.bind(this), this._spIfHandler.bind(this), this._spBindHandler.bind(this))} + {utils.makeForm(this, this._mapFormFieldHandler.bind(this), this._spIfHandler.bind(this), this._spBindHandler.bind(this), this._reset.bind(this))}
); } else { diff --git a/src/components/RegistrationForm.js b/src/components/RegistrationForm.js index 524831b..345d3aa 100644 --- a/src/components/RegistrationForm.js +++ b/src/components/RegistrationForm.js @@ -187,6 +187,18 @@ export default class RegistrationForm extends React.Component { isAccountEnabled: false }; + _reset() { + this.setState({ + fields: { + givenName: '', + surname: '', + email: '', + password: '' + }, + errorMessage: null, + }); + } + onFormSubmit(e) { e.preventDefault(); e.persist(); @@ -380,7 +392,7 @@ export default class RegistrationForm extends React.Component { return (
- {utils.makeForm(this, this._mapFormFieldHandler.bind(this), this._spIfHandler.bind(this), this._spBindHandler.bind(this))} + {utils.makeForm(this, this._mapFormFieldHandler.bind(this), this._spIfHandler.bind(this), this._spBindHandler.bind(this), this._reset.bind(this))}
); } else { diff --git a/src/components/ResetPasswordForm.js b/src/components/ResetPasswordForm.js index dc98c6d..781a678 100644 --- a/src/components/ResetPasswordForm.js +++ b/src/components/ResetPasswordForm.js @@ -53,6 +53,15 @@ export default class ResetPasswordForm extends React.Component { isFormSent: false }; + _reset() { + this.setState({ + fields: { + email: '', + }, + errorMessage: null, + }); + } + onFormSubmit(e) { e.preventDefault(); e.persist(); @@ -154,7 +163,7 @@ export default class ResetPasswordForm extends React.Component { return (
- {utils.makeForm(this, this._mapFormFieldHandler.bind(this), this._spIfHandler.bind(this), this._spBindHandler.bind(this))} + {utils.makeForm(this, this._mapFormFieldHandler.bind(this), this._spIfHandler.bind(this), this._spBindHandler.bind(this), this._reset.bind(this))}
); } else { diff --git a/src/components/UserProfileForm.js b/src/components/UserProfileForm.js index 4cb2822..9aa31aa 100644 --- a/src/components/UserProfileForm.js +++ b/src/components/UserProfileForm.js @@ -91,6 +91,13 @@ export default class UserProfileForm extends React.Component { isFormSuccessful: false }; + _reset() { + this.setState({ + fields: {}, + errorMessage: null, + }); + } + _updateSessionData = (data, callback) => { var sessionStore = context.sessionStore; @@ -218,7 +225,7 @@ export default class UserProfileForm extends React.Component { return (
- {utils.makeForm(this, this._mapFormFieldHandler.bind(this), this._spIfHandler.bind(this), this._spBindHandler.bind(this))} + {utils.makeForm(this, this._mapFormFieldHandler.bind(this), this._spIfHandler.bind(this), this._spBindHandler.bind(this), this._reset.bind(this))}
); } else { diff --git a/src/utils.js b/src/utils.js index db85aab..0852ec2 100644 --- a/src/utils.js +++ b/src/utils.js @@ -215,7 +215,7 @@ class Utils { } } - makeForm(source, fieldMapFn, spIfFn, spBindFn) { + makeForm(source, fieldMapFn, spIfFn, spBindFn, spResetErrorsFn) { var root = React.cloneElement(
, {}, source.props.children); var fieldMap = this.getFormFieldMap(root, fieldMapFn); @@ -259,6 +259,31 @@ class Utils { element = newElement; } } + + if (spResetErrorsFn) { + var spResetErrors = this.takeProp(element.props, 'spResetErrors', 'data-spResetErrors'); + + if (spResetErrors) { + const oldHandler = element.props.onClick + ? element.props.onClick + : null; + + element = React.createElement( + element.type, + { + ...this.excludeProps(['spResetErrors', 'data-spResetErrors'], element.props), + onClick(...args) { + spResetErrorsFn(...args); + + if (oldHandler) { + oldHandler(...args); + } + } + }, + element.props.children + ); + } + } } return element; };