From 1997c401a5e67b76663d3996ec085eb6782c34e9 Mon Sep 17 00:00:00 2001 From: Anike Arni Date: Thu, 23 Feb 2017 11:34:14 -0300 Subject: [#907] Adds integration test for translations For this test, we refactored the way translations were done for backup account and login, concentrating them in the common/app.js component. with @thaissiqueira --- web-ui/src/login/app.js | 61 --------------------------- web-ui/src/login/app.scss | 103 --------------------------------------------- web-ui/src/login/login.js | 16 ++++--- web-ui/src/login/page.js | 61 +++++++++++++++++++++++++++ web-ui/src/login/page.scss | 103 +++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 174 insertions(+), 170 deletions(-) delete mode 100644 web-ui/src/login/app.js delete mode 100644 web-ui/src/login/app.scss create mode 100644 web-ui/src/login/page.js create mode 100644 web-ui/src/login/page.scss (limited to 'web-ui/src/login') diff --git a/web-ui/src/login/app.js b/web-ui/src/login/app.js deleted file mode 100644 index 3259f7b5..00000000 --- a/web-ui/src/login/app.js +++ /dev/null @@ -1,61 +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 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) => { - if (authError) return ; - return
; -}; - -const rightPanel = (t, error) => { - if (error) return ; - return ; -}; - -export const App = ({ t, authError, error }) => ( -
- Pixelated logo - {rightPanel(t, error)} -
- {errorMessage(t, authError)} - - - - -
-); - -App.propTypes = { - t: React.PropTypes.func.isRequired, - 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 deleted file mode 100644 index 14e2d131..00000000 --- a/web-ui/src/login/app.scss +++ /dev/null @@ -1,103 +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 "~scss/base/colors"; - -.login { - display: block; - width: 90%; - margin: auto; - max-width: 400px; - padding: 2em 0; - background-color: $white; - display: flex; - flex-direction: column; - align-items: center; -} - -#login_form { - width: 70%; - display: flex; - align-items: center; - flex-direction: column; - - .input-field-group { - width: 100%; - margin: 0 0 1.5em 0; - } - - .submit-button { - width: 100%; - } -} - -.logo { - width: 70%; - margin-bottom: 2em; -} - -.small-logo { - width: 50%; - margin-bottom: 1em; -} - -@media only screen and (min-width : 500px) { - #login_form { - margin-top: 1em; - } - - .login { - width: 60%; - } -} - -@media only screen and (min-width : 960px) { - .content { - font-size: 0.9em; - } - - .login { - display: flex; - align-items: flex-start; - width: 70%; - max-width: 700px; - padding: 2.5em 0; - height: 22em; - - &:after { - content: ''; - height: 22em; - position: absolute; - margin-top: 3%; - top: 2.5em; - left: 50%; - border: 1px solid $lighter_gray; - transform: scaleX(0.5); - } - } - - .logo { - height: 6em; - margin-bottom: 1em; - margin-top: 1.5em; - } - - .logo, #login_form { - width: 34%; - margin-left: 8%; - } -} diff --git a/web-ui/src/login/login.js b/web-ui/src/login/login.js index b1d895ae..c8e08762 100644 --- a/web-ui/src/login/login.js +++ b/web-ui/src/login/login.js @@ -18,17 +18,21 @@ import React from 'react'; import { render } from 'react-dom'; import a11y from 'react-a11y'; -import { I18nextProvider } from 'react-i18next'; -import AppWrapper from './app'; -import i18n from '../i18n'; +import App from 'src/common/app'; +import PageWrapper from './page'; import { hasQueryParameter } from '../util'; if (process.env.NODE_ENV === 'development') a11y(React); render( - - - , + + } + />, document.getElementById('root') ); diff --git a/web-ui/src/login/page.js b/web-ui/src/login/page.js new file mode 100644 index 00000000..f0a7188b --- /dev/null +++ b/web-ui/src/login/page.js @@ -0,0 +1,61 @@ +/* + * 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 AuthError from 'src/login/error/auth_error'; +import GenericError from 'src/login/error/generic_error'; +import PixelatedWelcome from 'src/login/about/pixelated_welcome'; + +import './page.scss'; + +const errorMessage = (t, authError) => { + if (authError) return ; + return
; +}; + +const rightPanel = (t, error) => { + if (error) return ; + return ; +}; + +export const Page = ({ t, authError, error }) => ( +
+ Pixelated logo + {rightPanel(t, error)} +
+ {errorMessage(t, authError)} + + + + +
+); + +Page.propTypes = { + t: React.PropTypes.func.isRequired, + authError: React.PropTypes.bool, + error: React.PropTypes.bool +}; + +export default translate('', { wait: true })(Page); diff --git a/web-ui/src/login/page.scss b/web-ui/src/login/page.scss new file mode 100644 index 00000000..14e2d131 --- /dev/null +++ b/web-ui/src/login/page.scss @@ -0,0 +1,103 @@ +/* + * 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"; + +.login { + display: block; + width: 90%; + margin: auto; + max-width: 400px; + padding: 2em 0; + background-color: $white; + display: flex; + flex-direction: column; + align-items: center; +} + +#login_form { + width: 70%; + display: flex; + align-items: center; + flex-direction: column; + + .input-field-group { + width: 100%; + margin: 0 0 1.5em 0; + } + + .submit-button { + width: 100%; + } +} + +.logo { + width: 70%; + margin-bottom: 2em; +} + +.small-logo { + width: 50%; + margin-bottom: 1em; +} + +@media only screen and (min-width : 500px) { + #login_form { + margin-top: 1em; + } + + .login { + width: 60%; + } +} + +@media only screen and (min-width : 960px) { + .content { + font-size: 0.9em; + } + + .login { + display: flex; + align-items: flex-start; + width: 70%; + max-width: 700px; + padding: 2.5em 0; + height: 22em; + + &:after { + content: ''; + height: 22em; + position: absolute; + margin-top: 3%; + top: 2.5em; + left: 50%; + border: 1px solid $lighter_gray; + transform: scaleX(0.5); + } + } + + .logo { + height: 6em; + margin-bottom: 1em; + margin-top: 1.5em; + } + + .logo, #login_form { + width: 34%; + margin-left: 8%; + } +} -- cgit v1.2.3