diff --git a/src/app.test.js b/src/app.test.js index e27cac46..a06a30bd 100644 --- a/src/app.test.js +++ b/src/app.test.js @@ -43,7 +43,7 @@ describe('Application', () => { '/u/1234': 'Profile page with display name: 1234', '/login': 'Login', '/signup': 'Sign up', - '/recover-password': 'Request new password', + '/recover-password': 'Request a new password', '/this-url-should-not-be-found': 'Page not found', '/reset-password?t=token&e=email': 'Reset password', }; diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.duck.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.duck.js index 7a47eeee..a55b48b9 100644 --- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.duck.js +++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.duck.js @@ -29,7 +29,12 @@ export default function reducer(state = initialState, action = {}) { case RECOVERY_SUCCESS: return { ...state, submittedEmail: payload.email, recoveryInProgress: false }; case RECOVERY_ERROR: - return { ...state, recoveryInProgress: false, recoveryError: payload }; + return { + ...state, + recoveryInProgress: false, + recoveryError: payload.error, + submittedEmail: payload.email, + }; case RETYPE_EMAIL: return { ...state, submittedEmail: null, initialEmail: state.submittedEmail }; case CLEAR_RECOVERY_ERROR: @@ -43,9 +48,9 @@ export default function reducer(state = initialState, action = {}) { export const recoveryRequest = () => ({ type: RECOVERY_REQUEST }); export const recoverySuccess = email => ({ type: RECOVERY_SUCCESS, payload: { email } }); -export const recoveryError = error => ({ +export const recoveryError = (error, email) => ({ type: RECOVERY_ERROR, - payload: error, + payload: { error, email }, error: true, }); export const retypeEmail = () => ({ type: RETYPE_EMAIL }); @@ -60,5 +65,5 @@ export const recoverPassword = email => return sdk.passwordReset .request({ email }) .then(() => dispatch(recoverySuccess(email))) - .catch(e => dispatch(recoveryError(e))); + .catch(error => dispatch(recoveryError(error, email))); }; diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js index 19c0744d..bf0c3808 100644 --- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js +++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js @@ -2,7 +2,7 @@ import React, { PropTypes } from 'react'; import { compose } from 'redux'; import { connect } from 'react-redux'; import { withRouter } from 'react-router-dom'; -import { FormattedMessage } from 'react-intl'; +import { FormattedMessage, injectIntl, intlShape } from 'react-intl'; import * as propTypes from '../../util/propTypes'; import { sendVerificationEmail } from '../../ducks/user.duck'; import { logout, authenticationInProgress } from '../../ducks/Auth.duck'; @@ -13,15 +13,6 @@ import { PasswordRecoveryForm } from '../../containers'; import css from './PasswordRecoveryPage.css'; -const recoveryMessage = submittedEmail => { - if (submittedEmail) { - const email = {submittedEmail}; - return ; - } else { - return ; - } -}; - export const PasswordRecoveryPageComponent = props => { const { authInfoError, @@ -45,13 +36,12 @@ export const PasswordRecoveryPageComponent = props => { onChange, onSubmitEmail, onRetypeEmail, + intl, } = props; - const title = submittedEmail - ? - : ; - - const message = recoveryMessage(submittedEmail); + const title = intl.formatMessage({ + id: 'PasswordRecoveryPage.title', + }); const resendEmailLink = ( onSubmitEmail(submittedEmail)}> @@ -65,23 +55,88 @@ export const PasswordRecoveryPageComponent = props => { ); - const emailSubmittedLinks = ( -
-

- + const submitEmailContent = ( +

+ +

+ +

+

+ onSubmitEmail(values.email)} + initialValues={{ email: initialEmail }} + recoveryError={recoveryError} + /> +
+ ); + + const email = {submittedEmail}; + const emailSubmittedContent = ( +
+ +

+ +

+

+

-

- +

+

+ +

+

+ +

+
+
+ ); + + const emailNotVerifiedContent = ( +
+ +

+ +

+

+ +

+

+

); + const genericErrorContent = ( +
+ +

+ +

+

+ +

+
+ ); + + let content; + if (recoveryError && recoveryError.status === 409) { + content = emailNotVerifiedContent; + } else if (recoveryError && recoveryError.status === 404) { + content = submitEmailContent; + } else if (recoveryError) { + content = genericErrorContent; + } else if (submittedEmail) { + content = emailSubmittedContent; + } else { + content = submitEmailContent; + } + return ( - + { sendVerificationEmailError={sendVerificationEmailError} />
-
- -

{title}

-

{message}

- {submittedEmail - ? emailSubmittedLinks - : onSubmitEmail(values.email)} - initialValues={{ email: initialEmail }} - recoveryError={recoveryError} - />} -
+ {content}
@@ -152,6 +195,9 @@ PasswordRecoveryPageComponent.propTypes = { onSubmitEmail: func.isRequired, onRetypeEmail: func.isRequired, + // from injectIntl + intl: intlShape.isRequired, + // from withRouter history: shape({ push: func.isRequired, @@ -207,8 +253,10 @@ const mapDispatchToProps = dispatch => ({ onRetypeEmail: () => dispatch(retypeEmail()), }); -const PasswordRecoveryPage = compose(connect(mapStateToProps, mapDispatchToProps), withRouter)( - PasswordRecoveryPageComponent -); +const PasswordRecoveryPage = compose( + connect(mapStateToProps, mapDispatchToProps), + withRouter, + injectIntl +)(PasswordRecoveryPageComponent); export default PasswordRecoveryPage; diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.test.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.test.js index 036752f7..3c650b66 100644 --- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.test.js +++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.test.js @@ -1,5 +1,6 @@ import React from 'react'; import { renderShallow } from '../../util/test-helpers'; +import { fakeIntl } from '../../util/test-data'; import { PasswordRecoveryPageComponent } from './PasswordRecoveryPage'; const noop = () => null; @@ -23,6 +24,7 @@ describe('ContactDetailsPage', () => { onChange={noop} onSubmitEmail={noop} onRetypeEmail={noop} + intl={fakeIntl} /> ); expect(tree).toMatchSnapshot(); diff --git a/src/containers/PasswordRecoveryPage/__snapshots__/PasswordRecoveryPage.test.js.snap b/src/containers/PasswordRecoveryPage/__snapshots__/PasswordRecoveryPage.test.js.snap index 6bbae359..1f0e0c37 100644 --- a/src/containers/PasswordRecoveryPage/__snapshots__/PasswordRecoveryPage.test.js.snap +++ b/src/containers/PasswordRecoveryPage/__snapshots__/PasswordRecoveryPage.test.js.snap @@ -2,7 +2,7 @@ exports[`ContactDetailsPage matches snapshot 1`] = ` + title="PasswordRecoveryPage.title">