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/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 +- 7 files changed, 138 insertions(+), 7 deletions(-) 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 (limited to 'web-ui/src/login') 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') ); -- cgit v1.2.3