From 1ec36fb45d48cadd98ec7188414fa6de4d9455ad Mon Sep 17 00:00:00 2001
From: Anike Arni <aarni@thoughtworks.com>
Date: Tue, 28 Mar 2017 15:33:55 -0300
Subject: [#932] Adds back link to account recovery steps

---
 web-ui/src/account_recovery/forms/new_password_form.js   | 11 +++++++++--
 .../src/account_recovery/forms/new_password_form.spec.js | 14 +++++++++++++-
 .../account_recovery/forms/user_recovery_code_form.js    |  9 ++++++++-
 .../forms/user_recovery_code_form.spec.js                | 16 +++++++++++++++-
 4 files changed, 45 insertions(+), 5 deletions(-)

(limited to 'web-ui/src/account_recovery/forms')

diff --git a/web-ui/src/account_recovery/forms/new_password_form.js b/web-ui/src/account_recovery/forms/new_password_form.js
index 71239cfa..2d94f474 100644
--- a/web-ui/src/account_recovery/forms/new_password_form.js
+++ b/web-ui/src/account_recovery/forms/new_password_form.js
@@ -20,8 +20,9 @@ import { translate } from 'react-i18next';
 
 import InputField from 'src/common/input_field/input_field';
 import SubmitButton from 'src/common/submit_button/submit_button';
+import BackLink from 'src/common/back_link/back_link';
 
-export const NewPasswordForm = ({ t }) => (
+export const NewPasswordForm = ({ t, previous }) => (
   <form>
     <img
       className='account-recovery-progress'
@@ -32,11 +33,17 @@ export const NewPasswordForm = ({ t }) => (
     <InputField name='new-password' label={t('account-recovery.new-password-form.input-label1')} />
     <InputField name='confirm-password' label={t('account-recovery.new-password-form.input-label2')} />
     <SubmitButton buttonText={t('account-recovery.new-password-form.button')} />
+    <BackLink
+      text={t('account-recovery.back')}
+      onClick={previous} onKeyDown={previous}
+      role='button'
+    />
   </form>
 );
 
 NewPasswordForm.propTypes = {
-  t: React.PropTypes.func.isRequired
+  t: React.PropTypes.func.isRequired,
+  previous: React.PropTypes.func.isRequired
 };
 
 export default translate('', { wait: true })(NewPasswordForm);
diff --git a/web-ui/src/account_recovery/forms/new_password_form.spec.js b/web-ui/src/account_recovery/forms/new_password_form.spec.js
index a2986165..f9e54cc8 100644
--- a/web-ui/src/account_recovery/forms/new_password_form.spec.js
+++ b/web-ui/src/account_recovery/forms/new_password_form.spec.js
@@ -5,11 +5,13 @@ import { NewPasswordForm } from 'src/account_recovery/forms/new_password_form';
 
 describe('NewPasswordForm', () => {
   let newPasswordForm;
+  let mockPrevious;
 
   beforeEach(() => {
     const mockTranslations = key => key;
+    mockPrevious = expect.createSpy();
     newPasswordForm = shallow(
-      <NewPasswordForm t={mockTranslations} />
+      <NewPasswordForm t={mockTranslations} previous={mockPrevious} />
     );
   });
 
@@ -28,4 +30,14 @@ describe('NewPasswordForm', () => {
   it('renders submit button', () => {
     expect(newPasswordForm.find('SubmitButton').props().buttonText).toEqual('account-recovery.new-password-form.button');
   });
+
+  it('returns to previous step on link click', () => {
+    newPasswordForm.find('BackLink').simulate('click');
+    expect(mockPrevious).toHaveBeenCalled();
+  });
+
+  it('returns to previous step on key down', () => {
+    newPasswordForm.find('BackLink').simulate('keyDown');
+    expect(mockPrevious).toHaveBeenCalled();
+  });
 });
diff --git a/web-ui/src/account_recovery/forms/user_recovery_code_form.js b/web-ui/src/account_recovery/forms/user_recovery_code_form.js
index aaefd75d..008fa64f 100644
--- a/web-ui/src/account_recovery/forms/user_recovery_code_form.js
+++ b/web-ui/src/account_recovery/forms/user_recovery_code_form.js
@@ -20,10 +20,11 @@ import { translate } from 'react-i18next';
 
 import InputField from 'src/common/input_field/input_field';
 import SubmitButton from 'src/common/submit_button/submit_button';
+import BackLink from 'src/common/back_link/back_link';
 
 import './forms.scss';
 
-export const UserRecoveryCodeForm = ({ t, next }) => (
+export const UserRecoveryCodeForm = ({ t, previous, next }) => (
   <form className='user-code-form' onSubmit={next}>
     <img
       className='account-recovery-progress'
@@ -34,11 +35,17 @@ export const UserRecoveryCodeForm = ({ t, next }) => (
     <p>{t('account-recovery.user-form.description')}</p>
     <InputField name='admin-code' label={t('account-recovery.user-form.input-label')} />
     <SubmitButton buttonText={t('account-recovery.user-form.button')} />
+    <BackLink
+      text={t('account-recovery.back')}
+      onClick={previous} onKeyDown={previous}
+      role='button'
+    />
   </form>
 );
 
 UserRecoveryCodeForm.propTypes = {
   t: React.PropTypes.func.isRequired,
+  previous: React.PropTypes.func.isRequired,
   next: React.PropTypes.func.isRequired
 };
 
diff --git a/web-ui/src/account_recovery/forms/user_recovery_code_form.spec.js b/web-ui/src/account_recovery/forms/user_recovery_code_form.spec.js
index a20d3b7b..1aebb814 100644
--- a/web-ui/src/account_recovery/forms/user_recovery_code_form.spec.js
+++ b/web-ui/src/account_recovery/forms/user_recovery_code_form.spec.js
@@ -6,12 +6,16 @@ import { UserRecoveryCodeForm } from 'src/account_recovery/forms/user_recovery_c
 describe('UserRecoveryCodeForm', () => {
   let userRecoveryCodeForm;
   let mockNext;
+  let mockPrevious;
 
   beforeEach(() => {
     const mockTranslations = key => key;
     mockNext = expect.createSpy();
+    mockPrevious = expect.createSpy();
     userRecoveryCodeForm = shallow(
-      <UserRecoveryCodeForm t={mockTranslations} next={mockNext} />
+      <UserRecoveryCodeForm
+        t={mockTranslations} next={mockNext} previous={mockPrevious}
+      />
     );
   });
 
@@ -35,4 +39,14 @@ describe('UserRecoveryCodeForm', () => {
     userRecoveryCodeForm.find('form').simulate('submit');
     expect(mockNext).toHaveBeenCalled();
   });
+
+  it('returns to previous step on link click', () => {
+    userRecoveryCodeForm.find('BackLink').simulate('click');
+    expect(mockPrevious).toHaveBeenCalled();
+  });
+
+  it('returns to previous step on key down', () => {
+    userRecoveryCodeForm.find('BackLink').simulate('keyDown');
+    expect(mockPrevious).toHaveBeenCalled();
+  });
 });
-- 
cgit v1.2.3


From eacd59f75a388c33b73b5eb61a2e22a24685badd Mon Sep 17 00:00:00 2001
From: Anike Arni <aarni@thoughtworks.com>
Date: Tue, 28 Mar 2017 15:48:14 -0300
Subject: [#932] Hides inputs on new password form

---
 web-ui/src/account_recovery/forms/new_password_form.js      | 10 ++++++++--
 web-ui/src/account_recovery/forms/new_password_form.spec.js |  2 ++
 2 files changed, 10 insertions(+), 2 deletions(-)

(limited to 'web-ui/src/account_recovery/forms')

diff --git a/web-ui/src/account_recovery/forms/new_password_form.js b/web-ui/src/account_recovery/forms/new_password_form.js
index 2d94f474..ccc66326 100644
--- a/web-ui/src/account_recovery/forms/new_password_form.js
+++ b/web-ui/src/account_recovery/forms/new_password_form.js
@@ -30,8 +30,14 @@ export const NewPasswordForm = ({ t, previous }) => (
       alt={t('account-recovery.new-password.image-description')}
     />
     <h1>{t('account-recovery.new-password-form.title')}</h1>
-    <InputField name='new-password' label={t('account-recovery.new-password-form.input-label1')} />
-    <InputField name='confirm-password' label={t('account-recovery.new-password-form.input-label2')} />
+    <InputField
+      type='password' name='new-password'
+      label={t('account-recovery.new-password-form.input-label1')}
+    />
+    <InputField
+      type='password' name='confirm-password'
+      label={t('account-recovery.new-password-form.input-label2')}
+    />
     <SubmitButton buttonText={t('account-recovery.new-password-form.button')} />
     <BackLink
       text={t('account-recovery.back')}
diff --git a/web-ui/src/account_recovery/forms/new_password_form.spec.js b/web-ui/src/account_recovery/forms/new_password_form.spec.js
index f9e54cc8..5ac96b40 100644
--- a/web-ui/src/account_recovery/forms/new_password_form.spec.js
+++ b/web-ui/src/account_recovery/forms/new_password_form.spec.js
@@ -20,10 +20,12 @@ describe('NewPasswordForm', () => {
   });
 
   it('renders input for new password', () => {
+    expect(newPasswordForm.find('InputField').at(0).props().type).toEqual('password');
     expect(newPasswordForm.find('InputField').at(0).props().label).toEqual('account-recovery.new-password-form.input-label1');
   });
 
   it('renders input to confirm new password', () => {
+    expect(newPasswordForm.find('InputField').at(1).props().type).toEqual('password');
     expect(newPasswordForm.find('InputField').at(1).props().label).toEqual('account-recovery.new-password-form.input-label2');
   });
 
-- 
cgit v1.2.3


From 595c218d19f504d4b8c82423b47ff60fc0fb2680 Mon Sep 17 00:00:00 2001
From: Anike Arni <aarni@thoughtworks.com>
Date: Tue, 28 Mar 2017 16:20:08 -0300
Subject: [#932] Adds images in account recovery flow

---
 .../forms/admin_recovery_code_form.js                |  6 +++++-
 web-ui/src/account_recovery/forms/forms.scss         | 20 ++++++++++++++++++++
 .../src/account_recovery/forms/new_password_form.js  |  2 +-
 .../forms/user_recovery_code_form.js                 |  6 +++++-
 4 files changed, 31 insertions(+), 3 deletions(-)

(limited to 'web-ui/src/account_recovery/forms')

diff --git a/web-ui/src/account_recovery/forms/admin_recovery_code_form.js b/web-ui/src/account_recovery/forms/admin_recovery_code_form.js
index 75cf6ea5..e4d335bb 100644
--- a/web-ui/src/account_recovery/forms/admin_recovery_code_form.js
+++ b/web-ui/src/account_recovery/forms/admin_recovery_code_form.js
@@ -24,13 +24,17 @@ import SubmitButton from 'src/common/submit_button/submit_button';
 import './forms.scss';
 
 export const AdminRecoveryCodeForm = ({ t, next }) => (
-  <form className='admin-code-form' onSubmit={next}>
+  <form className='account-recovery-form admin-code' onSubmit={next}>
     <img
       className='account-recovery-progress'
       src='/public/images/account-recovery/step_1.svg'
       alt={t('account-recovery.admin-form.image-description')}
     />
     <h1>{t('account-recovery.admin-form.title')}</h1>
+    <img
+      src='/public/images/account-recovery/admins_contact.svg'
+      alt=''
+    />
     <ul>
       <li>{t('account-recovery.admin-form.tip1')}</li>
       <li>{t('account-recovery.admin-form.tip2')}</li>
diff --git a/web-ui/src/account_recovery/forms/forms.scss b/web-ui/src/account_recovery/forms/forms.scss
index 1ef0e8d3..73d971b2 100644
--- a/web-ui/src/account_recovery/forms/forms.scss
+++ b/web-ui/src/account_recovery/forms/forms.scss
@@ -18,3 +18,23 @@
 .account-recovery-progress {
   width: 100%;
 }
+
+.account-recovery-form {
+  display: flex;
+  flex-direction: column;
+
+  img {
+    margin: 7px 0;
+    align-self: center;
+  }
+
+  .input-field-group {
+    margin-top: 0;
+  }
+}
+
+.new-password {
+  .input-field-group:first-of-type {
+    margin-bottom: 0;
+  }
+}
diff --git a/web-ui/src/account_recovery/forms/new_password_form.js b/web-ui/src/account_recovery/forms/new_password_form.js
index ccc66326..114366b3 100644
--- a/web-ui/src/account_recovery/forms/new_password_form.js
+++ b/web-ui/src/account_recovery/forms/new_password_form.js
@@ -23,7 +23,7 @@ import SubmitButton from 'src/common/submit_button/submit_button';
 import BackLink from 'src/common/back_link/back_link';
 
 export const NewPasswordForm = ({ t, previous }) => (
-  <form>
+  <form className='account-recovery-form new-password'>
     <img
       className='account-recovery-progress'
       src='/public/images/account-recovery/step_3.svg'
diff --git a/web-ui/src/account_recovery/forms/user_recovery_code_form.js b/web-ui/src/account_recovery/forms/user_recovery_code_form.js
index 008fa64f..0438b002 100644
--- a/web-ui/src/account_recovery/forms/user_recovery_code_form.js
+++ b/web-ui/src/account_recovery/forms/user_recovery_code_form.js
@@ -25,13 +25,17 @@ import BackLink from 'src/common/back_link/back_link';
 import './forms.scss';
 
 export const UserRecoveryCodeForm = ({ t, previous, next }) => (
-  <form className='user-code-form' onSubmit={next}>
+  <form className='account-recovery-form user-code' onSubmit={next}>
     <img
       className='account-recovery-progress'
       src='/public/images/account-recovery/step_2.svg'
       alt={t('account-recovery.user-form.image-description')}
     />
     <h1>{t('account-recovery.user-form.title')}</h1>
+    <img
+      src='/public/images/account-recovery/codes.svg'
+      alt=''
+    />
     <p>{t('account-recovery.user-form.description')}</p>
     <InputField name='admin-code' label={t('account-recovery.user-form.input-label')} />
     <SubmitButton buttonText={t('account-recovery.user-form.button')} />
-- 
cgit v1.2.3


From 9af33194195b64b4badef3c443794627f104b664 Mon Sep 17 00:00:00 2001
From: Anike Arni <aarni@thoughtworks.com>
Date: Tue, 28 Mar 2017 16:36:18 -0300
Subject: [#932] Adapts forms to tablet

---
 .../account_recovery/forms/admin_recovery_code_form.js |  1 +
 web-ui/src/account_recovery/forms/forms.scss           | 18 ++++++++++++++++++
 .../account_recovery/forms/user_recovery_code_form.js  |  1 +
 3 files changed, 20 insertions(+)

(limited to 'web-ui/src/account_recovery/forms')

diff --git a/web-ui/src/account_recovery/forms/admin_recovery_code_form.js b/web-ui/src/account_recovery/forms/admin_recovery_code_form.js
index e4d335bb..3d97b191 100644
--- a/web-ui/src/account_recovery/forms/admin_recovery_code_form.js
+++ b/web-ui/src/account_recovery/forms/admin_recovery_code_form.js
@@ -32,6 +32,7 @@ export const AdminRecoveryCodeForm = ({ t, next }) => (
     />
     <h1>{t('account-recovery.admin-form.title')}</h1>
     <img
+      className='admin-codes-image'
       src='/public/images/account-recovery/admins_contact.svg'
       alt=''
     />
diff --git a/web-ui/src/account_recovery/forms/forms.scss b/web-ui/src/account_recovery/forms/forms.scss
index 73d971b2..70885daf 100644
--- a/web-ui/src/account_recovery/forms/forms.scss
+++ b/web-ui/src/account_recovery/forms/forms.scss
@@ -19,6 +19,14 @@
   width: 100%;
 }
 
+.admin-codes-image {
+  height: 2.7em;
+}
+
+.user-codes-image {
+  height: 4em;
+}
+
 .account-recovery-form {
   display: flex;
   flex-direction: column;
@@ -38,3 +46,13 @@
     margin-bottom: 0;
   }
 }
+
+@media only screen and (min-width : 500px) {
+  .account-recovery-form {
+    align-items: center;
+
+    p {
+      width: 70%;
+    }
+  }
+}
diff --git a/web-ui/src/account_recovery/forms/user_recovery_code_form.js b/web-ui/src/account_recovery/forms/user_recovery_code_form.js
index 0438b002..3927aef0 100644
--- a/web-ui/src/account_recovery/forms/user_recovery_code_form.js
+++ b/web-ui/src/account_recovery/forms/user_recovery_code_form.js
@@ -33,6 +33,7 @@ export const UserRecoveryCodeForm = ({ t, previous, next }) => (
     />
     <h1>{t('account-recovery.user-form.title')}</h1>
     <img
+      className='user-codes-image'
       src='/public/images/account-recovery/codes.svg'
       alt=''
     />
-- 
cgit v1.2.3


From 6daf4311d32ab64fa73292e131611ee6a38ff18a Mon Sep 17 00:00:00 2001
From: Anike Arni <aarni@thoughtworks.com>
Date: Tue, 28 Mar 2017 17:35:28 -0300
Subject: [#932] Adapts account recovery flow to desktop

with @deniscostadsc
---
 web-ui/src/account_recovery/forms/forms.scss       | 64 +++++++++++++++++-----
 .../forms/user_recovery_code_form.js               | 14 +++--
 2 files changed, 57 insertions(+), 21 deletions(-)

(limited to 'web-ui/src/account_recovery/forms')

diff --git a/web-ui/src/account_recovery/forms/forms.scss b/web-ui/src/account_recovery/forms/forms.scss
index 70885daf..09d8f2ce 100644
--- a/web-ui/src/account_recovery/forms/forms.scss
+++ b/web-ui/src/account_recovery/forms/forms.scss
@@ -15,27 +15,33 @@
  * along with Pixelated. If not, see <http://www.gnu.org/licenses/>.
  */
 
-.account-recovery-progress {
-  width: 100%;
-}
-
-.admin-codes-image {
-  height: 2.7em;
-}
-
-.user-codes-image {
-  height: 4em;
-}
-
 .account-recovery-form {
   display: flex;
   flex-direction: column;
 
   img {
-    margin: 7px 0;
+    margin: 1em 0;
     align-self: center;
   }
 
+  .user-code-form-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .account-recovery-progress {
+    width: 100%;
+  }
+
+  .admin-code-image {
+    height: 2.7em;
+  }
+
+  .user-code-image {
+    height: 4em;
+  }
+
   .input-field-group {
     margin-top: 0;
   }
@@ -51,8 +57,36 @@
   .account-recovery-form {
     align-items: center;
 
-    p {
-      width: 70%;
+    .account-recovery-progress, h1 {
+      width: 80%;
+    }
+
+    .user-code-form-content {
+      flex-direction: row;
+      width: 80%;
+
+      img {
+        margin: 1.6em;
+      }
+    }
+  }
+}
+
+@media only screen and (min-width : 960px) {
+  .account-recovery-form {
+    .account-recovery-progress {
+      width: 80%;
+      margin-top: 0;
+    }
+
+    h1 {
+      max-width: 80%;
+      width: auto;
+    }
+
+    .input-field-group, .submit-button {
+      width: 60%;
+      align-self: center;
     }
   }
 }
diff --git a/web-ui/src/account_recovery/forms/user_recovery_code_form.js b/web-ui/src/account_recovery/forms/user_recovery_code_form.js
index 3927aef0..30525cdf 100644
--- a/web-ui/src/account_recovery/forms/user_recovery_code_form.js
+++ b/web-ui/src/account_recovery/forms/user_recovery_code_form.js
@@ -32,12 +32,14 @@ export const UserRecoveryCodeForm = ({ t, previous, next }) => (
       alt={t('account-recovery.user-form.image-description')}
     />
     <h1>{t('account-recovery.user-form.title')}</h1>
-    <img
-      className='user-codes-image'
-      src='/public/images/account-recovery/codes.svg'
-      alt=''
-    />
-    <p>{t('account-recovery.user-form.description')}</p>
+    <div className='user-code-form-content'>
+      <img
+        className='user-codes-image'
+        src='/public/images/account-recovery/codes.svg'
+        alt=''
+      />
+      <p>{t('account-recovery.user-form.description')}</p>
+    </div>
     <InputField name='admin-code' label={t('account-recovery.user-form.input-label')} />
     <SubmitButton buttonText={t('account-recovery.user-form.button')} />
     <BackLink
-- 
cgit v1.2.3