From f7bd078bcce2d6cad419fceb55ab71415cda4d33 Mon Sep 17 00:00:00 2001 From: Tulio Casagrande Date: Tue, 21 Feb 2017 13:51:41 -0300 Subject: [#907] Display error message for mobile version with @anikarni --- web-ui/app/images/dead-mail.svg | 30 +++++++++++++++++ web-ui/app/locales/en_US/translation.json | 6 +++- web-ui/app/locales/pt_BR/translation.json | 6 +++- web-ui/src/interstitial/interstitial.js | 4 ++- web-ui/src/login/app.js | 14 +++++--- web-ui/src/login/app.scss | 2 +- web-ui/src/login/error/auth-error.scss | 21 ++++++++++++ web-ui/src/login/error/auth_error.js | 31 ++++++++++++++++++ web-ui/src/login/error/generic-error.scss | 38 ++++++++++++++++++++++ web-ui/src/login/error/generic_error.js | 37 +++++++++++++++++++++ web-ui/src/login/login.js | 2 +- web-ui/src/util.js | 7 ++-- web-ui/test/unit/login/app.spec.js | 20 ++++++++---- web-ui/test/unit/login/error/auth_error.spec.js | 17 ++++++++++ web-ui/test/unit/login/error/generic_error.spec.js | 17 ++++++++++ web-ui/test/unit/util.spec.js | 4 +-- 16 files changed, 234 insertions(+), 22 deletions(-) create mode 100644 web-ui/app/images/dead-mail.svg create mode 100644 web-ui/src/login/error/auth-error.scss create mode 100644 web-ui/src/login/error/auth_error.js create mode 100644 web-ui/src/login/error/generic-error.scss create mode 100644 web-ui/src/login/error/generic_error.js create mode 100644 web-ui/test/unit/login/error/auth_error.spec.js create mode 100644 web-ui/test/unit/login/error/generic_error.spec.js (limited to 'web-ui') diff --git a/web-ui/app/images/dead-mail.svg b/web-ui/app/images/dead-mail.svg new file mode 100644 index 00000000..0dc673e2 --- /dev/null +++ b/web-ui/app/images/dead-mail.svg @@ -0,0 +1,30 @@ + + + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web-ui/app/locales/en_US/translation.json b/web-ui/app/locales/en_US/translation.json index 7aad4fe8..f42a612d 100644 --- a/web-ui/app/locales/en_US/translation.json +++ b/web-ui/app/locales/en_US/translation.json @@ -65,7 +65,11 @@ "timeout": "A timeout occurred", "general": "Problems talking to server", "parse": "Got invalid response from server", - "auth": "Invalid email or password" + "auth": "Invalid email or password", + "login": { + "title": "Oh, something went wrong :(", + "message": "Try to login again in a few minutes. If the problem persists, contact your account administrator." + } }, "tags": { "inbox": "Inbox", diff --git a/web-ui/app/locales/pt_BR/translation.json b/web-ui/app/locales/pt_BR/translation.json index b38b7535..336784be 100644 --- a/web-ui/app/locales/pt_BR/translation.json +++ b/web-ui/app/locales/pt_BR/translation.json @@ -65,7 +65,11 @@ "timeout": "A operação excedeu o limite de tempo", "general": "Problemas ao se comunicar com o servidor", "parse": "Obteve uma resposta inválida do servidor", - "auth": "E-mail ou senha inválidos" + "auth": "E-mail ou senha inválidos", + "login": { + "title": "Ops, algo deu errado :(", + "message": "Tente entrar novamente em alguns minutos. Se o problema persistir, contate o administrador da sua conta." + } }, "tags": { "inbox": "Caixa de Entrada", diff --git a/web-ui/src/interstitial/interstitial.js b/web-ui/src/interstitial/interstitial.js index 78a17190..c9a29c21 100644 --- a/web-ui/src/interstitial/interstitial.js +++ b/web-ui/src/interstitial/interstitial.js @@ -44,8 +44,10 @@ $(function () { method: 'GET', url: '/status' }).success(function (data) { - if (data.status === 'completed' || data.status === 'error') { + if (data.status === 'completed') { window.location="/"; + } else if (data.status === 'error') { + window.location="/login?error"; } }); }, 2000); diff --git a/web-ui/src/login/app.js b/web-ui/src/login/app.js index 07099c60..54f5fd66 100644 --- a/web-ui/src/login/app.js +++ b/web-ui/src/login/app.js @@ -19,18 +19,21 @@ 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 AuthError from 'src/login/error/auth_error'; +import GenericError from 'src/login/error/generic_error'; import './app.scss'; -const errorMessage = (t, authError) => { - if (authError) return

{t('error.auth')}

; +const errorMessage = (t, authError, error) => { + if (authError) return ; + else if (error) return ; return
; }; -export const App = ({ t, authError }) => ( +export const App = ({ t, authError, error }) => (
Pixelated logo - {errorMessage(t, authError)} + {errorMessage(t, authError, error)}
@@ -41,7 +44,8 @@ export const App = ({ t, authError }) => ( App.propTypes = { t: React.PropTypes.func.isRequired, - authError: React.PropTypes.bool + authError: React.PropTypes.bool, + error: React.PropTypes.bool }; export default translate('', { wait: true })(App); diff --git a/web-ui/src/login/app.scss b/web-ui/src/login/app.scss index f6e6bc11..61b618d8 100644 --- a/web-ui/src/login/app.scss +++ b/web-ui/src/login/app.scss @@ -37,7 +37,6 @@ } #login_form { - padding: 20px 0; width: 70%; .input-field-group { @@ -51,6 +50,7 @@ .logo { width: 70%; + margin-bottom: 1em; } @media only screen and (min-width : 500px) { diff --git a/web-ui/src/login/error/auth-error.scss b/web-ui/src/login/error/auth-error.scss new file mode 100644 index 00000000..31210ae7 --- /dev/null +++ b/web-ui/src/login/error/auth-error.scss @@ -0,0 +1,21 @@ +/* + * 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 . + */ + +.auth-error { + color: #D72A25; + margin: 10px 0 0 0; +} diff --git a/web-ui/src/login/error/auth_error.js b/web-ui/src/login/error/auth_error.js new file mode 100644 index 00000000..ceeaf42b --- /dev/null +++ b/web-ui/src/login/error/auth_error.js @@ -0,0 +1,31 @@ +/* + * 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 './auth-error.scss'; + +export const AuthError = ({ t }) => ( +

{t('error.auth')}

+); + +AuthError.propTypes = { + t: React.PropTypes.func.isRequired +}; + +export default translate('', { wait: true })(AuthError); diff --git a/web-ui/src/login/error/generic-error.scss b/web-ui/src/login/error/generic-error.scss new file mode 100644 index 00000000..a44de793 --- /dev/null +++ b/web-ui/src/login/error/generic-error.scss @@ -0,0 +1,38 @@ +/* + * 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 "~scss/base/colors"; + +.generic-error { + font-size: 0.9em; + color: $medium_grey; + display: flex; + padding: 0 1.5em; + font-weight: 300; + + h2 { + font-weight: normal; + font-size: 1.4em; + } +} + +.dead-mail { + width: 20%; + margin-right: 1.5em; + margin-top: 1.7em; + align-self: flex-start; +} diff --git a/web-ui/src/login/error/generic_error.js b/web-ui/src/login/error/generic_error.js new file mode 100644 index 00000000..023e1bcf --- /dev/null +++ b/web-ui/src/login/error/generic_error.js @@ -0,0 +1,37 @@ +/* + * 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 './generic-error.scss'; + +export const GenericError = ({ t }) => ( +
+ +
+

{t('error.login.title')}

+

{t('error.login.message')}

+
+
+); + +GenericError.propTypes = { + t: React.PropTypes.func.isRequired +}; + +export default translate('', { wait: true })(GenericError); diff --git a/web-ui/src/login/login.js b/web-ui/src/login/login.js index 74e5a14e..b1d895ae 100644 --- a/web-ui/src/login/login.js +++ b/web-ui/src/login/login.js @@ -28,7 +28,7 @@ if (process.env.NODE_ENV === 'development') a11y(React); render( - + , document.getElementById('root') ); diff --git a/web-ui/src/util.js b/web-ui/src/util.js index 1b244458..bde8ce0a 100644 --- a/web-ui/src/util.js +++ b/web-ui/src/util.js @@ -1,6 +1,7 @@ -export const hasQueryParameter = param => ( - decodeURIComponent(window.location.search.substring(1)).includes(param) -); +export const hasQueryParameter = (param) => { + const decodedUri = decodeURIComponent(window.location.search.substring(1)).split('&'); + return decodedUri.includes(param); +}; export default { hasQueryParameter diff --git a/web-ui/test/unit/login/app.spec.js b/web-ui/test/unit/login/app.spec.js index 347e2b19..c1d63235 100644 --- a/web-ui/test/unit/login/app.spec.js +++ b/web-ui/test/unit/login/app.spec.js @@ -2,25 +2,31 @@ import { shallow } from 'enzyme'; import expect from 'expect'; import React from 'react'; import { App } from 'src/login/app'; +import AuthError from 'src/login/error/auth_error'; +import GenericError from 'src/login/error/generic_error'; describe('App', () => { let app; const mockTranslations = key => key; - beforeEach(() => { - app = shallow(); - }); - it('renders login form', () => { + app = shallow(); expect(app.find('form').props().action).toEqual('/login'); }); it('renders auth error message', () => { app = shallow(); - expect(app.find('.error').length).toEqual(1); + expect(app.find(AuthError).length).toEqual(1); }); - it('does not render auth error message', () => { - expect(app.find('.error').length).toEqual(0); + it('renders generic error message', () => { + app = shallow(); + expect(app.find(GenericError).length).toEqual(1); + }); + + it('does not render error message', () => { + app = shallow(); + expect(app.find(AuthError).length).toEqual(0); + expect(app.find(GenericError).length).toEqual(0); }); }); diff --git a/web-ui/test/unit/login/error/auth_error.spec.js b/web-ui/test/unit/login/error/auth_error.spec.js new file mode 100644 index 00000000..55d8920f --- /dev/null +++ b/web-ui/test/unit/login/error/auth_error.spec.js @@ -0,0 +1,17 @@ +import { shallow } from 'enzyme'; +import expect from 'expect'; +import React from 'react'; +import { AuthError } from 'src/login/error/auth_error'; + +describe('AuthError', () => { + let authError; + const mockTranslations = key => key; + + beforeEach(() => { + authError = shallow(); + }); + + it('renders error message', () => { + expect(authError.find('.auth-error').length).toEqual(1); + }); +}); diff --git a/web-ui/test/unit/login/error/generic_error.spec.js b/web-ui/test/unit/login/error/generic_error.spec.js new file mode 100644 index 00000000..1ef8349d --- /dev/null +++ b/web-ui/test/unit/login/error/generic_error.spec.js @@ -0,0 +1,17 @@ +import { shallow } from 'enzyme'; +import expect from 'expect'; +import React from 'react'; +import { GenericError } from 'src/login/error/generic_error'; + +describe('GenericError', () => { + let genericError; + const mockTranslations = key => key; + + beforeEach(() => { + genericError = shallow(); + }); + + it('renders error message', () => { + expect(genericError.find('.generic-error').length).toEqual(1); + }); +}); diff --git a/web-ui/test/unit/util.spec.js b/web-ui/test/unit/util.spec.js index 84decf6f..968b2d83 100644 --- a/web-ui/test/unit/util.spec.js +++ b/web-ui/test/unit/util.spec.js @@ -5,12 +5,12 @@ describe('Utils', () => { describe('.hasQueryParameter', () => { global.window = { location: { - search: '?auth&lng=pt-BR' + search: '?auth-error&lng=pt-BR' } }; it('checks if param included in query parameters', () => { - expect(Util.hasQueryParameter('auth')).toBe(true); + expect(Util.hasQueryParameter('auth-error')).toBe(true); }); it('checks if param not included in query parameters', () => { -- cgit v1.2.3 From 38c73f2e67173d5358dd4bb7e17b1e5b9c283f22 Mon Sep 17 00:00:00 2001 From: Anike Arni Date: Wed, 22 Feb 2017 10:52:52 -0300 Subject: [#907] Add pixelated welcome message to login with @tuliocasagrande and @thaissiqueira --- web-ui/app/images/welcome.svg | 91 +++++++++++++++++++++++++++ web-ui/app/locales/en_US/translation.json | 4 +- web-ui/src/login/about/pixelated-welcome.scss | 50 +++++++++++++++ web-ui/src/login/about/pixelated_welcome.js | 36 +++++++++++ web-ui/src/login/app.js | 12 +++- web-ui/src/login/app.scss | 41 ++++++++++-- web-ui/src/login/error/auth-error.scss | 12 +++- web-ui/src/login/error/generic-error.scss | 16 +++++ web-ui/src/login/login.css | 17 +++-- web-ui/src/util.js | 4 +- web-ui/test/unit/login/app.spec.js | 13 +++- 11 files changed, 276 insertions(+), 20 deletions(-) create mode 100644 web-ui/app/images/welcome.svg create mode 100644 web-ui/src/login/about/pixelated-welcome.scss create mode 100644 web-ui/src/login/about/pixelated_welcome.js (limited to 'web-ui') diff --git a/web-ui/app/images/welcome.svg b/web-ui/app/images/welcome.svg new file mode 100644 index 00000000..3f655b85 --- /dev/null +++ b/web-ui/app/images/welcome.svg @@ -0,0 +1,91 @@ + + + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web-ui/app/locales/en_US/translation.json b/web-ui/app/locales/en_US/translation.json index f42a612d..3f050e67 100644 --- a/web-ui/app/locales/en_US/translation.json +++ b/web-ui/app/locales/en_US/translation.json @@ -93,6 +93,8 @@ "login": { "email": "Your email", "password": "Your password", - "submit": "Login" + "submit": "Login", + "welcome-image-alt": "Welcome image", + "welcome-message": "Pixelated is an email that respects the privacy of your information." } } diff --git a/web-ui/src/login/about/pixelated-welcome.scss b/web-ui/src/login/about/pixelated-welcome.scss new file mode 100644 index 00000000..1e63f7c8 --- /dev/null +++ b/web-ui/src/login/about/pixelated-welcome.scss @@ -0,0 +1,50 @@ +/* + * 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 "~scss/base/colors"; + +.pixelated-welcome { + display: none; +} + +@media only screen and (min-width : 960px) { + .pixelated-welcome { + font-size: 0.9em; + color: $medium_grey; + display: flex; + font-weight: 300; + flex-direction: column; + align-self: flex-end; + float: right; + width: 34%; + margin-right: 8%; + margin-top: -7.8em; + padding: 0; + + h3 { + font-weight: normal; + font-size: 1.2em; + margin-top: 0; + } + } + + .welcome-logo { + order: 1; + width: 90%; + height: 15em; + } +} diff --git a/web-ui/src/login/about/pixelated_welcome.js b/web-ui/src/login/about/pixelated_welcome.js new file mode 100644 index 00000000..82a7d7d0 --- /dev/null +++ b/web-ui/src/login/about/pixelated_welcome.js @@ -0,0 +1,36 @@ +/* + * 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 './pixelated-welcome.scss'; + +export const PixelatedWelcome = ({ t }) => ( +
+ {t('login.welcome-image-alt')} +
+

{t('login.welcome-message')}

+
+
+); + +PixelatedWelcome.propTypes = { + t: React.PropTypes.func.isRequired +}; + +export default translate('', { wait: true })(PixelatedWelcome); diff --git a/web-ui/src/login/app.js b/web-ui/src/login/app.js index 54f5fd66..7502c442 100644 --- a/web-ui/src/login/app.js +++ b/web-ui/src/login/app.js @@ -21,20 +21,26 @@ import InputField from 'src/common/input_field/input_field'; import SubmitButton from 'src/common/submit_button/submit_button'; import AuthError from 'src/login/error/auth_error'; import GenericError from 'src/login/error/generic_error'; +import PixelatedWelcome from 'src/login/about/pixelated_welcome'; import './app.scss'; -const errorMessage = (t, authError, error) => { +const errorMessage = (t, authError) => { if (authError) return ; - else if (error) return ; return
; }; +const rightPanel = (t, error) => { + if (error) return ; + return ; +}; + export const App = ({ t, authError, error }) => (
Pixelated logo - {errorMessage(t, authError, error)} + {rightPanel(t, error)} + {errorMessage(t, authError)} diff --git a/web-ui/src/login/app.scss b/web-ui/src/login/app.scss index 61b618d8..6721a8ba 100644 --- a/web-ui/src/login/app.scss +++ b/web-ui/src/login/app.scss @@ -17,11 +17,6 @@ @import "~scss/base/colors"; -.error { - color: $error; - margin: 10px 0 0 0; -} - .login { display: block; width: 90%; @@ -38,6 +33,9 @@ #login_form { width: 70%; + display: flex; + align-items: center; + flex-direction: column; .input-field-group { width: 100%; @@ -64,7 +62,38 @@ } @media only screen and (min-width : 960px) { + .content { + font-size: 0.9em; + } + .login { - width: 40%; + display: flex; + align-items: flex-start; + width: 70%; + max-width: 700px; + padding: 2.5em 0; + height: 22em; + + &:after { + content: ''; + height: 22em; + position: absolute; + box-shadow: 0px 0px 0px 0.3px $medium_light_grey; + left: 50%; + } + } + + .logo { + height: 6em; + margin-top: 1.5em; + } + + .logo, #login_form { + width: 34%; + margin-left: 8%; + } + + #login_form { + margin-top: -11em; } } diff --git a/web-ui/src/login/error/auth-error.scss b/web-ui/src/login/error/auth-error.scss index 31210ae7..9d57eb87 100644 --- a/web-ui/src/login/error/auth-error.scss +++ b/web-ui/src/login/error/auth-error.scss @@ -15,7 +15,15 @@ * along with Pixelated. If not, see . */ +@import "~scss/base/colors"; + .auth-error { - color: #D72A25; - margin: 10px 0 0 0; + color: $error; + margin: 0; +} + +@media only screen and (min-width : 960px) { + .auth-error { + margin: -1em 0 0 0; + } } diff --git a/web-ui/src/login/error/generic-error.scss b/web-ui/src/login/error/generic-error.scss index a44de793..b08651b4 100644 --- a/web-ui/src/login/error/generic-error.scss +++ b/web-ui/src/login/error/generic-error.scss @@ -36,3 +36,19 @@ margin-top: 1.7em; align-self: flex-start; } + +@media only screen and (min-width : 960px) { + .generic-error { + flex-direction: column; + align-self: flex-end; + width: 34%; + margin-right: 8%; + margin-top: -9em; + padding: 0; + } + + .dead-mail { + order: 1; + width: 30%; + } +} diff --git a/web-ui/src/login/login.css b/web-ui/src/login/login.css index d1206a39..5116875e 100644 --- a/web-ui/src/login/login.css +++ b/web-ui/src/login/login.css @@ -46,17 +46,24 @@ body { } @media only screen and (min-width : 500px) { - body { - font-size: 1.2em; - } - .disclaimer { width: 60%; } } @media only screen and (min-width : 960px) { + body { + font-size: 1.2em; + } + .disclaimer { - width: 40%; + width: 70%; + max-width: 700px; + padding: 0; + font-size: 1em; + } + + .disclaimer-content { + font-size: 0.7em; } } diff --git a/web-ui/src/util.js b/web-ui/src/util.js index bde8ce0a..effb3d9c 100644 --- a/web-ui/src/util.js +++ b/web-ui/src/util.js @@ -1,6 +1,6 @@ export const hasQueryParameter = (param) => { - const decodedUri = decodeURIComponent(window.location.search.substring(1)).split('&'); - return decodedUri.includes(param); + const decodedUri = decodeURIComponent(window.location.search.substring(1)); + return !(decodedUri.split('&').indexOf(param) < 0); }; export default { diff --git a/web-ui/test/unit/login/app.spec.js b/web-ui/test/unit/login/app.spec.js index c1d63235..e329af0f 100644 --- a/web-ui/test/unit/login/app.spec.js +++ b/web-ui/test/unit/login/app.spec.js @@ -4,6 +4,7 @@ import React from 'react'; import { App } from 'src/login/app'; import AuthError from 'src/login/error/auth_error'; import GenericError from 'src/login/error/generic_error'; +import PixelatedWelcome from 'src/login/about/pixelated_welcome'; describe('App', () => { let app; @@ -14,16 +15,26 @@ describe('App', () => { expect(app.find('form').props().action).toEqual('/login'); }); + it('renders welcome message when no error', () => { + app = shallow(); + expect(app.find(PixelatedWelcome).length).toEqual(1); + }); + it('renders auth error message', () => { app = shallow(); expect(app.find(AuthError).length).toEqual(1); }); - it('renders generic error message', () => { + it('renders generic error message when error', () => { app = shallow(); expect(app.find(GenericError).length).toEqual(1); }); + it('does not render welcome message when error', () => { + app = shallow(); + expect(app.find(PixelatedWelcome).length).toEqual(0); + }); + it('does not render error message', () => { app = shallow(); expect(app.find(AuthError).length).toEqual(0); -- cgit v1.2.3 From 19dc3947d27280a0c3ade87600fcf0558043ae4f Mon Sep 17 00:00:00 2001 From: Anike Arni Date: Wed, 22 Feb 2017 11:38:48 -0300 Subject: [#907] Changed order of login components with @thaissiqueira --- web-ui/src/login/about/pixelated-welcome.scss | 5 ++--- web-ui/src/login/app.scss | 10 ++++------ web-ui/src/login/error/auth-error.scss | 4 ++-- web-ui/src/login/error/generic-error.scss | 7 ++++++- 4 files changed, 14 insertions(+), 12 deletions(-) (limited to 'web-ui') diff --git a/web-ui/src/login/about/pixelated-welcome.scss b/web-ui/src/login/about/pixelated-welcome.scss index 1e63f7c8..17d05f13 100644 --- a/web-ui/src/login/about/pixelated-welcome.scss +++ b/web-ui/src/login/about/pixelated-welcome.scss @@ -29,11 +29,10 @@ font-weight: 300; flex-direction: column; align-self: flex-end; - float: right; + order: 2; width: 34%; margin-right: 8%; - margin-top: -7.8em; - padding: 0; + margin-top: -20.5em; h3 { font-weight: normal; diff --git a/web-ui/src/login/app.scss b/web-ui/src/login/app.scss index 6721a8ba..48add805 100644 --- a/web-ui/src/login/app.scss +++ b/web-ui/src/login/app.scss @@ -39,6 +39,7 @@ .input-field-group { width: 100%; + margin: 0 0 1.5em 0; } .submit-button { @@ -48,11 +49,11 @@ .logo { width: 70%; - margin-bottom: 1em; + margin-bottom: 2em; } @media only screen and (min-width : 500px) { - #login_form .input-field-group { + #login_form { margin-top: 1em; } @@ -85,6 +86,7 @@ .logo { height: 6em; + margin-bottom: 1em; margin-top: 1.5em; } @@ -92,8 +94,4 @@ width: 34%; margin-left: 8%; } - - #login_form { - margin-top: -11em; - } } diff --git a/web-ui/src/login/error/auth-error.scss b/web-ui/src/login/error/auth-error.scss index 9d57eb87..f6256be4 100644 --- a/web-ui/src/login/error/auth-error.scss +++ b/web-ui/src/login/error/auth-error.scss @@ -19,11 +19,11 @@ .auth-error { color: $error; - margin: 0; + margin: -1em 0 1em 0; } @media only screen and (min-width : 960px) { .auth-error { - margin: -1em 0 0 0; + margin: -2em 0 1em 0; } } diff --git a/web-ui/src/login/error/generic-error.scss b/web-ui/src/login/error/generic-error.scss index b08651b4..5a077f32 100644 --- a/web-ui/src/login/error/generic-error.scss +++ b/web-ui/src/login/error/generic-error.scss @@ -41,10 +41,15 @@ .generic-error { flex-direction: column; align-self: flex-end; + order: 2; width: 34%; margin-right: 8%; - margin-top: -9em; + margin-top: -19.5em; padding: 0; + + h2 { + margin: 0; + } } .dead-mail { -- cgit v1.2.3 From d4551f07c44d67231e7cbd841817ff2e7c276932 Mon Sep 17 00:00:00 2001 From: Anike Arni Date: Wed, 22 Feb 2017 14:54:28 -0300 Subject: [#907] Adds unit test for PixelatedWelcome component with @thaissiqueira --- web-ui/test/unit/login/about/pixelated_welcome.spec.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 web-ui/test/unit/login/about/pixelated_welcome.spec.js (limited to 'web-ui') diff --git a/web-ui/test/unit/login/about/pixelated_welcome.spec.js b/web-ui/test/unit/login/about/pixelated_welcome.spec.js new file mode 100644 index 00000000..d03cb457 --- /dev/null +++ b/web-ui/test/unit/login/about/pixelated_welcome.spec.js @@ -0,0 +1,17 @@ +import { shallow } from 'enzyme'; +import expect from 'expect'; +import React from 'react'; +import { PixelatedWelcome } from 'src/login/about/pixelated_welcome'; + +describe('PixelatedWelcome', () => { + let pixelatedWelcome; + const mockTranslations = key => key; + + beforeEach(() => { + pixelatedWelcome = shallow(); + }); + + it('renders welcome component', () => { + expect(pixelatedWelcome.find('.pixelated-welcome').length).toEqual(1); + }); +}); -- cgit v1.2.3 From f25be937af22146f5ef83b81d73453f2fb536c50 Mon Sep 17 00:00:00 2001 From: Anike Arni Date: Wed, 22 Feb 2017 15:19:42 -0300 Subject: [#907] Adds portuguese translations for welcome message with @SweetVirginia --- web-ui/app/locales/pt_BR/translation.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'web-ui') diff --git a/web-ui/app/locales/pt_BR/translation.json b/web-ui/app/locales/pt_BR/translation.json index 336784be..431b8f82 100644 --- a/web-ui/app/locales/pt_BR/translation.json +++ b/web-ui/app/locales/pt_BR/translation.json @@ -93,6 +93,8 @@ "login": { "email": "Seu e-mail", "password": "Sua senha", - "submit": "Entrar" + "submit": "Entrar", + "welcome-image-alt": "Imagem de boas vindas", + "welcome-message": "Pixelated é um e-mail que respeita a privacidade da sua informação." } } -- cgit v1.2.3 From ee20eb582e2edaac5b4ce3a6a7de51cd35a4a154 Mon Sep 17 00:00:00 2001 From: Anike Arni Date: Wed, 22 Feb 2017 15:21:18 -0300 Subject: [#907] Makes logo smaller on mobile generic error with @SweetVirginia --- web-ui/src/login/app.js | 6 +++++- web-ui/src/login/app.scss | 5 +++++ web-ui/test/unit/login/app.spec.js | 11 +++++++++++ 3 files changed, 21 insertions(+), 1 deletion(-) (limited to 'web-ui') diff --git a/web-ui/src/login/app.js b/web-ui/src/login/app.js index 7502c442..3c0fdf79 100644 --- a/web-ui/src/login/app.js +++ b/web-ui/src/login/app.js @@ -37,7 +37,11 @@ const rightPanel = (t, error) => { export const App = ({ t, authError, error }) => (
- Pixelated logo + Pixelated logo {rightPanel(t, error)} {errorMessage(t, authError)} diff --git a/web-ui/src/login/app.scss b/web-ui/src/login/app.scss index 48add805..8fa07027 100644 --- a/web-ui/src/login/app.scss +++ b/web-ui/src/login/app.scss @@ -52,6 +52,11 @@ margin-bottom: 2em; } +.small-logo { + width: 50%; + margin-bottom: 1em; +} + @media only screen and (min-width : 500px) { #login_form { margin-top: 1em; diff --git a/web-ui/test/unit/login/app.spec.js b/web-ui/test/unit/login/app.spec.js index e329af0f..2036dfd7 100644 --- a/web-ui/test/unit/login/app.spec.js +++ b/web-ui/test/unit/login/app.spec.js @@ -40,4 +40,15 @@ describe('App', () => { expect(app.find(AuthError).length).toEqual(0); expect(app.find(GenericError).length).toEqual(0); }); + + it('adds small logo class when error', () => { + app = shallow(); + expect(app.find('.logo').props().className).toEqual('logo small-logo'); + }); + + it('does not add small logo class when no error', () => { + app = shallow(); + expect(app.find('.logo').props().className).toEqual('logo'); + }); + }); -- cgit v1.2.3 From f7a8a2c01f3f66c78a19e3aceab8bc0a823b94a3 Mon Sep 17 00:00:00 2001 From: Anike Arni Date: Wed, 22 Feb 2017 17:18:51 -0300 Subject: [#907] Makes login compatible with other broswers with @thaissiqueira --- web-ui/src/login/app.js | 2 +- web-ui/src/login/app.scss | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) (limited to 'web-ui') diff --git a/web-ui/src/login/app.js b/web-ui/src/login/app.js index 3c0fdf79..3259f7b5 100644 --- a/web-ui/src/login/app.js +++ b/web-ui/src/login/app.js @@ -43,7 +43,7 @@ export const App = ({ t, authError, error }) => ( alt='Pixelated logo' /> {rightPanel(t, error)} - + {errorMessage(t, authError)} diff --git a/web-ui/src/login/app.scss b/web-ui/src/login/app.scss index 8fa07027..32e3b979 100644 --- a/web-ui/src/login/app.scss +++ b/web-ui/src/login/app.scss @@ -84,8 +84,11 @@ content: ''; height: 22em; position: absolute; - box-shadow: 0px 0px 0px 0.3px $medium_light_grey; + margin-top: inherit; + top: 2.5em; left: 50%; + border: 1px solid $lighter_gray; + transform: scaleX(0.5); } } -- cgit v1.2.3 From 55cae8e71afec52e31401c512b8bebbb1e5ca88d Mon Sep 17 00:00:00 2001 From: Anike Arni Date: Wed, 22 Feb 2017 17:50:09 -0300 Subject: [#907] Fix lint with @thaissiqueira --- web-ui/test/unit/login/app.spec.js | 1 - 1 file changed, 1 deletion(-) (limited to 'web-ui') diff --git a/web-ui/test/unit/login/app.spec.js b/web-ui/test/unit/login/app.spec.js index 2036dfd7..39d21f04 100644 --- a/web-ui/test/unit/login/app.spec.js +++ b/web-ui/test/unit/login/app.spec.js @@ -50,5 +50,4 @@ describe('App', () => { app = shallow(); expect(app.find('.logo').props().className).toEqual('logo'); }); - }); -- cgit v1.2.3