Merge pull request #1011 from pixelated/confirmation-page

[#971] Add backup account confirmation page

9 files changed, 280 insertions, 60 deletions

diff --git a/web-ui/src/backup_account/backup_email/backup_email.js b/web-ui/src/backup_account/backup_email/backup_email.js
index 3d5df1b0..05cba35e 100644
--- a/web-ui/src/backup_account/backup_email/backup_email.js
+++ b/web-ui/src/backup_account/backup_email/backup_email.js
@@ -21,6 +21,7 @@ import SubmitButton from 'src/common/submit_button/submit_button';
 import InputField from 'src/common/input_field/input_field';
 import validator from 'validator';
 
+import './backup_email.scss';
 
 export class BackupEmail extends React.Component {
 
@@ -39,16 +40,23 @@ export class BackupEmail extends React.Component {
     });
   }
 
+  submitHandler = (event) => {
+    event.preventDefault();
+    if (typeof this.props.onSubmit === 'function') {
+      this.props.onSubmit();
+    }
+  }
+
   render() {
     const t = this.props.t;
     return (
-      <div className='container'>
+      <div className='container backup-email-container'>
         <img
           className='backup-account-image'
           src='/public/images/forgot-my-password.svg'
           alt={t('backup-account.backup-email.image-description')}
         />
-        <form>
+        <form onSubmit={this.submitHandler}>
           <h1>{t('backup-account.backup-email.title')}</h1>
           <p>{t('backup-account.backup-email.paragraph1')}</p>
           <p>{t('backup-account.backup-email.paragraph2')}</p>
@@ -68,7 +76,8 @@ export class BackupEmail extends React.Component {
 
 
 BackupEmail.propTypes = {
-  t: React.PropTypes.func.isRequired
+  t: React.PropTypes.func.isRequired,
+  onSubmit: React.PropTypes.func.isRequired
 };
 
 export default translate('', { wait: true })(BackupEmail);
diff --git a/web-ui/src/backup_account/backup_email/backup_email.scss b/web-ui/src/backup_account/backup_email/backup_email.scss
new file mode 100644
index 00000000..a7e09ba3
--- /dev/null
+++ b/web-ui/src/backup_account/backup_email/backup_email.scss
@@ -0,0 +1,75 @@
+/*
+ * Copyright (c) 2017 ThoughtWorks, Inc.
+ *
+ * Pixelated is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Pixelated is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Pixelated. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+@import "~scss/vendor/reset";
+@import "~scss/base/colors";
+@import "~scss/base/fonts";
+
+
+form {
+  width: 100%;
+}
+
+.backup-email-container {
+  width: 84%;
+  padding: 6% 5%;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+}
+
+.backup-account-image {
+  width: 50%;
+  height: 100%;
+  align-self: center;
+}
+
+@media only screen and (min-width : 500px) {
+  form {
+    display: flex;
+    flex-direction: column;
+
+    .input-field-group, .submit-button, .link-content {
+      width: 70%;
+      align-self: center;
+    }
+  }
+}
+
+@media only screen and (min-width : 960px) {
+  .backup-email-container{
+    width: 60%;
+    max-width: 700px;
+    padding: 3em;
+    align-items: flex-start;
+    flex-direction: row;
+
+    form {
+      margin-left: 2.5em;
+      min-height: 492px;
+
+      .input-field-group, .submit-button, .link-content {
+        width: 300px;
+        align-self: flex-start;
+      }
+    }
+  }
+
+  .backup-account-image {
+    width: 300px;
+  }
+}
diff --git a/web-ui/src/backup_account/backup_email/backup_email.spec.js b/web-ui/src/backup_account/backup_email/backup_email.spec.js
index b2b297f4..8732003b 100644
--- a/web-ui/src/backup_account/backup_email/backup_email.spec.js
+++ b/web-ui/src/backup_account/backup_email/backup_email.spec.js
@@ -5,9 +5,10 @@ import { BackupEmail } from 'src/backup_account/backup_email/backup_email';
 
 describe('BackupEmail', () => {
   let page;
+  let mockTranslations;
 
   beforeEach(() => {
-    const mockTranslations = key => key;
+    mockTranslations = key => key;
     page = shallow(<BackupEmail t={mockTranslations} />);
   });
 
@@ -23,6 +24,15 @@ describe('BackupEmail', () => {
     expect(page.find('SubmitButton').props().buttonText).toEqual('backup-account.backup-email.button');
   });
 
+  it('form submit should call parameter custom submit', () => {
+    const mockOnSubmit = expect.createSpy();
+    const event = { preventDefault() {} };
+    page = shallow(<BackupEmail t={mockTranslations} onSubmit={mockOnSubmit} />);
+
+    page.instance().submitHandler(event);
+    expect(mockOnSubmit).toHaveBeenCalled();
+  });
+
   describe('Email validation', () => {
     let pageInstance;
 
diff --git a/web-ui/src/backup_account/confirmation/confirmation.js b/web-ui/src/backup_account/confirmation/confirmation.js
new file mode 100644
index 00000000..41637dab
--- /dev/null
+++ b/web-ui/src/backup_account/confirmation/confirmation.js
@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2017 ThoughtWorks, Inc.
+ *
+ * Pixelated is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Pixelated is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Pixelated. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+import { translate } from 'react-i18next';
+import SubmitButton from 'src/common/submit_button/submit_button';
+
+import './confirmation.scss';
+
+export const Confirmation = ({ t }) => (
+  <div className='container confirmation-container'>
+    <h1>{t('backup-account.confirmation.title1')} <br /> {t('backup-account.confirmation.title2')}</h1>
+    <p>{t('backup-account.confirmation.paragraph')}</p>
+    <img src='/public/images/sent-mail.svg' alt='Sent mail' />
+    <form action='/'>
+      <SubmitButton buttonText={t('backup-account.confirmation.button')} type='submit' />
+    </form>
+    <div className='link-content'>
+      <a href='/backup-account' className='link'>
+        <i className='fa fa-angle-left' aria-hidden='true' />
+        <span>{t('backup-account.confirmation.retry-button')}</span>
+      </a>
+    </div>
+  </div>
+);
+
+Confirmation.propTypes = {
+  t: React.PropTypes.func.isRequired
+};
+
+export default translate('', { wait: true })(Confirmation);
diff --git a/web-ui/src/backup_account/confirmation/confirmation.scss b/web-ui/src/backup_account/confirmation/confirmation.scss
new file mode 100644
index 00000000..241442ff
--- /dev/null
+++ b/web-ui/src/backup_account/confirmation/confirmation.scss
@@ -0,0 +1,60 @@
+/*
+ * Copyright (c) 2017 ThoughtWorks, Inc.
+ *
+ * Pixelated is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Pixelated is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Pixelated. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+@import "~scss/vendor/reset";
+@import "~scss/base/colors";
+@import "~scss/base/fonts";
+
+.confirmation-container {
+  width: 84%;
+  padding: 6% 5%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  img {
+    padding: 2em 3.2em 2em 0;
+  }
+}
+
+ .submit-button {
+   align-self: center;
+ }
+
+@media only screen and (min-width : 500px) {
+  .confirmation-container {
+    width: 50%;
+    padding: 1em 2em;
+  }
+
+  .submit-button {
+    width: 70%;
+  }
+}
+
+@media only screen and (min-width : 960px) {
+  .confirmation-container {
+    width: 30%;
+    padding: 1em 2em;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .submit-button {
+    width: 65%;
+  }
+}
diff --git a/web-ui/src/backup_account/confirmation/confirmation.spec.js b/web-ui/src/backup_account/confirmation/confirmation.spec.js
new file mode 100644
index 00000000..291d156d
--- /dev/null
+++ b/web-ui/src/backup_account/confirmation/confirmation.spec.js
@@ -0,0 +1,29 @@
+import { shallow } from 'enzyme';
+import expect from 'expect';
+import React from 'react';
+import { Confirmation } from 'src/backup_account/confirmation/confirmation';
+
+describe('Confirmation', () => {
+  let page;
+
+  beforeEach(() => {
+    const mockTranslations = key => key;
+    page = shallow(<Confirmation t={mockTranslations} />);
+  });
+
+  it('renders confirmation title', () => {
+    expect(page.find('h1').text()).toContain('backup-account.confirmation.title1');
+  });
+
+  it('renders confirmation submit button', () => {
+    expect(page.find('SubmitButton').props().buttonText).toEqual('backup-account.confirmation.button');
+  });
+
+  it('renders confirmation retry button', () => {
+    expect(page.find('a').text()).toEqual('backup-account.confirmation.retry-button');
+  });
+
+  it('retries button redirects to backup account', () => {
+    expect(page.find('a').props().href).toEqual('/backup-account');
+  });
+});
diff --git a/web-ui/src/backup_account/page.js b/web-ui/src/backup_account/page.js
index 5a75850a..221c6978 100644
--- a/web-ui/src/backup_account/page.js
+++ b/web-ui/src/backup_account/page.js
@@ -21,6 +21,7 @@ import DocumentTitle from 'react-document-title';
 import Footer from 'src/common/footer/footer';
 import Header from 'src/common/header/header';
 import BackupEmail from 'src/backup_account/backup_email/backup_email';
+import Confirmation from 'src/backup_account/confirmation/confirmation';
 
 import 'font-awesome/scss/font-awesome.scss';
 import './page.scss';
@@ -33,6 +34,17 @@ export class Page extends React.Component {
     this.state = { status: '' };
   }
 
+  saveBackupEmail = () => {
+    this.setState({
+      status: 'success'
+    });
+  }
+
+  mainContent = () => {
+    if (this.state.status === 'success') return <Confirmation />;
+    return <BackupEmail onSubmit={this.saveBackupEmail} />;
+  };
+
   render() {
     const t = this.props.t;
     return (
@@ -40,7 +52,7 @@ export class Page extends React.Component {
         <div className='page'>
           <Header />
           <section>
-            <BackupEmail />
+            {this.mainContent()}
           </section>
           <Footer />
         </div>
diff --git a/web-ui/src/backup_account/page.scss b/web-ui/src/backup_account/page.scss
index aa973fcd..71e3f074 100644
--- a/web-ui/src/backup_account/page.scss
+++ b/web-ui/src/backup_account/page.scss
@@ -31,6 +31,12 @@ a {
   text-decoration: none;
 }
 
+.container {
+  background: $white;
+  margin: 3% auto;
+  box-shadow: 0 2px 3px 0 $shadow;
+}
+
 .page {
   font-family: "Open Sans", "Microsoft YaHei", "Hiragino Sans GB", "Hiragino Sans GB W3", "微软雅黑", "Helvetica Neue", Arial, sans-serif;
   background: $dark_blue; /* For browsers that do not support gradients */
@@ -48,10 +54,6 @@ section {
   flex: 1 0 auto;
 }
 
-form {
-  width: 100%;
-}
-
 h1 {
   font-size: 1.3em;
   font-weight: 600;
@@ -65,6 +67,7 @@ p {
 .link {
   color: $dark_blue;
   font-style: italic;
+  font-size: 0.8em;
 
   .fa {
     font-size: 1.6em;
@@ -75,59 +78,8 @@ p {
 
 }
 
-.container {
-  background: $white;
-  width: 84%;
-  margin: 3% auto;
-  padding: 6% 5%;
-  display: flex;
-  align-items: flex-start;
-  flex-direction: column;
-  box-shadow: 0 2px 3px 0 $shadow;
-}
-
-.backup-account-image {
-  width: 50%;
-  height: 100%;
-  align-self: center;
-}
-
 @media only screen and (min-width : 500px) {
   body {
     font-size: 1.3em;
   }
-
-  form {
-    display: flex;
-    flex-direction: column;
-
-    .input-field-group, .submit-button, .link-content {
-      width: 70%;
-      align-self: center;
-    }
-  }
-}
-
-@media only screen and (min-width : 960px) {
-  .container{
-    width: 60%;
-    padding: 3em;
-    align-items: flex-start;
-    flex-direction: row;
-    max-width: 700px;
-  }
-
-  form {
-    margin-left: 2.5em;
-    min-height: 492px;
-
-    .input-field-group, .submit-button, .link-content {
-      width: 300px;
-      align-self: flex-start;
-    }
-  }
-
-  .backup-account-image {
-    width: 300px;
-  }
 }
diff --git a/web-ui/src/backup_account/page.spec.js b/web-ui/src/backup_account/page.spec.js
index 2f4bc7c1..23c117a0 100644
--- a/web-ui/src/backup_account/page.spec.js
+++ b/web-ui/src/backup_account/page.spec.js
@@ -2,6 +2,8 @@ import { shallow } from 'enzyme';
 import expect from 'expect';
 import React from 'react';
 import { Page } from 'src/backup_account/page';
+import BackupEmail from 'src/backup_account/backup_email/backup_email';
+import Confirmation from 'src/backup_account/confirmation/confirmation';
 
 describe('BackupAccount', () => {
   let page;
@@ -14,4 +16,30 @@ describe('BackupAccount', () => {
   it('renders backup account page title', () => {
     expect(page.props().title).toEqual('backup-account.page-title');
   });
+
+  describe('save backup email', () => {
+    let pageInstance;
+
+    beforeEach(() => {
+      pageInstance = page.instance();
+    });
+
+    it('verifies initial state', () => {
+      expect(pageInstance.state.status).toEqual('');
+    });
+
+    it('changes state', () => {
+      pageInstance.saveBackupEmail();
+      expect(pageInstance.state.status).toEqual('success');
+    });
+
+    it('renders backup email component', () => {
+      expect(page.find(BackupEmail).length).toEqual(1);
+    });
+
+    it('renders confirmation component', () => {
+      pageInstance.saveBackupEmail();
+      expect(page.find(Confirmation).length).toEqual(1);
+    });
+  });
 });