Add ability to reset forms to initial state

docs/api.md

@@ -259,6 +259,7 @@ Customize the form by providing your own markup.
   </p>
   <p>
     <input type="submit" value="Login" />
+    <button type="button" spResetErrors>Reset</button>
   </p>
 </LoginForm>
 ```
@@ -349,7 +350,7 @@ Specify `hideSocial` to hide the ability to register with a social provider.
 <RegistrationForm hideSocial={true} />
 ```
 
-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
     </p>
     <p>
       <input type="submit" value="Register" />
+      <button type="button" spResetErrors>Reset</button>
     </p>
   </div>
 </RegistrationForm>
@@ -492,6 +494,7 @@ Customize the form by providing your own markup.
     </p>
     <p>
       <input type="submit" value="Request Password reset" />
+      <button type="button" spResetErrors>Reset</button>
     </p>
   </div>
 </ResetPasswordForm>
@@ -556,6 +559,7 @@ Customize the form by providing your own markup.
     </p>
     <p>
       <input type="submit" value="Change Password" />
+      <button type="button" spResetErrors>Reset</button>
     </p>
   </div>
 </ChangePasswordForm>
@@ -669,6 +673,7 @@ Customize the form by providing your own markup.
   </p>
   <p>
     <input type="submit" value="Update" />
+    <button type="button" spResetErrors>Reset</button>
   </p>
 </UserProfileForm>
 ```

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 (
         <form onSubmit={this.onFormSubmit.bind(this)} {...selectedProps}>
-          {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))}
         </form>
       );
     } else {

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 (
         <form onSubmit={this.onFormSubmit.bind(this)} {...selectedProps}>
-          {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))}
         </form>
       );
     } else {

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 (
         <form onSubmit={this.onFormSubmit.bind(this)} {...selectedProps}>
-          {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))}
         </form>
       );
     } else {

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 (
         <form onSubmit={this._onFormSubmit.bind(this)} {...selectedProps}>
-          {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))}
         </form>
       );
     } else {

src/utils.js

@@ -215,7 +215,7 @@ class Utils {
     }
   }
 
-  makeForm(source, fieldMapFn, spIfFn, spBindFn) {
+  makeForm(source, fieldMapFn, spIfFn, spBindFn, spResetErrorsFn) {
     var root = React.cloneElement(<div />, {}, 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;
     };