Merge pull request #112 from stormpath/feature-form-events

Add support for Registration and Login form events
stormpath · Aug 18, 2016 · 62ec0ba · 62ec0ba
2 parents 474d2c6 + d527d3d
commit 62ec0ba
Show file tree

Hide file tree

Showing 3 changed files with 174 additions and 31 deletions.
diff --git a/docs/api.md b/docs/api.md
@@ -269,6 +269,43 @@ class LoginPage extends React.Component {
 }
 ```
 
+Use the `onSubmitError()` event to perform an action when the form submits erroneously.
+
+```javascript
+class LoginPage extends React.Component {
+  onFormSubmitError(e, next) {
+    // e will contain values about the event.
+    console.log('Form submitted erroneously', e.data, e.error);
+
+    // The function next() must be called in order for the form to continue processing.
+    // Override with a new error by calling next(newError).
+    next();
+  }
+
+  render() {
+    return <LoginForm onSubmitError={this.onFormSubmitError.bind(this)} />;
+  }
+}
+```
+
+Use the `onSubmitSuccess()` event to perform an action when the form submits successfully.
+
+```javascript
+class LoginPage extends React.Component {
+  onFormSubmitSuccess(e, next) {
+    // e will contain values about the event.
+    console.log('Form submitted succesfully', e.data, e.result);
+
+    // The function next() must be called in order for the form to continue processing.
+    next();
+  }
+
+  render() {
+    return <LoginForm onSubmitSuccess={this.onFormSubmitSuccess.bind(this)} />;
+  }
+}
+```
+
 #### RegistrationForm
 
 Renders a registration form.
@@ -355,6 +392,43 @@ class RegistrationPage extends React.Component {
     return <RegistrationForm onSubmit={this.onFormSubmit.bind(this)} />;
   }
 }
+
+```
+Use the `onSubmitError()` event to perform an action when the form submits erroneously.
+
+```javascript
+class RegistrationPage extends React.Component {
+  onFormSubmitError(e, next) {
+    // e will contain values about the event.
+    console.log('Form submitted erroneously', e.data, e.error);
+
+    // The function next() must be called in order for the form to continue processing.
+    // Override with a new error by calling next(newError).
+    next();
+  }
+
+  render() {
+    return <RegistrationForm onSubmitError={this.onFormSubmitError.bind(this)} />;
+  }
+}
+```
+
+Use the `onSubmitSuccess()` event to perform an action when the form submits successfully.
+
+```javascript
+class RegistrationPage extends React.Component {
+  onFormSubmitSuccess(e, next) {
+    // e will contain values about the event.
+    console.log('Form submitted succesfully', e.data, e.result);
+
+    // The function next() must be called in order for the form to continue processing.
+    next();
+  }
+
+  render() {
+    return <RegistrationForm onSubmitSuccess={this.onFormSubmitSuccess.bind(this)} />;
+  }
+}
 ```
 
 #### ResetPasswordForm

diff --git a/src/components/LoginForm.js b/src/components/LoginForm.js
@@ -156,13 +156,26 @@ export default class LoginForm extends React.Component {
     e.persist();
 
     let primaryRedirectTo = this.props.redirectTo;
+    let onSubmitSuccess = this.props.onSubmitSuccess;
+    let onSubmitError = this.props.onSubmitError;
+
+    let setErrorState = (recentError, newError) => {
+      this.setState({
+        isFormProcessing: false,
+        errorMessage: (newError || recentError).message
+      });
+    };
 
     var next = (err, data) => {
       if (err) {
-        return this.setState({
-          isFormProcessing: false,
-          errorMessage: err.message
-        });
+        if (onSubmitError) {
+          return onSubmitError({
+            data: data,
+            error: err
+          }, setErrorState.bind(this, err));
+        }
+
+        return setErrorState(err);
       }
 
       // If the user didn't specify any data,
@@ -174,13 +187,26 @@ export default class LoginForm extends React.Component {
         password: data.password
       }, (err, result) => {
         if (err) {
-          return this.setState({
-            isFormProcessing: false,
-            errorMessage: err.message
-          });
+          if (onSubmitError) {
+            return onSubmitError({
+              data: data,
+              error: err
+            }, setErrorState.bind(this, err));
+          }
+
+          return setErrorState(err);
+        }
+
+        let performRedirect = this._performRedirect.bind(this, primaryRedirectTo);
+
+        if (onSubmitSuccess) {
+          return onSubmitSuccess({
+            data: data,
+            result: result
+          }, performRedirect);
         }
 
-        this._performRedirect(primaryRedirectTo);
+        performRedirect();
       });
     };
 
