diff --git a/docs/api.md b/docs/api.md index 12f4ac8..b35d660 100644 --- 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 ; + } +} +``` + +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 ; + } +} +``` + #### RegistrationForm Renders a registration form. @@ -355,6 +392,43 @@ class RegistrationPage extends React.Component { return ; } } + +``` +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 ; + } +} +``` + +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 ; + } +} ``` #### ResetPasswordForm diff --git a/src/components/LoginForm.js b/src/components/LoginForm.js index 66c4783..ee69d52 100644 --- 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 (
diff --git a/src/components/RegistrationForm.js b/src/components/RegistrationForm.js index 5976ddb..41d2166 100644 --- 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 (