[#907] Display error message for mobile version

with @anikarni

16 files changed, 234 insertions, 22 deletions

diff --git a/web-ui/app/images/dead-mail.svg b/web-ui/app/images/dead-mail.svg
new file mode 100644
index 00000000..0dc673e2
--- /dev/null
+++ b/web-ui/app/images/dead-mail.svg
@@ -0,0 +1,30 @@
+<svg width="86px" height="119px" viewBox="482 331 86 119" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 41.1 (35376) - http://www.bohemiancoding.com/sketch -->
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Group-2-Copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(482.000000, 331.000000)">
+        <g id="Group-20" transform="translate(15.000000, 49.000000)">
+            <path d="M0.423828125,0.793328536 C19.8945313,15.7606394 47.2617188,2.79332854 54.1413981,9.29988178 C58.9511371,13.8487599 51.15625,23.359375 45.0316162,20.7606394 C35.2938756,16.628831 1.79484049,9.93393156 1.79484049,26.7543688 C1.79484049,36.4128289 30.3603083,19.8833117 39.3109946,28.3312933 C45.0316162,33.7306229 39.3109946,35.7515676 28.7154948,35.7515676 C18.119995,35.7515676 13.4375,42.0689248 28.9879557,47.0555613" id="Path-6" stroke="#9D9D99" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="3.9"></path>
+            <ellipse id="Oval-Copy-6" stroke="#4A4A4A" stroke-width="1.3" fill="#C2C2C2" cx="8.27083333" cy="18.1377706" rx="3.22916667" ry="3.24303377"></ellipse>
+            <ellipse id="Oval-Copy-7" stroke="#4A4A4A" stroke-width="1.3" fill="#C2C2C2" cx="40.5625" cy="29.7430338" rx="3.22916667" ry="3.24303377"></ellipse>
+            <path d="M22.5295708,27.0946057 L22.5295708,28.0471347 C22.5295708,28.179431 22.483189,28.2918812 22.3904241,28.3844887 C22.2976592,28.4770961 22.1850177,28.5233992 22.0524963,28.5233992 L19.9851736,28.5233992 L19.9851736,30.587212 C19.9851736,30.7195083 19.9387919,30.8319585 19.8460269,30.924566 C19.753262,31.0171734 19.6406205,31.0634765 19.5080992,31.0634765 L18.5539502,31.0634765 C18.4214289,31.0634765 18.3087874,31.0171734 18.2160225,30.924566 C18.1232575,30.8319585 18.0768758,30.7195083 18.0768758,30.587212 L18.0768758,28.5233992 L16.0095531,28.5233992 C15.8770317,28.5233992 15.7643902,28.4770961 15.6716253,28.3844887 C15.5788604,28.2918812 15.5324786,28.179431 15.5324786,28.0471347 L15.5324786,27.0946057 C15.5324786,26.9623093 15.5788604,26.8498591 15.6716253,26.7572516 C15.7643902,26.6646442 15.8770317,26.6183412 16.0095531,26.6183412 L18.0768758,26.6183412 L18.0768758,24.5545283 C18.0768758,24.422232 18.1232575,24.3097818 18.2160225,24.2171743 C18.3087874,24.1245669 18.4214289,24.0782638 18.5539502,24.0782638 L19.5080992,24.0782638 C19.6406205,24.0782638 19.753262,24.1245669 19.8460269,24.2171743 C19.9387919,24.3097818 19.9851736,24.422232 19.9851736,24.5545283 L19.9851736,26.6183412 L22.0524963,26.6183412 C22.1850177,26.6183412 22.2976592,26.6646442 22.3904241,26.7572516 C22.483189,26.8498591 22.5295708,26.9623093 22.5295708,27.0946057 Z" id="-copy-24" fill="#4A4A4A" transform="translate(19.031025, 27.570870) rotate(-315.000000) translate(-19.031025, -27.570870) "></path>
+            <path d="M31.5712375,7.46302672 L31.5712375,8.41555571 C31.5712375,8.54785206 31.5248557,8.66030228 31.4320908,8.75290973 C31.3393258,8.84551718 31.2266844,8.89182021 31.094163,8.89182021 L29.0268403,8.89182021 L29.0268403,10.955633 C29.0268403,11.0879294 28.9804585,11.2003796 28.8876936,11.292987 C28.7949286,11.3855945 28.6822872,11.4318975 28.5497658,11.4318975 L27.5956169,11.4318975 C27.4630955,11.4318975 27.3504541,11.3855945 27.2576891,11.292987 C27.1649242,11.2003796 27.1185424,11.0879294 27.1185424,10.955633 L27.1185424,8.89182021 L25.0512197,8.89182021 C24.9186984,8.89182021 24.8060569,8.84551718 24.713292,8.75290973 C24.620527,8.66030228 24.5741453,8.54785206 24.5741453,8.41555571 L24.5741453,7.46302672 C24.5741453,7.33073036 24.620527,7.21828015 24.713292,7.1256727 C24.8060569,7.03306525 24.9186984,6.98676222 25.0512197,6.98676222 L27.1185424,6.98676222 L27.1185424,4.9229494 C27.1185424,4.79065304 27.1649242,4.67820283 27.2576891,4.58559538 C27.3504541,4.49298793 27.4630955,4.4466849 27.5956169,4.4466849 L28.5497658,4.4466849 C28.6822872,4.4466849 28.7949286,4.49298793 28.8876936,4.58559538 C28.9804585,4.67820283 29.0268403,4.79065304 29.0268403,4.9229494 L29.0268403,6.98676222 L31.094163,6.98676222 C31.2266844,6.98676222 31.3393258,7.03306525 31.4320908,7.1256727 C31.5248557,7.21828015 31.5712375,7.33073036 31.5712375,7.46302672 Z" id="-copy-26" fill="#4A4A4A" transform="translate(28.072691, 7.939291) rotate(-315.000000) translate(-28.072691, -7.939291) "></path>
+        </g>
+        <g id="Group-21" transform="translate(8.000000, 0.000000)">
+            <path d="M63.5945025,5.72253441 C63.5945025,4.94340261 63.3172727,4.29707737 62.7584127,3.7791318 C62.1951523,3.26118623 61.530681,3 60.7561979,3 L5.83830458,3 C5.06382147,3 4.39935017,3.26118623 3.84049019,3.7791318 C3.27722975,4.29707737 3,4.94340261 3,5.72253441 L3,38.9241736 C3,39.7033054 3.27722975,40.3496307 3.84049019,40.8720031 C4.39935017,41.3899487 5.06382147,41.646708 5.83830458,41.646708 L60.7561979,41.646708 C61.530681,41.646708 62.1951523,41.3899487 62.7584127,40.8720031 C63.3172727,40.3496307 63.5945025,39.7033054 63.5945025,38.9241736 L63.5945025,5.72253441 Z" id="Path-Copy-23" fill="#E9E7F3"></path>
+            <g id="Group-15-Copy-12" transform="translate(46.000000, 21.000000)" stroke="#4A4A4A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M0.126411855,6.74710425 L6.90379521,0.747104247" id="Line-Copy-15"></path>
+                <path d="M7.12641186,6.74710425 L0.349028504,0.747104247" id="Line-Copy-16"></path>
+            </g>
+            <g id="Group-15-Copy-13" transform="translate(14.000000, 21.000000)" stroke="#4A4A4A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M0.126411855,6.74710425 L6.90379521,0.747104247" id="Line-Copy-15"></path>
+                <path d="M7.12641186,6.74710425 L0.349028504,0.747104247" id="Line-Copy-16"></path>
+            </g>
+            <path d="M36.6410997,12.4069862 C36.6410997,11.1691397 36.6090736,10.1422897 36.5445129,9.31940308 C36.4794439,8.49651646 36.4026829,8.08155654 36.313213,8.08155654 L32.8393145,8.08155654 C32.7498446,8.08155654 29.8027555,8.49651646 29.7381948,9.31940308 C29.6731259,10.1422897 29.6410997,11.1691397 29.6410997,12.4069862 L29.6410997,65.1561284 C29.6410997,66.3939749 29.6731259,67.4208249 29.7381948,68.2507447 C29.8027555,69.0736314 32.7498446,69.4815581 32.8393145,69.4815581 L36.313213,69.4815581 C36.4026829,69.4815581 36.4794439,69.0736314 36.5445129,68.2507447 C36.6090736,67.4208249 36.6410997,66.3939749 36.6410997,65.1561284 L36.6410997,12.4069862 Z" id="Path-Copy-24" fill="#DDD9ED" transform="translate(33.141100, 38.781557) rotate(-90.000000) translate(-33.141100, -38.781557) "></path>
+            <path d="M43.7921986,32.9004703 C44.5373914,31.517688 43.1883355,30 41.1808117,30 L26.8197896,30 C24.8122658,30 23.4616038,31.517688 24.2084027,32.9004703 C25.7614231,35.7800625 29.5612641,36.6216164 34.0003006,36.6216164 C38.4393372,36.6216164 42.2391782,35.7800625 43.7921986,32.9004703" id="Fill-147-Copy-14" stroke="#4A4A4A" fill="#FEFEFE" transform="translate(34.000000, 33.310808) scale(1, -1) translate(-34.000000, -33.310808) "></path>
+            <path d="M3,3 C5.36446037,3 30.743339,18.2128906 33.6328125,18.2128906 C36.9547202,18.2128906 64.421875,3.3515625 64.421875,3.3515625" id="Path-4-Copy-8" stroke="#918DA9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path d="M63.3007929,5.57787538 C63.3007929,4.79874358 63.0235631,4.15241834 62.4647031,3.63447277 C61.9014427,3.1165272 61.2369714,2.85534097 60.4624883,2.85534097 L5.544595,2.85534097 C4.77011189,2.85534097 4.10564058,3.1165272 3.54678061,3.63447277 C2.98352016,4.15241834 2.70629041,4.79874358 2.70629041,5.57787538 L2.70629041,38.7795146 C2.70629041,39.5586464 2.98352016,40.2049716 3.54678061,40.7273441 C4.10564058,41.2452897 4.77011189,41.502049 5.544595,41.502049 L60.4624883,41.502049 C61.2369714,41.502049 61.9014427,41.2452897 62.4647031,40.7273441 C63.0235631,40.2049716 63.3007929,39.5586464 63.3007929,38.7795146 L63.3007929,5.57787538 Z M64.3965105,1.62466688 C65.4702257,2.70482687 66.0070833,4.02403867 66.0070833,5.57787538 L66.0070833,38.7795146 C66.0070833,40.3377782 65.4702257,41.65699 64.3965105,42.73715 C63.3183948,43.81731 62.0114545,44.35739 60.4624883,44.35739 L5.544595,44.35739 C3.99562877,44.35739 2.68868853,43.81731 1.61057283,42.73715 C0.536857611,41.65699 0,40.3377782 0,38.7795146 L0,5.57787538 C0,4.02403867 0.536857611,2.70482687 1.61057283,1.62466688 C2.68868853,0.540079998 3.99562877,0 5.544595,0 L60.4624883,0 C62.0114545,0 63.3183948,0.540079998 64.3965105,1.62466688 L64.3965105,1.62466688 Z" id="Fill-1-Copy-103" fill="#918DA9"></path>
+        </g>
+        <ellipse id="Oval-3" fill="#E9E9EA" cx="43" cy="113.5" rx="43" ry="5.5"></ellipse>
+    </g>
+</svg>
diff --git a/web-ui/app/locales/en_US/translation.json b/web-ui/app/locales/en_US/translation.json
index 7aad4fe8..f42a612d 100644
--- a/web-ui/app/locales/en_US/translation.json
+++ b/web-ui/app/locales/en_US/translation.json
@@ -65,7 +65,11 @@
         "timeout": "A timeout occurred",
         "general": "Problems talking to server",
         "parse": "Got invalid response from server",
-        "auth": "Invalid email or password"
+        "auth": "Invalid email or password",
+        "login": {
+            "title": "Oh, something went wrong :(",
+            "message": "Try to login again in a few minutes. If the problem persists, contact your account administrator."
+        }
     },
     "tags": {
         "inbox": "Inbox",
diff --git a/web-ui/app/locales/pt_BR/translation.json b/web-ui/app/locales/pt_BR/translation.json
index b38b7535..336784be 100644
--- a/web-ui/app/locales/pt_BR/translation.json
+++ b/web-ui/app/locales/pt_BR/translation.json
@@ -65,7 +65,11 @@
         "timeout": "A operação excedeu o limite de tempo",
         "general": "Problemas ao se comunicar com o servidor",
         "parse": "Obteve uma resposta inválida do servidor",
-        "auth": "E-mail ou senha inválidos"
+        "auth": "E-mail ou senha inválidos",
+        "login": {
+            "title": "Ops, algo deu errado :(",
+            "message": "Tente entrar novamente em alguns minutos. Se o problema persistir, contate o administrador da sua conta."
+        }
     },
     "tags": {
         "inbox": "Caixa de Entrada",
diff --git a/web-ui/src/interstitial/interstitial.js b/web-ui/src/interstitial/interstitial.js
index 78a17190..c9a29c21 100644
--- a/web-ui/src/interstitial/interstitial.js
+++ b/web-ui/src/interstitial/interstitial.js
@@ -44,8 +44,10 @@ $(function () {
       method: 'GET',
       url: '/status'
     }).success(function (data) {
-      if (data.status === 'completed' || data.status === 'error') {
+      if (data.status === 'completed') {
         window.location="/";
+      } else if (data.status === 'error') {
+        window.location="/login?error";
       }
     });
   }, 2000);
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 <p className='error'>{t('error.auth')}</p>;
+const errorMessage = (t, authError, error) => {
+  if (authError) return <AuthError />;
+  else if (error) return <GenericError />;
   return <div />;
 };
 
