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
---
 .../backup_account/confirmation/confirmation.js    | 43 +++++++++++++++++++++
 .../backup_account/confirmation/confirmation.scss  | 44 ++++++++++++++++++++++
 .../confirmation/confirmation.spec.js              | 29 ++++++++++++++
 3 files changed, 116 insertions(+)
 create mode 100644 web-ui/src/backup_account/confirmation/confirmation.js
 create mode 100644 web-ui/src/backup_account/confirmation/confirmation.scss
 create mode 100644 web-ui/src/backup_account/confirmation/confirmation.spec.js

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

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..324d46ba
--- /dev/null
+++ b/web-ui/src/backup_account/confirmation/confirmation.js
@@ -0,0 +1,43 @@
+/*
+ * 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='confirmation'>
+    <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' />
+    <SubmitButton buttonText={t('backup-account.confirmation.button')} />
+    <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..44f3fa8a
--- /dev/null
+++ b/web-ui/src/backup_account/confirmation/confirmation.scss
@@ -0,0 +1,44 @@
+/*
+ * 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 {
+  background: $white;
+  width: 84%;
+  margin: 3% auto;
+  padding: 6% 5%;
+  box-shadow: 0 2px 3px 0 $shadow;
+}
+
+@media only screen and (min-width : 500px) {
+
+}
+
+@media only screen and (min-width : 960px) {
+  .confirmation{
+    width: 60%;
+    padding: 3em;
+    align-items: flex-start;
+    flex-direction: row;
+    max-width: 700px;
+  }
+}
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..c0ff7df2
--- /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('retry button redirects to backup account', () => {
+    expect(page.find('a').props().href).toEqual('/backup-account');
+  });
+});
-- 
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/confirmation/confirmation.js    |  2 +-
 .../backup_account/confirmation/confirmation.scss  | 35 ++++++++++++++--------
 2 files changed, 23 insertions(+), 14 deletions(-)

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

diff --git a/web-ui/src/backup_account/confirmation/confirmation.js b/web-ui/src/backup_account/confirmation/confirmation.js
index 324d46ba..851c3d95 100644
--- a/web-ui/src/backup_account/confirmation/confirmation.js
+++ b/web-ui/src/backup_account/confirmation/confirmation.js
@@ -22,7 +22,7 @@ import SubmitButton from 'src/common/submit_button/submit_button';
 import './confirmation.scss';
 
 export const Confirmation = ({ t }) => (
-  <div className='confirmation'>
+  <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' />
diff --git a/web-ui/src/backup_account/confirmation/confirmation.scss b/web-ui/src/backup_account/confirmation/confirmation.scss
index 44f3fa8a..da349276 100644
--- a/web-ui/src/backup_account/confirmation/confirmation.scss
+++ b/web-ui/src/backup_account/confirmation/confirmation.scss
@@ -19,26 +19,35 @@
 @import "~scss/base/colors";
 @import "~scss/base/fonts";
 
-
-
-.confirmation {
-  background: $white;
+.confirmation-container {
   width: 84%;
-  margin: 3% auto;
   padding: 6% 5%;
-  box-shadow: 0 2px 3px 0 $shadow;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  img {
+    padding: 2em 3.2em 2em 0;
+  }
 }
 
-@media only screen and (min-width : 500px) {
+ .submit-button {
+   width: 65%;
+   align-self: center;
+ }
 
+@media only screen and (min-width : 500px) {
+  .confirmation-container {
+    width: 50%;
+    padding: 1em 2em;
+  }
 }
 
 @media only screen and (min-width : 960px) {
-  .confirmation{
-    width: 60%;
-    padding: 3em;
-    align-items: flex-start;
-    flex-direction: row;
-    max-width: 700px;
+  .confirmation-container {
+    width: 30%;
+    padding: 1em 2em;
+    display: flex;
+    flex-direction: column;
   }
 }
-- 
cgit v1.2.3


From 772c5cbb72df2be9d16c91d3c030ab3ac5e7cf2c Mon Sep 17 00:00:00 2001
From: Tayane Fernandes <tayane.rmf@gmail.com>
Date: Wed, 15 Mar 2017 17:15:35 -0300
Subject: [#971] Fix button size

with @tuliocasagrande
---
 web-ui/src/backup_account/confirmation/confirmation.scss | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

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

diff --git a/web-ui/src/backup_account/confirmation/confirmation.scss b/web-ui/src/backup_account/confirmation/confirmation.scss
index da349276..241442ff 100644
--- a/web-ui/src/backup_account/confirmation/confirmation.scss
+++ b/web-ui/src/backup_account/confirmation/confirmation.scss
@@ -32,7 +32,6 @@
 }
 
  .submit-button {
-   width: 65%;
    align-self: center;
  }
 
@@ -41,6 +40,10 @@
     width: 50%;
     padding: 1em 2em;
   }
+
+  .submit-button {
+    width: 70%;
+  }
 }
 
 @media only screen and (min-width : 960px) {
@@ -50,4 +53,8 @@
     display: flex;
     flex-direction: column;
   }
+
+  .submit-button {
+    width: 65%;
+  }
 }
-- 
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/confirmation/confirmation.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

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

diff --git a/web-ui/src/backup_account/confirmation/confirmation.js b/web-ui/src/backup_account/confirmation/confirmation.js
index 851c3d95..41637dab 100644
--- a/web-ui/src/backup_account/confirmation/confirmation.js
+++ b/web-ui/src/backup_account/confirmation/confirmation.js
@@ -26,7 +26,9 @@ export const Confirmation = ({ t }) => (
     <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' />
-    <SubmitButton buttonText={t('backup-account.confirmation.button')} />
+    <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' />
-- 
cgit v1.2.3


From dc84e6b2091dceb735aa82481edf83b6a5056adf Mon Sep 17 00:00:00 2001
From: Tayane Fernandes <tayane.rmf@gmail.com>
Date: Wed, 15 Mar 2017 18:51:52 -0300
Subject: [#971] Add tests for rendering backup account components

---
 web-ui/src/backup_account/confirmation/confirmation.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

diff --git a/web-ui/src/backup_account/confirmation/confirmation.spec.js b/web-ui/src/backup_account/confirmation/confirmation.spec.js
index c0ff7df2..291d156d 100644
--- a/web-ui/src/backup_account/confirmation/confirmation.spec.js
+++ b/web-ui/src/backup_account/confirmation/confirmation.spec.js
@@ -23,7 +23,7 @@ describe('Confirmation', () => {
     expect(page.find('a').text()).toEqual('backup-account.confirmation.retry-button');
   });
 
-  it('retry button redirects to backup account', () => {
+  it('retries button redirects to backup account', () => {
     expect(page.find('a').props().href).toEqual('/backup-account');
   });
 });
-- 
cgit v1.2.3