From fa21608801f8d2ef710d4c28abbb558883afeaf7 Mon Sep 17 00:00:00 2001
From: Tulio Casagrande <tcasagra@thoughtworks.com>
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 }) => (
-  <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')
 );
diff --git a/web-ui/src/util.js b/web-ui/src/util.js
new file mode 100644
index 00000000..1b244458
--- /dev/null
+++ b/web-ui/src/util.js
@@ -0,0 +1,7 @@
+export const hasQueryParameter = param => (
+  decodeURIComponent(window.location.search.substring(1)).includes(param)
+);
+
+export default {
+  hasQueryParameter
+};
-- 
cgit v1.2.3