[#907] Convert login page to react

with @anikarni

7 files changed, 318 insertions, 0 deletions

diff --git a/web-ui/src/login/_login_disclaimer_banner.html b/web-ui/src/login/_login_disclaimer_banner.html
new file mode 100644
index 00000000..dfc63030
--- /dev/null
+++ b/web-ui/src/login/_login_disclaimer_banner.html
@@ -0,0 +1,9 @@
+<div>
+    <ul class="accounts">
+        <h2>Some disclaimer</h2>
+        <li>
+            please supply the option --banner with an XML compatible file
+            <div>to override this default message</div>
+        </li>
+    </ul>
+</div>
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/web-ui/src/login/login.css b/web-ui/src/login/login.css
new file mode 100644
index 00000000..f1b54071
--- /dev/null
+++ b/web-ui/src/login/login.css
@@ -0,0 +1,145 @@
+/*
+ * 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("/assets/images/hive-bg.png");
+    background-repeat: repeat;
+}
+
+.content {
+    height: 100vh;
+    width: 100%;
+}
+
+.error {
+    color: #D72A25;
+    margin: 10px 0 0 0;
+}
+
+.message-panel {
+  width: 100%;
+  margin: 10px auto;
+  z-index: 10000;
+  text-align: center;
+  }
+
+.message-panel span{
+    background: #F7E8AF;
+    padding: 5px 60px;
+    border: 1px solid #f2db81;
+    color: #987b0f;
+    box-shadow: 1px 1px 3px #69560b;
+}
+
+.message-panel.message-panel-small span{
+    padding: 5px 0px;
+    display: inline-block;
+    width: 100%;
+}
+
+.login {
+    display: block;
+    width: 240px;
+    margin: auto;
+    padding: 45px 40px 35px 40px;
+    background-color: #FFF;
+    margin-top: 2%;
+    margin-bottom: 2%;
+}
+
+form#login_form {
+  padding: 10px 0;
+}
+
+.disclaimer {
+    display: block;
+    margin-top: 10%;
+    width: 50%;
+    margin: auto;
+    background-color: #2BA6CB;
+    color: #FFFFFF;
+    font-weight: 300;
+    font-size: 0.8rem;
+    padding: 1em;
+    margin-bottom: 20px;
+}
+
+.disclaimer li {
+    margin-top: 1em;
+}
+
+.logo {
+  width: 100%;
+  height: auto;
+}
+
+input {
+    display: block;
+    margin: 10px 0;
+    padding-left: 5px;
+}
+
+input.text-field {
+  width: 97%;
+}
+
+button, .button, input[type=button] {
+  cursor: pointer;
+  margin: 0 0 1.25rem;
+  border: none;
+  position: relative;
+  text-decoration: none;
+  text-align: center;
+  -webkit-appearance: none;
+  display: inline-block;
+  padding: 0.4rem 1.1rem;
+  font-size: 0.9rem;
+  background-color: #2ba6cb;
+  border-color: #2285a2;
+  color: white;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  -ms-border-radius: 2px;
+  -o-border-radius: 2px;
+  border-radius: 2px;
+}
+
+button:hover, button:focus, .button:hover, .button:focus, input[type=button]:hover, input[type=button]:focus {
+  background-color: #2285a2;
+  outline: none;
+  color: white;
+}
+
+ul.accounts {
+  margin-bottom: 5%;
+}
+
+ul.accounts li {
+  display: inline-block;
+  list-style: none;
+  margin-right: 35px;
+  margin-top: 0px;
+}
+
+ul.accounts li span {
+  font-weight: bold;
+}
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/web-ui/src/login/normalize.min.css b/web-ui/src/login/normalize.min.css
new file mode 100644
index 00000000..d3c7f4d5
--- /dev/null
+++ b/web-ui/src/login/normalize.min.css
@@ -0,0 +1 @@
+/*! normalize.css v3.0.1 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
\ No newline at end of file
diff --git a/web-ui/src/login/opensans.css b/web-ui/src/login/opensans.css
new file mode 100644
index 00000000..a42f346c
--- /dev/null
+++ b/web-ui/src/login/opensans.css
@@ -0,0 +1,69 @@
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300;
+  src: local("Open Sans Light"), local("OpenSans-Light"), url("/fonts/OpenSans-Light.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local("Open Sans"), local("OpenSans"), url("/fonts/OpenSans.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 600;
+  src: local("Open Sans Semibold"), local("OpenSans-Semibold"), url("/fonts/OpenSans-Semibold.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local("Open Sans Bold"), local("OpenSans-Bold"), url("/fonts/OpenSans-Bold.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 800;
+  src: local("Open Sans Extrabold"), local("OpenSans-Extrabold"), url("/fonts/OpenSans-Extrabold.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 300;
+  src: local("Open Sans Light Italic"), local("OpenSansLight-Italic"), url("/fonts/OpenSansLight-Italic.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 400;
+  src: local("Open Sans Italic"), local("OpenSans-Italic"), url("/fonts/OpenSans-Italic.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 600;
+  src: local("Open Sans Semibold Italic"), local("OpenSans-SemiboldItalic"), url("/fonts/OpenSans-SemiboldItalic.woff ") format("woff");
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 700;
+  src: local("Open Sans Bold Italic"), local("OpenSans-BoldItalic"), url("/fonts/OpenSans-BoldItalic.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 800;
+  src: local("Open Sans Extrabold Italic"), local("OpenSans-ExtraboldItalic"), url("/fonts/OpenSans-ExtraboldItalic.woff") format("woff");
+}