Merge pull request #1011 from pixelated/confirmation-page

[#971] Add backup account confirmation page

web-ui/app/locales/en_US/translation.json

@@ -91,6 +91,13 @@
         "error": {
           "invalid-email": "Please enter a valid email address"
         }
+      },
+      "confirmation": {
+        "title1": "Success!",
+        "title2": "A message was sent to your backup account",
+        "paragraph": "Save this message, it is really important.",
+        "button": "Got it! I'm ready!",
+        "retry-button": "Hey, I didn't received it"
       }
     },
     "back-to-inbox": "Back to my inbox",

web-ui/app/locales/pt_BR/translation.json

@@ -91,6 +91,13 @@
         "error": {
           "invalid-email": "Por favor informe um e-mail válido"
         }
+      },
+      "confirmation": {
+        "title1": "Sucesso!",
+        "title2": "Uma mensagem foi enviada para seu e-mail de recuperação",
+        "paragraph": "Salve esse e-mail, ele é bem importante.",
+        "button": "Recebi! Pronto!",
+        "retry-button": "Ei, eu não recebi"
       }
     },
     "back-to-inbox": "Voltar",

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);

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;
+  }
+}

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;
 

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);

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%;
+  }
+}

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');
+  });
+});

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,14 +34,25 @@ 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 (
       <DocumentTitle title={t('backup-account.page-title')}>
         <div className='page'>
           <Header />
           <section>
-            <BackupEmail />
+            {this.mainContent()}
           </section>
           <Footer />
         </div>