[#907] Display error message for mobile version

with @anikarni

7 files changed, 138 insertions, 7 deletions

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')
 );