From 384e83fe3954c33fb7a8e54cfaae6ce2a96596d0 Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Thu, 7 Sep 2017 10:07:35 +0300
Subject: [PATCH 01/22] Rename files

PasswordForgottenPage to PasswordRecoveryPage
PasswordForgottenForm to PasswordRecoveryForm
---
 .../PasswordRecoveryForm.example.js}                              | 0
 .../PasswordRecoveryForm.js}                                      | 0
 .../PasswordRecoveryForm.test.js}                                 | 0
 .../__snapshots__/PasswordRecoveryForm.test.js.snap}              | 0
 .../PasswordRecoveryPage.js}                                      | 0
 .../PasswordRecoveryPage.test.js}                                 | 0
 .../__snapshots__/PasswordRecoveryPage.test.js.snap}              | 0
 7 files changed, 0 insertions(+), 0 deletions(-)
 rename src/containers/{PasswordForgottenForm/PasswordForgottenForm.example.js => PasswordRecoveryForm/PasswordRecoveryForm.example.js} (100%)
 rename src/containers/{PasswordForgottenForm/PasswordForgottenForm.js => PasswordRecoveryForm/PasswordRecoveryForm.js} (100%)
 rename src/containers/{PasswordForgottenForm/PasswordForgottenForm.test.js => PasswordRecoveryForm/PasswordRecoveryForm.test.js} (100%)
 rename src/containers/{PasswordForgottenForm/__snapshots__/PasswordForgottenForm.test.js.snap => PasswordRecoveryForm/__snapshots__/PasswordRecoveryForm.test.js.snap} (100%)
 rename src/containers/{PasswordForgottenPage/PasswordForgottenPage.js => PasswordRecoveryPage/PasswordRecoveryPage.js} (100%)
 rename src/containers/{PasswordForgottenPage/PasswordForgottenPage.test.js => PasswordRecoveryPage/PasswordRecoveryPage.test.js} (100%)
 rename src/containers/{PasswordForgottenPage/__snapshots__/PasswordForgottenPage.test.js.snap => PasswordRecoveryPage/__snapshots__/PasswordRecoveryPage.test.js.snap} (100%)

diff --git a/src/containers/PasswordForgottenForm/PasswordForgottenForm.example.js b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.example.js
similarity index 100%
rename from src/containers/PasswordForgottenForm/PasswordForgottenForm.example.js
rename to src/containers/PasswordRecoveryForm/PasswordRecoveryForm.example.js
diff --git a/src/containers/PasswordForgottenForm/PasswordForgottenForm.js b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js
similarity index 100%
rename from src/containers/PasswordForgottenForm/PasswordForgottenForm.js
rename to src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js
diff --git a/src/containers/PasswordForgottenForm/PasswordForgottenForm.test.js b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.test.js
similarity index 100%
rename from src/containers/PasswordForgottenForm/PasswordForgottenForm.test.js
rename to src/containers/PasswordRecoveryForm/PasswordRecoveryForm.test.js
diff --git a/src/containers/PasswordForgottenForm/__snapshots__/PasswordForgottenForm.test.js.snap b/src/containers/PasswordRecoveryForm/__snapshots__/PasswordRecoveryForm.test.js.snap
similarity index 100%
rename from src/containers/PasswordForgottenForm/__snapshots__/PasswordForgottenForm.test.js.snap
rename to src/containers/PasswordRecoveryForm/__snapshots__/PasswordRecoveryForm.test.js.snap
diff --git a/src/containers/PasswordForgottenPage/PasswordForgottenPage.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
similarity index 100%
rename from src/containers/PasswordForgottenPage/PasswordForgottenPage.js
rename to src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
diff --git a/src/containers/PasswordForgottenPage/PasswordForgottenPage.test.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.test.js
similarity index 100%
rename from src/containers/PasswordForgottenPage/PasswordForgottenPage.test.js
rename to src/containers/PasswordRecoveryPage/PasswordRecoveryPage.test.js
diff --git a/src/containers/PasswordForgottenPage/__snapshots__/PasswordForgottenPage.test.js.snap b/src/containers/PasswordRecoveryPage/__snapshots__/PasswordRecoveryPage.test.js.snap
similarity index 100%
rename from src/containers/PasswordForgottenPage/__snapshots__/PasswordForgottenPage.test.js.snap
rename to src/containers/PasswordRecoveryPage/__snapshots__/PasswordRecoveryPage.test.js.snap

From 0d6cd6a05e2fda2d69b36c51dfed29c28d460ede Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Thu, 7 Sep 2017 10:17:35 +0300
Subject: [PATCH 02/22] Update file references

---
 .../PasswordRecoveryForm.example.js              |  4 ++--
 .../PasswordRecoveryForm/PasswordRecoveryForm.js |  8 ++++----
 .../PasswordRecoveryForm.test.js                 |  6 +++---
 .../PasswordRecoveryForm.test.js.snap            |  2 +-
 .../PasswordRecoveryPage/PasswordRecoveryPage.js | 16 ++++++++--------
 .../PasswordRecoveryPage.test.js                 |  4 ++--
 src/containers/index.js                          |  8 ++++----
 src/examples.js                                  |  6 +++---
 src/routesConfiguration.js                       |  8 ++++----
 9 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.example.js b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.example.js
index 6b864451..9d4bb450 100644
--- a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.example.js
+++ b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.example.js
@@ -1,8 +1,8 @@
 /* eslint-disable no-console */