@@ -251,7 +277,7 @@ export default class LoginForm extends React.Component {
 
   render() {
     if (this.props.children) {
-      let selectedProps = utils.excludeProps(['redirectTo', 'hideSocial', 'onSubmit', 'children'], this.props);
+      let selectedProps = utils.excludeProps(['redirectTo', 'hideSocial', 'onSubmit', 'onSubmitError', 'onSubmitSuccess', 'children'], this.props);
 
       return (
         <form onSubmit={this.onFormSubmit.bind(this)} {...selectedProps}>

diff --git a/src/components/RegistrationForm.js b/src/components/RegistrationForm.js
@@ -188,13 +188,27 @@ export default class RegistrationForm extends React.Component {
     e.persist();
 
     let primaryRedirectTo = this.props.redirectTo;
+    let onSubmitSuccess = this.props.onSubmitSuccess;
+    let onSubmitError = this.props.onSubmitError;
 
-    var next = (err, data) => {
+    let setErrorState = (recentError, newError) => {
+      this.setState({
+        isFormProcessing: false,
+        isAccountCreated: false,
+        errorMessage: (newError || recentError).message
+      });
+    };
+
+    let next = (err, data) => {
       if (err) {
-        return this.setState({
-          isFormProcessing: false,
-          errorMessage: err.message
-        });
+        if (onSubmitError) {
+          return onSubmitError({
+            data: data,
+            error: err
+          }, setErrorState.bind(this, err));
+        }
+
+        return setErrorState(err);
       }
 
       // If the user didn't specify any data,
@@ -203,31 +217,60 @@ export default class RegistrationForm extends React.Component {
 
       UserActions.register(data, (err, result) => {
         if (err) {
-          this.setState({
-            isFormProcessing: false,
-            errorMessage: err.message
-          });
+          if (onSubmitError) {
+            return onSubmitError({
+              data: data,
+              result: result,
+              error: err
+            }, setErrorState.bind(this, err));
+          }
+
+          setErrorState(err);
         } else if (result.status === 'ENABLED') {
           UserActions.login({
             login: data.email || data.username,
             password: data.password
           }, (err) => {
             if (err) {
-              return this.setState({
-                isFormProcessing: false,
-                isAccountCreated: false,
-                errorMessage: err.message
-              });
+              if (onSubmitError) {
+                return onSubmitError({
+                  data: data,
+                  result: result,
+                  error: err
+                }, setErrorState.bind(this, err));
+              }
+
+              return setErrorState(err);
             }
 
-            this._performRedirect(primaryRedirectTo);
+            let performRedirect = this._performRedirect.bind(this, primaryRedirectTo);
+
+            if (onSubmitSuccess) {
+              return onSubmitSuccess({
+                data: data,
+                result: result
+              }, performRedirect);
+            }
+
+            performRedirect();
           });
         } else {
-          this.setState({
-            isFormProcessing: false,
-            isAccountCreated: true,
-            isAccountEnabled: false
-          });
+          let setSuccessState = () => {
+            this.setState({
+              isFormProcessing: false,
+              isAccountCreated: true,
+              isAccountEnabled: false
+            });
+          };
+
+          if (onSubmitSuccess) {
+            return onSubmitSuccess({
+              data: data,
+              result: result
+            }, setSuccessState);
+          }
+
+          setSuccessState();
         }
       });
     };
@@ -323,7 +366,7 @@ export default class RegistrationForm extends React.Component {
 
   render() {
     if (this.props.children) {
-      var selectedProps = utils.excludeProps(['redirectTo', 'hideSocial', 'onSubmit', 'children'], this.props);
+      var selectedProps = utils.excludeProps(['redirectTo', 'hideSocial', 'onSubmit', 'onSubmitError', 'onSubmitSuccess', 'children'], this.props);
 
       return (
         <form onSubmit={this.onFormSubmit.bind(this)} {...selectedProps}>