[#932] Moves form componentes to separate directories

with @deniscostadsc

13 files changed, 146 insertions, 112 deletions

diff --git a/web-ui/src/account_recovery/forms/admin_recovery_code_form.js b/web-ui/src/account_recovery/admin_recovery_code_form/admin_recovery_code_form.js
index 3d97b191..7a82a5d7 100644
--- a/web-ui/src/account_recovery/forms/admin_recovery_code_form.js
+++ b/web-ui/src/account_recovery/admin_recovery_code_form/admin_recovery_code_form.js
@@ -21,7 +21,7 @@ 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';
+import './admin_recovery_code_form.scss';
 
 export const AdminRecoveryCodeForm = ({ t, next }) => (
   <form className='account-recovery-form admin-code' onSubmit={next}>
@@ -32,7 +32,7 @@ export const AdminRecoveryCodeForm = ({ t, next }) => (
     />
     <h1>{t('account-recovery.admin-form.title')}</h1>
     <img
-      className='admin-codes-image'
+      className='admin-code-image'
       src='/public/images/account-recovery/admins_contact.svg'
       alt=''
     />
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/forms/admin_recovery_code_form.spec.js b/web-ui/src/account_recovery/admin_recovery_code_form/admin_recovery_code_form.spec.js
index 0e922212..85b75652 100644
--- a/web-ui/src/account_recovery/forms/admin_recovery_code_form.spec.js
+++ b/web-ui/src/account_recovery/admin_recovery_code_form/admin_recovery_code_form.spec.js
@@ -1,7 +1,7 @@
 import { shallow } from 'enzyme';
 import expect from 'expect';
 import React from 'react';
-import { AdminRecoveryCodeForm } from 'src/account_recovery/forms/admin_recovery_code_form';
+import { AdminRecoveryCodeForm } from './admin_recovery_code_form';
 
 describe('AdminRecoveryCodeForm', () => {
   let adminRecoveryCodeForm;
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/new_password_form/new_password_form.js
index 114366b3..8fbfb99d 100644
--- a/web-ui/src/account_recovery/forms/new_password_form.js
+++ b/web-ui/src/account_recovery/new_password_form/new_password_form.js
@@ -22,6 +22,8 @@ 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
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/forms/new_password_form.spec.js b/web-ui/src/account_recovery/new_password_form/new_password_form.spec.js
index 5ac96b40..2d326aea 100644
--- a/web-ui/src/account_recovery/forms/new_password_form.spec.js
+++ b/web-ui/src/account_recovery/new_password_form/new_password_form.spec.js
@@ -1,7 +1,7 @@
 import { shallow } from 'enzyme';
 import expect from 'expect';
 import React from 'react';
-import { NewPasswordForm } from 'src/account_recovery/forms/new_password_form';
+import { NewPasswordForm } from './new_password_form';
 
 describe('NewPasswordForm', () => {
   let newPasswordForm;
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/forms/user_recovery_code_form.js b/web-ui/src/account_recovery/user_recovery_code_form/user_recovery_code_form.js
index 30525cdf..cfdcdc26 100644
--- a/web-ui/src/account_recovery/forms/user_recovery_code_form.js
+++ b/web-ui/src/account_recovery/user_recovery_code_form/user_recovery_code_form.js
@@ -22,7 +22,7 @@ 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';
+import './user_recovery_code_form.scss';
 
 export const UserRecoveryCodeForm = ({ t, previous, next }) => (
   <form className='account-recovery-form user-code' onSubmit={next}>
@@ -34,7 +34,7 @@ export const UserRecoveryCodeForm = ({ t, previous, next }) => (
     <h1>{t('account-recovery.user-form.title')}</h1>
     <div className='user-code-form-content'>
       <img
-        className='user-codes-image'
+        className='user-code-image'
         src='/public/images/account-recovery/codes.svg'
         alt=''
       />
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/forms/user_recovery_code_form.spec.js b/web-ui/src/account_recovery/user_recovery_code_form/user_recovery_code_form.spec.js
index 1aebb814..cb6998c8 100644
--- a/web-ui/src/account_recovery/forms/user_recovery_code_form.spec.js
+++ b/web-ui/src/account_recovery/user_recovery_code_form/user_recovery_code_form.spec.js
@@ -1,7 +1,7 @@
 import { shallow } from 'enzyme';
 import expect from 'expect';
 import React from 'react';
-import { UserRecoveryCodeForm } from 'src/account_recovery/forms/user_recovery_code_form';
+import { UserRecoveryCodeForm } from './user_recovery_code_form';
 
 describe('UserRecoveryCodeForm', () => {
   let userRecoveryCodeForm;