Signup Page for Fabrik

ide/static/css/signup_style.css

@@ -0,0 +1,126 @@
+.signup-container {
+  background-size: cover;
+  background: #f4f6ff;
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
+.card {
+  background: #fff;
+  width: 40em;
+  height: 44em;
+  border-radius: 5px;
+  margin-top: 5em;
+  box-shadow: 1px 1px 132px -20px rgba(205, 207, 210, 0.8);
+}
+
+.card-top {
+  width: 100%;
+  height: 11em;
+  border-bottom: 1px solid #eee;
+}
+
+.card-top-left {
+  float: left;
+  border-right: 1px solid #eee;
+  width: 50%;
+}
+
+.card-top-left img {
+  width: 50%;
+  margin: 2.95em 0 2.95em 0;
+}
+
+.card-top-right h1{
+  color: #455062;
+  font-size: 1.4em;
+  margin-top: 0.8em;
+}
+
+.card-top-right img {
+  width: 15%;
+  margin-top: 1.4em;
+}
+
+.form {
+  margin-top: 3em;
+}
+
+.input {
+  border: 2px solid #eee;
+  border-radius: 10px;
+  width: 300px;
+  margin: 1em;
+  transition: all .3s ease;
+}
+
+.input img{
+  width: 15%;
+  margin-left: -0.4em;
+  transition: all .3s ease;
+}
+
+.field {
+  margin: 0;
+  border: 0;
+  outline: 0;
+  width: 245px;
+  position: relative;
+  top: 0.1em;
+  padding: 0.5em 0 0.5em 0;
+  color: #455060;
+  font-size: 1.1em;
+}
+
+.field::placeholder {
+  color: #455060;
+}
+
+.active-input {
+  border-color: #455060;
+  transition: all .3s ease;
+}
+
+.wrong-input {
+  border-color: #eb4d4b;
+  transition: all .3s ease;
+}
+
+.error-message {
+  color: #eb4d4b;
+  margin: 1.1em 0 0.2em 0;
+  opacity: 0;
+  transition: all .3s ease;
+}
+
+.show {
+  opacity: 1 !important;
+  transition: all .3s ease;
+}
+
+input[type=submit] {
+  background: #455062;
+  border: 0;
+  outline: 0;
+  box-shadow: none;
+  color: #fff;
+  margin: 0.4em;
+  text-transform: uppercase;
+  font-weight: bold;
+  padding: 1.2em 0 1.2em 0;
+  width: 300px;
+  border-radius: 10px;
+}
+
+.login-link {
+  margin: 2em;
+  color: #455062;
+  display: inline-block;
+}
+
+.login-link:hover {
+  color: #2c323d;
+}

ide/static/js/index.js

@@ -3,10 +3,12 @@ import React from 'react';
 import { render } from 'react-dom';
 import { Router, Route, hashHistory } from 'react-router';
 import App from './app.js';
+import Signup from './signup.js';
 import '../css/style.css';
 
 render(
   <Router history={hashHistory}>
     <Route path="/" component={App} />
+    <Route path="/signup" component={Signup} />
   </Router>, document.getElementById('app')
 );

ide/static/js/login.js

@@ -26,6 +26,11 @@ class Login extends React.Component {
           this.setState({ loginState: false });
           this.props.setUserId(null);
           this.props.setUserName(null);
+          localStorage.removeItem('userID');
+          localStorage.removeItem('username');
+          if (localStorage.hasOwnProperty('email')) {
+          	localStorage.removeItem('email');
+          }
         }
       }.bind(this),
       error: function () {
@@ -68,6 +73,8 @@ class Login extends React.Component {
           this.setState({ loginState: response.result });
           this.props.setUserId(response.user_id);
           this.props.setUserName(response.username);
+          localStorage.setItem("userID",response.user_id);
+          localStorage.setItem("username",response.username);
 
           if (showNotification) {
             $('#successful-login-notification')[0].style.display = 'block';