-import PasswordForgottenForm from './PasswordForgottenForm';
+import PasswordRecoveryForm from './PasswordRecoveryForm';
 
 export const Empty = {
-  component: PasswordForgottenForm,
+  component: PasswordRecoveryForm,
   props: {
     onSubmit(values) {
       console.log('submit forgotten password email:', values);
diff --git a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js
index ce137a6f..3641ed5d 100644
--- a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js
+++ b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form';
 import { Button } from '../../components';
 
-const PasswordForgottenForm = props => {
+const PasswordRecoveryForm = props => {
   const { handleSubmit, pristine, submitting } = props;
   return (
     <form onSubmit={handleSubmit}>
@@ -14,8 +14,8 @@ const PasswordForgottenForm = props => {
   );
 };
 
-PasswordForgottenForm.propTypes = { ...formPropTypes };
+PasswordRecoveryForm.propTypes = { ...formPropTypes };
 
-const defaultFormName = 'PasswordForgottenForm';
+const defaultFormName = 'PasswordRecoveryForm';
 
-export default reduxForm({ form: defaultFormName })(PasswordForgottenForm);
+export default reduxForm({ form: defaultFormName })(PasswordRecoveryForm);
diff --git a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.test.js b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.test.js
index 64f14cd0..fabf9664 100644
--- a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.test.js
+++ b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.test.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import { renderDeep } from '../../util/test-helpers';
-import PasswordForgottenForm from './PasswordForgottenForm';
+import PasswordRecoveryForm from './PasswordRecoveryForm';
 
-describe('PasswordForgottenForm', () => {
+describe('PasswordRecoveryForm', () => {
   it('matches snapshot', () => {
-    const tree = renderDeep(<PasswordForgottenForm />);
+    const tree = renderDeep(<PasswordRecoveryForm />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/PasswordRecoveryForm/__snapshots__/PasswordRecoveryForm.test.js.snap b/src/containers/PasswordRecoveryForm/__snapshots__/PasswordRecoveryForm.test.js.snap
index abe77199..c73fc2d0 100644
--- a/src/containers/PasswordRecoveryForm/__snapshots__/PasswordRecoveryForm.test.js.snap
+++ b/src/containers/PasswordRecoveryForm/__snapshots__/PasswordRecoveryForm.test.js.snap
@@ -1,4 +1,4 @@
-exports[`PasswordForgottenForm matches snapshot 1`] = `
+exports[`PasswordRecoveryForm matches snapshot 1`] = `
 <form
   onSubmit={[Function]}>
   <label
diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
index 6da79ab7..6578d073 100644
--- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
@@ -7,14 +7,14 @@ import { sendVerificationEmail } from '../../ducks/user.duck';
 import { logout, authenticationInProgress } from '../../ducks/Auth.duck';
 import { manageDisableScrolling, isScrollingDisabled } from '../../ducks/UI.duck';
 import { PageLayout, Topbar } from '../../components';
-import { PasswordForgottenForm } from '../../containers';
+import { PasswordRecoveryForm } from '../../containers';
 
 const sendPasswordResetEmail = values => {
   // eslint-disable-next-line no-console
   console.log('submit with values:', values);
 };
 
-export const PasswordForgottenPageComponent = props => {
+export const PasswordRecoveryPageComponent = props => {
   const {
     authInfoError,
     authInProgress,
@@ -54,12 +54,12 @@ export const PasswordForgottenPageComponent = props => {
         sendVerificationEmailInProgress={sendVerificationEmailInProgress}
         sendVerificationEmailError={sendVerificationEmailError}
       />
-      <PasswordForgottenForm onSubmit={sendPasswordResetEmail} />
+      <PasswordRecoveryForm onSubmit={sendPasswordResetEmail} />
     </PageLayout>
   );
 };
 
-PasswordForgottenPageComponent.defaultProps = {
+PasswordRecoveryPageComponent.defaultProps = {
   authInfoError: null,
   currentUser: null,
   currentUserHasOrders: null,
@@ -70,7 +70,7 @@ PasswordForgottenPageComponent.defaultProps = {
 
 const { bool, func, instanceOf, number, object, shape } = PropTypes;
 
-PasswordForgottenPageComponent.propTypes = {
+PasswordRecoveryPageComponent.propTypes = {
   authInfoError: instanceOf(Error),
   authInProgress: bool.isRequired,
   currentUser: propTypes.currentUser,
@@ -126,8 +126,8 @@ const mapDispatchToProps = dispatch => ({
   onResendVerificationEmail: () => dispatch(sendVerificationEmail()),
 });
 
-const PasswordForgottenPage = compose(connect(mapStateToProps, mapDispatchToProps), withRouter)(
-  PasswordForgottenPageComponent
+const PasswordRecoveryPage = compose(connect(mapStateToProps, mapDispatchToProps), withRouter)(
+  PasswordRecoveryPageComponent
 );
 
-export default PasswordForgottenPage;
+export default PasswordRecoveryPage;
diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.test.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.test.js
index dc2badb0..58b2abc6 100644
--- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.test.js
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.test.js
@@ -1,13 +1,13 @@
 import React from 'react';
 import { renderShallow } from '../../util/test-helpers';
-import { PasswordForgottenPageComponent } from './PasswordForgottenPage';
+import { PasswordRecoveryPageComponent } from './PasswordRecoveryPage';
 
 const noop = () => null;
 
 describe('ContactDetailsPage', () => {
   it('matches snapshot', () => {
     const tree = renderShallow(
-      <PasswordForgottenPageComponent
+      <PasswordRecoveryPageComponent
         params={{ displayName: 'my-shop' }}
         history={{ push: noop }}
         location={{ search: '' }}
diff --git a/src/containers/index.js b/src/containers/index.js
index 2ede665f..e12a506e 100644
--- a/src/containers/index.js
+++ b/src/containers/index.js
@@ -18,10 +18,10 @@ import LoginForm from './LoginForm/LoginForm';
 import ManageListingsPage from './ManageListingsPage/ManageListingsPage';
 import NotFoundPage from './NotFoundPage/NotFoundPage';
 import OrderPage from './OrderPage/OrderPage';
-import PasswordForgottenForm from './PasswordForgottenForm/PasswordForgottenForm';
-import PasswordForgottenPage from './PasswordForgottenPage/PasswordForgottenPage';
 import PasswordResetForm from './PasswordResetForm/PasswordResetForm';
 import PasswordResetPage from './PasswordResetPage/PasswordResetPage';
+import PasswordRecoveryForm from './PasswordRecoveryForm/PasswordRecoveryForm';
+import PasswordRecoveryPage from './PasswordRecoveryPage/PasswordRecoveryPage';
 import PayoutDetailsForm from './PayoutDetailsForm/PayoutDetailsForm';
 import PayoutPreferencesPage from './PayoutPreferencesPage/PayoutPreferencesPage';
 import ProfilePage from './ProfilePage/ProfilePage';
@@ -56,10 +56,10 @@ export {
   ManageListingsPage,
   NotFoundPage,
   OrderPage,
-  PasswordForgottenForm,
-  PasswordForgottenPage,
   PasswordResetForm,
   PasswordResetPage,
+  PasswordRecoveryForm,
+  PasswordRecoveryPage,
   PayoutDetailsForm,
   PayoutPreferencesPage,
   ProfilePage,
diff --git a/src/examples.js b/src/examples.js
index 5425c9cd..50727c19 100644
--- a/src/examples.js
+++ b/src/examples.js
@@ -42,9 +42,9 @@ import * as EditListingPhotosForm
 import * as EditListingPricingForm
   from './containers/EditListingPricingForm/EditListingPricingForm.example';
 import * as LoginForm from './containers/LoginForm/LoginForm.example';
-import * as PasswordForgottenForm
-  from './containers/PasswordForgottenForm/PasswordForgottenForm.example';
 import * as PasswordResetForm from './containers/PasswordResetForm/PasswordResetForm.example';
+import * as PasswordRecoveryForm
+  from './containers/PasswordRecoveryForm/PasswordRecoveryForm.example';
 import * as PayoutDetailsForm from './containers/PayoutDetailsForm/PayoutDetailsForm.example';
 import * as SignupForm from './containers/SignupForm/SignupForm.example';
 import * as StripePaymentForm from './containers/StripePaymentForm/StripePaymentForm.example';
@@ -78,8 +78,8 @@ export {
   ModalInMobile,
   NamedLink,
   PaginationLinks,
-  PasswordForgottenForm,
   PasswordResetForm,
+  PasswordRecoveryForm,
   PayoutDetailsForm,
   ResponsiveImage,
   SelectField,
diff --git a/src/routesConfiguration.js b/src/routesConfiguration.js
index 4cc74989..13a815d4 100644
--- a/src/routesConfiguration.js
+++ b/src/routesConfiguration.js
@@ -11,8 +11,8 @@ import {
   ManageListingsPage,
   NotFoundPage,
   OrderPage,
-  PasswordForgottenPage,
   PasswordResetPage,
+  PasswordRecoveryPage,
   PayoutPreferencesPage,
   ProfilePage,
   ProfileSettingsPage,
@@ -148,13 +148,13 @@ const routesConfiguration = [
     path: '/password',
     exact: true,
     name: 'PasswordPage',
-    component: props => <PasswordForgottenPage {...props} />,
+    component: props => <PasswordRecoveryPage {...props} />,
   },
   {
     path: '/password/forgotten',
     exact: true,
-    name: 'PasswordForgottenPage',
-    component: props => <PasswordForgottenPage {...props} />,
+    name: 'PasswordRecoveryPage',
+    component: props => <PasswordRecoveryPage {...props} />,
   },
   {
     path: '/inbox',

From 3109a14d693dbd08aaf4d21516b09fb0580358d3 Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Thu, 7 Sep 2017 10:31:17 +0300
Subject: [PATCH 03/22] Change password recovery route

---
 src/app.test.js            | 3 +--
 src/routesConfiguration.js | 8 +-------
 2 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/src/app.test.js b/src/app.test.js
index 29df13af..b02db9ff 100644
--- a/src/app.test.js
+++ b/src/app.test.js
@@ -43,8 +43,7 @@ describe('Application', () => {
       '/u/1234': 'Profile page with display name: 1234',
       '/login': 'Login',
       '/signup': 'Sign up',
-      '/password': 'Request new password',
-      '/password/forgotten': 'Request new password',
+      '/recover_password': 'Request new password',
       '/this-url-should-not-be-found': 'Page not found',
       '/reset-password?t=token&e=email': 'Reset password',
     };
diff --git a/src/routesConfiguration.js b/src/routesConfiguration.js
index 13a815d4..052b28f5 100644
--- a/src/routesConfiguration.js
+++ b/src/routesConfiguration.js
@@ -145,13 +145,7 @@ const routesConfiguration = [
     component: props => <AuthenticationPage {...props} tab="signup" />,
   },
   {
-    path: '/password',
-    exact: true,
-    name: 'PasswordPage',
-    component: props => <PasswordRecoveryPage {...props} />,
-  },
-  {
-    path: '/password/forgotten',
+    path: '/recover_password',
     exact: true,
     name: 'PasswordRecoveryPage',
     component: props => <PasswordRecoveryPage {...props} />,

From 56244affb19e78f41117074beff2fb29eb78431c Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Thu, 7 Sep 2017 11:34:52 +0300
Subject: [PATCH 04/22] Add password forgotten link

---
 src/containers/LoginForm/LoginForm.css        | 20 ++++++++++++-------
 src/containers/LoginForm/LoginForm.js         | 11 +++++++++-
 src/containers/LoginForm/LoginForm.test.js    | 10 +++++++++-
 .../__snapshots__/LoginForm.test.js.snap      | 20 +++++++++++++++++++
 src/translations/en.json                      |  2 ++
 5 files changed, 54 insertions(+), 9 deletions(-)

diff --git a/src/containers/LoginForm/LoginForm.css b/src/containers/LoginForm/LoginForm.css
index 1b17d7aa..98c11d52 100644
--- a/src/containers/LoginForm/LoginForm.css
+++ b/src/containers/LoginForm/LoginForm.css
@@ -10,17 +10,23 @@
 
 .password {
   margin-top: 24px;
+  margin-bottom: 24px;
 
   @media (--viewportMedium) {
     margin-top: 30px;
   }
 }
 
-.button {
-  margin-top: 24px;
-  align-self: stretch;
-
-  @media (--viewportMedium) {
-    margin-top: 72px;
-  }
+.bottomWrapper {
+  margin-top: auto;
+  text-align: center;
+}
+
+.recoveryLink {
+  @apply --marketplaceH5FontStyles;
+  color: var(--matterColor);
+}
+
+.recoveryLinkHelp {
+  color: var(--matterColorAnti);
 }
diff --git a/src/containers/LoginForm/LoginForm.js b/src/containers/LoginForm/LoginForm.js
index 6f48781b..3699ddc4 100644
--- a/src/containers/LoginForm/LoginForm.js
+++ b/src/containers/LoginForm/LoginForm.js
@@ -3,7 +3,7 @@ import { compose } from 'redux';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { reduxForm, propTypes as formPropTypes } from 'redux-form';
 import classNames from 'classnames';
-import { Button, TextInputField } from '../../components';
+import { Button, TextInputField, NamedLink } from '../../components';
 import * as validators from '../../util/validators';
 
 import css from './LoginForm.css';
@@ -68,6 +68,15 @@ const LoginFormComponent = props => {
           validate={passwordRequired}
         />
       </div>
+      <p className={css.bottomWrapper}>
+        <NamedLink name="PasswordRecoveryPage" className={css.recoveryLink}>
+          <FormattedMessage id="LoginForm.forgotPassword" />
+          {' '}
+          <span className={css.recoveryLinkHelp}>
+            <FormattedMessage id="LoginForm.forgotPasswordHelp" />
+          </span>
+        </NamedLink>
+      </p>
       <Button className={css.button} type="submit" disabled={submitDisabled}>
         <FormattedMessage id="LoginForm.logIn" />
       </Button>
diff --git a/src/containers/LoginForm/LoginForm.test.js b/src/containers/LoginForm/LoginForm.test.js
index bffa3a3b..c7aa9db3 100644
--- a/src/containers/LoginForm/LoginForm.test.js
+++ b/src/containers/LoginForm/LoginForm.test.js
@@ -1,10 +1,18 @@
 import React from 'react';
 import { renderDeep } from '../../util/test-helpers';
+import { RoutesProvider } from '../../components';
+import routesConfiguration from '../../routesConfiguration';
+import { flattenRoutes } from '../../util/routes';
 import LoginForm from './LoginForm';
 
 describe('LoginForm', () => {
   it('matches snapshot', () => {
-    const tree = renderDeep(<LoginForm />);
+    const flattenedRoutes = flattenRoutes(routesConfiguration);
+    const tree = renderDeep(
+      <RoutesProvider flattenedRoutes={flattenedRoutes}>
+        <LoginForm />
+      </RoutesProvider>
+    );
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/LoginForm/__snapshots__/LoginForm.test.js.snap b/src/containers/LoginForm/__snapshots__/LoginForm.test.js.snap
index 72311e2c..8cc13dd7 100644
--- a/src/containers/LoginForm/__snapshots__/LoginForm.test.js.snap
+++ b/src/containers/LoginForm/__snapshots__/LoginForm.test.js.snap
@@ -42,6 +42,26 @@ exports[`LoginForm matches snapshot 1`] = `
         value="" />
     </div>
   </div>
+  <p
+    className={undefined}>
+    <a
+      className=""
+      href="/recover_password"
+      onClick={[Function]}
+      style={Object {}}
+      title={null}>
+      <span>
+        Forgot your password?
+      </span>
+       
+      <span
+        className={undefined}>
+        <span>
+          No problem.
+        </span>
+      </span>
+    </a>
+  </p>
   <button
     className=""
     disabled={true}
diff --git a/src/translations/en.json b/src/translations/en.json
index 01047086..ec80d238 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -166,7 +166,9 @@
   "LoginForm.emailLabel": "Email",
   "LoginForm.emailPlaceholder": "john.doe@example.com",
   "LoginForm.emailRequired": "This field is required",
+  "LoginForm.forgotPassword": "Forgot your password?",
   "LoginForm.logIn": "Log in",
+  "LoginForm.forgotPasswordHelp": "No problem.",
   "LoginForm.passwordLabel": "Password",
   "LoginForm.passwordPlaceholder": "Enter your password…",
   "LoginForm.passwordRequired": "This field is required",

From 41b5c04d569c5a3c9705756bbff99713e4d9e181 Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Thu, 7 Sep 2017 14:08:11 +0300
Subject: [PATCH 05/22] Add PasswordRecoveryForm

---
 .../PasswordRecoveryForm.css                  | 31 ++++++++++
 .../PasswordRecoveryForm.js                   | 59 ++++++++++++++++---
 .../PasswordRecoveryForm.test.js              | 10 ----
 .../PasswordRecoveryForm.test.js.snap         | 27 ---------
 src/translations/en.json                      |  6 ++
 5 files changed, 87 insertions(+), 46 deletions(-)
 create mode 100644 src/containers/PasswordRecoveryForm/PasswordRecoveryForm.css
 delete mode 100644 src/containers/PasswordRecoveryForm/PasswordRecoveryForm.test.js
 delete mode 100644 src/containers/PasswordRecoveryForm/__snapshots__/PasswordRecoveryForm.test.js.snap

diff --git a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.css b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.css
new file mode 100644
index 00000000..2a2f8cbd
--- /dev/null
+++ b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.css
@@ -0,0 +1,31 @@
+@import '../../marketplace.css';
+
+.root {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.email {
+  margin-top: 24px;
+  margin-bottom: 24px;
+
+  @media (--viewportMedium) {
+    margin-top: 30px;
+  }
+}
+
+.bottomWrapper {
+  margin-top: auto;
+}
+
+.goToLoginLink {
+  @apply --marketplaceH5FontStyles;
+  color: var(--matterColor);
+}
+
+.goToLoginLinkHelp {
+  color: var(--matterColorAnti);
+}
diff --git a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js
index 3641ed5d..2af5d948 100644
--- a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js
+++ b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js
@@ -1,21 +1,62 @@
 import React from 'react';
+import { compose } from 'redux';
+import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form';
-import { Button } from '../../components';
+import { PrimaryButton, TextInputField, NamedLink } from '../../components';
+import * as validators from '../../util/validators';
 
-const PasswordRecoveryForm = props => {
-  const { handleSubmit, pristine, submitting } = props;
+import css from './PasswordRecoveryForm.css';
+
+const PasswordRecoveryFormComponent = props => {
+  const { handleSubmit, pristine, submitting, form, intl } = props;
+
+  // email
+  const emailLabel = intl.formatMessage({
+    id: 'PasswordRecoveryForm.emailLabel',
+  });
+  const emailPlaceholder = intl.formatMessage({
+    id: 'PasswordRecoveryForm.emailPlaceholder',
+  });
+  const emailRequiredMessage = intl.formatMessage({
+    id: 'PasswordRecoveryForm.emailRequired',
+  });
+  const emailRequired = validators.required(emailRequiredMessage);
   return (
     <form onSubmit={handleSubmit}>
-      <label htmlFor="email">Email</label>
-      <Field name="email" component="input" type="email" />
-      <p>We will send you instructions to your email.</p>
-      <Button type="submit" disabled={pristine || submitting}>Send</Button>
+      <TextInputField
+        className={css.email}
+        type="email"
+        name="email"
+        id={`${form}.email`}
+        label={emailLabel}
+        placeholder={emailPlaceholder}
+        validate={emailRequired}
+      />
+      <p className={css.bottomWrapper}>
+        <NamedLink name="LoginPage" className={css.goToLoginLink}>
+          <span className={css.goToLoginLinkHelp}>
+            <FormattedMessage id="PasswordRecoveryForm.goToLoginHelp" />
+          </span>
+          {' '}
+          <FormattedMessage id="PasswordRecoveryForm.goToLogin" />
+        </NamedLink>
+      </p>
+      <PrimaryButton type="submit" disabled={pristine || submitting}>
+        <FormattedMessage id="PasswordRecoveryForm.sendInstructions" />
+      </PrimaryButton>
     </form>
   );
 };
 
-PasswordRecoveryForm.propTypes = { ...formPropTypes };
+PasswordRecoveryFormComponent.propTypes = {
+  ...formPropTypes,
+  intl: intlShape.isRequired,
+};
 
 const defaultFormName = 'PasswordRecoveryForm';
 
-export default reduxForm({ form: defaultFormName })(PasswordRecoveryForm);
+const PasswordRecoveryForm = compose(reduxForm({ form: defaultFormName }), injectIntl)(
+  PasswordRecoveryFormComponent
+);
+
+export default PasswordRecoveryForm;
diff --git a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.test.js b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.test.js
deleted file mode 100644
index fabf9664..00000000
--- a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.test.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import { renderDeep } from '../../util/test-helpers';
-import PasswordRecoveryForm from './PasswordRecoveryForm';
-
-describe('PasswordRecoveryForm', () => {
-  it('matches snapshot', () => {
-    const tree = renderDeep(<PasswordRecoveryForm />);
-    expect(tree).toMatchSnapshot();
-  });
-});
diff --git a/src/containers/PasswordRecoveryForm/__snapshots__/PasswordRecoveryForm.test.js.snap b/src/containers/PasswordRecoveryForm/__snapshots__/PasswordRecoveryForm.test.js.snap
deleted file mode 100644
index c73fc2d0..00000000
--- a/src/containers/PasswordRecoveryForm/__snapshots__/PasswordRecoveryForm.test.js.snap
+++ /dev/null
@@ -1,27 +0,0 @@
-exports[`PasswordRecoveryForm matches snapshot 1`] = `
-<form
-  onSubmit={[Function]}>
-  <label
-    htmlFor="email">
-    Email
-  </label>
-  <input
-    name="email"
-    onBlur={[Function]}
-    onChange={[Function]}
-    onDragStart={[Function]}
-    onDrop={[Function]}
-    onFocus={[Function]}
-    type="email"
-    value="" />
-  <p>
-    We will send you instructions to your email.
-  </p>
-  <button
-    className=""
-    disabled={true}
-    type="submit">
-    Send
-  </button>
-</form>
-`;
diff --git a/src/translations/en.json b/src/translations/en.json
index ec80d238..3fde7010 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -225,6 +225,12 @@
   "PasswordResetPage.passwordChangedHelpText": "Your password has been changed successfully.",
   "PasswordResetPage.resetFailed": "Reset failed. Please try again.",
   "PasswordResetPage.title": "Reset password",
+  "PasswordRecoveryForm.emailLabel": "Email",
+  "PasswordRecoveryForm.emailPlaceholder": "john.doe@example.com",
+  "PasswordRecoveryForm.emailRequired": "This field is required",
+  "PasswordRecoveryForm.goToLogin": "Go to log in.",
+  "PasswordRecoveryForm.goToLoginHelp": "Don't need the password recovery?",
+  "PasswordRecoveryForm.sendInstructions": "Send instructions",
   "PayoutDetailsForm.addressTitle": "Address",
   "PayoutDetailsForm.bankDetails": "Bank details",
   "PayoutDetailsForm.birthdayDatePlaceholder": "dd",

From 70fc98d78686587ec7b8c3d9cd9d6c944be50242 Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Thu, 7 Sep 2017 15:35:12 +0300
Subject: [PATCH 06/22] Add API call for password reset

---
 .../PasswordRecoveryPage.duck.js              | 55 +++++++++++++++++++
 .../PasswordRecoveryPage.js                   | 36 +++++++++---
 .../PasswordRecoveryPage.test.js              |  2 +
 .../PasswordRecoveryPage.test.js.snap         | 27 ++++++++-
 src/containers/reducers.js                    |  2 +
 5 files changed, 113 insertions(+), 9 deletions(-)
 create mode 100644 src/containers/PasswordRecoveryPage/PasswordRecoveryPage.duck.js

diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.duck.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.duck.js
new file mode 100644
index 00000000..8906166b
--- /dev/null
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.duck.js
@@ -0,0 +1,55 @@
+// ================ Action types ================ //
+
+export const RECOVERY_REQUEST = 'app/PasswordRecoveryPage/RECOVERY_REQUEST';
+export const RECOVERY_SUCCESS = 'app/PasswordRecoveryPage/RECOVERY_SUCCESS';
+export const RECOVERY_ERROR = 'app/PasswordRecoveryPage/RECOVERY_ERROR';
+
+// ================ Reducer ================ //
+
+const initialState = {
+  initialEmail: null,
+  submittedEmail: null,
+  recoveryError: null,
+  recoveryInProgress: false,
+};
+
+export default function reducer(state = initialState, action = {}) {
+  const { type, payload } = action;
+  switch (type) {
+    case RECOVERY_REQUEST:
+      return {
+        ...state,
+        submittedEmail: null,
+        recoveryInProgress: true,
+        recoveryError: null,
+      };
+    case RECOVERY_SUCCESS:
+      return { ...state, submittedEmail: payload.email, recoveryInProgress: false };
+    case RECOVERY_ERROR:
+      return { ...state, recoveryInProgress: false, recoveryError: payload };
+    default:
+      return state;
+  }
+}
+
+// ================ Action creators ================ //
+
+export const recoveryRequest = () => ({ type: RECOVERY_REQUEST });
+export const recoverySuccess = email => ({ type: RECOVERY_SUCCESS, payload: { email } });
+export const recoveryError = error => ({
+  type: RECOVERY_ERROR,
+  payload: error,
+  error: true,
+});
+
+// ================ Thunks ================ //
+
+export const recoverPassword = email =>
+  (dispatch, getState, sdk) => {
+    dispatch(recoveryRequest());
+
+    return sdk.passwordReset
+      .request({ email })
+      .then(() => dispatch(recoverySuccess(email)))
+      .catch(e => dispatch(recoveryError(e)));
+  };
diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
index 6578d073..858c3709 100644
--- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
@@ -6,14 +6,10 @@ import * as propTypes from '../../util/propTypes';
 import { sendVerificationEmail } from '../../ducks/user.duck';
 import { logout, authenticationInProgress } from '../../ducks/Auth.duck';
 import { manageDisableScrolling, isScrollingDisabled } from '../../ducks/UI.duck';
+import { recoverPassword } from './PasswordRecoveryPage.duck';
 import { PageLayout, Topbar } from '../../components';
 import { PasswordRecoveryForm } from '../../containers';
 
-const sendPasswordResetEmail = values => {
-  // eslint-disable-next-line no-console
-  console.log('submit with values:', values);
-};
-
 export const PasswordRecoveryPageComponent = props => {
   const {
     authInfoError,
@@ -31,6 +27,11 @@ export const PasswordRecoveryPageComponent = props => {
     sendVerificationEmailInProgress,
     sendVerificationEmailError,
     onResendVerificationEmail,
+    initialEmail,
+    submittedEmail,
+    recoveryInProgress,
+    recoveryError,
+    onSubmitEmail,
   } = props;
 
   return (
@@ -54,7 +55,7 @@ export const PasswordRecoveryPageComponent = props => {
         sendVerificationEmailInProgress={sendVerificationEmailInProgress}
         sendVerificationEmailError={sendVerificationEmailError}
       />
-      <PasswordRecoveryForm onSubmit={sendPasswordResetEmail} />
+      <PasswordRecoveryForm onSubmit={values => onSubmitEmail(values.email)} />
     </PageLayout>
   );
 };
@@ -66,9 +67,12 @@ PasswordRecoveryPageComponent.defaultProps = {
   logoutError: null,
   notificationCount: 0,
   sendVerificationEmailError: null,
+  initialEmail: null,
+  submittedEmail: null,
+  recoveryError: null,
 };
 
-const { bool, func, instanceOf, number, object, shape } = PropTypes;
+const { bool, func, instanceOf, number, object, shape, string } = PropTypes;
 
 PasswordRecoveryPageComponent.propTypes = {
   authInfoError: instanceOf(Error),
@@ -84,6 +88,11 @@ PasswordRecoveryPageComponent.propTypes = {
   sendVerificationEmailInProgress: bool.isRequired,
   sendVerificationEmailError: instanceOf(Error),
   onResendVerificationEmail: func.isRequired,
+  initialEmail: string,
+  submittedEmail: string,
+  recoveryInProgress: bool.isRequired,
+  recoveryError: instanceOf(Error),
+  onSubmitEmail: func.isRequired,
 
   // from withRouter
   history: shape({
@@ -104,6 +113,13 @@ const mapStateToProps = state => {
     sendVerificationEmailInProgress,
     sendVerificationEmailError,
   } = state.user;
+
+  const {
+    initialEmail,
+    submittedEmail,
+    recoveryError,
+    recoveryInProgress,
+  } = state.PasswordRecoveryPage;
   return {
     authInfoError,
     authInProgress: authenticationInProgress(state),
@@ -116,6 +132,10 @@ const mapStateToProps = state => {
     scrollingDisabled: isScrollingDisabled(state),
     sendVerificationEmailInProgress,
     sendVerificationEmailError,
+    initialEmail,
+    submittedEmail,
+    recoveryError,
+    recoveryInProgress,
   };
 };
 
@@ -124,6 +144,8 @@ const mapDispatchToProps = dispatch => ({
   onManageDisableScrolling: (componentId, disableScrolling) =>
     dispatch(manageDisableScrolling(componentId, disableScrolling)),
   onResendVerificationEmail: () => dispatch(sendVerificationEmail()),
+  onChange: () => dispatch(clearRecoveryError()),
+  onSubmitEmail: email => dispatch(recoverPassword(email)),
 });
 
 const PasswordRecoveryPage = compose(connect(mapStateToProps, mapDispatchToProps), withRouter)(
diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.test.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.test.js
index 58b2abc6..fa6d09de 100644
--- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.test.js
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.test.js
@@ -19,6 +19,8 @@ describe('ContactDetailsPage', () => {
         onManageDisableScrolling={noop}
         sendVerificationEmailInProgress={false}
         onResendVerificationEmail={noop}
+        recoveryInProgress={false}
+        onSubmitEmail={noop}
       />
     );
     expect(tree).toMatchSnapshot();
diff --git a/src/containers/PasswordRecoveryPage/__snapshots__/PasswordRecoveryPage.test.js.snap b/src/containers/PasswordRecoveryPage/__snapshots__/PasswordRecoveryPage.test.js.snap
index 12e085e7..6bbae359 100644
--- a/src/containers/PasswordRecoveryPage/__snapshots__/PasswordRecoveryPage.test.js.snap
+++ b/src/containers/PasswordRecoveryPage/__snapshots__/PasswordRecoveryPage.test.js.snap
@@ -25,7 +25,30 @@ exports[`ContactDetailsPage matches snapshot 1`] = `
     onResendVerificationEmail={[Function]}
     sendVerificationEmailError={null}
     sendVerificationEmailInProgress={false} />
-  <ReduxForm
-    onSubmit={[Function]} />
+  <div>
+    <div>
+      <KeysIcon
+        className={null} />
+      <h1>
+        <FormattedMessage
+          id="PasswordRecoveryPage.forgotPasswordTitle"
+          values={Object {}} />
+      </h1>
+      <p>
+        <FormattedMessage
+          id="PasswordRecoveryPage.forgotPasswordMessage"
+          values={Object {}} />
+      </p>
+      <ReduxForm
+        initialValues={
+          Object {
+            "email": null,
+          }
+        }
+        onChange={[Function]}
+        onSubmit={[Function]}
+        recoveryError={null} />
+    </div>
+  </div>
 </withRouter(PageLayout)>
 `;
diff --git a/src/containers/reducers.js b/src/containers/reducers.js
index 40fe13fa..614d4b8a 100644
--- a/src/containers/reducers.js
+++ b/src/containers/reducers.js
@@ -13,6 +13,7 @@ import PasswordResetPage from './PasswordResetPage/PasswordResetPage.duck';
 import ProfileSettingsPage from './ProfileSettingsPage/ProfileSettingsPage.duck';
 import SalePage from './SalePage/SalePage.duck';
 import SearchPage from './SearchPage/SearchPage.duck';
+import PasswordRecoveryPage from './PasswordRecoveryPage/PasswordRecoveryPage.duck';
 
 export {
   CheckoutPage,
@@ -25,4 +26,5 @@ export {
   ProfileSettingsPage,
   SalePage,
   SearchPage,
+  PasswordRecoveryPage,
 };

From 5a1c7e5f5ae5b21b672bd9d287bfccc092a870d1 Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Fri, 8 Sep 2017 15:37:04 +0300
Subject: [PATCH 07/22] Add email submitted view

---
 .../PasswordRecoveryPage.css                  | 26 +++++++++
 .../PasswordRecoveryPage.js                   | 55 ++++++++++++++++++-
 src/translations/en.json                      |  8 +++
 3 files changed, 87 insertions(+), 2 deletions(-)
 create mode 100644 src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css

diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css
new file mode 100644
index 00000000..efc309df
--- /dev/null
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css
@@ -0,0 +1,26 @@
+@import '../../marketplace.css';
+
+.root {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.title {
+  @apply --marketplaceH1FontStyles;
+}
+
+.submittedEmail {
+  font-weight: bold;
+}
+
+.emailSubmittedLink {
+  @apply --marketplaceH5FontStyles;
+  color: var(--matterColor);
+}
+
+.emailSubmittedLinkHelp {
+  color: var(--matterColorAnti);
+}
diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
index 858c3709..cfd0e21d 100644
--- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
@@ -2,14 +2,26 @@ 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 * as propTypes from '../../util/propTypes';
 import { sendVerificationEmail } from '../../ducks/user.duck';
 import { logout, authenticationInProgress } from '../../ducks/Auth.duck';
 import { manageDisableScrolling, isScrollingDisabled } from '../../ducks/UI.duck';
 import { recoverPassword } from './PasswordRecoveryPage.duck';
-import { PageLayout, Topbar } from '../../components';
+import { PageLayout, Topbar, NamedLink } from '../../components';
 import { PasswordRecoveryForm } from '../../containers';
 
+import css from './PasswordRecoveryPage.css';
+
+const recoveryMessage = submittedEmail => {
+  if (submittedEmail) {
+    const email = <span className={css.submittedEmail}>{submittedEmail}</span>;
+    return <FormattedMessage id="PasswordRecoveryPage.emailSubmittedMessage" values={{ email }} />;
+  } else {
+    return <FormattedMessage id="PasswordRecoveryPage.forgotPasswordMessage" />;
+  }
+};
+
 export const PasswordRecoveryPageComponent = props => {
   const {
     authInfoError,
@@ -34,6 +46,38 @@ export const PasswordRecoveryPageComponent = props => {
     onSubmitEmail,
   } = props;
 
+  const title = submittedEmail
+    ? <FormattedMessage id="PasswordRecoveryPage.emailSubmittedTitle" />
+    : <FormattedMessage id="PasswordRecoveryPage.forgotPasswordTitle" />;
+
+  const message = recoveryMessage(submittedEmail);
+
+  const sendAnotherHelp = (
+    <span className={css.emailSubmittedLinkHelp}>
+      <FormattedMessage id="PasswordRecoveryPage.sendAnotherHelp" />
+    </span>
+  );
+  const fixEmailHelp = (
+    <span className={css.emailSubmittedLinkHelp}>
+      <FormattedMessage id="PasswordRecoveryPage.fixEmailHelp" />
+    </span>
+  );
+
+  const emailSubmittedLinks = (
+    <div>
+      <p>
+        <NamedLink className={css.emailSubmittedLink} name="PasswordRecoveryPage">
+          <FormattedMessage id="PasswordRecoveryPage.sendAnother" values={{ sendAnotherHelp }} />
+        </NamedLink>
+      </p>
+      <p>
+        <NamedLink className={css.emailSubmittedLink} name="PasswordRecoveryPage">
+          <FormattedMessage id="PasswordRecoveryPage.fixEmail" values={{ fixEmailHelp }} />
+        </NamedLink>
+      </p>
+    </div>
+  );
+
   return (
     <PageLayout
       authInfoError={authInfoError}
@@ -55,7 +99,14 @@ export const PasswordRecoveryPageComponent = props => {
         sendVerificationEmailInProgress={sendVerificationEmailInProgress}
         sendVerificationEmailError={sendVerificationEmailError}
       />
-      <PasswordRecoveryForm onSubmit={values => onSubmitEmail(values.email)} />
+      <div>
+        <h1 className={css.title}>{title}</h1>
+        <p>{message}</p>
+        {submittedEmail
+          ? emailSubmittedLinks
+          : <PasswordRecoveryForm onSubmit={values => onSubmitEmail(values.email)} />}
+      </div>
+
     </PageLayout>
   );
 };
diff --git a/src/translations/en.json b/src/translations/en.json
index 3fde7010..bacfc1bb 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -231,6 +231,14 @@
   "PasswordRecoveryForm.goToLogin": "Go to log in.",
   "PasswordRecoveryForm.goToLoginHelp": "Don't need the password recovery?",
   "PasswordRecoveryForm.sendInstructions": "Send instructions",
+  "PasswordRecoveryPage.emailSubmittedTitle": "Check your inbox",
+  "PasswordRecoveryPage.emailSubmittedMessage": "We have sent the instructions for resetting your password to {email}.",
+  "PasswordRecoveryPage.fixEmail": "{fixEmailHelp} Fix it.",
+  "PasswordRecoveryPage.fixEmailHelp": "Whoops, typo in your email?",
+  "PasswordRecoveryPage.forgotPasswordTitle": "Forgot your password?",
+  "PasswordRecoveryPage.forgotPasswordMessage": "No worries! Please enter the email address you used when signing up and we'll send you instructions on how to create a new password.",
+  "PasswordRecoveryPage.sendAnother": "{sendAnotherHelp} Send another email.",
+  "PasswordRecoveryPage.sendAnotherHelp": "Didn't get the email?",
   "PayoutDetailsForm.addressTitle": "Address",
   "PayoutDetailsForm.bankDetails": "Bank details",
   "PayoutDetailsForm.birthdayDatePlaceholder": "dd",

From b4ab06a32e89970a40aefc26ade12214d77cbc09 Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Fri, 8 Sep 2017 15:49:34 +0300
Subject: [PATCH 08/22] Add keys icon

---
 .../PasswordRecoveryPage/KeysIcon.js          | 52 +++++++++++++++++++
 .../PasswordRecoveryPage.css                  |  5 ++
 .../PasswordRecoveryPage.js                   |  2 +
 3 files changed, 59 insertions(+)
 create mode 100644 src/containers/PasswordRecoveryPage/KeysIcon.js

diff --git a/src/containers/PasswordRecoveryPage/KeysIcon.js b/src/containers/PasswordRecoveryPage/KeysIcon.js
new file mode 100644
index 00000000..facd9c2e
--- /dev/null
+++ b/src/containers/PasswordRecoveryPage/KeysIcon.js
@@ -0,0 +1,52 @@
+import React, { PropTypes } from 'react';
+import classNames from 'classnames';
+
+import css from './PasswordRecoveryPage.css';
+
+const KeysIcon = props => {
+  const { rootClassName, className } = props;
+  const classes = classNames(rootClassName || css.keysIconRoot, className);
+  return (
+    <svg width="50" height="63" viewBox="0 0 50 63" xmlns="http://www.w3.org/2000/svg">
+      <g
+        transform="translate(-58 -55)"
+        stroke="#C0392B"
+        fill="none"
+        fillRule="evenodd"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path
+          d="M85 76.65C85 69.663 79.402 64 72.5 64S60 69.663 60 76.65c0 5.79 3.848 10.658 9.09 12.16v2.79l-2.272 2.298L69.09 96.2v2.3l-2.272 2.3 2.273 2.3v3.45L72.5 110l3.41-3.45V88.81C81.15 87.308 85 82.44 85 76.65z"
+          strokeWidth="2.5"
+        />
+        <path
+          d="M76 72.5c0 1.932-1.568 3.5-3.5 3.5S69 74.432 69 72.5s1.568-3.5 3.5-3.5 3.5 1.568 3.5 3.5z"
+          strokeWidth="2"
+        />
+        <path
+          d="M76 90.46c3.858 2.206 8.635 2.224 12.52.076l2.48 2.18v3.428h3.462l1.153 1.2v3.37h3.04l2.45 2.286H106v-4.847L93.414 85.69c2.7-4.784 2.005-10.943-2.1-15.008-2.894-2.866-6.836-4.06-10.604-3.58"
+          strokeWidth="2.5"
+        />
+        <path
+          d="M73 72V61.615C73 59.068 75.016 57 77.5 57s4.5 2.068 4.5 4.615v5.197"
+          strokeWidth="2.5"
+        />
+      </g>
+    </svg>
+  );
+};
+
+KeysIcon.defaultProps = {
+  rootClassName: null,
+  className: null,
+};
+
+const { string } = PropTypes;
+
+KeysIcon.propTypes = {
+  rootClassName: string,
+  className: string,
+};
+
+export default KeysIcon;
diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css
index efc309df..f5b99b34 100644
--- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css
@@ -8,6 +8,11 @@
   height: 100%;
 }
 
+.keysIconRoot {
+  width: 100%;
+  height: 100%;
+}
+
 .title {
   @apply --marketplaceH1FontStyles;
 }
diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
index cfd0e21d..fbdbc1bb 100644
--- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
@@ -11,6 +11,7 @@ import { recoverPassword } from './PasswordRecoveryPage.duck';
 import { PageLayout, Topbar, NamedLink } from '../../components';
 import { PasswordRecoveryForm } from '../../containers';
 
+import KeysIcon from './KeysIcon';
 import css from './PasswordRecoveryPage.css';
 
 const recoveryMessage = submittedEmail => {
@@ -100,6 +101,7 @@ export const PasswordRecoveryPageComponent = props => {
         sendVerificationEmailError={sendVerificationEmailError}
       />
       <div>
+        <KeysIcon />
         <h1 className={css.title}>{title}</h1>
         <p>{message}</p>
         {submittedEmail

From 80ec7d6675ab154cff20962bd20d365ef8ebfcb6 Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Tue, 12 Sep 2017 17:11:46 +0300
Subject: [PATCH 09/22] Add link for retyping email address

---
 .../PasswordRecoveryPage.duck.js              |  5 +++++
 .../PasswordRecoveryPage.js                   | 21 ++++++++++++++-----
 .../PasswordRecoveryPage.test.js              |  1 +
 src/translations/en.json                      |  2 +-
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.duck.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.duck.js
index 8906166b..fc16bde8 100644
--- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.duck.js
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.duck.js
@@ -3,6 +3,7 @@
 export const RECOVERY_REQUEST = 'app/PasswordRecoveryPage/RECOVERY_REQUEST';
 export const RECOVERY_SUCCESS = 'app/PasswordRecoveryPage/RECOVERY_SUCCESS';
 export const RECOVERY_ERROR = 'app/PasswordRecoveryPage/RECOVERY_ERROR';
+export const RETYPE_EMAIL = 'app/PasswordRecoveryPage/RETYPE_EMAIL';
 
 // ================ Reducer ================ //
 
@@ -20,6 +21,7 @@ export default function reducer(state = initialState, action = {}) {
       return {
         ...state,
         submittedEmail: null,
+        initialEmail: null,
         recoveryInProgress: true,
         recoveryError: null,
       };
@@ -27,6 +29,8 @@ export default function reducer(state = initialState, action = {}) {
       return { ...state, submittedEmail: payload.email, recoveryInProgress: false };
     case RECOVERY_ERROR:
       return { ...state, recoveryInProgress: false, recoveryError: payload };
+    case RETYPE_EMAIL:
+      return { ...state, submittedEmail: null, initialEmail: state.submittedEmail };
     default:
       return state;
   }
@@ -41,6 +45,7 @@ export const recoveryError = error => ({
   payload: error,
   error: true,
 });
+export const retypeEmail = () => ({ type: RETYPE_EMAIL });
 
 // ================ Thunks ================ //
 
diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
index fbdbc1bb..c8806055 100644
--- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
@@ -7,8 +7,8 @@ import * as propTypes from '../../util/propTypes';
 import { sendVerificationEmail } from '../../ducks/user.duck';
 import { logout, authenticationInProgress } from '../../ducks/Auth.duck';
 import { manageDisableScrolling, isScrollingDisabled } from '../../ducks/UI.duck';
-import { recoverPassword } from './PasswordRecoveryPage.duck';
-import { PageLayout, Topbar, NamedLink } from '../../components';
+import { recoverPassword, retypeEmail } from './PasswordRecoveryPage.duck';
+import { PageLayout, Topbar, NamedLink, InlineTextButton } from '../../components';
 import { PasswordRecoveryForm } from '../../containers';
 
 import KeysIcon from './KeysIcon';
@@ -45,6 +45,7 @@ export const PasswordRecoveryPageComponent = props => {
     recoveryInProgress,
     recoveryError,
     onSubmitEmail,
+    onRetypeEmail,
   } = props;
 
   const title = submittedEmail
@@ -72,9 +73,14 @@ export const PasswordRecoveryPageComponent = props => {
         </NamedLink>
       </p>
       <p>
-        <NamedLink className={css.emailSubmittedLink} name="PasswordRecoveryPage">
+
+        <InlineTextButton
+          className={css.emailSubmittedLink}
+          onClick={onRetypeEmail}
+        >
           <FormattedMessage id="PasswordRecoveryPage.fixEmail" values={{ fixEmailHelp }} />
-        </NamedLink>
+        </InlineTextButton>
+
       </p>
     </div>
   );
@@ -106,7 +112,10 @@ export const PasswordRecoveryPageComponent = props => {
         <p>{message}</p>
         {submittedEmail
           ? emailSubmittedLinks
-          : <PasswordRecoveryForm onSubmit={values => onSubmitEmail(values.email)} />}
+          : <PasswordRecoveryForm
+              onSubmit={values => onSubmitEmail(values.email)}
+              initialValues={{ email: initialEmail }}
+            />}
       </div>
 
     </PageLayout>
@@ -146,6 +155,7 @@ PasswordRecoveryPageComponent.propTypes = {
   recoveryInProgress: bool.isRequired,
   recoveryError: instanceOf(Error),
   onSubmitEmail: func.isRequired,
+  onRetypeEmail: func.isRequired,
 
   // from withRouter
   history: shape({
@@ -199,6 +209,7 @@ const mapDispatchToProps = dispatch => ({
   onResendVerificationEmail: () => dispatch(sendVerificationEmail()),
   onChange: () => dispatch(clearRecoveryError()),
   onSubmitEmail: email => dispatch(recoverPassword(email)),
+  onRetypeEmail: () => dispatch(retypeEmail()),
 });
 
 const PasswordRecoveryPage = compose(connect(mapStateToProps, mapDispatchToProps), withRouter)(
diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.test.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.test.js
index fa6d09de..bb622d5c 100644
--- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.test.js
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.test.js
@@ -21,6 +21,7 @@ describe('ContactDetailsPage', () => {
         onResendVerificationEmail={noop}
         recoveryInProgress={false}
         onSubmitEmail={noop}
+        onRetypeEmail={noop}
       />
     );
     expect(tree).toMatchSnapshot();
diff --git a/src/translations/en.json b/src/translations/en.json
index bacfc1bb..cb772acb 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -229,7 +229,7 @@
   "PasswordRecoveryForm.emailPlaceholder": "john.doe@example.com",
   "PasswordRecoveryForm.emailRequired": "This field is required",
   "PasswordRecoveryForm.goToLogin": "Go to log in.",
-  "PasswordRecoveryForm.goToLoginHelp": "Don't need the password recovery?",
+  "PasswordRecoveryForm.goToLoginHelp": "Suddenly remembered your password?",
   "PasswordRecoveryForm.sendInstructions": "Send instructions",
   "PasswordRecoveryPage.emailSubmittedTitle": "Check your inbox",
   "PasswordRecoveryPage.emailSubmittedMessage": "We have sent the instructions for resetting your password to {email}.",

From 4d7887f8874e21f935f8811c886f0d026fc8a872 Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Tue, 12 Sep 2017 18:40:02 +0300
Subject: [PATCH 10/22] User common keys icon

---
 .../PasswordRecoveryPage/KeysIcon.js          | 52 -------------------
 .../PasswordRecoveryPage.js                   |  3 +-
 2 files changed, 1 insertion(+), 54 deletions(-)
 delete mode 100644 src/containers/PasswordRecoveryPage/KeysIcon.js

diff --git a/src/containers/PasswordRecoveryPage/KeysIcon.js b/src/containers/PasswordRecoveryPage/KeysIcon.js
deleted file mode 100644
index facd9c2e..00000000
--- a/src/containers/PasswordRecoveryPage/KeysIcon.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import React, { PropTypes } from 'react';
-import classNames from 'classnames';
-
-import css from './PasswordRecoveryPage.css';
-
-const KeysIcon = props => {
-  const { rootClassName, className } = props;
-  const classes = classNames(rootClassName || css.keysIconRoot, className);
-  return (
-    <svg width="50" height="63" viewBox="0 0 50 63" xmlns="http://www.w3.org/2000/svg">
-      <g
-        transform="translate(-58 -55)"
-        stroke="#C0392B"
-        fill="none"
-        fillRule="evenodd"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <path
-          d="M85 76.65C85 69.663 79.402 64 72.5 64S60 69.663 60 76.65c0 5.79 3.848 10.658 9.09 12.16v2.79l-2.272 2.298L69.09 96.2v2.3l-2.272 2.3 2.273 2.3v3.45L72.5 110l3.41-3.45V88.81C81.15 87.308 85 82.44 85 76.65z"
-          strokeWidth="2.5"
-        />
-        <path
-          d="M76 72.5c0 1.932-1.568 3.5-3.5 3.5S69 74.432 69 72.5s1.568-3.5 3.5-3.5 3.5 1.568 3.5 3.5z"
-          strokeWidth="2"
-        />
-        <path
-          d="M76 90.46c3.858 2.206 8.635 2.224 12.52.076l2.48 2.18v3.428h3.462l1.153 1.2v3.37h3.04l2.45 2.286H106v-4.847L93.414 85.69c2.7-4.784 2.005-10.943-2.1-15.008-2.894-2.866-6.836-4.06-10.604-3.58"
-          strokeWidth="2.5"
-        />
-        <path
-          d="M73 72V61.615C73 59.068 75.016 57 77.5 57s4.5 2.068 4.5 4.615v5.197"
-          strokeWidth="2.5"
-        />
-      </g>
-    </svg>
-  );
-};
-
-KeysIcon.defaultProps = {
-  rootClassName: null,
-  className: null,
-};
-
-const { string } = PropTypes;
-
-KeysIcon.propTypes = {
-  rootClassName: string,
-  className: string,
-};
-
-export default KeysIcon;
diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
index c8806055..b613a3c1 100644
--- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
@@ -8,10 +8,9 @@ import { sendVerificationEmail } from '../../ducks/user.duck';
 import { logout, authenticationInProgress } from '../../ducks/Auth.duck';
 import { manageDisableScrolling, isScrollingDisabled } from '../../ducks/UI.duck';
 import { recoverPassword, retypeEmail } from './PasswordRecoveryPage.duck';
-import { PageLayout, Topbar, NamedLink, InlineTextButton } from '../../components';
+import { PageLayout, Topbar, NamedLink, InlineTextButton, KeysIcon } from '../../components';
 import { PasswordRecoveryForm } from '../../containers';
 
-import KeysIcon from './KeysIcon';
 import css from './PasswordRecoveryPage.css';
 
 const recoveryMessage = submittedEmail => {

From 484ce61fa7279226a23ee8fccd5a934ff982b529 Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Tue, 12 Sep 2017 21:45:44 +0300
Subject: [PATCH 11/22] Enable submit button with initial email

---
 src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js | 6 ++++--
 src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js | 5 +----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js
index 2af5d948..a421e768 100644
--- a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js
+++ b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js
@@ -8,7 +8,7 @@ import * as validators from '../../util/validators';
 import css from './PasswordRecoveryForm.css';
 
 const PasswordRecoveryFormComponent = props => {
-  const { handleSubmit, pristine, submitting, form, intl } = props;
+  const { handleSubmit, pristine, submitting, form, initialValues, intl } = props;
 
   // email
   const emailLabel = intl.formatMessage({
@@ -21,6 +21,8 @@ const PasswordRecoveryFormComponent = props => {
     id: 'PasswordRecoveryForm.emailRequired',
   });
   const emailRequired = validators.required(emailRequiredMessage);
+  const initialEmail = initialValues ? initialValues.email : null;
+  const buttonDisabled = (pristine && !initialEmail) || submitting;
   return (
     <form onSubmit={handleSubmit}>
       <TextInputField
@@ -41,7 +43,7 @@ const PasswordRecoveryFormComponent = props => {
           <FormattedMessage id="PasswordRecoveryForm.goToLogin" />
         </NamedLink>
       </p>
-      <PrimaryButton type="submit" disabled={pristine || submitting}>
+      <PrimaryButton type="submit" disabled={buttonDisabled}>
         <FormattedMessage id="PasswordRecoveryForm.sendInstructions" />
       </PrimaryButton>
     </form>
diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
index b613a3c1..0e1f0f7b 100644
--- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
@@ -73,10 +73,7 @@ export const PasswordRecoveryPageComponent = props => {
       </p>
       <p>
 
-        <InlineTextButton
-          className={css.emailSubmittedLink}
-          onClick={onRetypeEmail}
-        >
+        <InlineTextButton className={css.emailSubmittedLink} onClick={onRetypeEmail}>
           <FormattedMessage id="PasswordRecoveryPage.fixEmail" values={{ fixEmailHelp }} />
         </InlineTextButton>
 

From 00803945a536c051c24cf77ce6508e8241e6b508 Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Wed, 13 Sep 2017 09:11:49 +0300
Subject: [PATCH 12/22] Add recovery email resend

---
 .../PasswordRecoveryPage/PasswordRecoveryPage.js         | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
index 0e1f0f7b..ca13d9a4 100644
--- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
@@ -67,16 +67,17 @@ export const PasswordRecoveryPageComponent = props => {
   const emailSubmittedLinks = (
     <div>
       <p>
-        <NamedLink className={css.emailSubmittedLink} name="PasswordRecoveryPage">
+        <InlineTextButton
+          className={css.emailSubmittedLink}
+          onClick={() => onSubmitEmail(submittedEmail)}
+        >
           <FormattedMessage id="PasswordRecoveryPage.sendAnother" values={{ sendAnotherHelp }} />
-        </NamedLink>
+        </InlineTextButton>
       </p>
       <p>
-
         <InlineTextButton className={css.emailSubmittedLink} onClick={onRetypeEmail}>
           <FormattedMessage id="PasswordRecoveryPage.fixEmail" values={{ fixEmailHelp }} />
         </InlineTextButton>
-
       </p>
     </div>
   );

From 237e1d208af3d2f66946f84053352d79a6e1f01d Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Wed, 13 Sep 2017 09:30:30 +0300
Subject: [PATCH 13/22] Change password recovery url to recover-password

---
 src/app.test.js                                               | 2 +-
 src/containers/LoginForm/__snapshots__/LoginForm.test.js.snap | 2 +-
 src/routesConfiguration.js                                    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app.test.js b/src/app.test.js
index b02db9ff..e27cac46 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 new password',
       '/this-url-should-not-be-found': 'Page not found',
       '/reset-password?t=token&e=email': 'Reset password',
     };
diff --git a/src/containers/LoginForm/__snapshots__/LoginForm.test.js.snap b/src/containers/LoginForm/__snapshots__/LoginForm.test.js.snap
index 8cc13dd7..9bba618b 100644
--- a/src/containers/LoginForm/__snapshots__/LoginForm.test.js.snap
+++ b/src/containers/LoginForm/__snapshots__/LoginForm.test.js.snap
@@ -46,7 +46,7 @@ exports[`LoginForm matches snapshot 1`] = `
     className={undefined}>
     <a
       className=""
-      href="/recover_password"
+      href="/recover-password"
       onClick={[Function]}
       style={Object {}}
       title={null}>
diff --git a/src/routesConfiguration.js b/src/routesConfiguration.js
index 052b28f5..d1056a52 100644
--- a/src/routesConfiguration.js
+++ b/src/routesConfiguration.js
@@ -145,7 +145,7 @@ const routesConfiguration = [
     component: props => <AuthenticationPage {...props} tab="signup" />,
   },
   {
-    path: '/recover_password',
+    path: '/recover-password',
     exact: true,
     name: 'PasswordRecoveryPage',
     component: props => <PasswordRecoveryPage {...props} />,

From 95ba740e08ca2670a19b3559dc6305c8bd1e366e Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Wed, 13 Sep 2017 09:39:28 +0300
Subject: [PATCH 14/22] Remove unused imports and props

---
 .../PasswordRecoveryForm/PasswordRecoveryForm.js           | 2 +-
 .../PasswordRecoveryPage/PasswordRecoveryPage.js           | 7 +------
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js
index a421e768..a4de3775 100644
--- a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js
+++ b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { compose } from 'redux';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
-import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form';
+import { reduxForm, propTypes as formPropTypes } from 'redux-form';
 import { PrimaryButton, TextInputField, NamedLink } from '../../components';
 import * as validators from '../../util/validators';
 
diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
index ca13d9a4..93d3bb9b 100644
--- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
@@ -8,7 +8,7 @@ import { sendVerificationEmail } from '../../ducks/user.duck';
 import { logout, authenticationInProgress } from '../../ducks/Auth.duck';
 import { manageDisableScrolling, isScrollingDisabled } from '../../ducks/UI.duck';
 import { recoverPassword, retypeEmail } from './PasswordRecoveryPage.duck';
-import { PageLayout, Topbar, NamedLink, InlineTextButton, KeysIcon } from '../../components';
+import { PageLayout, Topbar, InlineTextButton, KeysIcon } from '../../components';
 import { PasswordRecoveryForm } from '../../containers';
 
 import css from './PasswordRecoveryPage.css';
@@ -41,8 +41,6 @@ export const PasswordRecoveryPageComponent = props => {
     onResendVerificationEmail,
     initialEmail,
     submittedEmail,
-    recoveryInProgress,
-    recoveryError,
     onSubmitEmail,
     onRetypeEmail,
   } = props;
@@ -128,7 +126,6 @@ PasswordRecoveryPageComponent.defaultProps = {
   sendVerificationEmailError: null,
   initialEmail: null,
   submittedEmail: null,
-  recoveryError: null,
 };
 
 const { bool, func, instanceOf, number, object, shape, string } = PropTypes;
@@ -149,8 +146,6 @@ PasswordRecoveryPageComponent.propTypes = {
   onResendVerificationEmail: func.isRequired,
   initialEmail: string,
   submittedEmail: string,
-  recoveryInProgress: bool.isRequired,
-  recoveryError: instanceOf(Error),
   onSubmitEmail: func.isRequired,
   onRetypeEmail: func.isRequired,
 

From 82fe1ce4900c97235d3478ff2bff3268be929fa7 Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Wed, 13 Sep 2017 11:15:31 +0300
Subject: [PATCH 15/22] Apply styles

---
 .../PasswordRecoveryForm.css                  |  3 +-
 .../PasswordRecoveryForm.js                   | 39 ++++++++++++---
 .../PasswordRecoveryPage.css                  | 50 +++++++++++++++++--
 .../PasswordRecoveryPage.js                   | 24 +++++----
 src/translations/en.json                      |  2 +-
 5 files changed, 94 insertions(+), 24 deletions(-)

diff --git a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.css b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.css
index 2a2f8cbd..cc4d642e 100644
--- a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.css
+++ b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.css
@@ -13,7 +13,8 @@
   margin-bottom: 24px;
 
   @media (--viewportMedium) {
-    margin-top: 30px;
+    margin-top: 22px;
+    margin-bottom: 88px;
   }
 }
 
diff --git a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js
index a4de3775..6b3c20e2 100644
--- a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js
+++ b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js
@@ -1,14 +1,24 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import { compose } from 'redux';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { reduxForm, propTypes as formPropTypes } from 'redux-form';
+import classNames from 'classnames';
 import { PrimaryButton, TextInputField, NamedLink } from '../../components';
 import * as validators from '../../util/validators';
 
 import css from './PasswordRecoveryForm.css';
 
 const PasswordRecoveryFormComponent = props => {
-  const { handleSubmit, pristine, submitting, form, initialValues, intl } = props;
+  const {
+    rootClassName,
+    className,
+    handleSubmit,
+    pristine,
+    submitting,
+    form,
+    initialValues,
+    intl,
+  } = props;
 
   // email
   const emailLabel = intl.formatMessage({
@@ -21,10 +31,18 @@ const PasswordRecoveryFormComponent = props => {
     id: 'PasswordRecoveryForm.emailRequired',
   });
   const emailRequired = validators.required(emailRequiredMessage);
+
   const initialEmail = initialValues ? initialValues.email : null;
   const buttonDisabled = (pristine && !initialEmail) || submitting;
+  const classes = classNames(rootClassName || css.root, className);
+
+  const goToLoginHelp = (
+    <span className={css.goToLoginLinkHelp}>
+      <FormattedMessage id="PasswordRecoveryForm.goToLoginHelp" />
+    </span>
+  );
   return (
-    <form onSubmit={handleSubmit}>
+    <form className={classes} onSubmit={handleSubmit}>
       <TextInputField
         className={css.email}
         type="email"
@@ -36,11 +54,7 @@ const PasswordRecoveryFormComponent = props => {
       />
       <p className={css.bottomWrapper}>
         <NamedLink name="LoginPage" className={css.goToLoginLink}>
-          <span className={css.goToLoginLinkHelp}>
-            <FormattedMessage id="PasswordRecoveryForm.goToLoginHelp" />
-          </span>
-          {' '}
-          <FormattedMessage id="PasswordRecoveryForm.goToLogin" />
+          <FormattedMessage id="PasswordRecoveryForm.goToLogin" values={{ goToLoginHelp }} />
         </NamedLink>
       </p>
       <PrimaryButton type="submit" disabled={buttonDisabled}>
@@ -50,8 +64,17 @@ const PasswordRecoveryFormComponent = props => {
   );
 };
 
+PasswordRecoveryFormComponent.defaultProps = {
+  rootClassName: null,
+  className: null,
+};
+
+const { string } = PropTypes;
+
 PasswordRecoveryFormComponent.propTypes = {
   ...formPropTypes,
+  rootClassName: string,
+  className: string,
   intl: intlShape.isRequired,
 };
 
diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css
index f5b99b34..033bbba9 100644
--- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css
@@ -1,11 +1,33 @@
 @import '../../marketplace.css';
 
 .root {
+  @apply --backgroundImage;
+
+  display: flex;
+  flex: 1;
+
+  @media (--viewportMedium) {
+    justify-content: center;
+    align-items: flex-start;
+  }
+}
+
+.content {
+  flex-grow: 1;
   display: flex;
   flex-direction: column;
-  flex: 1;
-  justify-content: space-between;
-  height: 100%;
+  padding: 30px 24px 98px 24px;
+  background-color: var(--matterColorLight);
+  border-radius: 2px;
+
+  @media (--viewportMedium) {
+    flex-basis: 480px;
+    flex-grow: 0;
+    min-height: 573px;
+    padding: 60px;
+    margin-top: 7.5vh;
+    margin-bottom: 7.5vh;
+  }
 }
 
 .keysIconRoot {
@@ -21,9 +43,31 @@
   font-weight: bold;
 }
 
+.bottomWrapper {
+  margin-top: auto;
+  @media (--viewportMedium) {
+    margin-top: 67px;
+  }
+}
+
+.bottomWrapper p {
+  line-height: 24px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
 .emailSubmittedLink {
   @apply --marketplaceH5FontStyles;
   color: var(--matterColor);
+  line-height: 24px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+
+  @media (--viewportMedium) {
+    line-height: 24px;
+    margin-top: 0px;
+    margin-bottom: 0px;
+  }
 }
 
 .emailSubmittedLinkHelp {
diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
index 93d3bb9b..fda71617 100644
--- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
@@ -63,7 +63,7 @@ export const PasswordRecoveryPageComponent = props => {
   );
 
   const emailSubmittedLinks = (
-    <div>
+    <div className={css.bottomWrapper}>
       <p>
         <InlineTextButton
           className={css.emailSubmittedLink}
@@ -101,16 +101,18 @@ export const PasswordRecoveryPageComponent = props => {
         sendVerificationEmailInProgress={sendVerificationEmailInProgress}
         sendVerificationEmailError={sendVerificationEmailError}
       />
-      <div>
-        <KeysIcon />
-        <h1 className={css.title}>{title}</h1>
-        <p>{message}</p>
-        {submittedEmail
-          ? emailSubmittedLinks
-          : <PasswordRecoveryForm
-              onSubmit={values => onSubmitEmail(values.email)}
-              initialValues={{ email: initialEmail }}
-            />}
+      <div className={css.root}>
+        <div className={css.content}>
+          <KeysIcon />
+          <h1 className={css.title}>{title}</h1>
+          <p>{message}</p>
+          {submittedEmail
+            ? emailSubmittedLinks
+            : <PasswordRecoveryForm
+                onSubmit={values => onSubmitEmail(values.email)}
+                initialValues={{ email: initialEmail }}
+              />}
+        </div>
       </div>
 
     </PageLayout>
diff --git a/src/translations/en.json b/src/translations/en.json
index cb772acb..113fd52f 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -228,7 +228,7 @@
   "PasswordRecoveryForm.emailLabel": "Email",
   "PasswordRecoveryForm.emailPlaceholder": "john.doe@example.com",
   "PasswordRecoveryForm.emailRequired": "This field is required",
-  "PasswordRecoveryForm.goToLogin": "Go to log in.",
+  "PasswordRecoveryForm.goToLogin": "{goToLoginHelp} Go to log in.",
   "PasswordRecoveryForm.goToLoginHelp": "Suddenly remembered your password?",
   "PasswordRecoveryForm.sendInstructions": "Send instructions",
   "PasswordRecoveryPage.emailSubmittedTitle": "Check your inbox",

From 13f4d81648093b111c0a7658b8f4c45dc64a8dfb Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Wed, 13 Sep 2017 14:54:42 +0300
Subject: [PATCH 16/22] Add email not found handling

---
 src/components/TextInputField/TextInputField.js   | 14 ++++++++++++--
 .../PasswordRecoveryForm/PasswordRecoveryForm.js  | 15 +++++++++++++--
 .../PasswordRecoveryPage/PasswordRecoveryPage.css |  2 +-
 .../PasswordRecoveryPage.duck.js                  |  4 ++++
 .../PasswordRecoveryPage/PasswordRecoveryPage.js  |  9 ++++++++-
 .../PasswordRecoveryPage.test.js                  |  1 +
 src/translations/en.json                          |  1 +
 7 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/src/components/TextInputField/TextInputField.js b/src/components/TextInputField/TextInputField.js
index 6039ab0c..7ff8a1a6 100644
--- a/src/components/TextInputField/TextInputField.js
+++ b/src/components/TextInputField/TextInputField.js
@@ -17,6 +17,7 @@ class TextInputFieldComponent extends Component {
       rootClassName,
       className,
       clearOnUnmount,
+      customErrorText,
       id,
       label,
       type,
@@ -33,9 +34,13 @@ class TextInputFieldComponent extends Component {
     const { valid, invalid, touched, error } = meta;
     const isTextarea = type === 'textarea';
 
+    const errorText = customErrorText || error;
+
     // Error message and input error styles are only shown if the
     // field has been touched and the validation has failed.
-    const hasError = touched && invalid && error;
+    const hasError = touched && invalid && errorText;
+
+    const fieldMeta = { touched, error: errorText };
 
     const inputClasses = classNames(css.input, {
       [css.inputSuccess]: valid,
@@ -50,7 +55,7 @@ class TextInputFieldComponent extends Component {
       <div className={classes}>
         {label ? <label htmlFor={id}>{label}</label> : null}
         {isTextarea ? <ExpandingTextarea {...inputProps} /> : <input {...inputProps} />}
-        <ValidationError fieldMeta={meta} />
+        <ValidationError fieldMeta={fieldMeta} />
       </div>
     );
   }
@@ -60,6 +65,7 @@ TextInputFieldComponent.defaultProps = {
   rootClassName: null,
   className: null,
   clearOnUnmount: false,
+  customErrorText: null,
   id: null,
   label: null,
 };
@@ -72,6 +78,10 @@ TextInputFieldComponent.propTypes = {
 
   clearOnUnmount: bool,
 
+  // Error message that can be manually passed to input field,
+  // overrides default validation message
+  customErrorText: string,
+
   // Label is optional, but if it is given, an id is also required so
   // the label can reference the input in the `for` attribute
   id: string,
diff --git a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js
index 6b3c20e2..3457827d 100644
--- a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js
+++ b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js
@@ -8,6 +8,8 @@ import * as validators from '../../util/validators';
 
 import css from './PasswordRecoveryForm.css';
 
+const isNotFoundError = (error) => error && error.status === 404;
+
 const PasswordRecoveryFormComponent = props => {
   const {
     rootClassName,
@@ -18,6 +20,7 @@ const PasswordRecoveryFormComponent = props => {
     form,
     initialValues,
     intl,
+    recoveryError,
   } = props;
 
   // email
@@ -30,8 +33,12 @@ const PasswordRecoveryFormComponent = props => {
   const emailRequiredMessage = intl.formatMessage({
     id: 'PasswordRecoveryForm.emailRequired',
   });
-  const emailRequired = validators.required(emailRequiredMessage);
+  const emailNotFoundMessage = intl.formatMessage({
+    id: 'PasswordRecoveryForm.emailNotFound',
+  });
 
+  const emailRequired = validators.required(emailRequiredMessage);
+  const customErrorText = isNotFoundError(recoveryError) ? emailNotFoundMessage : null;
   const initialEmail = initialValues ? initialValues.email : null;
   const buttonDisabled = (pristine && !initialEmail) || submitting;
   const classes = classNames(rootClassName || css.root, className);
@@ -41,6 +48,7 @@ const PasswordRecoveryFormComponent = props => {
       <FormattedMessage id="PasswordRecoveryForm.goToLoginHelp" />
     </span>
   );
+
   return (
     <form className={classes} onSubmit={handleSubmit}>
       <TextInputField
@@ -51,6 +59,7 @@ const PasswordRecoveryFormComponent = props => {
         label={emailLabel}
         placeholder={emailPlaceholder}
         validate={emailRequired}
+        customErrorText={customErrorText}
       />
       <p className={css.bottomWrapper}>
         <NamedLink name="LoginPage" className={css.goToLoginLink}>
@@ -67,14 +76,16 @@ const PasswordRecoveryFormComponent = props => {
 PasswordRecoveryFormComponent.defaultProps = {
   rootClassName: null,
   className: null,
+  recoveryError: null,
 };
 
-const { string } = PropTypes;
+const { instanceOf, string } = PropTypes;
 
 PasswordRecoveryFormComponent.propTypes = {
   ...formPropTypes,
   rootClassName: string,
   className: string,
+  recoveryError: instanceOf(Error),
   intl: intlShape.isRequired,
 };
 
diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css
index 033bbba9..28e7ff9d 100644
--- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css
@@ -36,7 +36,7 @@
 }
 
 .title {
-  @apply --marketplaceH1FontStyles;
+  @apply --marketplaceModalTitle;
 }
 
 .submittedEmail {
diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.duck.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.duck.js
index fc16bde8..7a47eeee 100644
--- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.duck.js
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.duck.js
@@ -4,6 +4,7 @@ export const RECOVERY_REQUEST = 'app/PasswordRecoveryPage/RECOVERY_REQUEST';
 export const RECOVERY_SUCCESS = 'app/PasswordRecoveryPage/RECOVERY_SUCCESS';
 export const RECOVERY_ERROR = 'app/PasswordRecoveryPage/RECOVERY_ERROR';
 export const RETYPE_EMAIL = 'app/PasswordRecoveryPage/RETYPE_EMAIL';
+export const CLEAR_RECOVERY_ERROR = 'app/PasswordRecoveryPage/CLEAR_RECOVERY_ERROR';
 
 // ================ Reducer ================ //
 
@@ -31,6 +32,8 @@ export default function reducer(state = initialState, action = {}) {
       return { ...state, recoveryInProgress: false, recoveryError: payload };
     case RETYPE_EMAIL:
       return { ...state, submittedEmail: null, initialEmail: state.submittedEmail };
+    case CLEAR_RECOVERY_ERROR:
+      return { ...state, recoveryError: null };
     default:
       return state;
   }
@@ -46,6 +49,7 @@ export const recoveryError = error => ({
   error: true,
 });
 export const retypeEmail = () => ({ type: RETYPE_EMAIL });
+export const clearRecoveryError = () => ({ type: CLEAR_RECOVERY_ERROR });
 
 // ================ Thunks ================ //
 
diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
index fda71617..d34cb081 100644
--- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
@@ -7,7 +7,7 @@ import * as propTypes from '../../util/propTypes';
 import { sendVerificationEmail } from '../../ducks/user.duck';
 import { logout, authenticationInProgress } from '../../ducks/Auth.duck';
 import { manageDisableScrolling, isScrollingDisabled } from '../../ducks/UI.duck';
-import { recoverPassword, retypeEmail } from './PasswordRecoveryPage.duck';
+import { recoverPassword, retypeEmail, clearRecoveryError } from './PasswordRecoveryPage.duck';
 import { PageLayout, Topbar, InlineTextButton, KeysIcon } from '../../components';
 import { PasswordRecoveryForm } from '../../containers';
 
@@ -41,6 +41,8 @@ export const PasswordRecoveryPageComponent = props => {
     onResendVerificationEmail,
     initialEmail,
     submittedEmail,
+    recoveryError,
+    onChange,
     onSubmitEmail,
     onRetypeEmail,
   } = props;
@@ -109,8 +111,10 @@ export const PasswordRecoveryPageComponent = props => {
           {submittedEmail
             ? emailSubmittedLinks
             : <PasswordRecoveryForm
+                onChange={onChange}
                 onSubmit={values => onSubmitEmail(values.email)}
                 initialValues={{ email: initialEmail }}
+                recoveryError={recoveryError}
               />}
         </div>
       </div>
@@ -128,6 +132,7 @@ PasswordRecoveryPageComponent.defaultProps = {
   sendVerificationEmailError: null,
   initialEmail: null,
   submittedEmail: null,
+  recoveryError: null,
 };
 
 const { bool, func, instanceOf, number, object, shape, string } = PropTypes;
@@ -148,6 +153,8 @@ PasswordRecoveryPageComponent.propTypes = {
   onResendVerificationEmail: func.isRequired,
   initialEmail: string,
   submittedEmail: string,
+  recoveryError: instanceOf(Error),
+  onChange: func.isRequired,
   onSubmitEmail: func.isRequired,
   onRetypeEmail: func.isRequired,
 
diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.test.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.test.js
index bb622d5c..036752f7 100644
--- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.test.js
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.test.js
@@ -20,6 +20,7 @@ describe('ContactDetailsPage', () => {
         sendVerificationEmailInProgress={false}
         onResendVerificationEmail={noop}
         recoveryInProgress={false}
+        onChange={noop}
         onSubmitEmail={noop}
         onRetypeEmail={noop}
       />
diff --git a/src/translations/en.json b/src/translations/en.json
index 113fd52f..ef4c2772 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -226,6 +226,7 @@
   "PasswordResetPage.resetFailed": "Reset failed. Please try again.",
   "PasswordResetPage.title": "Reset password",
   "PasswordRecoveryForm.emailLabel": "Email",
+  "PasswordRecoveryForm.emailNotFound": "Hmm. We didn't find an account with that email. Please double-check your email and try again.",
   "PasswordRecoveryForm.emailPlaceholder": "john.doe@example.com",
   "PasswordRecoveryForm.emailRequired": "This field is required",
   "PasswordRecoveryForm.goToLogin": "{goToLoginHelp} Go to log in.",

From 968673c830ae67fa661483798b5bd493a30a2917 Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Wed, 13 Sep 2017 15:41:32 +0300
Subject: [PATCH 17/22] Apply inline buttons partly to bottom texts

---
 .../PasswordRecoveryForm.css                  | 13 +++-----
 .../PasswordRecoveryForm.js                   | 14 ++++----
 .../PasswordRecoveryPage.css                  | 33 ++++++++-----------
 .../PasswordRecoveryPage.js                   | 32 ++++++++----------
 src/translations/en.json                      | 12 +++----
 5 files changed, 43 insertions(+), 61 deletions(-)

diff --git a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.css b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.css
index cc4d642e..dc164ac8 100644
--- a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.css
+++ b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.css
@@ -19,14 +19,11 @@
 }
 
 .bottomWrapper {
-  margin-top: auto;
-}
-
-.goToLoginLink {
   @apply --marketplaceH5FontStyles;
-  color: var(--matterColor);
-}
-
-.goToLoginLinkHelp {
+  margin-top: auto;
   color: var(--matterColorAnti);
 }
+
+.loginLink {
+  color: var(--matterColor);
+}
diff --git a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js
index 3457827d..e1531bcd 100644
--- a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js
+++ b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js
@@ -8,7 +8,7 @@ import * as validators from '../../util/validators';
 
 import css from './PasswordRecoveryForm.css';
 
-const isNotFoundError = (error) => error && error.status === 404;
+const isNotFoundError = error => error && error.status === 404;
 
 const PasswordRecoveryFormComponent = props => {
   const {
@@ -43,10 +43,10 @@ const PasswordRecoveryFormComponent = props => {
   const buttonDisabled = (pristine && !initialEmail) || submitting;
   const classes = classNames(rootClassName || css.root, className);
 
-  const goToLoginHelp = (
-    <span className={css.goToLoginLinkHelp}>
-      <FormattedMessage id="PasswordRecoveryForm.goToLoginHelp" />
-    </span>
+  const loginLink = (
+    <NamedLink name="LoginPage" className={css.loginLink}>
+      <FormattedMessage id="PasswordRecoveryForm.loginLinkText" />
+    </NamedLink>
   );
 
   return (
@@ -62,9 +62,7 @@ const PasswordRecoveryFormComponent = props => {
         customErrorText={customErrorText}
       />
       <p className={css.bottomWrapper}>
-        <NamedLink name="LoginPage" className={css.goToLoginLink}>
-          <FormattedMessage id="PasswordRecoveryForm.goToLogin" values={{ goToLoginHelp }} />
-        </NamedLink>
+        <FormattedMessage id="PasswordRecoveryForm.loginLinkInfo" values={{ loginLink }} />
       </p>
       <PrimaryButton type="submit" disabled={buttonDisabled}>
         <FormattedMessage id="PasswordRecoveryForm.sendInstructions" />
diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css
index 28e7ff9d..f409193c 100644
--- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css
@@ -44,32 +44,25 @@
 }
 
 .bottomWrapper {
-  margin-top: auto;
-  @media (--viewportMedium) {
-    margin-top: 67px;
-  }
+  margin-top: 67px;
 }
 
-.bottomWrapper p {
-  line-height: 24px;
-  margin-top: 0px;
-  margin-bottom: 0px;
-}
-
-.emailSubmittedLink {
+.bottomText {
   @apply --marketplaceH5FontStyles;
-  color: var(--matterColor);
-  line-height: 24px;
-  margin-top: 0px;
-  margin-bottom: 0px;
+  margin: 0;
+  color: var(--matterColorAnti);
 
   @media (--viewportMedium) {
-    line-height: 24px;
-    margin-top: 0px;
-    margin-bottom: 0px;
+    margin: 0;
   }
 }
 
-.emailSubmittedLinkHelp {
-  color: var(--matterColorAnti);
+.bottomLink {
+  @apply --marketplaceH5FontStyles;
+  margin: 0;
+  color: var(--matterColor);
+
+  @media (--viewportMedium) {
+    margin: 0;
+  }
 }
diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
index d34cb081..19c0744d 100644
--- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
@@ -53,31 +53,25 @@ export const PasswordRecoveryPageComponent = props => {
 
   const message = recoveryMessage(submittedEmail);
 
-  const sendAnotherHelp = (
-    <span className={css.emailSubmittedLinkHelp}>
-      <FormattedMessage id="PasswordRecoveryPage.sendAnotherHelp" />
-    </span>
+  const resendEmailLink = (
+    <InlineTextButton className={css.bottomLink} onClick={() => onSubmitEmail(submittedEmail)}>
+      <FormattedMessage id="PasswordRecoveryPage.resendEmailLinkText" />
+    </InlineTextButton>
   );
-  const fixEmailHelp = (
-    <span className={css.emailSubmittedLinkHelp}>
-      <FormattedMessage id="PasswordRecoveryPage.fixEmailHelp" />
-    </span>
+
+  const fixEmailLink = (
+    <InlineTextButton className={css.bottomLink} onClick={onRetypeEmail}>
+      <FormattedMessage id="PasswordRecoveryPage.fixEmailLinkText" />
+    </InlineTextButton>
   );
 
   const emailSubmittedLinks = (
     <div className={css.bottomWrapper}>
-      <p>
-        <InlineTextButton
-          className={css.emailSubmittedLink}
-          onClick={() => onSubmitEmail(submittedEmail)}
-        >
-          <FormattedMessage id="PasswordRecoveryPage.sendAnother" values={{ sendAnotherHelp }} />
-        </InlineTextButton>
+      <p className={css.bottomText}>
+        <FormattedMessage id="PasswordRecoveryPage.resendEmailInfo" values={{ resendEmailLink }} />
       </p>
-      <p>
-        <InlineTextButton className={css.emailSubmittedLink} onClick={onRetypeEmail}>
-          <FormattedMessage id="PasswordRecoveryPage.fixEmail" values={{ fixEmailHelp }} />
-        </InlineTextButton>
+      <p className={css.bottomText}>
+        <FormattedMessage id="PasswordRecoveryPage.fixEmailInfo" values={{ fixEmailLink }} />
       </p>
     </div>
   );
diff --git a/src/translations/en.json b/src/translations/en.json
index ef4c2772..6a224f64 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -229,17 +229,17 @@
   "PasswordRecoveryForm.emailNotFound": "Hmm. We didn't find an account with that email. Please double-check your email and try again.",
   "PasswordRecoveryForm.emailPlaceholder": "john.doe@example.com",
   "PasswordRecoveryForm.emailRequired": "This field is required",
-  "PasswordRecoveryForm.goToLogin": "{goToLoginHelp} Go to log in.",
-  "PasswordRecoveryForm.goToLoginHelp": "Suddenly remembered your password?",
+  "PasswordRecoveryForm.loginLinkText": "Go log in.",
+  "PasswordRecoveryForm.loginLinkInfo": "Suddenly remembered your password? {loginLink}",
   "PasswordRecoveryForm.sendInstructions": "Send instructions",
   "PasswordRecoveryPage.emailSubmittedTitle": "Check your inbox",
   "PasswordRecoveryPage.emailSubmittedMessage": "We have sent the instructions for resetting your password to {email}.",
-  "PasswordRecoveryPage.fixEmail": "{fixEmailHelp} Fix it.",
-  "PasswordRecoveryPage.fixEmailHelp": "Whoops, typo in your email?",
+  "PasswordRecoveryPage.fixEmailLinkText": "Fix it.",
+  "PasswordRecoveryPage.fixEmailInfo": "Whoops, typo in your email? {fixEmailLink}",
   "PasswordRecoveryPage.forgotPasswordTitle": "Forgot your password?",
   "PasswordRecoveryPage.forgotPasswordMessage": "No worries! Please enter the email address you used when signing up and we'll send you instructions on how to create a new password.",
-  "PasswordRecoveryPage.sendAnother": "{sendAnotherHelp} Send another email.",
-  "PasswordRecoveryPage.sendAnotherHelp": "Didn't get the email?",
+  "PasswordRecoveryPage.resendEmailLinkText": "Send another email.",
+  "PasswordRecoveryPage.resendEmailInfo": "Didn't get the email? {resendEmailLink}",
   "PayoutDetailsForm.addressTitle": "Address",
   "PayoutDetailsForm.bankDetails": "Bank details",
   "PayoutDetailsForm.birthdayDatePlaceholder": "dd",

From ae44704a62ea2544c69f377e418cbec7847e441e Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Wed, 13 Sep 2017 18:04:53 +0300
Subject: [PATCH 18/22] Add email not verified

Also add a generic error view.
---
 src/app.test.js                               |   2 +-
 .../PasswordRecoveryPage.duck.js              |  13 +-
 .../PasswordRecoveryPage.js                   | 132 ++++++++++++------
 .../PasswordRecoveryPage.test.js              |   2 +
 .../PasswordRecoveryPage.test.js.snap         |   2 +-
 src/translations/en.json                      |   6 +
 6 files changed, 109 insertions(+), 48 deletions(-)

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 = <span className={css.submittedEmail}>{submittedEmail}</span>;
-    return <FormattedMessage id="PasswordRecoveryPage.emailSubmittedMessage" values={{ email }} />;
-  } else {
-    return <FormattedMessage id="PasswordRecoveryPage.forgotPasswordMessage" />;
-  }
-};
-
 export const PasswordRecoveryPageComponent = props => {
   const {
     authInfoError,
@@ -45,13 +36,12 @@ export const PasswordRecoveryPageComponent = props => {
     onChange,
     onSubmitEmail,
     onRetypeEmail,
+    intl,
   } = props;
 
-  const title = submittedEmail
-    ? <FormattedMessage id="PasswordRecoveryPage.emailSubmittedTitle" />
-    : <FormattedMessage id="PasswordRecoveryPage.forgotPasswordTitle" />;
-
-  const message = recoveryMessage(submittedEmail);
+  const title = intl.formatMessage({
+    id: 'PasswordRecoveryPage.title',
+  });
 
   const resendEmailLink = (
     <InlineTextButton className={css.bottomLink} onClick={() => onSubmitEmail(submittedEmail)}>
@@ -65,23 +55,88 @@ export const PasswordRecoveryPageComponent = props => {
     </InlineTextButton>
   );
 
-  const emailSubmittedLinks = (
-    <div className={css.bottomWrapper}>
-      <p className={css.bottomText}>
-        <FormattedMessage id="PasswordRecoveryPage.resendEmailInfo" values={{ resendEmailLink }} />
+  const submitEmailContent = (
+    <div className={css.content}>
+      <KeysIcon />
+      <h1 className={css.title}>
+        <FormattedMessage id="PasswordRecoveryPage.forgotPasswordTitle" />
+      </h1>
+      <p><FormattedMessage id="PasswordRecoveryPage.forgotPasswordMessage" /></p>
+      <PasswordRecoveryForm
+        onChange={onChange}
+        onSubmit={values => onSubmitEmail(values.email)}
+        initialValues={{ email: initialEmail }}
+        recoveryError={recoveryError}
+      />
+    </div>
+  );
+
+  const email = <span className={css.submittedEmail}>{submittedEmail}</span>;
+  const emailSubmittedContent = (
+    <div className={css.content}>
+      <KeysIcon />
+      <h1 className={css.title}>
+        <FormattedMessage id="PasswordRecoveryPage.emailSubmittedTitle" />
+      </h1>
+      <p>
+        <FormattedMessage id="PasswordRecoveryPage.emailSubmittedMessage" values={{ email }} />
       </p>
-      <p className={css.bottomText}>
-        <FormattedMessage id="PasswordRecoveryPage.fixEmailInfo" values={{ fixEmailLink }} />
+      <div className={css.bottomWrapper}>
+        <p className={css.bottomText}>
+          <FormattedMessage
+            id="PasswordRecoveryPage.resendEmailInfo"
+            values={{ resendEmailLink }}
+          />
+        </p>
+        <p className={css.bottomText}>
+          <FormattedMessage id="PasswordRecoveryPage.fixEmailInfo" values={{ fixEmailLink }} />
+        </p>
+      </div>
+    </div>
+  );
+
+  const emailNotVerifiedContent = (
+    <div className={css.content}>
+      <KeysIcon />
+      <h1 className={css.title}>
+        <FormattedMessage id="PasswordRecoveryPage.emailNotVerifiedTitle" />
+      </h1>
+      <p>
+        <FormattedMessage id="PasswordRecoveryPage.emailNotVerifiedMessage" values={{ email }} />
+      </p>
+      <p>
+        <FormattedMessage id="PasswordRecoveryPage.emailNotVerifiedContactAdmin" />
       </p>
     </div>
   );
 
+  const genericErrorContent = (
+    <div className={css.content}>
+      <KeysIcon />
+      <h1 className={css.title}>
+        <FormattedMessage id="PasswordRecoveryPage.actionFailedTitle" />
+      </h1>
+      <p>
+        <FormattedMessage id="PasswordRecoveryPage.actionFailedMessage" />
+      </p>
+    </div>
+  );
+
+  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 (
-    <PageLayout
-      authInfoError={authInfoError}
-      logoutError={logoutError}
-      title="Request new password"
-    >
+    <PageLayout authInfoError={authInfoError} logoutError={logoutError} title={title}>
       <Topbar
         authInProgress={authInProgress}
         currentUser={currentUser}
@@ -98,19 +153,7 @@ export const PasswordRecoveryPageComponent = props => {
         sendVerificationEmailError={sendVerificationEmailError}
       />
       <div className={css.root}>
-        <div className={css.content}>
-          <KeysIcon />
-          <h1 className={css.title}>{title}</h1>
-          <p>{message}</p>
-          {submittedEmail
-            ? emailSubmittedLinks
-            : <PasswordRecoveryForm
-                onChange={onChange}
-                onSubmit={values => onSubmitEmail(values.email)}
-                initialValues={{ email: initialEmail }}
-                recoveryError={recoveryError}
-              />}
-        </div>
+        {content}
       </div>
 
     </PageLayout>
@@ -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`] = `
 <withRouter(PageLayout)
   authInfoError={null}
   logoutError={null}
-  title="Request new password">
+  title="PasswordRecoveryPage.title">
   <Topbar
     authInProgress={false}
     currentUser={null}
diff --git a/src/translations/en.json b/src/translations/en.json
index 6a224f64..79ec243c 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -232,6 +232,11 @@
   "PasswordRecoveryForm.loginLinkText": "Go log in.",
   "PasswordRecoveryForm.loginLinkInfo": "Suddenly remembered your password? {loginLink}",
   "PasswordRecoveryForm.sendInstructions": "Send instructions",
+  "PasswordRecoveryPage.actionFailedTitle": "Whoops!",
+  "PasswordRecoveryPage.actionFailedMessage": "Something went wrong. Please refresh the page and try again.",
+  "PasswordRecoveryPage.emailNotVerifiedTitle": "We have bad news",
+  "PasswordRecoveryPage.emailNotVerifiedMessage": "Unfortunately, we cannot recover your password, because your email {email} hasn't been verified.",
+  "PasswordRecoveryPage.emailNotVerifiedContactAdmin": "To resolve the issue, please contact Saunatime administrators.",
   "PasswordRecoveryPage.emailSubmittedTitle": "Check your inbox",
   "PasswordRecoveryPage.emailSubmittedMessage": "We have sent the instructions for resetting your password to {email}.",
   "PasswordRecoveryPage.fixEmailLinkText": "Fix it.",
@@ -240,6 +245,7 @@
   "PasswordRecoveryPage.forgotPasswordMessage": "No worries! Please enter the email address you used when signing up and we'll send you instructions on how to create a new password.",
   "PasswordRecoveryPage.resendEmailLinkText": "Send another email.",
   "PasswordRecoveryPage.resendEmailInfo": "Didn't get the email? {resendEmailLink}",
+  "PasswordRecoveryPage.title": "Request a new password",
   "PayoutDetailsForm.addressTitle": "Address",
   "PayoutDetailsForm.bankDetails": "Bank details",
   "PayoutDetailsForm.birthdayDatePlaceholder": "dd",

From 7e2dcd61c41800a1dadfe873fa57e90a59517fa8 Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Wed, 13 Sep 2017 19:11:33 +0300
Subject: [PATCH 19/22] Add in-progress handling

---
 .../PasswordRecoveryPage.duck.js              | 19 ++++++++---
 .../PasswordRecoveryPage.js                   | 33 ++++++++++++++-----
 .../PasswordRecoveryPage.test.js              |  1 +
 src/translations/en.json                      |  5 +--
 4 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.duck.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.duck.js
index a55b48b9..818cdda4 100644
--- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.duck.js
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.duck.js
@@ -13,6 +13,7 @@ const initialState = {
   submittedEmail: null,
   recoveryError: null,
   recoveryInProgress: false,
+  passwordRequested: false,
 };
 
 export default function reducer(state = initialState, action = {}) {
@@ -22,21 +23,31 @@ export default function reducer(state = initialState, action = {}) {
       return {
         ...state,
         submittedEmail: null,
-        initialEmail: null,
         recoveryInProgress: true,
         recoveryError: null,
       };
     case RECOVERY_SUCCESS:
-      return { ...state, submittedEmail: payload.email, recoveryInProgress: false };
+      return {
+        ...state,
+        submittedEmail: payload.email,
+        initialEmail: payload.email,
+        recoveryInProgress: false,
+        passwordRequested: true,
+      };
     case RECOVERY_ERROR:
       return {
         ...state,
         recoveryInProgress: false,
         recoveryError: payload.error,
-        submittedEmail: payload.email,
+        initialEmail: payload.email,
       };
     case RETYPE_EMAIL:
-      return { ...state, submittedEmail: null, initialEmail: state.submittedEmail };
+      return {
+        ...state,
+        initialEmail: state.submittedEmail,
+        submittedEmail: null,
+        passwordRequested: false,
+      };
     case CLEAR_RECOVERY_ERROR:
       return { ...state, recoveryError: null };
     default:
diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
index bf0c3808..d41df674 100644
--- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
@@ -33,6 +33,8 @@ export const PasswordRecoveryPageComponent = props => {
     initialEmail,
     submittedEmail,
     recoveryError,
+    recoveryInProgress,
+    passwordRequested,
     onChange,
     onSubmitEmail,
     onRetypeEmail,
@@ -71,7 +73,9 @@ export const PasswordRecoveryPageComponent = props => {
     </div>
   );
 
-  const email = <span className={css.submittedEmail}>{submittedEmail}</span>;
+  const submittedEmailText = passwordRequested
+    ? <span className={css.submittedEmail}>{initialEmail}</span>
+    : <span className={css.submittedEmail}>{submittedEmail}</span>;
   const emailSubmittedContent = (
     <div className={css.content}>
       <KeysIcon />
@@ -79,14 +83,19 @@ export const PasswordRecoveryPageComponent = props => {
         <FormattedMessage id="PasswordRecoveryPage.emailSubmittedTitle" />
       </h1>
       <p>
-        <FormattedMessage id="PasswordRecoveryPage.emailSubmittedMessage" values={{ email }} />
+        <FormattedMessage
+          id="PasswordRecoveryPage.emailSubmittedMessage"
+          values={{ submittedEmailText }}
+        />
       </p>
       <div className={css.bottomWrapper}>
         <p className={css.bottomText}>
-          <FormattedMessage
-            id="PasswordRecoveryPage.resendEmailInfo"
-            values={{ resendEmailLink }}
-          />
+          {recoveryInProgress
+            ? <FormattedMessage id="PasswordRecoveryPage.resendingEmailInfo" />
+            : <FormattedMessage
+                id="PasswordRecoveryPage.resendEmailInfo"
+                values={{ resendEmailLink }}
+              />}
         </p>
         <p className={css.bottomText}>
           <FormattedMessage id="PasswordRecoveryPage.fixEmailInfo" values={{ fixEmailLink }} />
@@ -95,6 +104,7 @@ export const PasswordRecoveryPageComponent = props => {
     </div>
   );
 
+  const initialEmailText = <span className={css.submittedEmail}>{initialEmail}</span>;
   const emailNotVerifiedContent = (
     <div className={css.content}>
       <KeysIcon />
@@ -102,7 +112,10 @@ export const PasswordRecoveryPageComponent = props => {
         <FormattedMessage id="PasswordRecoveryPage.emailNotVerifiedTitle" />
       </h1>
       <p>
-        <FormattedMessage id="PasswordRecoveryPage.emailNotVerifiedMessage" values={{ email }} />
+        <FormattedMessage
+          id="PasswordRecoveryPage.emailNotVerifiedMessage"
+          values={{ initialEmailText }}
+        />
       </p>
       <p>
         <FormattedMessage id="PasswordRecoveryPage.emailNotVerifiedContactAdmin" />
@@ -129,7 +142,7 @@ export const PasswordRecoveryPageComponent = props => {
     content = submitEmailContent;
   } else if (recoveryError) {
     content = genericErrorContent;
-  } else if (submittedEmail) {
+  } else if (submittedEmail || passwordRequested) {
     content = emailSubmittedContent;
   } else {
     content = submitEmailContent;
@@ -191,6 +204,8 @@ PasswordRecoveryPageComponent.propTypes = {
   initialEmail: string,
   submittedEmail: string,
   recoveryError: instanceOf(Error),
+  recoveryInProgress: bool.isRequired,
+  passwordRequested: bool.isRequired,
   onChange: func.isRequired,
   onSubmitEmail: func.isRequired,
   onRetypeEmail: func.isRequired,
@@ -223,6 +238,7 @@ const mapStateToProps = state => {
     submittedEmail,
     recoveryError,
     recoveryInProgress,
+    passwordRequested,
   } = state.PasswordRecoveryPage;
   return {
     authInfoError,
@@ -240,6 +256,7 @@ const mapStateToProps = state => {
     submittedEmail,
     recoveryError,
     recoveryInProgress,
+    passwordRequested,
   };
 };
 
diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.test.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.test.js
index 3c650b66..efe43fde 100644
--- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.test.js
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.test.js
@@ -21,6 +21,7 @@ describe('ContactDetailsPage', () => {
         sendVerificationEmailInProgress={false}
         onResendVerificationEmail={noop}
         recoveryInProgress={false}
+        passwordRequested={false}
         onChange={noop}
         onSubmitEmail={noop}
         onRetypeEmail={noop}
diff --git a/src/translations/en.json b/src/translations/en.json
index 79ec243c..6a215888 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -235,16 +235,17 @@
   "PasswordRecoveryPage.actionFailedTitle": "Whoops!",
   "PasswordRecoveryPage.actionFailedMessage": "Something went wrong. Please refresh the page and try again.",
   "PasswordRecoveryPage.emailNotVerifiedTitle": "We have bad news",
-  "PasswordRecoveryPage.emailNotVerifiedMessage": "Unfortunately, we cannot recover your password, because your email {email} hasn't been verified.",
+  "PasswordRecoveryPage.emailNotVerifiedMessage": "Unfortunately, we cannot recover your password, because your email {initialEmailText} hasn't been verified.",
   "PasswordRecoveryPage.emailNotVerifiedContactAdmin": "To resolve the issue, please contact Saunatime administrators.",
   "PasswordRecoveryPage.emailSubmittedTitle": "Check your inbox",
-  "PasswordRecoveryPage.emailSubmittedMessage": "We have sent the instructions for resetting your password to {email}.",
+  "PasswordRecoveryPage.emailSubmittedMessage": "We have sent the instructions for resetting your password to {submittedEmailText}.",
   "PasswordRecoveryPage.fixEmailLinkText": "Fix it.",
   "PasswordRecoveryPage.fixEmailInfo": "Whoops, typo in your email? {fixEmailLink}",
   "PasswordRecoveryPage.forgotPasswordTitle": "Forgot your password?",
   "PasswordRecoveryPage.forgotPasswordMessage": "No worries! Please enter the email address you used when signing up and we'll send you instructions on how to create a new password.",
   "PasswordRecoveryPage.resendEmailLinkText": "Send another email.",
   "PasswordRecoveryPage.resendEmailInfo": "Didn't get the email? {resendEmailLink}",
+  "PasswordRecoveryPage.resendingEmailInfo": "Resending instructions...",
   "PasswordRecoveryPage.title": "Request a new password",
   "PayoutDetailsForm.addressTitle": "Address",
   "PayoutDetailsForm.bankDetails": "Bank details",

From d3bd5ffeca1f48e20f0df5060beea01f7e0ee5d1 Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Thu, 14 Sep 2017 09:07:14 +0300
Subject: [PATCH 20/22] Add an icon for password not verified page

---
 .../PasswordRecoveryPage/DoorIcon.js          | 53 +++++++++++++++++++
 .../PasswordRecoveryPage.js                   |  3 +-
 2 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 src/containers/PasswordRecoveryPage/DoorIcon.js

diff --git a/src/containers/PasswordRecoveryPage/DoorIcon.js b/src/containers/PasswordRecoveryPage/DoorIcon.js
new file mode 100644
index 00000000..5bed0738
--- /dev/null
+++ b/src/containers/PasswordRecoveryPage/DoorIcon.js
@@ -0,0 +1,53 @@
+import React, { PropTypes } from 'react';
+
+const DoorIcon = props => {
+  const { className } = props;
+  return (
+    <svg
+      className={className}
+      width="52"
+      height="59"
+      viewBox="0 0 52 59"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g strokeWidth="2.5" fill="none" fillRule="evenodd" strokeLinejoin="round">
+        <path
+          stroke="#C0392B"
+          fill="#C0392B"
+          strokeLinecap="round"
+          d="M28.182 42.364H50V26H28.182z"
+        />
+        <path d="M39.09 38v-4.364" stroke="#FFF" strokeLinecap="round" />
+        <path
+          d="M31.455 26v-2.455c0-4.067 3.176-7.363 7.09-7.363 3.915 0 7.09 3.296 7.09 7.363V26"
+          stroke="#C0392B"
+          strokeLinecap="round"
+        />
+        <path
+          d="M40.182 32.545c0 .603-.49 1.09-1.09 1.09-.603 0-1.092-.487-1.092-1.09 0-.602.49-1.09 1.09-1.09.603 0 1.092.488 1.092 1.09z"
+          stroke="#FFF"
+        />
+        <path
+          stroke="#C0392B"
+          strokeLinecap="round"
+          d="M23.818 7.455h19.637V14M43.455 47.818v4.364H23.818M2 52.798l21.818 4.838V2L2 6.838z"
+        />
+        <path
+          d="M19.455 30.91c0 2.107-1.71 3.817-3.82 3.817-2.106 0-3.817-1.71-3.817-3.818 0-2.11 1.71-3.82 3.818-3.82s3.82 1.71 3.82 3.82z"
+          stroke="#C0392B"
+          strokeLinecap="round"
+        />
+      </g>
+    </svg>
+  );
+};
+
+DoorIcon.defaultProps = { className: null };
+
+const { string } = PropTypes;
+
+DoorIcon.propTypes = {
+  className: string,
+};
+
+export default DoorIcon;
diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
index d41df674..df9f7f45 100644
--- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
@@ -11,6 +11,7 @@ import { recoverPassword, retypeEmail, clearRecoveryError } from './PasswordReco
 import { PageLayout, Topbar, InlineTextButton, KeysIcon } from '../../components';
 import { PasswordRecoveryForm } from '../../containers';
 
+import DoorIcon from './DoorIcon';
 import css from './PasswordRecoveryPage.css';
 
 export const PasswordRecoveryPageComponent = props => {
@@ -107,7 +108,7 @@ export const PasswordRecoveryPageComponent = props => {
   const initialEmailText = <span className={css.submittedEmail}>{initialEmail}</span>;
   const emailNotVerifiedContent = (
     <div className={css.content}>
-      <KeysIcon />
+      <DoorIcon />
       <h1 className={css.title}>
         <FormattedMessage id="PasswordRecoveryPage.emailNotVerifiedTitle" />
       </h1>

From a855d30f1124423ea7dc0af243ae5c3437e08bf5 Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Thu, 14 Sep 2017 10:49:32 +0300
Subject: [PATCH 21/22] Fix baseline

---
 .../PasswordRecoveryForm.css                  | 23 ++++--
 .../PasswordRecoveryForm.js                   | 15 ++--
 .../PasswordRecoveryPage.css                  | 82 +++++++++++++++----
 .../PasswordRecoveryPage.js                   | 23 +++---
 src/translations/en.json                      |  2 +-
 5 files changed, 106 insertions(+), 39 deletions(-)

diff --git a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.css b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.css
index dc164ac8..a4c925e5 100644
--- a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.css
+++ b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.css
@@ -1,27 +1,38 @@
 @import '../../marketplace.css';
 
 .root {
-  display: flex;
+display: flex;
   flex-direction: column;
   flex: 1;
   justify-content: space-between;
   height: 100%;
+  min-height: 306px;
 }
 
 .email {
-  margin-top: 24px;
-  margin-bottom: 24px;
+  margin-top: 37px;
 
   @media (--viewportMedium) {
-    margin-top: 22px;
-    margin-bottom: 88px;
+    margin-top: 38px;
   }
 }
 
 .bottomWrapper {
-  @apply --marketplaceH5FontStyles;
   margin-top: auto;
+}
+
+.bottomText {
+  @apply --marketplaceH5FontStyles;
   color: var(--matterColorAnti);
+  margin: 0;
+
+  @media (--viewportMedium) {
+    margin: 0;
+  }
+}
+
+.submitButton {
+  margin-top: 26px;
 }
 
 .loginLink {
diff --git a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js
index e1531bcd..189f803c 100644
--- a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js
+++ b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js
@@ -61,12 +61,15 @@ const PasswordRecoveryFormComponent = props => {
         validate={emailRequired}
         customErrorText={customErrorText}
       />
-      <p className={css.bottomWrapper}>
-        <FormattedMessage id="PasswordRecoveryForm.loginLinkInfo" values={{ loginLink }} />
-      </p>
-      <PrimaryButton type="submit" disabled={buttonDisabled}>
-        <FormattedMessage id="PasswordRecoveryForm.sendInstructions" />
-      </PrimaryButton>
+
+      <div className={css.bottomWrapper}>
+        <p className={css.bottomText}>
+          <FormattedMessage id="PasswordRecoveryForm.loginLinkInfo" values={{ loginLink }} />
+        </p>
+        <PrimaryButton className={css.submitButton} type="submit" disabled={buttonDisabled}>
+          <FormattedMessage id="PasswordRecoveryForm.sendInstructions" />
+        </PrimaryButton>
+      </div>
     </form>
   );
 };
diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css
index f409193c..b655d83e 100644
--- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css
@@ -1,5 +1,24 @@
 @import '../../marketplace.css';
 
+:root {
+  --baseContent: {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 32px 24px 98px 24px;
+    background-color: var(--matterColorLight);
+    border-radius: 2px;
+
+    @media (--viewportMedium) {
+      flex-basis: 480px;
+      flex-grow: 0;
+      padding: 55px;
+      margin-top: 7.5vh;
+      margin-bottom: 7.5vh;
+    }
+  }
+}
+
 .root {
   @apply --backgroundImage;
 
@@ -12,24 +31,34 @@
   }
 }
 
-.content {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  padding: 30px 24px 98px 24px;
-  background-color: var(--matterColorLight);
-  border-radius: 2px;
+.submitEmailContent {
+  @apply --baseContent;
+}
+
+.emailSubmittedContent {
+  @apply --baseContent;
+  padding-bottom: 99px;
 
   @media (--viewportMedium) {
-    flex-basis: 480px;
-    flex-grow: 0;
-    min-height: 573px;
-    padding: 60px;
-    margin-top: 7.5vh;
-    margin-bottom: 7.5vh;
+    padding-bottom: 62px;
+    min-height: 508px;
   }
 }
 
+.emailNotVerifiedContent {
+  @apply --baseContent;
+  padding-top: 30px;
+
+  @media (--viewportMedium) {
+    padding-top: 53px;
+    padding-bottom: 80px;
+  }
+}
+
+.genericErrorContent {
+  @apply --baseContent;
+}
+
 .keysIconRoot {
   width: 100%;
   height: 100%;
@@ -37,17 +66,38 @@
 
 .title {
   @apply --marketplaceModalTitle;
+  margin-top: 31px;
+  margin-bottom: 0px;
+}
+
+.message {
+  margin-top: 23px;
+  margin-bottom: 0px;
+
+  @media (--viewportMedium) {
+    margin-top: 24px;
+    margin-bottom: 0px;
+  }
 }
 
 .submittedEmail {
   font-weight: bold;
 }
 
-.bottomWrapper {
-  margin-top: 67px;
+.emailNotVerifiedBottomText {
+  margin-top: 30px;
+  margin-bottom: 0px;
+
+  @media (--viewportMedium) {
+    margin-top: 32px;
+  }
 }
 
-.bottomText {
+.bottomWrapper {
+  margin-top: auto;
+}
+
+.bottomInfo {
   @apply --marketplaceH5FontStyles;
   margin: 0;
   color: var(--matterColorAnti);
diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
index df9f7f45..d8ebf78b 100644
--- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
@@ -59,12 +59,14 @@ export const PasswordRecoveryPageComponent = props => {
   );
 
   const submitEmailContent = (
-    <div className={css.content}>
+    <div className={css.submitEmailContent}>
       <KeysIcon />
       <h1 className={css.title}>
         <FormattedMessage id="PasswordRecoveryPage.forgotPasswordTitle" />
       </h1>
-      <p><FormattedMessage id="PasswordRecoveryPage.forgotPasswordMessage" /></p>
+      <p className={css.message}>
+        <FormattedMessage id="PasswordRecoveryPage.forgotPasswordMessage" />
+      </p>
       <PasswordRecoveryForm
         onChange={onChange}
         onSubmit={values => onSubmitEmail(values.email)}
@@ -77,20 +79,21 @@ export const PasswordRecoveryPageComponent = props => {
   const submittedEmailText = passwordRequested
     ? <span className={css.submittedEmail}>{initialEmail}</span>
     : <span className={css.submittedEmail}>{submittedEmail}</span>;
+
   const emailSubmittedContent = (
-    <div className={css.content}>
+    <div className={css.emailSubmittedContent}>
       <KeysIcon />
       <h1 className={css.title}>
         <FormattedMessage id="PasswordRecoveryPage.emailSubmittedTitle" />
       </h1>
-      <p>
+      <p className={css.message}>
         <FormattedMessage
           id="PasswordRecoveryPage.emailSubmittedMessage"
           values={{ submittedEmailText }}
         />
       </p>
       <div className={css.bottomWrapper}>
-        <p className={css.bottomText}>
+        <p className={css.bottomInfo}>
           {recoveryInProgress
             ? <FormattedMessage id="PasswordRecoveryPage.resendingEmailInfo" />
             : <FormattedMessage
@@ -98,7 +101,7 @@ export const PasswordRecoveryPageComponent = props => {
                 values={{ resendEmailLink }}
               />}
         </p>
-        <p className={css.bottomText}>
+        <p className={css.bottomInfo}>
           <FormattedMessage id="PasswordRecoveryPage.fixEmailInfo" values={{ fixEmailLink }} />
         </p>
       </div>
@@ -107,25 +110,25 @@ export const PasswordRecoveryPageComponent = props => {
 
   const initialEmailText = <span className={css.submittedEmail}>{initialEmail}</span>;
   const emailNotVerifiedContent = (
-    <div className={css.content}>
+    <div className={css.emailNotVerifiedContent}>
       <DoorIcon />
       <h1 className={css.title}>
         <FormattedMessage id="PasswordRecoveryPage.emailNotVerifiedTitle" />
       </h1>
-      <p>
+      <p className={css.message}>
         <FormattedMessage
           id="PasswordRecoveryPage.emailNotVerifiedMessage"
           values={{ initialEmailText }}
         />
       </p>
-      <p>
+      <p className={css.emailNotVerifiedBottomText}>
         <FormattedMessage id="PasswordRecoveryPage.emailNotVerifiedContactAdmin" />
       </p>
     </div>
   );
 
   const genericErrorContent = (
-    <div className={css.content}>
+    <div className={css.genericErrorContent}>
       <KeysIcon />
       <h1 className={css.title}>
         <FormattedMessage id="PasswordRecoveryPage.actionFailedTitle" />
diff --git a/src/translations/en.json b/src/translations/en.json
index 6a215888..44e97b0f 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -242,7 +242,7 @@
   "PasswordRecoveryPage.fixEmailLinkText": "Fix it.",
   "PasswordRecoveryPage.fixEmailInfo": "Whoops, typo in your email? {fixEmailLink}",
   "PasswordRecoveryPage.forgotPasswordTitle": "Forgot your password?",
-  "PasswordRecoveryPage.forgotPasswordMessage": "No worries! Please enter the email address you used when signing up and we'll send you instructions on how to create a new password.",
+  "PasswordRecoveryPage.forgotPasswordMessage": "No worries! Please enter the email address you used when signing up and we'll send you instructions on how to set a new password.",
   "PasswordRecoveryPage.resendEmailLinkText": "Send another email.",
   "PasswordRecoveryPage.resendEmailInfo": "Didn't get the email? {resendEmailLink}",
   "PasswordRecoveryPage.resendingEmailInfo": "Resending instructions...",

From 91c6f26e744477f688d48ac5519520e8dc8e0c98 Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Fri, 15 Sep 2017 10:55:29 +0300
Subject: [PATCH 22/22] PR review changes

Add a comment about custom error passed to email input.
Rename functions exported from PasswordRecoveryPage duck file to
something more explicit.
---
 .../PasswordRecoveryForm/PasswordRecoveryForm.js |  2 ++
 .../PasswordRecoveryPage.duck.js                 | 16 ++++++++--------
 .../PasswordRecoveryPage/PasswordRecoveryPage.js |  6 +++---
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js
index 189f803c..8370fe36 100644
--- a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js
+++ b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js
@@ -38,6 +38,8 @@ const PasswordRecoveryFormComponent = props => {
   });
 
   const emailRequired = validators.required(emailRequiredMessage);
+  // In case a given email is not found, pass a custom error message
+  // to be rendered with the input component
   const customErrorText = isNotFoundError(recoveryError) ? emailNotFoundMessage : null;
   const initialEmail = initialValues ? initialValues.email : null;
   const buttonDisabled = (pristine && !initialEmail) || submitting;
diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.duck.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.duck.js
index 818cdda4..a2ec3b7c 100644
--- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.duck.js
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.duck.js
@@ -57,24 +57,24 @@ export default function reducer(state = initialState, action = {}) {
 
 // ================ Action creators ================ //
 
-export const recoveryRequest = () => ({ type: RECOVERY_REQUEST });
-export const recoverySuccess = email => ({ type: RECOVERY_SUCCESS, payload: { email } });
-export const recoveryError = (error, email) => ({
+export const passwordRecoveryRequest = () => ({ type: RECOVERY_REQUEST });
+export const passwordRecoverySuccess = email => ({ type: RECOVERY_SUCCESS, payload: { email } });
+export const passwordRecoveryError = (error, email) => ({
   type: RECOVERY_ERROR,
   payload: { error, email },
   error: true,
 });
-export const retypeEmail = () => ({ type: RETYPE_EMAIL });
-export const clearRecoveryError = () => ({ type: CLEAR_RECOVERY_ERROR });
+export const retypePasswordRecoveryEmail = () => ({ type: RETYPE_EMAIL });
+export const clearPasswordRecoveryError = () => ({ type: CLEAR_RECOVERY_ERROR });
 
 // ================ Thunks ================ //
 
 export const recoverPassword = email =>
   (dispatch, getState, sdk) => {
-    dispatch(recoveryRequest());
+    dispatch(passwordRecoveryRequest());
 
     return sdk.passwordReset
       .request({ email })
-      .then(() => dispatch(recoverySuccess(email)))
-      .catch(error => dispatch(recoveryError(error, email)));
+      .then(() => dispatch(passwordRecoverySuccess(email)))
+      .catch(error => dispatch(passwordRecoveryError(error, email)));
   };
diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
index d8ebf78b..afcc2f1e 100644
--- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
@@ -7,7 +7,7 @@ import * as propTypes from '../../util/propTypes';
 import { sendVerificationEmail } from '../../ducks/user.duck';
 import { logout, authenticationInProgress } from '../../ducks/Auth.duck';
 import { manageDisableScrolling, isScrollingDisabled } from '../../ducks/UI.duck';
-import { recoverPassword, retypeEmail, clearRecoveryError } from './PasswordRecoveryPage.duck';
+import { recoverPassword, retypePasswordRecoveryEmail, clearPasswordRecoveryError } from './PasswordRecoveryPage.duck';
 import { PageLayout, Topbar, InlineTextButton, KeysIcon } from '../../components';
 import { PasswordRecoveryForm } from '../../containers';
 
@@ -269,9 +269,9 @@ const mapDispatchToProps = dispatch => ({
   onManageDisableScrolling: (componentId, disableScrolling) =>
     dispatch(manageDisableScrolling(componentId, disableScrolling)),
   onResendVerificationEmail: () => dispatch(sendVerificationEmail()),
-  onChange: () => dispatch(clearRecoveryError()),
+  onChange: () => dispatch(clearPasswordRecoveryError()),
   onSubmitEmail: email => dispatch(recoverPassword(email)),
-  onRetypeEmail: () => dispatch(retypeEmail()),
+  onRetypeEmail: () => dispatch(retypePasswordRecoveryEmail()),
 });
 
 const PasswordRecoveryPage = compose(