From 0b966e696c6a99f825510d406008fc9b9936077e Mon Sep 17 00:00:00 2001 From: Tulio Casagrande Date: Mon, 13 Feb 2017 18:43:15 -0200 Subject: [#907] Convert login page to react with @anikarni --- web-ui/src/login/_login_disclaimer_banner.html | 9 ++ web-ui/src/login/app.js | 35 ++++++ web-ui/src/login/login.css | 145 +++++++++++++++++++++++++ web-ui/src/login/login.html | 26 +++++ web-ui/src/login/login.js | 33 ++++++ web-ui/src/login/normalize.min.css | 1 + web-ui/src/login/opensans.css | 69 ++++++++++++ 7 files changed, 318 insertions(+) create mode 100644 web-ui/src/login/_login_disclaimer_banner.html create mode 100644 web-ui/src/login/app.js create mode 100644 web-ui/src/login/login.css create mode 100644 web-ui/src/login/login.html create mode 100644 web-ui/src/login/login.js create mode 100644 web-ui/src/login/normalize.min.css create mode 100644 web-ui/src/login/opensans.css (limited to 'web-ui/src/login') 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 @@ +
+ +
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 . + */ + +import React from 'react'; +import { translate } from 'react-i18next'; + +const App = () => ( +
+ + + +
+); + +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 . + */ + +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 @@ + + + + + + + + Pixelated - Login + + + + + +
+ + + + 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 . + */ + +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( + + + , + 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"); +} -- cgit v1.2.3