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] 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",