From 19173bc96d088e28f6eab6b1adc670aab33a7478 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 3 Sep 2018 11:37:39 +0200
Subject: [PATCH] add end of life component

---
 js/components/eol.js      | 21 +++++++++++++++++++++
 js/constants/languages.js |  3 +++
 js/routes.js              |  5 +++++
 sass/ascribe_eol.scss     | 13 +++++++++++++
 sass/main.scss            |  1 +
 5 files changed, 43 insertions(+)
 create mode 100644 js/components/eol.js
 create mode 100644 sass/ascribe_eol.scss

diff --git a/js/components/eol.js b/js/components/eol.js
new file mode 100644
index 00000000..1d1199c8
--- /dev/null
+++ b/js/components/eol.js
@@ -0,0 +1,21 @@
+'use strict';
+
+import React from 'react';
+
+import { getLangText } from '../utils/lang_utils';
+import { setDocumentTitle } from '../utils/dom_utils';
+
+
+const EndOfLife = () =>{
+    setDocumentTitle(getLangText('EOL Title'));
+
+    return (
+        <div className="ascribe-eol-wrapper">
+            <h3>{getLangText('EOL Title')}</h3>
+            <p>{getLangText('EOL Text')} <a href="https://www.ascribe.io">{getLangText('EOL Action')}</a></p>
+        </div>
+    );
+};
+
+
+export default EndOfLife;
diff --git a/js/constants/languages.js b/js/constants/languages.js
index 090ec3ce..2d387654 100644
--- a/js/constants/languages.js
+++ b/js/constants/languages.js
@@ -2,6 +2,9 @@
 
 const languages = {
     'en-US': {
+        'EOL Title': 'End Of Life',
+        'EOL Text': 'As of September 8 2018, ascribe has been shut down.',
+        'EOL Action': 'Learn more',
         'ID': 'ID',
         'Actions': 'Actions',
         'Hide': 'Hide',
diff --git a/js/routes.js b/js/routes.js
index 48548b93..aba6e1b0 100644
--- a/js/routes.js
+++ b/js/routes.js
@@ -25,6 +25,7 @@ import ErrorNotFoundPage from './components/error_not_found_page';
 import RegisterPiece from './components/register_piece';
 
 import Footer from './components/footer';
+import Eol from './components/eol';
 
 import { ProxyHandler, AuthRedirect } from './components/ascribe_routes/proxy_handler';
 
@@ -33,6 +34,10 @@ import { getLangText } from './utils/lang_utils';
 
 const COMMON_ROUTES = (
     <Route path='/' component={AscribeApp}>
+        <Route
+            path='eol'
+            component={Eol}
+            footer={Footer} />
         <Route
             path='login'
             component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)}
diff --git a/sass/ascribe_eol.scss b/sass/ascribe_eol.scss
new file mode 100644
index 00000000..02a672cc
--- /dev/null
+++ b/sass/ascribe_eol.scss
@@ -0,0 +1,13 @@
+$break-small: 764px;
+
+.ascribe-eol-wrapper {
+    margin: 0 auto;
+    max-width: 600px;
+    width: 80%;
+    padding-top: 10rem;
+    padding-bottom: 10rem;
+
+    @media screen and (max-width: $break-small) {
+        width: 100%;
+    }
+}
\ No newline at end of file
diff --git a/sass/main.scss b/sass/main.scss
index 9ca2a07a..3b1babb5 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -14,6 +14,7 @@ $BASE_URL: '<%= BASE_URL %>';
 @import './ascribe-fonts/ascribe-fonts';
 @import 'ascribe_navbar';
 @import 'ascribe_login';
+@import 'ascribe_eol';
 @import 'ascribe_table';
 @import 'ascribe_accordion_list';
 @import 'ascribe_piece_list_bulk_modal';