Merge pull request #987 from pixelated/login-errors

Adds welcome and error messages to login

12 files changed, 324 insertions, 24 deletions

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/about/pixelated-welcome.scss b/web-ui/src/login/about/pixelated-welcome.scss
new file mode 100644
index 00000000..17d05f13
--- /dev/null
+++ b/web-ui/src/login/about/pixelated-welcome.scss
@@ -0,0 +1,49 @@
+/*
+ * 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";
+
+.pixelated-welcome {
+  display: none;
+}
+
+@media only screen and (min-width : 960px) {
+  .pixelated-welcome {
+    font-size: 0.9em;
+    color: $medium_grey;
+    display: flex;
+    font-weight: 300;
+    flex-direction: column;
+    align-self: flex-end;
+    order: 2;
+    width: 34%;
+    margin-right: 8%;
+    margin-top: -20.5em;
+
+    h3 {
+      font-weight: normal;
+      font-size: 1.2em;
+      margin-top: 0;
+    }
+  }
+
+  .welcome-logo {
+    order: 1;
+    width: 90%;
+    height: 15em;
+  }
+}
diff --git a/web-ui/src/login/about/pixelated_welcome.js b/web-ui/src/login/about/pixelated_welcome.js
new file mode 100644
index 00000000..82a7d7d0
--- /dev/null
+++ b/web-ui/src/login/about/pixelated_welcome.js
@@ -0,0 +1,36 @@
+/*
+ * 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 './pixelated-welcome.scss';
+
+export const PixelatedWelcome = ({ t }) => (
+  <div className='pixelated-welcome'>
+    <img className='welcome-logo' src='/public/images/welcome.svg' alt={t('login.welcome-image-alt')} />
+    <div>
+      <h3>{t('login.welcome-message')}</h3>
+    </div>
+  </div>
+);
+
+PixelatedWelcome.propTypes = {
+  t: React.PropTypes.func.isRequired
+};
+
+export default translate('', { wait: true })(PixelatedWelcome);
diff --git a/web-ui/src/login/app.js b/web-ui/src/login/app.js
index 07099c60..3259f7b5 100644
--- a/web-ui/src/login/app.js
+++ b/web-ui/src/login/app.js
@@ -19,19 +19,32 @@ 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 <p className='error'>{t('error.auth')}</p>;
+  if (authError) return <AuthError />;
   return <div />;
 };
 
-export const App = ({ t, authError }) => (
+const rightPanel = (t, error) => {
+  if (error) return <GenericError />;
+  return <PixelatedWelcome />;
+};
+
+export const App = ({ t, authError, error }) => (
   <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'>
+    <img
+      className={error ? 'logo small-logo' : 'logo'}
+      src='/public/images/logo-orange.svg'
+      alt='Pixelated logo'
+    />
+    {rightPanel(t, error)}
+    <form className='standard' id='login_form' action='/login' method='post' noValidate >
+      {errorMessage(t, authError)}
       <InputField name='username' label={t('login.email')} />
       <InputField type='password' name='password' label={t('login.password')} />
       <SubmitButton buttonText={t('login.submit')} />
@@ -41,7 +54,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..32e3b979 100644
--- a/web-ui/src/login/app.scss
+++ b/web-ui/src/login/app.scss
@@ -17,11 +17,6 @@
 
 @import "~scss/base/colors";
 
-.error {
-  color: $error;
-  margin: 10px 0 0 0;
-}
-
 .login {
   display: block;
   width: 90%;
@@ -37,11 +32,14 @@
 }
 
 #login_form {
-  padding: 20px 0;
   width: 70%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
 
   .input-field-group {
     width: 100%;
+    margin: 0 0 1.5em 0;
   }
 
   .submit-button {
@@ -51,10 +49,16 @@
 
 .logo {
   width: 70%;
+  margin-bottom: 2em;
+}
+
+.small-logo {
+  width: 50%;
+  margin-bottom: 1em;
 }
 
 @media only screen and (min-width : 500px) {
-  #login_form .input-field-group {
+  #login_form {
     margin-top: 1em;
   }
 
@@ -64,7 +68,38 @@
 }
 
 @media only screen and (min-width : 960px) {
+  .content {
+    font-size: 0.9em;
+  }
+
   .login {
-    width: 40%;
+    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: inherit;
+      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/error/auth-error.scss b/web-ui/src/login/error/auth-error.scss
new file mode 100644
index 00000000..f6256be4
--- /dev/null
+++ b/web-ui/src/login/error/auth-error.scss
@@ -0,0 +1,29 @@
+/*
+ * 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";
+
+.auth-error {
+  color: $error;
+  margin: -1em 0 1em 0;
+}
+
+@media only screen and (min-width : 960px) {
+  .auth-error {
+    margin: -2em 0 1em 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..5a077f32
--- /dev/null
+++ b/web-ui/src/login/error/generic-error.scss
@@ -0,0 +1,59 @@
+/*
+ * 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;
+}
+
+@media only screen and (min-width : 960px) {
+  .generic-error {
+    flex-direction: column;
+    align-self: flex-end;
+    order: 2;
+    width: 34%;
+    margin-right: 8%;
+    margin-top: -19.5em;
+    padding: 0;
+
+    h2 {
+      margin: 0;
+    }
+  }
+
+  .dead-mail {
+    order: 1;
+    width: 30%;
+  }
+}
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.css b/web-ui/src/login/login.css
index d1206a39..5116875e 100644
--- a/web-ui/src/login/login.css
+++ b/web-ui/src/login/login.css
@@ -46,17 +46,24 @@ body {
 }
 
 @media only screen and (min-width : 500px) {
-  body {
-    font-size: 1.2em;
-  }
-
   .disclaimer {
     width: 60%;
   }
 }
 
 @media only screen and (min-width : 960px) {
+  body {
+    font-size: 1.2em;
+  }
+
   .disclaimer {
-    width: 40%;
+    width: 70%;
+    max-width: 700px;
+    padding: 0;
+    font-size: 1em;
+  }
+
+  .disclaimer-content {
+    font-size: 0.7em;
   }
 }
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..effb3d9c 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));
+  return !(decodedUri.split('&').indexOf(param) < 0);
+};
 
 export default {
   hasQueryParameter