From 8d49edac6af9dd08f1bb7b1727aee36af413a4a2 Mon Sep 17 00:00:00 2001
From: Anike Arni <aarni@thoughtworks.com>
Date: Tue, 28 Mar 2017 18:59:33 -0300
Subject: [#932] Moves form componentes to separate directories

with @deniscostadsc
---
 .../admin_recovery_code_form.js                    | 54 +++++++++++++
 .../admin_recovery_code_form.scss                  | 22 ++++++
 .../admin_recovery_code_form.spec.js               | 38 +++++++++
 .../forms/admin_recovery_code_form.js              | 54 -------------
 .../forms/admin_recovery_code_form.spec.js         | 38 ---------
 web-ui/src/account_recovery/forms/forms.scss       | 92 ----------------------
 .../account_recovery/forms/new_password_form.js    | 55 -------------
 .../forms/new_password_form.spec.js                | 45 -----------
 .../forms/user_recovery_code_form.js               | 59 --------------
 .../forms/user_recovery_code_form.spec.js          | 52 ------------
 .../new_password_form/new_password_form.js         | 57 ++++++++++++++
 .../new_password_form/new_password_form.scss       | 22 ++++++
 .../new_password_form/new_password_form.spec.js    | 45 +++++++++++
 web-ui/src/account_recovery/page.js                |  6 +-
 web-ui/src/account_recovery/page.scss              | 40 ++++++++++
 web-ui/src/account_recovery/page.spec.js           | 21 ++---
 .../user_recovery_code_form.js                     | 59 ++++++++++++++
 .../user_recovery_code_form.scss                   | 39 +++++++++
 .../user_recovery_code_form.spec.js                | 52 ++++++++++++
 19 files changed, 442 insertions(+), 408 deletions(-)
 create mode 100644 web-ui/src/account_recovery/admin_recovery_code_form/admin_recovery_code_form.js
 create mode 100644 web-ui/src/account_recovery/admin_recovery_code_form/admin_recovery_code_form.scss
 create mode 100644 web-ui/src/account_recovery/admin_recovery_code_form/admin_recovery_code_form.spec.js
 delete mode 100644 web-ui/src/account_recovery/forms/admin_recovery_code_form.js
 delete mode 100644 web-ui/src/account_recovery/forms/admin_recovery_code_form.spec.js
 delete mode 100644 web-ui/src/account_recovery/forms/forms.scss
 delete mode 100644 web-ui/src/account_recovery/forms/new_password_form.js
 delete mode 100644 web-ui/src/account_recovery/forms/new_password_form.spec.js
 delete mode 100644 web-ui/src/account_recovery/forms/user_recovery_code_form.js
 delete mode 100644 web-ui/src/account_recovery/forms/user_recovery_code_form.spec.js
 create mode 100644 web-ui/src/account_recovery/new_password_form/new_password_form.js
 create mode 100644 web-ui/src/account_recovery/new_password_form/new_password_form.scss
 create mode 100644 web-ui/src/account_recovery/new_password_form/new_password_form.spec.js
 create mode 100644 web-ui/src/account_recovery/user_recovery_code_form/user_recovery_code_form.js
 create mode 100644 web-ui/src/account_recovery/user_recovery_code_form/user_recovery_code_form.scss
 create mode 100644 web-ui/src/account_recovery/user_recovery_code_form/user_recovery_code_form.spec.js

diff --git a/web-ui/src/account_recovery/admin_recovery_code_form/admin_recovery_code_form.js b/web-ui/src/account_recovery/admin_recovery_code_form/admin_recovery_code_form.js
new file mode 100644
index 00000000..7a82a5d7
--- /dev/null
+++ b/web-ui/src/account_recovery/admin_recovery_code_form/admin_recovery_code_form.js
@@ -0,0 +1,54 @@
+/*
+ * 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 InputField from 'src/common/input_field/input_field';
+import SubmitButton from 'src/common/submit_button/submit_button';
+
+import './admin_recovery_code_form.scss';
+
+export const AdminRecoveryCodeForm = ({ t, 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
+      className='admin-code-image'
+      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>
+      <li>{t('account-recovery.admin-form.tip3')}</li>
+    </ul>
+    <InputField name='admin-code' label={t('account-recovery.admin-form.input-label')} />
+    <SubmitButton buttonText={t('account-recovery.admin-form.button')} />
+  </form>
+);
+
+AdminRecoveryCodeForm.propTypes = {
+  t: React.PropTypes.func.isRequired,
+  next: React.PropTypes.func.isRequired
+};
+
+export default translate('', { wait: true })(AdminRecoveryCodeForm);
diff --git a/web-ui/src/account_recovery/admin_recovery_code_form/admin_recovery_code_form.scss b/web-ui/src/account_recovery/admin_recovery_code_form/admin_recovery_code_form.scss
new file mode 100644
index 00000000..6dcbcc67
--- /dev/null
+++ b/web-ui/src/account_recovery/admin_recovery_code_form/admin_recovery_code_form.scss
@@ -0,0 +1,22 @@
+/*
+ * 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/>.
+ */
+
+.admin-code-image {
+  margin: 1em 0;
+  align-self: center;
+  height: 2.7em;
+}
diff --git a/web-ui/src/account_recovery/admin_recovery_code_form/admin_recovery_code_form.spec.js b/web-ui/src/account_recovery/admin_recovery_code_form/admin_recovery_code_form.spec.js
new file mode 100644
index 00000000..85b75652
--- /dev/null
+++ b/web-ui/src/account_recovery/admin_recovery_code_form/admin_recovery_code_form.spec.js
@@ -0,0 +1,38 @@
+import { shallow } from 'enzyme';
+import expect from 'expect';
+import React from 'react';
+import { AdminRecoveryCodeForm } from './admin_recovery_code_form';
+
+describe('AdminRecoveryCodeForm', () => {
+  let adminRecoveryCodeForm;
+  let mockNext;
+
+  beforeEach(() => {
+    const mockTranslations = key => key;
+    mockNext = expect.createSpy();
+    adminRecoveryCodeForm = shallow(
+      <AdminRecoveryCodeForm t={mockTranslations} next={mockNext} />
+    );
+  });
+
+  it('renders title for admin recovery code', () => {
+    expect(adminRecoveryCodeForm.find('h1').text()).toEqual('account-recovery.admin-form.title');
+  });
+
+  it('renders tips for retrieving recovery code', () => {
+    expect(adminRecoveryCodeForm.find('li').length).toEqual(3);
+  });
+
+  it('renders input field for admin code', () => {
+    expect(adminRecoveryCodeForm.find('InputField').props().name).toEqual('admin-code');
+  });
+
+  it('renders button for next step', () => {
+    expect(adminRecoveryCodeForm.find('SubmitButton').props().buttonText).toEqual('account-recovery.admin-form.button');
+  });
+
+  it('submits form to next step', () => {
+    adminRecoveryCodeForm.find('form').simulate('submit');
+    expect(mockNext).toHaveBeenCalled();
+  });
+});
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
deleted file mode 100644
index 3d97b191..00000000
--- a/web-ui/src/account_recovery/forms/admin_recovery_code_form.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/*
- * 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 InputField from 'src/common/input_field/input_field';
-import SubmitButton from 'src/common/submit_button/submit_button';
-
-import './forms.scss';
-
-export const AdminRecoveryCodeForm = ({ t, 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
-      className='admin-codes-image'
-      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>
-      <li>{t('account-recovery.admin-form.tip3')}</li>
-    </ul>
-    <InputField name='admin-code' label={t('account-recovery.admin-form.input-label')} />
-    <SubmitButton buttonText={t('account-recovery.admin-form.button')} />
-  </form>
-);
-
-AdminRecoveryCodeForm.propTypes = {
-  t: React.PropTypes.func.isRequired,
-  next: React.PropTypes.func.isRequired
-};
-
-export default translate('', { wait: true })(AdminRecoveryCodeForm);
diff --git a/web-ui/src/account_recovery/forms/admin_recovery_code_form.spec.js b/web-ui/src/account_recovery/forms/admin_recovery_code_form.spec.js
deleted file mode 100644
index 0e922212..00000000
--- a/web-ui/src/account_recovery/forms/admin_recovery_code_form.spec.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { shallow } from 'enzyme';
-import expect from 'expect';
-import React from 'react';
-import { AdminRecoveryCodeForm } from 'src/account_recovery/forms/admin_recovery_code_form';
-
-describe('AdminRecoveryCodeForm', () => {
-  let adminRecoveryCodeForm;
-  let mockNext;
-
-  beforeEach(() => {
-    const mockTranslations = key => key;
-    mockNext = expect.createSpy();
-    adminRecoveryCodeForm = shallow(
-      <AdminRecoveryCodeForm t={mockTranslations} next={mockNext} />
-    );
-  });
-
-  it('renders title for admin recovery code', () => {
-    expect(adminRecoveryCodeForm.find('h1').text()).toEqual('account-recovery.admin-form.title');
-  });
-
-  it('renders tips for retrieving recovery code', () => {
-    expect(adminRecoveryCodeForm.find('li').length).toEqual(3);
-  });
-
-  it('renders input field for admin code', () => {
-    expect(adminRecoveryCodeForm.find('InputField').props().name).toEqual('admin-code');
-  });
-
-  it('renders button for next step', () => {
-    expect(adminRecoveryCodeForm.find('SubmitButton').props().buttonText).toEqual('account-recovery.admin-form.button');
-  });
-
-  it('submits form to next step', () => {
-    adminRecoveryCodeForm.find('form').simulate('submit');
-    expect(mockNext).toHaveBeenCalled();
-  });
-});
diff --git a/web-ui/src/account_recovery/forms/forms.scss b/web-ui/src/account_recovery/forms/forms.scss
deleted file mode 100644
index 09d8f2ce..00000000
--- a/web-ui/src/account_recovery/forms/forms.scss
+++ /dev/null
@@ -1,92 +0,0 @@
-/*
- * 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/>.
- */
-
-.account-recovery-form {
-  display: flex;
-  flex-direction: column;
-
-  img {
-    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;
-  }
-}
-
-.new-password {
-  .input-field-group:first-of-type {
-    margin-bottom: 0;
-  }
-}
-
-@media only screen and (min-width : 500px) {
-  .account-recovery-form {
-    align-items: center;
-
-    .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/new_password_form.js b/web-ui/src/account_recovery/forms/new_password_form.js
deleted file mode 100644
index 114366b3..00000000
--- a/web-ui/src/account_recovery/forms/new_password_form.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/*
- * 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 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, previous }) => (
-  <form className='account-recovery-form new-password'>
-    <img
-      className='account-recovery-progress'
-      src='/public/images/account-recovery/step_3.svg'
-      alt={t('account-recovery.new-password.image-description')}
-    />
-    <h1>{t('account-recovery.new-password-form.title')}</h1>
-    <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')}
-      onClick={previous} onKeyDown={previous}
-      role='button'
-    />
-  </form>
-);
-
-NewPasswordForm.propTypes = {
-  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
deleted file mode 100644
index 5ac96b40..00000000
--- a/web-ui/src/account_recovery/forms/new_password_form.spec.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import { shallow } from 'enzyme';
-import expect from 'expect';
-import React from 'react';
-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} previous={mockPrevious} />
-    );
-  });
-
-  it('renders title for new password form', () => {
-    expect(newPasswordForm.find('h1').text()).toEqual('account-recovery.new-password-form.title');
-  });
-
-  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');
-  });
-
-  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
deleted file mode 100644
index 30525cdf..00000000
--- a/web-ui/src/account_recovery/forms/user_recovery_code_form.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
- * 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 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, previous, 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>
-    <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
-      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
-};
-
-export default translate('', { wait: true })(UserRecoveryCodeForm);
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
deleted file mode 100644
index 1aebb814..00000000
--- a/web-ui/src/account_recovery/forms/user_recovery_code_form.spec.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import { shallow } from 'enzyme';
-import expect from 'expect';
-import React from 'react';
-import { UserRecoveryCodeForm } from 'src/account_recovery/forms/user_recovery_code_form';
-
-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} previous={mockPrevious}
-      />
-    );
-  });
-
-  it('renders title for user recovery code', () => {
-    expect(userRecoveryCodeForm.find('h1').text()).toEqual('account-recovery.user-form.title');
-  });
-
-  it('renders description', () => {
-    expect(userRecoveryCodeForm.find('p').text()).toEqual('account-recovery.user-form.description');
-  });
-
-  it('renders input for user code', () => {
-    expect(userRecoveryCodeForm.find('InputField').props().label).toEqual('account-recovery.user-form.input-label');
-  });
-
-  it('renders submit button', () => {
-    expect(userRecoveryCodeForm.find('SubmitButton').props().buttonText).toEqual('account-recovery.user-form.button');
-  });
-
-  it('submits form to next step', () => {
-    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();
-  });
-});
diff --git a/web-ui/src/account_recovery/new_password_form/new_password_form.js b/web-ui/src/account_recovery/new_password_form/new_password_form.js
new file mode 100644
index 00000000..8fbfb99d
--- /dev/null
+++ b/web-ui/src/account_recovery/new_password_form/new_password_form.js
@@ -0,0 +1,57 @@
+/*
+ * 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 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 './new_password_form.scss';
+
+export const NewPasswordForm = ({ t, previous }) => (
+  <form className='account-recovery-form new-password'>
+    <img
+      className='account-recovery-progress'
+      src='/public/images/account-recovery/step_3.svg'
+      alt={t('account-recovery.new-password.image-description')}
+    />
+    <h1>{t('account-recovery.new-password-form.title')}</h1>
+    <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')}
+      onClick={previous} onKeyDown={previous}
+      role='button'
+    />
+  </form>
+);
+
+NewPasswordForm.propTypes = {
+  t: React.PropTypes.func.isRequired,
+  previous: React.PropTypes.func.isRequired
+};
+
+export default translate('', { wait: true })(NewPasswordForm);
diff --git a/web-ui/src/account_recovery/new_password_form/new_password_form.scss b/web-ui/src/account_recovery/new_password_form/new_password_form.scss
new file mode 100644
index 00000000..77623262
--- /dev/null
+++ b/web-ui/src/account_recovery/new_password_form/new_password_form.scss
@@ -0,0 +1,22 @@
+/*
+ * 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/>.
+ */
+
+.new-password {
+  .input-field-group:first-of-type {
+    margin-bottom: 0;
+  }
+}
diff --git a/web-ui/src/account_recovery/new_password_form/new_password_form.spec.js b/web-ui/src/account_recovery/new_password_form/new_password_form.spec.js
new file mode 100644
index 00000000..2d326aea
--- /dev/null
+++ b/web-ui/src/account_recovery/new_password_form/new_password_form.spec.js
@@ -0,0 +1,45 @@
+import { shallow } from 'enzyme';
+import expect from 'expect';
+import React from 'react';
+import { NewPasswordForm } from './new_password_form';
+
+describe('NewPasswordForm', () => {
+  let newPasswordForm;
+  let mockPrevious;
+
+  beforeEach(() => {
+    const mockTranslations = key => key;
+    mockPrevious = expect.createSpy();
+    newPasswordForm = shallow(
+      <NewPasswordForm t={mockTranslations} previous={mockPrevious} />
+    );
+  });
+
+  it('renders title for new password form', () => {
+    expect(newPasswordForm.find('h1').text()).toEqual('account-recovery.new-password-form.title');
+  });
+
+  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');
+  });
+
+  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/page.js b/web-ui/src/account_recovery/page.js
index 3043a38b..579f17cc 100644
--- a/web-ui/src/account_recovery/page.js
+++ b/web-ui/src/account_recovery/page.js
@@ -19,9 +19,9 @@ import React from 'react';
 import { translate } from 'react-i18next';
 import DocumentTitle from 'react-document-title';
 import Header from 'src/common/header/header';
-import AdminRecoveryCodeForm from 'src/account_recovery/forms/admin_recovery_code_form';
-import UserRecoveryCodeForm from 'src/account_recovery/forms/user_recovery_code_form';
-import NewPasswordForm from 'src/account_recovery/forms/new_password_form';
+import AdminRecoveryCodeForm from 'src/account_recovery/admin_recovery_code_form/admin_recovery_code_form';
+import UserRecoveryCodeForm from 'src/account_recovery/user_recovery_code_form/user_recovery_code_form';
+import NewPasswordForm from 'src/account_recovery/new_password_form/new_password_form';
 import Footer from 'src/common/footer/footer';
 
 import 'font-awesome/scss/font-awesome.scss';
diff --git a/web-ui/src/account_recovery/page.scss b/web-ui/src/account_recovery/page.scss
index 20604b70..c6a25e53 100644
--- a/web-ui/src/account_recovery/page.scss
+++ b/web-ui/src/account_recovery/page.scss
@@ -66,10 +66,33 @@ p {
   margin-bottom: 0.5em;
 }
 
+.account-recovery-form {
+  display: flex;
+  flex-direction: column;
+
+  .account-recovery-progress {
+    margin: 1em 0;
+    align-self: center;
+    width: 100%;
+  }
+
+  .input-field-group {
+    margin-top: 0;
+  }
+}
+
 @media only screen and (min-width : 500px) {
   body {
     font-size: 1.3em;
   }
+
+  .account-recovery-form {
+    align-items: center;
+
+    .account-recovery-progress, h1 {
+      width: 80%;
+    }
+  }
 }
 
 @media only screen and (min-width : 960px) {
@@ -78,4 +101,21 @@ p {
     max-width: 700px;
     padding: 3em;
   }
+
+  .account-recovery-progress {
+    width: 80%;
+    margin-top: 0;
+  }
+
+  .account-recovery-form {
+    h1 {
+      max-width: 80%;
+      width: auto;
+    }
+
+    .input-field-group, .submit-button {
+      width: 60%;
+      align-self: center;
+    }
+  }
 }
diff --git a/web-ui/src/account_recovery/page.spec.js b/web-ui/src/account_recovery/page.spec.js
index 32e1477c..fd4e7db6 100644
--- a/web-ui/src/account_recovery/page.spec.js
+++ b/web-ui/src/account_recovery/page.spec.js
@@ -4,11 +4,12 @@ import React from 'react';
 
 import { Page } from 'src/account_recovery/page';
 import Header from 'src/common/header/header';
-import AdminRecoveryCodeForm from 'src/account_recovery/forms/admin_recovery_code_form';
-import UserRecoveryCodeForm from 'src/account_recovery/forms/user_recovery_code_form';
-import NewPasswordForm from 'src/account_recovery/forms/new_password_form';
 import Footer from 'src/common/footer/footer';
 
+import AdminRecoveryCodeFormWrapper from './admin_recovery_code_form/admin_recovery_code_form';
+import UserRecoveryCodeFormWrapper from './user_recovery_code_form/user_recovery_code_form';
+import NewPasswordFormWrapper from './new_password_form/new_password_form';
+
 describe('Account Recovery Page', () => {
   let page;
 
@@ -37,29 +38,29 @@ describe('Account Recovery Page', () => {
     });
 
     it('renders admin recovery code form as default form', () => {
-      expect(page.find(AdminRecoveryCodeForm).length).toEqual(1);
-      expect(page.find(UserRecoveryCodeForm).length).toEqual(0);
-      expect(page.find(NewPasswordForm).length).toEqual(0);
+      expect(page.find(AdminRecoveryCodeFormWrapper).length).toEqual(1);
+      expect(page.find(UserRecoveryCodeFormWrapper).length).toEqual(0);
+      expect(page.find(NewPasswordFormWrapper).length).toEqual(0);
     });
 
     it('renders user recovery code form when admin code submitted', () => {
       pageInstance.nextStep({ preventDefault: () => {} });
 
-      expect(page.find(UserRecoveryCodeForm).length).toEqual(1);
+      expect(page.find(UserRecoveryCodeFormWrapper).length).toEqual(1);
     });
 
     it('returns to admin code form on user code form back link', () => {
       pageInstance.nextStep({ preventDefault: () => {} });
       pageInstance.previousStep();
 
-      expect(page.find(AdminRecoveryCodeForm).length).toEqual(1);
+      expect(page.find(AdminRecoveryCodeFormWrapper).length).toEqual(1);
     });
 
     it('renders new password form when user code submitted', () => {
       pageInstance.nextStep({ preventDefault: () => {} });
       pageInstance.nextStep({ preventDefault: () => {} });
 
-      expect(page.find(NewPasswordForm).length).toEqual(1);
+      expect(page.find(NewPasswordFormWrapper).length).toEqual(1);
     });
 
     it('returns to user code form on new password form back link', () => {
@@ -67,7 +68,7 @@ describe('Account Recovery Page', () => {
       pageInstance.nextStep({ preventDefault: () => {} });
       pageInstance.previousStep();
 
-      expect(page.find(UserRecoveryCodeForm).length).toEqual(1);
+      expect(page.find(UserRecoveryCodeFormWrapper).length).toEqual(1);
     });
   });
 });
diff --git a/web-ui/src/account_recovery/user_recovery_code_form/user_recovery_code_form.js b/web-ui/src/account_recovery/user_recovery_code_form/user_recovery_code_form.js
new file mode 100644
index 00000000..cfdcdc26
--- /dev/null
+++ b/web-ui/src/account_recovery/user_recovery_code_form/user_recovery_code_form.js
@@ -0,0 +1,59 @@
+/*
+ * 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 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 './user_recovery_code_form.scss';
+
+export const UserRecoveryCodeForm = ({ t, previous, 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>
+    <div className='user-code-form-content'>
+      <img
+        className='user-code-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
+      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
+};
+
+export default translate('', { wait: true })(UserRecoveryCodeForm);
diff --git a/web-ui/src/account_recovery/user_recovery_code_form/user_recovery_code_form.scss b/web-ui/src/account_recovery/user_recovery_code_form/user_recovery_code_form.scss
new file mode 100644
index 00000000..55f5621b
--- /dev/null
+++ b/web-ui/src/account_recovery/user_recovery_code_form/user_recovery_code_form.scss
@@ -0,0 +1,39 @@
+/*
+ * 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/>.
+ */
+
+.user-code-form-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.user-code-image {
+  margin: 1em 0;
+  align-self: center;
+  height: 4em;
+}
+
+@media only screen and (min-width : 500px) {
+  .user-code-form-content {
+    flex-direction: row;
+    width: 80%;
+  }
+
+  .user-code-image {
+    margin-right: 1.6em;
+  }
+}
diff --git a/web-ui/src/account_recovery/user_recovery_code_form/user_recovery_code_form.spec.js b/web-ui/src/account_recovery/user_recovery_code_form/user_recovery_code_form.spec.js
new file mode 100644
index 00000000..cb6998c8
--- /dev/null
+++ b/web-ui/src/account_recovery/user_recovery_code_form/user_recovery_code_form.spec.js
@@ -0,0 +1,52 @@
+import { shallow } from 'enzyme';
+import expect from 'expect';
+import React from 'react';
+import { UserRecoveryCodeForm } from './user_recovery_code_form';
+
+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} previous={mockPrevious}
+      />
+    );
+  });
+
+  it('renders title for user recovery code', () => {
+    expect(userRecoveryCodeForm.find('h1').text()).toEqual('account-recovery.user-form.title');
+  });
+
+  it('renders description', () => {
+    expect(userRecoveryCodeForm.find('p').text()).toEqual('account-recovery.user-form.description');
+  });
+
+  it('renders input for user code', () => {
+    expect(userRecoveryCodeForm.find('InputField').props().label).toEqual('account-recovery.user-form.input-label');
+  });
+
+  it('renders submit button', () => {
+    expect(userRecoveryCodeForm.find('SubmitButton').props().buttonText).toEqual('account-recovery.user-form.button');
+  });
+
+  it('submits form to next step', () => {
+    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