From 54c6c6b7c932ea7fe600592a861f7b46391b494d Mon Sep 17 00:00:00 2001
From: Tayane Fernandes <tayane.rmf@gmail.com>
Date: Wed, 15 Mar 2017 14:09:42 -0300
Subject: [#971] Add backup account confirmation page

with @tuliocasagrande
---
 web-ui/src/backup_account/backup_email/backup_email.js      | 12 ++++++++++--
 web-ui/src/backup_account/backup_email/backup_email.spec.js | 13 ++++++++++++-
 2 files changed, 22 insertions(+), 3 deletions(-)

(limited to 'web-ui/src/backup_account/backup_email')

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..2ef76ecf 100644
--- a/web-ui/src/backup_account/backup_email/backup_email.js
+++ b/web-ui/src/backup_account/backup_email/backup_email.js
@@ -39,6 +39,13 @@ 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 (
@@ -48,7 +55,7 @@ export class BackupEmail extends React.Component {
           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 +75,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.spec.js b/web-ui/src/backup_account/backup_email/backup_email.spec.js
index b2b297f4..d6e3e4e7 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
@@ -1,13 +1,15 @@
 import { shallow } from 'enzyme';
 import expect from 'expect';
+import sinon from 'sinon';
 import React from 'react';
 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 +25,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 = sinon.spy();
+    const event = { preventDefault() {} };
+    page = shallow(<BackupEmail t={mockTranslations} onSubmit={mockOnSubmit} />);
+
+    page.instance().submitHandler(event);
+    sinon.assert.calledOnce(mockOnSubmit);
+  });
+
   describe('Email validation', () => {
     let pageInstance;
 
-- 
cgit v1.2.3


From 30f450e4fe20ac0b2d8751bb3f940566aefd394f Mon Sep 17 00:00:00 2001
From: Tayane Fernandes <tayane.rmf@gmail.com>
Date: Wed, 15 Mar 2017 14:34:09 -0300
Subject: [#971] Remove sinon and use expect to spy functions

with @tuliocasagrande
---
 web-ui/src/backup_account/backup_email/backup_email.spec.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

(limited to 'web-ui/src/backup_account/backup_email')

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 d6e3e4e7..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
@@ -1,6 +1,5 @@
 import { shallow } from 'enzyme';
 import expect from 'expect';
-import sinon from 'sinon';
 import React from 'react';
 import { BackupEmail } from 'src/backup_account/backup_email/backup_email';
 
@@ -26,12 +25,12 @@ describe('BackupEmail', () => {
   });
 
   it('form submit should call parameter custom submit', () => {
-    const mockOnSubmit = sinon.spy();
+    const mockOnSubmit = expect.createSpy();
     const event = { preventDefault() {} };
     page = shallow(<BackupEmail t={mockTranslations} onSubmit={mockOnSubmit} />);
 
     page.instance().submitHandler(event);
-    sinon.assert.calledOnce(mockOnSubmit);
+    expect(mockOnSubmit).toHaveBeenCalled();
   });
 
   describe('Email validation', () => {
-- 
cgit v1.2.3


From d8fe7438d8c85c0115ddc520fe9ef117e305a6c2 Mon Sep 17 00:00:00 2001
From: Tayane Fernandes <tayane.rmf@gmail.com>
Date: Wed, 15 Mar 2017 16:56:11 -0300
Subject: [#971] Add css style for the confirmation page

with @tuliocasagrande
---
 .../backup_account/backup_email/backup_email.js    |  3 +-
 .../backup_account/backup_email/backup_email.scss  | 74 ++++++++++++++++++++++
 2 files changed, 76 insertions(+), 1 deletion(-)
 create mode 100644 web-ui/src/backup_account/backup_email/backup_email.scss

(limited to 'web-ui/src/backup_account/backup_email')

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 2ef76ecf..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 {
 
@@ -49,7 +50,7 @@ export class BackupEmail extends React.Component {
   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'
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..a98ef8be
--- /dev/null
+++ b/web-ui/src/backup_account/backup_email/backup_email.scss
@@ -0,0 +1,74 @@
+/*
+ * 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%;
+    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;
+  }
+}
-- 
cgit v1.2.3


From 1e30557a74942bc0be71e55c7e6a25093f274d74 Mon Sep 17 00:00:00 2001
From: Tayane Fernandes <tayane.rmf@gmail.com>
Date: Wed, 15 Mar 2017 18:50:49 -0300
Subject: [#971] Redirect to inbox after confirmation

---
 web-ui/src/backup_account/backup_email/backup_email.scss | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

(limited to 'web-ui/src/backup_account/backup_email')

diff --git a/web-ui/src/backup_account/backup_email/backup_email.scss b/web-ui/src/backup_account/backup_email/backup_email.scss
index a98ef8be..af420278 100644
--- a/web-ui/src/backup_account/backup_email/backup_email.scss
+++ b/web-ui/src/backup_account/backup_email/backup_email.scss
@@ -56,15 +56,15 @@ form {
     padding: 3em;
     align-items: flex-start;
     flex-direction: row;
-  }
 
-  form {
-    margin-left: 2.5em;
-    min-height: 492px;
+    form {
+      margin-left: 2.5em;
+      min-height: 492px;
 
-    .input-field-group, .submit-button, .link-content {
-      width: 300px;
-      align-self: flex-start;
+      .input-field-group, .submit-button, .link-content {
+        width: 300px;
+        align-self: flex-start;
+      }
     }
   }
 
-- 
cgit v1.2.3


From a36902d4a520e933e4ffde1e6bbc8fae20522f10 Mon Sep 17 00:00:00 2001
From: Tayane Fernandes <tayane.rmf@gmail.com>
Date: Thu, 16 Mar 2017 10:28:37 -0300
Subject: [#971] Fix width for the backup email page container

---
 web-ui/src/backup_account/backup_email/backup_email.scss | 1 +
 1 file changed, 1 insertion(+)

(limited to 'web-ui/src/backup_account/backup_email')

diff --git a/web-ui/src/backup_account/backup_email/backup_email.scss b/web-ui/src/backup_account/backup_email/backup_email.scss
index af420278..a7e09ba3 100644
--- a/web-ui/src/backup_account/backup_email/backup_email.scss
+++ b/web-ui/src/backup_account/backup_email/backup_email.scss
@@ -53,6 +53,7 @@ form {
 @media only screen and (min-width : 960px) {
   .backup-email-container{
     width: 60%;
+    max-width: 700px;
     padding: 3em;
     align-items: flex-start;
     flex-direction: row;
-- 
cgit v1.2.3