summaryrefslogtreecommitdiff
path: root/web-ui
diff options
context:
space:
mode:
authorAnike Arni <aarni@thoughtworks.com>2017-03-28 18:59:33 -0300
committerAnike Arni <aarni@thoughtworks.com>2017-03-30 15:10:56 -0300
commit8d49edac6af9dd08f1bb7b1727aee36af413a4a2 (patch)
treeefe254802984e3215da4ec86d236742f150d2b8c /web-ui
parent7acb6843bd21dbf29cc7903964b52f6e21188df4 (diff)
[#932] Moves form componentes to separate directories
with @deniscostadsc
Diffstat (limited to 'web-ui')
-rw-r--r--web-ui/src/account_recovery/admin_recovery_code_form/admin_recovery_code_form.js (renamed from web-ui/src/account_recovery/forms/admin_recovery_code_form.js)4
-rw-r--r--web-ui/src/account_recovery/admin_recovery_code_form/admin_recovery_code_form.scss22
-rw-r--r--web-ui/src/account_recovery/admin_recovery_code_form/admin_recovery_code_form.spec.js (renamed from web-ui/src/account_recovery/forms/admin_recovery_code_form.spec.js)2
-rw-r--r--web-ui/src/account_recovery/forms/forms.scss92
-rw-r--r--web-ui/src/account_recovery/new_password_form/new_password_form.js (renamed from web-ui/src/account_recovery/forms/new_password_form.js)2
-rw-r--r--web-ui/src/account_recovery/new_password_form/new_password_form.scss22
-rw-r--r--web-ui/src/account_recovery/new_password_form/new_password_form.spec.js (renamed from web-ui/src/account_recovery/forms/new_password_form.spec.js)2
-rw-r--r--web-ui/src/account_recovery/page.js6
-rw-r--r--web-ui/src/account_recovery/page.scss40
-rw-r--r--web-ui/src/account_recovery/page.spec.js21
-rw-r--r--web-ui/src/account_recovery/user_recovery_code_form/user_recovery_code_form.js (renamed from web-ui/src/account_recovery/forms/user_recovery_code_form.js)4
-rw-r--r--web-ui/src/account_recovery/user_recovery_code_form/user_recovery_code_form.scss39
-rw-r--r--web-ui/src/account_recovery/user_recovery_code_form/user_recovery_code_form.spec.js (renamed from web-ui/src/account_recovery/forms/user_recovery_code_form.spec.js)2
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;