From d7dbc1dc61f74f7bd74464bda5e4e0051f062352 Mon Sep 17 00:00:00 2001 From: Anike Arni Date: Wed, 15 Feb 2017 11:43:58 -0200 Subject: [#907] Translates login page to pt_BR --- web-ui/src/login/app.js | 12 ++++++++---- web-ui/src/login/login.js | 4 ++-- 2 files changed, 10 insertions(+), 6 deletions(-) (limited to 'web-ui/src') diff --git a/web-ui/src/login/app.js b/web-ui/src/login/app.js index e6ac3192..dda6148c 100644 --- a/web-ui/src/login/app.js +++ b/web-ui/src/login/app.js @@ -18,18 +18,22 @@ import React from 'react'; import { translate } from 'react-i18next'; -const App = () => ( +export const App = ({ t }) => (
- +
); +App.propTypes = { + t: React.PropTypes.func.isRequired +}; + export default translate('', { wait: true })(App); diff --git a/web-ui/src/login/login.js b/web-ui/src/login/login.js index ddbe1943..9a8c9042 100644 --- a/web-ui/src/login/login.js +++ b/web-ui/src/login/login.js @@ -20,14 +20,14 @@ import { render } from 'react-dom'; import a11y from 'react-a11y'; import { I18nextProvider } from 'react-i18next'; -import App from './app'; +import AppWrapper from './app'; import i18n from '../i18n'; if (process.env.NODE_ENV === 'development') a11y(React); render( - + , document.getElementById('root') ); -- cgit v1.2.3 From 0c5bbc3a1e104512172221851262b81602a44df8 Mon Sep 17 00:00:00 2001 From: Anike Arni Date: Thu, 16 Feb 2017 13:49:34 -0200 Subject: [#907] Fix font and favicon urls --- web-ui/src/backup_account/backup_account.html | 2 +- web-ui/src/login/login.html | 2 +- web-ui/src/login/opensans.css | 20 ++++++++++---------- 3 files changed, 12 insertions(+), 12 deletions(-) (limited to 'web-ui/src') diff --git a/web-ui/src/backup_account/backup_account.html b/web-ui/src/backup_account/backup_account.html index 55881444..084824f2 100644 --- a/web-ui/src/backup_account/backup_account.html +++ b/web-ui/src/backup_account/backup_account.html @@ -1,7 +1,7 @@ - + diff --git a/web-ui/src/login/login.html b/web-ui/src/login/login.html index b8c45180..b3f0f46c 100644 --- a/web-ui/src/login/login.html +++ b/web-ui/src/login/login.html @@ -1,7 +1,7 @@ - + diff --git a/web-ui/src/login/opensans.css b/web-ui/src/login/opensans.css index a42f346c..8795bdf7 100644 --- a/web-ui/src/login/opensans.css +++ b/web-ui/src/login/opensans.css @@ -2,68 +2,68 @@ font-family: 'Open Sans'; font-style: normal; font-weight: 300; - src: local("Open Sans Light"), local("OpenSans-Light"), url("/fonts/OpenSans-Light.woff") format("woff"); + src: local("Open Sans Light"), local("OpenSans-Light"), url("/assets/fonts/OpenSans-Light.woff") format("woff"); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; - src: local("Open Sans"), local("OpenSans"), url("/fonts/OpenSans.woff") format("woff"); + src: local("Open Sans"), local("OpenSans"), url("/assets/fonts/OpenSans.woff") format("woff"); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; - src: local("Open Sans Semibold"), local("OpenSans-Semibold"), url("/fonts/OpenSans-Semibold.woff") format("woff"); + src: local("Open Sans Semibold"), local("OpenSans-Semibold"), url("/assets/fonts/OpenSans-Semibold.woff") format("woff"); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; - src: local("Open Sans Bold"), local("OpenSans-Bold"), url("/fonts/OpenSans-Bold.woff") format("woff"); + src: local("Open Sans Bold"), local("OpenSans-Bold"), url("/assets/fonts/OpenSans-Bold.woff") format("woff"); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 800; - src: local("Open Sans Extrabold"), local("OpenSans-Extrabold"), url("/fonts/OpenSans-Extrabold.woff") format("woff"); + src: local("Open Sans Extrabold"), local("OpenSans-Extrabold"), url("/assets/fonts/OpenSans-Extrabold.woff") format("woff"); } @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300; - src: local("Open Sans Light Italic"), local("OpenSansLight-Italic"), url("/fonts/OpenSansLight-Italic.woff") format("woff"); + src: local("Open Sans Light Italic"), local("OpenSansLight-Italic"), url("/assets/fonts/OpenSansLight-Italic.woff") format("woff"); } @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 400; - src: local("Open Sans Italic"), local("OpenSans-Italic"), url("/fonts/OpenSans-Italic.woff") format("woff"); + src: local("Open Sans Italic"), local("OpenSans-Italic"), url("/assets/fonts/OpenSans-Italic.woff") format("woff"); } @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 600; - src: local("Open Sans Semibold Italic"), local("OpenSans-SemiboldItalic"), url("/fonts/OpenSans-SemiboldItalic.woff ") format("woff"); + src: local("Open Sans Semibold Italic"), local("OpenSans-SemiboldItalic"), url("/assets/fonts/OpenSans-SemiboldItalic.woff ") format("woff"); } @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 700; - src: local("Open Sans Bold Italic"), local("OpenSans-BoldItalic"), url("/fonts/OpenSans-BoldItalic.woff") format("woff"); + src: local("Open Sans Bold Italic"), local("OpenSans-BoldItalic"), url("/assets/fonts/OpenSans-BoldItalic.woff") format("woff"); } @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 800; - src: local("Open Sans Extrabold Italic"), local("OpenSans-ExtraboldItalic"), url("/fonts/OpenSans-ExtraboldItalic.woff") format("woff"); + src: local("Open Sans Extrabold Italic"), local("OpenSans-ExtraboldItalic"), url("/assets/fonts/OpenSans-ExtraboldItalic.woff") format("woff"); } -- cgit v1.2.3 From bfd85dff6b086abae1c16014e318c89cba929b66 Mon Sep 17 00:00:00 2001 From: Anike Arni Date: Fri, 17 Feb 2017 09:57:19 -0200 Subject: [#907] Makes login page responsive --- web-ui/src/common/input_field/input_field.js | 14 ++- web-ui/src/login/app.js | 16 ++- web-ui/src/login/app.scss | 30 ++++++ web-ui/src/login/login.css | 150 +++++++++------------------ web-ui/src/login/login.html | 4 +- 5 files changed, 98 insertions(+), 116 deletions(-) create mode 100644 web-ui/src/login/app.scss (limited to 'web-ui/src') diff --git a/web-ui/src/common/input_field/input_field.js b/web-ui/src/common/input_field/input_field.js index 1378ba74..d4876d9f 100644 --- a/web-ui/src/common/input_field/input_field.js +++ b/web-ui/src/common/input_field/input_field.js @@ -19,16 +19,24 @@ import React from 'react'; import './input-field.scss'; -const InputField = ({ label, name }) => ( +const InputField = ({ label, name, type = 'text' }) => (
- +
); InputField.propTypes = { label: React.PropTypes.string.isRequired, - name: React.PropTypes.string.isRequired + name: React.PropTypes.string.isRequired, + type: React.PropTypes.string +}; + +InputField.defaultProps = { + type: 'text' }; export default InputField; diff --git a/web-ui/src/login/app.js b/web-ui/src/login/app.js index dda6148c..ee5a7652 100644 --- a/web-ui/src/login/app.js +++ b/web-ui/src/login/app.js @@ -17,18 +17,16 @@ 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 './app.scss'; export const App = ({ t }) => (
- - - + + + ); diff --git a/web-ui/src/login/app.scss b/web-ui/src/login/app.scss new file mode 100644 index 00000000..76390cb7 --- /dev/null +++ b/web-ui/src/login/app.scss @@ -0,0 +1,30 @@ +/* + * 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 . + */ + +#login_form { + padding: 20px 0; + + .input-field-group { + width: 100%; + } +} + +@media only screen and (min-width : 500px) { + #login_form .input-field-group { + margin-top: 1em; + } +} diff --git a/web-ui/src/login/login.css b/web-ui/src/login/login.css index 51ab2046..bbb37443 100644 --- a/web-ui/src/login/login.css +++ b/web-ui/src/login/login.css @@ -16,130 +16,74 @@ */ body { - font-family: "Open Sans", "Microsoft YaHei", "Hiragino Sans GB", "Hiragino Sans GB W3", "微软雅黑", "Helvetica Neue", Arial, sans-serif; - background-color: #EAEAEA; - height: 100vh; - color: #3E3A37; + font-family: "Open Sans", "Microsoft YaHei", "Hiragino Sans GB", "Hiragino Sans GB W3", "微软雅黑", "Helvetica Neue", Arial, sans-serif; + background-color: #EAEAEA; + height: 100vh; + color: #3E3A37; - background-image: url("/public/images/hive-bg.png"); - background-repeat: repeat; -} - -.content { - height: 100vh; - width: 100%; + background-image: url("/public/images/hive-bg.png"); + background-repeat: repeat; } .error { - color: #D72A25; - margin: 10px 0 0 0; -} - -.message-panel { - width: 100%; - margin: 10px auto; - z-index: 10000; - text-align: center; - } - -.message-panel span{ - background: #F7E8AF; - padding: 5px 60px; - border: 1px solid #f2db81; - color: #987b0f; - box-shadow: 1px 1px 3px #69560b; -} - -.message-panel.message-panel-small span{ - padding: 5px 0px; - display: inline-block; - width: 100%; + color: #D72A25; + margin: 10px 0 0 0; } .login { - display: block; - width: 240px; - margin: auto; - padding: 45px 40px 35px 40px; - background-color: #FFF; - margin-top: 2%; - margin-bottom: 2%; + 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; } -form#login_form { - padding: 10px 0; +#root { + width: 70%; } .disclaimer { - display: block; - margin-top: 10%; - width: 50%; - margin: auto; - background-color: #2BA6CB; - color: #FFFFFF; - font-weight: 300; - font-size: 0.8rem; - padding: 1em; - margin-bottom: 20px; -} - -.disclaimer li { - margin-top: 1em; + display: block; + width: 90%; + margin: auto; + max-width: 400px; + background-color: #2BA6CB; + color: #FFFFFF; + font-weight: 300; + font-size: 0.8rem; + margin-bottom: 20px; } -.logo { - width: 100%; - height: auto; -} - -input { - display: block; - margin: 10px 0; - padding-left: 5px; +.disclaimer-content { + padding: 1em; } -input.text-field { - width: 97%; -} - -button, .button, input[type=button] { - cursor: pointer; - margin: 0 0 1.25rem; - border: none; - position: relative; - text-decoration: none; - text-align: center; - -webkit-appearance: none; - display: inline-block; - padding: 0.4rem 1.1rem; - font-size: 0.9rem; - background-color: #2ba6cb; - border-color: #2285a2; - color: white; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - -ms-border-radius: 2px; - -o-border-radius: 2px; - border-radius: 2px; +.disclaimer li { + margin-top: 1em; } -button:hover, button:focus, .button:hover, .button:focus, input[type=button]:hover, input[type=button]:focus { - background-color: #2285a2; - outline: none; - color: white; +.logo { + width: 70%; } -ul.accounts { - margin-bottom: 5%; -} +@media only screen and (min-width : 500px) { + body { + font-size: 1.3em; + } -ul.accounts li { - display: inline-block; - list-style: none; - margin-right: 35px; - margin-top: 0px; + .login, .disclaimer { + width: 60%; + } } -ul.accounts li span { - font-weight: bold; +@media only screen and (min-width : 960px) { + .login, .disclaimer { + width: 40%; + } } diff --git a/web-ui/src/login/login.html b/web-ui/src/login/login.html index b3f0f46c..40593096 100644 --- a/web-ui/src/login/login.html +++ b/web-ui/src/login/login.html @@ -18,7 +18,9 @@
-
+
+
+
-- cgit v1.2.3 From fa21608801f8d2ef710d4c28abbb558883afeaf7 Mon Sep 17 00:00:00 2001 From: Tulio Casagrande Date: Mon, 20 Feb 2017 14:37:37 -0300 Subject: [#907] Translate auth error message on login with @anikarni --- web-ui/src/login/app.js | 24 +++++++++++++++++------- web-ui/src/login/app.scss | 39 +++++++++++++++++++++++++++++++++++++++ web-ui/src/login/login.css | 33 +++------------------------------ web-ui/src/login/login.html | 6 +----- web-ui/src/login/login.js | 3 ++- web-ui/src/util.js | 7 +++++++ 6 files changed, 69 insertions(+), 43 deletions(-) create mode 100644 web-ui/src/util.js (limited to 'web-ui/src') 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 }) => ( -
- - - - +const errorMessage = (t, authError) => { + if (authError) return

{t('error.auth')}

; + return
; +}; + +export const App = ({ t, authError }) => ( +
+ Pixelated logo + {errorMessage(t, authError)} +
+ + + + +
); 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 . */ + +.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 @@
-