-export const App = ({ t, authError }) => (
+export const App = ({ t, authError, error }) => (
   <div className='login'>
     <img className='logo' src='/public/images/logo-orange.svg' alt='Pixelated logo' />
-    {errorMessage(t, authError)}
+    {errorMessage(t, authError, error)}
     <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')} />
@@ -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 <http://www.gnu.org/licenses/>.
+ */
+
+.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 <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+import { translate } from 'react-i18next';
+
+import './auth-error.scss';
+
+export const AuthError = ({ t }) => (
+  <p className='auth-error'>{t('error.auth')}</p>
+);
+
+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 <http://www.gnu.org/licenses/>.
+ */
+
+@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 <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+import { translate } from 'react-i18next';
+
+import './generic-error.scss';
+
+export const GenericError = ({ t }) => (
+  <div className='generic-error'>
+    <img className='dead-mail' src='/public/images/dead-mail.svg' alt='' />
+    <div>
+      <h2>{t('error.login.title')}</h2>
+      <p>{t('error.login.message')}</p>
+    </div>
+  </div>
+);
+
+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(
   <I18nextProvider i18n={i18n}>
-    <AppWrapper authError={hasQueryParameter('auth-error')} />
+    <AppWrapper authError={hasQueryParameter('auth-error')} error={hasQueryParameter('error')} />
   </I18nextProvider>,
   document.getElementById('root')
 );
diff --git a/web-ui/src/util.js b/web-ui/src/util.js
index 1b244458..bde8ce0a 100644
--- a/web-ui/src/util.js
+++ b/web-ui/src/util.js
@@ -1,6 +1,7 @@
-export const hasQueryParameter = param => (
-  decodeURIComponent(window.location.search.substring(1)).includes(param)
-);
+export const hasQueryParameter = (param) => {
+  const decodedUri = decodeURIComponent(window.location.search.substring(1)).split('&');
+  return decodedUri.includes(param);
+};
 
 export default {
   hasQueryParameter
diff --git a/web-ui/test/unit/login/app.spec.js b/web-ui/test/unit/login/app.spec.js
index 347e2b19..c1d63235 100644
--- a/web-ui/test/unit/login/app.spec.js
+++ b/web-ui/test/unit/login/app.spec.js
@@ -2,25 +2,31 @@ import { shallow } from 'enzyme';
 import expect from 'expect';
 import React from 'react';
 import { App } from 'src/login/app';
+import AuthError from 'src/login/error/auth_error';
+import GenericError from 'src/login/error/generic_error';
 
 describe('App', () => {
   let app;
   const mockTranslations = key => key;
 
-  beforeEach(() => {
-    app = shallow(<App t={mockTranslations} />);
-  });
-
   it('renders login form', () => {
+    app = shallow(<App t={mockTranslations} />);
     expect(app.find('form').props().action).toEqual('/login');
   });
 
   it('renders auth error message', () => {
     app = shallow(<App t={mockTranslations} authError />);
-    expect(app.find('.error').length).toEqual(1);
+    expect(app.find(AuthError).length).toEqual(1);
   });
 
-  it('does not render auth error message', () => {
-    expect(app.find('.error').length).toEqual(0);
+  it('renders generic error message', () => {
+    app = shallow(<App t={mockTranslations} error />);
+    expect(app.find(GenericError).length).toEqual(1);
+  });
+
+  it('does not render error message', () => {
+    app = shallow(<App t={mockTranslations} />);
+    expect(app.find(AuthError).length).toEqual(0);
+    expect(app.find(GenericError).length).toEqual(0);
   });
 });
diff --git a/web-ui/test/unit/login/error/auth_error.spec.js b/web-ui/test/unit/login/error/auth_error.spec.js
new file mode 100644
index 00000000..55d8920f
--- /dev/null
+++ b/web-ui/test/unit/login/error/auth_error.spec.js
@@ -0,0 +1,17 @@
+import { shallow } from 'enzyme';
+import expect from 'expect';
+import React from 'react';
+import { AuthError } from 'src/login/error/auth_error';
+
+describe('AuthError', () => {
+  let authError;
+  const mockTranslations = key => key;
+
+  beforeEach(() => {
+    authError = shallow(<AuthError t={mockTranslations} />);
+  });
+
+  it('renders error message', () => {
+    expect(authError.find('.auth-error').length).toEqual(1);
+  });
+});
diff --git a/web-ui/test/unit/login/error/generic_error.spec.js b/web-ui/test/unit/login/error/generic_error.spec.js
new file mode 100644
index 00000000..1ef8349d
--- /dev/null
+++ b/web-ui/test/unit/login/error/generic_error.spec.js
@@ -0,0 +1,17 @@
+import { shallow } from 'enzyme';
+import expect from 'expect';
+import React from 'react';
+import { GenericError } from 'src/login/error/generic_error';
+
+describe('GenericError', () => {
+  let genericError;
+  const mockTranslations = key => key;
+
+  beforeEach(() => {
+    genericError = shallow(<GenericError t={mockTranslations} />);
+  });
+
+  it('renders error message', () => {
+    expect(genericError.find('.generic-error').length).toEqual(1);
+  });
+});
diff --git a/web-ui/test/unit/util.spec.js b/web-ui/test/unit/util.spec.js
index 84decf6f..968b2d83 100644
--- a/web-ui/test/unit/util.spec.js
+++ b/web-ui/test/unit/util.spec.js
@@ -5,12 +5,12 @@ describe('Utils', () => {
   describe('.hasQueryParameter', () => {
     global.window = {
       location: {
-        search: '?auth&lng=pt-BR'
+        search: '?auth-error&lng=pt-BR'
       }
     };
 
     it('checks if param included in query parameters', () => {
-      expect(Util.hasQueryParameter('auth')).toBe(true);
+      expect(Util.hasQueryParameter('auth-error')).toBe(true);
     });
 
     it('checks if param not included in query parameters', () => {