6 files changed, 190 insertions, 0 deletions
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..5dbbc3e7
--- /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/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.spec.js b/web-ui/src/login/error/auth_error.spec.js
new file mode 100644
index 00000000..55d8920f
--- /dev/null
+++ b/web-ui/src/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/src/login/error/generic_error.js b/web-ui/src/login/error/generic_error.js
new file mode 100644
index 00000000..b233d5bb
--- /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/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.spec.js b/web-ui/src/login/error/generic_error.spec.js
new file mode 100644
index 00000000..1ef8349d
--- /dev/null
+++ b/web-ui/src/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);
+  });
+});