diff options
| author | Tulio Casagrande <tcasagra@thoughtworks.com> | 2017-02-20 14:37:37 -0300 |
|---|---|---|
| committer | Tulio Casagrande <tcasagra@thoughtworks.com> | 2017-02-21 13:32:05 -0300 |
| commit | fa21608801f8d2ef710d4c28abbb558883afeaf7 (patch) | |
| tree | 009db4bb064b077a231a1abe4de212bceb20928b /web-ui/src/login | |
| parent | bfd85dff6b086abae1c16014e318c89cba929b66 (diff) | |
[#907] Translate auth error message on login
with @anikarni
Diffstat (limited to 'web-ui/src/login')
| -rw-r--r-- | web-ui/src/login/app.js | 24 | ||||
| -rw-r--r-- | web-ui/src/login/app.scss | 39 | ||||
| -rw-r--r-- | web-ui/src/login/login.css | 33 | ||||
| -rw-r--r-- | web-ui/src/login/login.html | 6 | ||||
| -rw-r--r-- | web-ui/src/login/login.js | 3 |
5 files changed, 62 insertions, 43 deletions
diff --git a/web-ui/src/login/app.js b/web-ui/src/login/app.js index ee5a7652..07099c60 100644 --- a/web-ui/src/login/app.js +++ b/web-ui/src/login/app.js @@ -22,16 +22,26 @@ import SubmitButton from 'src/common/submit_button/submit_button'; import './app.scss'; -export const App = ({ t }) => ( - <form className='standard' id='login_form' action='/login' method='post'> - <InputField name='username' label={t('login.email')} /> - <InputField type='password' name='password' label={t('login.password')} /> - <SubmitButton buttonText={t('login.submit')} /> - </form> +const errorMessage = (t, authError) => { + if (authError) return <p className='error'>{t('error.auth')}</p>; + return <div />; +}; + +export const App = ({ t, authError }) => ( + <div className='login'> + <img className='logo' src='/public/images/logo-orange.svg' alt='Pixelated logo' /> + {errorMessage(t, authError)} + <form className='standard' id='login_form' action='/login' method='post'> + <InputField name='username' label={t('login.email')} /> + <InputField type='password' name='password' label={t('login.password')} /> + <SubmitButton buttonText={t('login.submit')} /> + </form> + </div> ); App.propTypes = { - t: React.PropTypes.func.isRequired + t: React.PropTypes.func.isRequired, + authError: 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 76390cb7..f971750f 100644 --- a/web-ui/src/login/app.scss +++ b/web-ui/src/login/app.scss @@ -15,16 +15,55 @@ * along with Pixelated. If not, see <http://www.gnu.org/licenses/>. */ + +.error { + color: #D72A25; + margin: 10px 0 0 0; +} + +.login { + display: block; + width: 90%; + margin: auto; + max-width: 400px; + padding: 2em 0; + margin-top: 3%; + margin-bottom: 3%; + background-color: #FFF; + display: flex; + flex-direction: column; + align-items: center; +} + #login_form { padding: 20px 0; + width: 70%; .input-field-group { width: 100%; } + + .submit-button { + width: 100%; + } +} + +.logo { + width: 70%; } @media only screen and (min-width : 500px) { #login_form .input-field-group { margin-top: 1em; } + + .login { + width: 60%; + } +} + +@media only screen and (min-width : 960px) { + .login { + width: 40%; + } } diff --git a/web-ui/src/login/login.css b/web-ui/src/login/login.css index bbb37443..d1206a39 100644 --- a/web-ui/src/login/login.css +++ b/web-ui/src/login/login.css @@ -25,29 +25,6 @@ body { background-repeat: repeat; } -.error { - color: #D72A25; - margin: 10px 0 0 0; -} - -.login { - display: block; - width: 90%; - margin: auto; - max-width: 400px; - padding: 2em 0; - margin-top: 3%; - margin-bottom: 3%; - background-color: #FFF; - display: flex; - flex-direction: column; - align-items: center; -} - -#root { - width: 70%; -} - .disclaimer { display: block; width: 90%; @@ -68,22 +45,18 @@ body { margin-top: 1em; } -.logo { - width: 70%; -} - @media only screen and (min-width : 500px) { body { - font-size: 1.3em; + font-size: 1.2em; } - .login, .disclaimer { + .disclaimer { width: 60%; } } @media only screen and (min-width : 960px) { - .login, .disclaimer { + .disclaimer { width: 40%; } } diff --git a/web-ui/src/login/login.html b/web-ui/src/login/login.html index 40593096..3cebf6f4 100644 --- a/web-ui/src/login/login.html +++ b/web-ui/src/login/login.html @@ -12,11 +12,7 @@ </head> <body> <div class="content"> - <div class="login"> - <img class="logo" src="/public/images/logo-orange.svg" alt="Pixelated logo"/> - <p t:render="error_msg" class="error"></p> - <div id="root"/> - </div> + <div id="root"/> <div class="disclaimer"> <div class="disclaimer-content"> <div t:render="disclaimer"></div> diff --git a/web-ui/src/login/login.js b/web-ui/src/login/login.js index 9a8c9042..ed25b9a2 100644 --- a/web-ui/src/login/login.js +++ b/web-ui/src/login/login.js @@ -22,12 +22,13 @@ import { I18nextProvider } from 'react-i18next'; import AppWrapper from './app'; import i18n from '../i18n'; +import { hasQueryParameter } from '../util'; if (process.env.NODE_ENV === 'development') a11y(React); render( <I18nextProvider i18n={i18n}> - <AppWrapper /> + <AppWrapper authError={hasQueryParameter('auth')} /> </I18nextProvider>, document.getElementById('root') ); |