diff options
32 files changed, 282 insertions, 183 deletions
diff --git a/service/pixelated/resources/account_recovery_resource.py b/service/pixelated/resources/account_recovery_resource.py index ccfdc580..8cb10fc8 100644 --- a/service/pixelated/resources/account_recovery_resource.py +++ b/service/pixelated/resources/account_recovery_resource.py @@ -18,19 +18,20 @@ import os from pixelated.resources import BaseResource from twisted.python.filepath import FilePath -from pixelated.resources import get_protected_static_folder +from pixelated.resources import get_public_static_folder from twisted.web.http import OK from twisted.web.template import Element, XMLFile, renderElement class AccountRecoveryPage(Element): - loader = XMLFile(FilePath(os.path.join(get_protected_static_folder(), 'account_recovery.html'))) + loader = XMLFile(FilePath(os.path.join(get_public_static_folder(), 'account_recovery.html'))) def __init__(self): super(AccountRecoveryPage, self).__init__() class AccountRecoveryResource(BaseResource): + BASE_URL = 'account-recovery' isLeaf = True def __init__(self, services_factory): diff --git a/service/pixelated/resources/login_resource.py b/service/pixelated/resources/login_resource.py index 3e1200d7..45942ea6 100644 --- a/service/pixelated/resources/login_resource.py +++ b/service/pixelated/resources/login_resource.py @@ -20,6 +20,7 @@ from xml.sax import SAXParseException from pixelated.authentication import Authenticator from pixelated.config.leap import BootstrapUserServices from pixelated.resources import BaseResource, UnAuthorizedResource, IPixelatedSession +from pixelated.resources.account_recovery_resource import AccountRecoveryResource from pixelated.resources import get_public_static_folder, respond_json from twisted.cred.error import UnauthorizedLogin from twisted.internet import defer @@ -101,6 +102,8 @@ class LoginResource(BaseResource): return self if path == 'status': return LoginStatusResource(self._services_factory) + if path == AccountRecoveryResource.BASE_URL: + return AccountRecoveryResource(self._services_factory) if not self.is_logged_in(request): return UnAuthorizedResource() return NoResource() diff --git a/service/pixelated/resources/root_resource.py b/service/pixelated/resources/root_resource.py index 02f2fb62..d860c422 100644 --- a/service/pixelated/resources/root_resource.py +++ b/service/pixelated/resources/root_resource.py @@ -92,7 +92,7 @@ class RootResource(BaseResource): def initialize(self, provider=None, disclaimer_banner=None, authenticator=None): self._child_resources.add('assets', File(self._protected_static_folder)) - self._child_resources.add('account-recovery', AccountRecoveryResource(self._services_factory)) + self._child_resources.add(AccountRecoveryResource.BASE_URL, AccountRecoveryResource(self._services_factory)) self._child_resources.add('backup-account', BackupAccountResource(self._services_factory, authenticator)) self._child_resources.add('sandbox', SandboxResource(self._protected_static_folder)) self._child_resources.add('keys', KeysResource(self._services_factory)) diff --git a/service/test/unit/resources/test_login_resource.py b/service/test/unit/resources/test_login_resource.py index 9f940bc6..eaaba1d4 100644 --- a/service/test/unit/resources/test_login_resource.py +++ b/service/test/unit/resources/test_login_resource.py @@ -67,6 +67,16 @@ class TestLoginResource(unittest.TestCase): d.addCallback(assert_unauthorized_resources) return d + def test_account_recovery_resource_does_not_require_login(self): + request = DummyRequest(['account-recovery']) + d = self.web.get(request) + + def assert_successful(_): + self.assertEqual(200, request.responseCode) + + d.addCallback(assert_successful) + return d + @patch('pixelated.resources.session.PixelatedSession.is_logged_in') def test_there_are_no_grand_children_resources_when_logged_in(self, mock_is_logged_in): request = DummyRequest(['/login/grand_children']) diff --git a/web-ui/app/locales/en_US/translation.json b/web-ui/app/locales/en_US/translation.json index 8116aba4..8607f590 100644 --- a/web-ui/app/locales/en_US/translation.json +++ b/web-ui/app/locales/en_US/translation.json @@ -89,23 +89,21 @@ "tip1": "The safest way to do this is in person.", "tip2": "You can call or text if you need to.", "tip3": "Don't ever ask for it via email.", - "input-label": "type here admin's backup code", - "button": "Next" + "input-label": "type here admin's backup code" }, "user-form": { "image-description": "User Recovery Code - Step 2 of 4", "title": "Remember your backup account?", "description": "When you created your account you received a message - it was sent by team@pixelated-project.org. You'll need the recovery code that is in it.", - "input-label": "type here your backup code", - "button": "Next" + "input-label": "type here your backup code" }, "new-password-form": { "image-description": "New Password - Step 3 of 4", "title": "Now, create a new password", "input-label1": "create new password", - "input-label2": "confirm your new password", - "button": "Next" + "input-label2": "confirm your new password" }, + "button-next": "Next", "back": "Back to previous step" }, "backup-account": { diff --git a/web-ui/app/locales/pt_BR/translation.json b/web-ui/app/locales/pt_BR/translation.json index d43487a2..c4b3d9e7 100644 --- a/web-ui/app/locales/pt_BR/translation.json +++ b/web-ui/app/locales/pt_BR/translation.json @@ -82,7 +82,29 @@ "tags": "Etiquetas" }, "account-recovery": { - "page-title": "Pixelated Recuperação de Conta" + "page-title": "Pixelated Recuperação de Conta", + "admin-form": { + "image-description": "Código de Recuperação do Administrador - Passo 1 de 4", + "title": "Contate o administrador da sua conta e peça seu código", + "tip1": "A maneira mais segura é fazer isso pessoalmente.", + "tip2": "Você pode ligar ou mandar mensagem de texto se precisar.", + "tip3": "Nunca peça por e-mail.", + "input-label": "digite aqui o código" + }, + "user-form": { + "image-description": "Código de Recuperação do Usuário - Passo 2 de 4", + "title": "Lembra do seu e-mail de recuperação?", + "description": "Quando você criou uma conta você recebeu uma mensagem do team@pixelated-project.org. Você precisará do código que está neste e-mail.", + "input-label": "digite aqui o código" + }, + "new-password-form": { + "image-description": "Nova Senha - Passo 3 de 4", + "title": "Agora, crie uma nova senha", + "input-label1": "digite a nova senha", + "input-label2": "confirme a nova senha" + }, + "button-next": "Próximo", + "back": "Voltar ao passo anterior" }, "backup-account": { "page-title": "Pixelated E-mail de Recuperação", diff --git a/web-ui/config/public-assets-webpack.js b/web-ui/config/public-assets-webpack.js index 28dff566..13364e2c 100644 --- a/web-ui/config/public-assets-webpack.js +++ b/web-ui/config/public-assets-webpack.js @@ -3,6 +3,7 @@ var CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = new CopyWebpackPlugin([ { context: 'src/login/', from: '*.html' }, { context: 'src/login/', from: '*.css' }, + { context: 'src/account_recovery/', from: 'account_recovery.html' }, { context: 'src/interstitial/', from: '*' }, { context: 'app/', from: 'fonts/*' }, { context: 'app/', from: 'locales/**/*' }, diff --git a/web-ui/src/account_recovery/account_recovery.html b/web-ui/src/account_recovery/account_recovery.html index f4601239..35054455 100644 --- a/web-ui/src/account_recovery/account_recovery.html +++ b/web-ui/src/account_recovery/account_recovery.html @@ -9,6 +9,6 @@ </head> <body> <div id="root"/> - <script type="text/javascript" src="/assets/account_recovery.js"></script> + <script type="text/javascript" src="/public/account_recovery.js"></script> </body> </html> 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..5b9da350 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='' /> @@ -42,7 +42,7 @@ export const AdminRecoveryCodeForm = ({ t, next }) => ( <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')} /> + <SubmitButton buttonText={t('account-recovery.button-next')} /> </form> ); 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..73c4c1e0 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; @@ -28,7 +28,7 @@ describe('AdminRecoveryCodeForm', () => { }); it('renders button for next step', () => { - expect(adminRecoveryCodeForm.find('SubmitButton').props().buttonText).toEqual('account-recovery.admin-form.button'); + expect(adminRecoveryCodeForm.find('SubmitButton').props().buttonText).toEqual('account-recovery.button-next'); }); it('submits form to next step', () => { 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..f1097b0b 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,12 +22,14 @@ 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')} + alt={t('account-recovery.new-password-form.image-description')} /> <h1>{t('account-recovery.new-password-form.title')}</h1> <InputField @@ -38,12 +40,8 @@ export const NewPasswordForm = ({ t, previous }) => ( 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' - /> + <SubmitButton buttonText={t('account-recovery.button-next')} /> + <BackLink text={t('account-recovery.back')} onClick={previous} /> </form> ); 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..d2bd350c 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; @@ -30,16 +30,11 @@ describe('NewPasswordForm', () => { }); it('renders submit button', () => { - expect(newPasswordForm.find('SubmitButton').props().buttonText).toEqual('account-recovery.new-password-form.button'); + expect(newPasswordForm.find('SubmitButton').props().buttonText).toEqual('account-recovery.button-next'); }); 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..c61c855e 100644 --- a/web-ui/src/account_recovery/page.scss +++ b/web-ui/src/account_recovery/page.scss @@ -66,10 +66,37 @@ p { margin-bottom: 0.5em; } +.account-recovery-form { + display: flex; + flex-direction: column; + + .account-recovery-progress { + 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 { + margin-bottom: 1.4em; + width: 80%; + } + + h1 { + width: 80%; + } + } } @media only screen and (min-width : 960px) { @@ -78,4 +105,16 @@ p { max-width: 700px; padding: 3em; } + + .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..68debba0 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; @@ -21,8 +22,8 @@ describe('Account Recovery Page', () => { expect(page.props().title).toEqual('account-recovery.page-title'); }); - it('renders header', () => { - expect(page.find(Header).length).toEqual(1); + it('renders header without logout button', () => { + expect(page.find(Header).props().renderLogout).toEqual(false); }); it('renders footer', () => { @@ -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..a4119885 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,19 +34,15 @@ 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='' /> <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' - /> + <SubmitButton buttonText={t('account-recovery.button-next')} /> + <BackLink text={t('account-recovery.back')} onClick={previous} /> </form> ); 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..e47f2e6c 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; @@ -32,7 +32,7 @@ describe('UserRecoveryCodeForm', () => { }); it('renders submit button', () => { - expect(userRecoveryCodeForm.find('SubmitButton').props().buttonText).toEqual('account-recovery.user-form.button'); + expect(userRecoveryCodeForm.find('SubmitButton').props().buttonText).toEqual('account-recovery.button-next'); }); it('submits form to next step', () => { @@ -44,9 +44,4 @@ describe('UserRecoveryCodeForm', () => { 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/backup_account/confirmation/confirmation.js b/web-ui/src/backup_account/confirmation/confirmation.js index 41637dab..49b0d19c 100644 --- a/web-ui/src/backup_account/confirmation/confirmation.js +++ b/web-ui/src/backup_account/confirmation/confirmation.js @@ -18,6 +18,7 @@ import React from 'react'; import { translate } from 'react-i18next'; import SubmitButton from 'src/common/submit_button/submit_button'; +import BackLink from 'src/common/back_link/back_link'; import './confirmation.scss'; @@ -29,12 +30,10 @@ export const Confirmation = ({ t }) => ( <form action='/'> <SubmitButton buttonText={t('backup-account.confirmation.button')} type='submit' /> </form> - <div className='link-content'> - <a href='/backup-account' className='link'> - <i className='fa fa-angle-left' aria-hidden='true' /> - <span>{t('backup-account.confirmation.retry-button')}</span> - </a> - </div> + <BackLink + href='/backup-account' + text={t('backup-account.confirmation.retry-button')} + /> </div> ); diff --git a/web-ui/src/backup_account/confirmation/confirmation.spec.js b/web-ui/src/backup_account/confirmation/confirmation.spec.js index 291d156d..7a6f38ca 100644 --- a/web-ui/src/backup_account/confirmation/confirmation.spec.js +++ b/web-ui/src/backup_account/confirmation/confirmation.spec.js @@ -20,10 +20,10 @@ describe('Confirmation', () => { }); it('renders confirmation retry button', () => { - expect(page.find('a').text()).toEqual('backup-account.confirmation.retry-button'); + expect(page.find('BackLink').props().text).toEqual('backup-account.confirmation.retry-button'); }); it('retries button redirects to backup account', () => { - expect(page.find('a').props().href).toEqual('/backup-account'); + expect(page.find('BackLink').props().href).toEqual('/backup-account'); }); }); diff --git a/web-ui/src/backup_account/page.js b/web-ui/src/backup_account/page.js index be3bae36..e7663205 100644 --- a/web-ui/src/backup_account/page.js +++ b/web-ui/src/backup_account/page.js @@ -56,7 +56,7 @@ export class Page extends React.Component { return ( <DocumentTitle title={t('backup-account.page-title')}> <div className='page'> - <Header /> + <Header renderLogout /> <section> {this.mainContent()} </section> diff --git a/web-ui/src/backup_account/page.spec.js b/web-ui/src/backup_account/page.spec.js index 2933a64e..8c014ee4 100644 --- a/web-ui/src/backup_account/page.spec.js +++ b/web-ui/src/backup_account/page.spec.js @@ -5,6 +5,7 @@ import { Page } from 'src/backup_account/page'; import BackupEmail from 'src/backup_account/backup_email/backup_email'; import Confirmation from 'src/backup_account/confirmation/confirmation'; import SnackbarNotification from 'src/common/snackbar_notification/snackbar_notification'; +import Header from 'src/common/header/header'; describe('BackupAccount', () => { let page; @@ -18,6 +19,10 @@ describe('BackupAccount', () => { expect(page.props().title).toEqual('backup-account.page-title'); }); + it('renders header with logout button', () => { + expect(page.find(Header).props().renderLogout).toEqual(true); + }); + describe('save backup email', () => { let pageInstance; diff --git a/web-ui/src/common/back_link/back_link.js b/web-ui/src/common/back_link/back_link.js index f3bdb2b5..bb5ffbea 100644 --- a/web-ui/src/common/back_link/back_link.js +++ b/web-ui/src/common/back_link/back_link.js @@ -19,12 +19,19 @@ import React from 'react'; import './back_link.scss'; +const icon = <i className='fa fa-angle-left' aria-hidden='true' />; + +const button = (text, options) => ( + <button className='link' {...options}>{icon}<span>{text}</span></button> +); + +const link = (text, options) => ( + <a className='link' {...options}>{icon}<span>{text}</span></a> +); + const BackLink = ({ text, ...other }) => ( <div className='link-content'> - <a className='link' tabIndex='0' {...other}> - <i className='fa fa-angle-left' aria-hidden='true' /> - <span>{text}</span> - </a> + { other.href ? link(text, other) : button(text, other) } </div> ); diff --git a/web-ui/src/common/back_link/back_link.scss b/web-ui/src/common/back_link/back_link.scss index a799a710..5541d9d9 100644 --- a/web-ui/src/common/back_link/back_link.scss +++ b/web-ui/src/common/back_link/back_link.scss @@ -21,6 +21,10 @@ color: $dark_blue; font-style: italic; font-size: 0.8em; + margin: 0; + padding: 0; + border: 0; + background: transparent; .fa { font-size: 1.6em; diff --git a/web-ui/src/common/back_link/back_link.spec.js b/web-ui/src/common/back_link/back_link.spec.js index ee659267..5f49a6f9 100644 --- a/web-ui/src/common/back_link/back_link.spec.js +++ b/web-ui/src/common/back_link/back_link.spec.js @@ -4,17 +4,38 @@ import React from 'react'; import BackLink from 'src/common/back_link/back_link'; describe('BackLink', () => { - let backLink; + context('as link', () => { + let backLink; - beforeEach(() => { - backLink = shallow(<BackLink text='Back to inbox' href='/' />); - }); + beforeEach(() => { + backLink = shallow(<BackLink text='Back to inbox' href='/' />); + }); + + it('renders link with text', () => { + expect(backLink.find('a').text()).toEqual('Back to inbox'); + }); - it('renders link with text', () => { - expect(backLink.find('a').text()).toEqual('Back to inbox'); + it('adds link action', () => { + expect(backLink.find('a').props().href).toEqual('/'); + }); }); - it('adds link action', () => { - expect(backLink.find('a').props().href).toEqual('/'); + context('as button', () => { + let backLink; + let mockClick; + + beforeEach(() => { + mockClick = expect.createSpy(); + backLink = shallow(<BackLink text='Back to inbox' onClick={mockClick} />); + }); + + it('renders button with text', () => { + expect(backLink.find('button').text()).toEqual('Back to inbox'); + }); + + it('adds button click event', () => { + backLink.find('button').simulate('click'); + expect(mockClick).toHaveBeenCalled(); + }); }); }); diff --git a/web-ui/src/common/header/header.js b/web-ui/src/common/header/header.js index 715d54c6..3ad924c0 100644 --- a/web-ui/src/common/header/header.js +++ b/web-ui/src/common/header/header.js @@ -19,7 +19,7 @@ import React from 'react'; import Logout from 'src/common/logout/logout'; import './header.scss'; -export const Header = () => ( +export const Header = ({ renderLogout }) => ( <header className='header-wrapper'> <div className='header-content'> <a href='/'> @@ -30,10 +30,18 @@ export const Header = () => ( /> </a> <div className='header-icons'> - <Logout /> + { renderLogout ? <Logout /> : <div /> } </div> </div> </header> ); +Header.propTypes = { + renderLogout: React.PropTypes.bool +}; + +Header.defaultProps = { + renderLogout: false +}; + export default Header; diff --git a/web-ui/src/common/header/header.spec.js b/web-ui/src/common/header/header.spec.js index 81a952c7..0c11713b 100644 --- a/web-ui/src/common/header/header.spec.js +++ b/web-ui/src/common/header/header.spec.js @@ -11,11 +11,16 @@ describe('Header', () => { header = shallow(<Header />); }); - it('renders the header containing the logout button', () => { - expect(header.find('header').find(Logout)).toExist(); - }); - it('renders the header pixelated logo', () => { expect(header.find('header').find('img').props().alt).toEqual('Pixelated'); }); + + it('renders the header containing the logout button when renderLogout is true', () => { + header = shallow(<Header renderLogout />); + expect(header.find('header').find(Logout).length).toEqual(1); + }); + + it('hides logout button when renderLogout is false', () => { + expect(header.find('header').find(Logout).length).toEqual(0); + }); }); diff --git a/web-ui/webpack.config.js b/web-ui/webpack.config.js index 0470b508..e82cf88b 100644 --- a/web-ui/webpack.config.js +++ b/web-ui/webpack.config.js @@ -21,11 +21,12 @@ var commonConfiguration = { var publicAssets = Object.assign({}, commonConfiguration, { entry: { 'login': './src/login/login.js', + 'account_recovery': './src/account_recovery/account_recovery.js' }, output: { path: path.join(__dirname, 'dist/public'), filename: '[name].js', - publicPath: '/assets/' + publicPath: '/public/' }, plugins: [ publicAssetsWebpack, @@ -39,7 +40,6 @@ var publicAssets = Object.assign({}, commonConfiguration, { var protectedAssets = Object.assign({}, commonConfiguration, { entry: { 'app': './app/js/index.js', - 'account_recovery': './src/account_recovery/account_recovery.js', 'backup_account': './src/backup_account/backup_account.js', 'sandbox': './app/js/sandbox.js' }, diff --git a/web-ui/webpack.production.config.js b/web-ui/webpack.production.config.js index 23be0565..c731526a 100644 --- a/web-ui/webpack.production.config.js +++ b/web-ui/webpack.production.config.js @@ -31,11 +31,12 @@ var commonPlugins = [ var publicAssets = Object.assign({}, commonConfiguration, { entry: { 'login': './src/login/login.js', + 'account_recovery': './src/account_recovery/account_recovery.js' }, output: { path: path.join(__dirname, 'dist/public'), filename: '[name].js', - publicPath: '/assets/' + publicPath: '/public/' }, plugins: commonPlugins.concat([ publicAssetsWebpack ]) }); @@ -43,7 +44,6 @@ var publicAssets = Object.assign({}, commonConfiguration, { var protectedAssets = Object.assign({}, commonConfiguration, { entry: { 'app': './app/js/index.js', - 'account_recovery': './src/account_recovery/account_recovery.js', 'backup_account': './src/backup_account/backup_account.js', 'sandbox': './app/js/sandbox.js' }, |