[#907] Convert login page to react

with @anikarni
author: Tulio Casagrande <tcasagra@thoughtworks.com> 2017-02-13 18:43:15 -0200
committer: Anike Arni <aarni@thoughtworks.com> 2017-02-16 17:01:59 -0200
commit: 0b966e696c6a99f825510d406008fc9b9936077e (patch)
tree: c91a78cddaeb82de7383380e75196f8993fcb175
parent: 48a1ca5f8310ef6fb61dc821c38d435617b19d5c (diff)
23 files changed, 134 insertions, 70 deletions
diff --git a/service/pixelated/assets/favicon.png b/service/pixelated/assets/favicon.png
deleted file mode 100644
index e14841c7..00000000
--- a/service/pixelated/assets/favicon.png
+++ /dev/null
diff --git a/service/pixelated/assets/index.html b/service/pixelated/assets/index.html
deleted file mode 100644
index c095577e..00000000
--- a/service/pixelated/assets/index.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<html>
-    <head>
-        <meta http-equiv="refresh" content="0;URL=/login">
-    </head>
-    <body bgcolor="#FFFFFF" text="#000000\">
-    <a href="/login">click here</a>
-    </body>
-</html>
-
diff --git a/service/pixelated/assets/login.html b/service/pixelated/assets/login.html
deleted file mode 100644
index ff103f03..00000000
--- a/service/pixelated/assets/login.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html xmlns:t="http://twistedmatrix.com/ns/twisted.web.template/0.1">
-<head>
-    <title>Pixelated - Login</title>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <link rel="icon" type="image/png" href="/startup-assets/favicon.png" />
-    <link rel="stylesheet" type="text/css" href="/startup-assets/normalize.min.css" />
-    <link rel="stylesheet" type="text/css" href="/startup-assets/pixelated.css" />
-    <link rel="stylesheet" type="text/css" href="/startup-assets/opensans.css" />
-</head>
-<body>
-<div class="content">
-    <div class="login">
-
-        <img class="logo" src="/startup-assets/pixelated-logo-orange.svg" alt="Pixelated logo"/>
-
-        <p t:render="error_msg" class="error" ></p>
-
-
-        <form class="standard" id="login_form" action="/login" method="post">
-            <input type="text" name="username" id="email" class="text-field" placeholder="username" tabindex="1"
-                   autofocus="" />
-            <input type="password" name="password" id="password" class="text-field" placeholder="password"
-                   tabindex="2" autocomplete="off" />
-
-            <input type="submit" name="login" value="Login" class="button" tabindex="3" />
-
-        </form>
-    </div>
-    <div class="disclaimer">
-        <div t:render="disclaimer"></div>
-    </div>
-</div>
-</body>
-
-</html>
diff --git a/service/pixelated/resources/login_resource.py b/service/pixelated/resources/login_resource.py
index 4bbceb89..3a886aa0 100644
--- a/service/pixelated/resources/login_resource.py
+++ b/service/pixelated/resources/login_resource.py
@@ -20,7 +20,7 @@ from xml.sax import SAXParseException
 from pixelated.authentication import Authenticator
 from pixelated.config.leap import BootstrapUserServices
 from pixelated.resources import BaseResource, UnAuthorizedResource, IPixelatedSession
-from pixelated.resources import get_startup_folder, respond_json
+from pixelated.resources import get_static_folder, respond_json
 from twisted.cred.error import UnauthorizedLogin
 from twisted.internet import defer
 from twisted.logger import Logger
@@ -45,7 +45,7 @@ def parse_accept_language(all_headers):
 
 
 class DisclaimerElement(Element):
-    loader = XMLFile(FilePath(os.path.join(get_startup_folder(), '_login_disclaimer_banner.html')))
+    loader = XMLFile(FilePath(os.path.join(get_static_folder(), '_login_disclaimer_banner.html')))
 
     def __init__(self, banner):
         super(DisclaimerElement, self).__init__()
@@ -68,7 +68,7 @@ class DisclaimerElement(Element):
 
 
 class LoginWebSite(Element):
-    loader = XMLFile(FilePath(os.path.join(get_startup_folder(), 'login.html')))
+    loader = XMLFile(FilePath(os.path.join(get_static_folder(), 'login.html')))
 
     def __init__(self, error_msg=None, disclaimer_banner_file=None):
         super(LoginWebSite, self).__init__()
@@ -91,14 +91,14 @@ class LoginResource(BaseResource):
 
     def __init__(self, services_factory, provider=None, disclaimer_banner=None, authenticator=None):
         BaseResource.__init__(self, services_factory)
-        self._startup_folder = get_startup_folder()
+        self._assets_folder = get_static_folder()
         self._disclaimer_banner = disclaimer_banner
         self._provider = provider
         self._authenticator = authenticator or Authenticator(provider)
         self._bootstrap_user_services = BootstrapUserServices(services_factory, provider)
 
-        self.putChild('startup-assets', File(self._startup_folder))
-        with open(os.path.join(self._startup_folder, 'Interstitial.html')) as f:
+        self.putChild('assets', File(self._assets_folder))
+        with open(os.path.join(self._assets_folder, 'interstitial.html')) as f:
             self.interstitial = f.read()
 
     def getChild(self, path, request):
diff --git a/service/pixelated/resources/root_resource.py b/service/pixelated/resources/root_resource.py
index 206cb3be..be9c7458 100644
--- a/service/pixelated/resources/root_resource.py
+++ b/service/pixelated/resources/root_resource.py
@@ -20,7 +20,7 @@ from string import Template
 from pixelated.resources.users import UsersResource
 
 from pixelated.resources import BaseResource, UnAuthorizedResource, UnavailableResource
-from pixelated.resources import get_startup_folder, get_static_folder
+from pixelated.resources import get_static_folder
 from pixelated.resources.attachments_resource import AttachmentsResource
 from pixelated.resources.sandbox_resource import SandboxResource
 from pixelated.resources.backup_account_resource import BackupAccountResource
@@ -51,7 +51,7 @@ MODE_RUNNING = 2
 class RootResource(BaseResource):
     def __init__(self, services_factory):
         BaseResource.__init__(self, services_factory)
-        self._startup_assets_folder = get_startup_folder()
+        self._startup_assets_folder = get_static_folder()
         self._static_folder = get_static_folder()
         self._html_template = open(os.path.join(self._static_folder, 'index.html')).read()
         self._services_factory = services_factory
diff --git a/service/test/unit/resources/test_login_resource.py b/service/test/unit/resources/test_login_resource.py
index 834b9710..eeb7349a 100644
--- a/service/test/unit/resources/test_login_resource.py
+++ b/service/test/unit/resources/test_login_resource.py
@@ -87,23 +87,15 @@ class TestLoginResource(unittest.TestCase):
 
         d = self.web.get(request)
 
-        def assert_form_rendered(_):
+        def assert_login_page_rendered(_):
             self.assertEqual(200, request.responseCode)
-            form_action = 'action="/login"'
-            form_method = 'method="post"'
-            input_username = 'name="username"'
-            input_password = 'name="password"'
-            input_submit = 'name="login"'
+            title = 'Pixelated - Login'
             default_disclaimer = 'Some disclaimer'
             written_response = ''.join(request.written)
-            self.assertIn(form_action, written_response)
-            self.assertIn(form_method, written_response)
-            self.assertIn(input_password, written_response)
-            self.assertIn(input_submit, written_response)
-            self.assertIn(input_username, written_response)
+            self.assertIn(title, written_response)
             self.assertIn(default_disclaimer, written_response)
 
-        d.addCallback(assert_form_rendered)
+        d.addCallback(assert_login_page_rendered)
         return d
 
     def _write(self, filename, content):
@@ -238,7 +230,7 @@ class TestLoginPOST(unittest.TestCase):
 
         def assert_interstitial_in_response(_):
             mock_authenticate.assert_called_once_with(self.username, self.password)
-            interstitial_js_in_template = '<script src="startup-assets/Interstitial.js"></script>'
+            interstitial_js_in_template = '<script src="/assets/interstitial.js"></script>'
             self.assertIn(interstitial_js_in_template, self.request.written[0])
 
         d.addCallback(assert_interstitial_in_response)
diff --git a/web-ui/.eslintignore b/web-ui/.eslintignore
new file mode 100644
index 00000000..8cccef3c
--- /dev/null
+++ b/web-ui/.eslintignore
@@ -0,0 +1 @@
+src/interstitial
diff --git a/service/pixelated/assets/hive-bg.png b/web-ui/app/images/hive-bg.png
index 77316967..77316967 100644
--- a/service/pixelated/assets/hive-bg.png
+++ b/web-ui/app/images/hive-bg.png
diff --git a/service/pixelated/assets/pixelated-logo-orange.svg b/web-ui/app/images/logo-orange.svg
index 7e0ef43d..7e0ef43d 100644
--- a/service/pixelated/assets/pixelated-logo-orange.svg
+++ b/web-ui/app/images/logo-orange.svg
diff --git a/web-ui/config/copy-webpack.js b/web-ui/config/copy-webpack.js
index 1f7f743a..7e56d760 100644
--- a/web-ui/config/copy-webpack.js
+++ b/web-ui/config/copy-webpack.js
@@ -5,6 +5,9 @@ module.exports = new CopyWebpackPlugin([
   { context: 'app/', from: 'index.html' },
   { context: 'app/', from: 'sandbox.html' },
   { context: 'src/backup_account/', from: 'backup_account.html' },
+  { context: 'src/login/', from: '*.html' },
+  { context: 'src/login/', from: '*.css' },
+  { context: 'src/interstitial/', from: '*' },
   { context: 'app/', from: 'css/*' },
   { context: 'app/', from: 'fonts/*' },
   { context: 'app/', from: 'locales/**/*' },
diff --git a/service/pixelated/assets/Interstitial.html b/web-ui/src/interstitial/interstitial.html
index bc6cc738..ac9ab291 100644
--- a/service/pixelated/assets/Interstitial.html
+++ b/web-ui/src/interstitial/interstitial.html
@@ -4,15 +4,15 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <script src="startup-assets/snap.svg-min.js"></script>
-    <script src="startup-assets/jquery-2.1.3.min.js"></script>
+    <script src="/assets/snap.svg-min.js"></script>
+    <script src="/assets/jquery-2.1.3.min.js"></script>
   </head>
 
   <body style="border: 0px; padding: 0px; margin: 0px;background-color: #808181">
     <section id="hive-section" style="background-color: #808181;" name="hive-section">
       <svg id="hive" style="width: 100%; height: 100%;"></svg>
     </section>
-    <script src="startup-assets/Interstitial.js"></script>
+    <script src="/assets/interstitial.js"></script>
   </body>
 
 </html>
diff --git a/service/pixelated/assets/Interstitial.js b/web-ui/src/interstitial/interstitial.js
index 2eaa7a1c..2eaa7a1c 100644
--- a/service/pixelated/assets/Interstitial.js
+++ b/web-ui/src/interstitial/interstitial.js
diff --git a/service/pixelated/assets/jquery-2.1.3.min.js b/web-ui/src/interstitial/jquery-2.1.3.min.js
index 25714ed2..25714ed2 100644
--- a/service/pixelated/assets/jquery-2.1.3.min.js
+++ b/web-ui/src/interstitial/jquery-2.1.3.min.js
diff --git a/service/pixelated/assets/snap.svg-min.js b/web-ui/src/interstitial/snap.svg-min.js
index ca9601ab..ca9601ab 100644
--- a/service/pixelated/assets/snap.svg-min.js
+++ b/web-ui/src/interstitial/snap.svg-min.js
diff --git a/service/pixelated/assets/_login_disclaimer_banner.html b/web-ui/src/login/_login_disclaimer_banner.html
index dfc63030..dfc63030 100644
--- a/service/pixelated/assets/_login_disclaimer_banner.html
+++ b/web-ui/src/login/_login_disclaimer_banner.html
diff --git a/web-ui/src/login/app.js b/web-ui/src/login/app.js
new file mode 100644
index 00000000..e6ac3192
--- /dev/null
+++ b/web-ui/src/login/app.js
@@ -0,0 +1,35 @@
+/*
+ * 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';
+
+const App = () => (
+  <form className='standard' id='login_form' action='/login' method='post'>
+    <input
+      type='text' name='username' id='email' className='text-field'
+      placeholder='username' autoFocus=''
+    />
+    <input
+      type='password' name='password' id='password' className='text-field'
+      placeholder='password' autoComplete='off'
+    />
+    <input type='submit' name='login' value='Login' className='button' />
+  </form>
+);
+
+export default translate('', { wait: true })(App);
diff --git a/service/pixelated/assets/pixelated.css b/web-ui/src/login/login.css
index b3e1d16e..f1b54071 100644
--- a/service/pixelated/assets/pixelated.css
+++ b/web-ui/src/login/login.css
@@ -1,10 +1,27 @@
+/*
+ * 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/>.
+ */
+
 body {
     font-family: "Open Sans", "Microsoft YaHei", "Hiragino Sans GB", "Hiragino Sans GB W3", "微软雅黑", "Helvetica Neue", Arial, sans-serif;
     background-color: #EAEAEA;
     height: 100vh;
     color: #3E3A37;
 
-    background-image: url("hive-bg.png");
+    background-image: url("/assets/images/hive-bg.png");
     background-repeat: repeat;
 }
 
diff --git a/web-ui/src/login/login.html b/web-ui/src/login/login.html
new file mode 100644
index 00000000..88d74556
--- /dev/null
+++ b/web-ui/src/login/login.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html xmlns:t="http://twistedmatrix.com/ns/twisted.web.template/0.1">
+  <head>
+    <link rel="icon" type="image/png" href="/assets/images/Favicon.png" />
+    <meta charset="utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
+    <title>Pixelated - Login</title>
+    <link rel="stylesheet" type="text/css" href="/assets/normalize.min.css" />
+    <link rel="stylesheet" type="text/css" href="/assets/login.css" />
+    <link rel="stylesheet" type="text/css" href="/assets/opensans.css" />
+  </head>
+  <body>
+    <div class="content">
+      <div class="login">
+        <img class="logo" src="/assets/images/logo-orange.svg" alt="Pixelated logo"/>
+        <p t:render="error_msg" class="error"></p>
+        <div id="root"/>
+      </div>
+      <div class="disclaimer">
+        <div t:render="disclaimer"></div>
+      </div>
+    </div>
+    <script type="text/javascript" src="/assets/login.js"></script>
+  </body>
+</html>
diff --git a/web-ui/src/login/login.js b/web-ui/src/login/login.js
new file mode 100644
index 00000000..ddbe1943
--- /dev/null
+++ b/web-ui/src/login/login.js
@@ -0,0 +1,33 @@
+/*
+ * 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 { render } from 'react-dom';
+import a11y from 'react-a11y';
+import { I18nextProvider } from 'react-i18next';
+
+import App from './app';
+import i18n from '../i18n';
+
+if (process.env.NODE_ENV === 'development') a11y(React);
+
+render(
+  <I18nextProvider i18n={i18n}>
+    <App />
+  </I18nextProvider>,
+  document.getElementById('root')
+);
diff --git a/service/pixelated/assets/normalize.min.css b/web-ui/src/login/normalize.min.css
index d3c7f4d5..d3c7f4d5 100644
--- a/service/pixelated/assets/normalize.min.css
+++ b/web-ui/src/login/normalize.min.css
diff --git a/service/pixelated/assets/opensans.css b/web-ui/src/login/opensans.css
index a42f346c..a42f346c 100644
--- a/service/pixelated/assets/opensans.css
+++ b/web-ui/src/login/opensans.css
diff --git a/web-ui/webpack.config.js b/web-ui/webpack.config.js
index 52188879..946189bb 100644
--- a/web-ui/webpack.config.js
+++ b/web-ui/webpack.config.js
@@ -8,6 +8,7 @@ module.exports = {
   entry: {
     app: './app/js/index.js',
     backup_account: './src/backup_account/backup_account.js',
+    login: './src/login/login.js',
     sandbox: './app/js/sandbox.js'
   },
   node: { fs: 'empty' },
diff --git a/web-ui/webpack.production.config.js b/web-ui/webpack.production.config.js
index 6ee08cac..5ccdc782 100644
--- a/web-ui/webpack.production.config.js
+++ b/web-ui/webpack.production.config.js
@@ -8,6 +8,7 @@ module.exports = {
   entry: {
     app: './app/js/index.js',
     backup_account: './src/backup_account/backup_account.js',
+    login: './src/login/login.js',
     sandbox: './app/js/sandbox.js'
   },
   node: { fs: 'empty' },
author	Tulio Casagrande <tcasagra@thoughtworks.com>	2017-02-13 18:43:15 -0200
committer	Anike Arni <aarni@thoughtworks.com>	2017-02-16 17:01:59 -0200
commit	0b966e696c6a99f825510d406008fc9b9936077e (patch)
tree	c91a78cddaeb82de7383380e75196f8993fcb175
parent	48a1ca5f8310ef6fb61dc821c38d435617b19d5c (diff)