From 8d49edac6af9dd08f1bb7b1727aee36af413a4a2 Mon Sep 17 00:00:00 2001 From: Anike Arni 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 . + */ + +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 }) => ( +
+ {t('account-recovery.admin-form.image-description')} +

{t('account-recovery.admin-form.title')}

+ +
    +
  • {t('account-recovery.admin-form.tip1')}
  • +
  • {t('account-recovery.admin-form.tip2')}
  • +
  • {t('account-recovery.admin-form.tip3')}
  • +
+ + + +); + +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 . + */ + +.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( + + ); + }); + + 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 . - */ - -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 }) => ( -
- {t('account-recovery.admin-form.image-description')} -

{t('account-recovery.admin-form.title')}

- -
    -
  • {t('account-recovery.admin-form.tip1')}
  • -
  • {t('account-recovery.admin-form.tip2')}
  • -
  • {t('account-recovery.admin-form.tip3')}
  • -
- - - -); - -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( - - ); - }); - - 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 . - */ - -.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 . - */ - -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 }) => ( -
- {t('account-recovery.new-password.image-description')} -

{t('account-recovery.new-password-form.title')}

- - - - - -); - -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( - - ); - }); - - 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 . - */ - -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 }) => ( -
- {t('account-recovery.user-form.image-description')} -

{t('account-recovery.user-form.title')}

-
- -

{t('account-recovery.user-form.description')}

-
- - - - -); - -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( - - ); - }); - - 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 . + */ + +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 }) => ( +
+ {t('account-recovery.new-password.image-description')} +

{t('account-recovery.new-password-form.title')}

+ + + + + +); + +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 . + */ + +.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( + + ); + }); + + 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 . + */ + +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 }) => ( +
+ {t('account-recovery.user-form.image-description')} +

{t('account-recovery.user-form.title')}

+
+ +

{t('account-recovery.user-form.description')}

+
+ + + + +); + +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 . + */ + +.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( + + ); + }); + + 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