UI done for Login

src/components/app.js

@@ -1,14 +1,20 @@
 import React from "react";
 
 import HelloWorld from "./helloWorld/helloWorld";
+import Dashboard from "./dashboard";
+import LoginPage from "./loginComponents/loginPage";
 
 class App extends React.Component {
     constructor(props) {
         super(props);
     }
 
     render() {
-        return <HelloWorld />;
+        return (
+            <div>
+                <LoginPage />
+            </div>);
+
     }
 }
 

src/components/dashboard.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+class Dashboard extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+}
+
+
+
+
+export default Dashboard;

src/components/loginComponents/login.js

@@ -0,0 +1,73 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+class Login extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = this.initialState();
+        this.changeState = this.changeState.bind(this);
+    }
+    initialState() {
+        return {
+            email: "",
+            password: ""
+        };
+    }
+
+    changeState(event) {
+        this.setState({
+            [event.target.name]: event.target.value
+        });
+        console.log(event.target.value);
+    }
+    render() {
+        console.log(this.state);
+
+        return (
+            <div className="outer__wrapper">
+                <div className="inner__wrapper--left">
+                    <div className="h1__main-page">
+                        <h1>WELCOME TO BITBOOK</h1>
+                    </div>
+                    <div className="p__main-page">
+                        <p>
+                            Random text Random text. Random text Random text. Random text Random text
+                            Random text Random text. Random text Random text. Random text Random text
+                            Random text Random text. Random text Random text. Random text Random text
+                            Random text Random text. Random text Random text. Random text Random text
+
+                        </p>
+                    </div>
+                </div>
+                <div className="inner__wrapper--right">
+                    <div className="col-12 navigation">
+                        <div>
+                            <ul className="tab-group">
+                                <li className="tab active"><Link to="/login">Login</Link></li>
+                                <li className="tab active"><Link to="/register">Register</Link></li>
+                            </ul>
+                        </div>
+                        <form className="form">
+                            <div className="top-row">
+                                <div className="field-wrap">
+
+                                    <input name="email" type="text" value={this.state.email} placeholder="E-mail" onChange={this.changeState}   />
+                                </div>
+                                <div className="field-wrap">
+
+                                    <input name="password" type="text" value={this.state.password} placeholder="Password" onChange={this.changeState} />
+                                </div>
+                                <button type="submit">Login</button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+
+
+
+export default Login;

src/components/loginComponents/loginPage.js

@@ -0,0 +1,25 @@
+import React from "react";
+import Login from "./login";
+import Register from "./register";
+
+import { Switch, Route } from "react-router-dom";
+
+class LoginPage extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <div>
+                <Switch>
+                    <Route exact path="/" component={Login} />
+                    <Route path="/login" component={Login} />
+                    <Route path="/register" component={Register} />
+                </Switch>
+            </div>
+        );
+    }
+}
+
+export default LoginPage;

src/components/loginComponents/register.js

@@ -0,0 +1,82 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+class Register extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = this.initialState();
+        this.handleChange = this.handleChange.bind(this);
+    }
+    initialState() {
+        return {
+            name: "",
+            email: "",
+            password: ""
+
+        };
+    }
+    handleChange(event) {
+
+        this.setState({
+            [event.target.name]: event.target.value
+        });
+
+    }
+    render() {
+        console.log(this.state);
+        const { name, email, password } = this.state;
+
+        return (
+            <div className="outer__wrapper">
+                <div className="inner__wrapper--left">
+                    <div className="h1__main-page">
+                        <h1>WELCOME TO BITBOOK</h1>
+                    </div>
+                    <div className="p__main-page">
+                        <p>
+                            Random text Random text. Random text Random text. Random text Random text
+                            Random text Random text. Random text Random text. Random text Random text
+                            Random text Random text. Random text Random text. Random text Random text
+                            Random text Random text. Random text Random text. Random text Random text
+
+                        </p>
+                    </div>
+                </div>
+                <div className="inner__wrapper--right">
+                    <div className="col-12 navigation">
+                        <div>
+                            <ul className="tab-group">
+                                <li className="tab active"><Link to="/login">Login</Link></li>
+                                <li className="tab active"><Link to="/register">Register</Link></li>
+                            </ul>
+                        </div>
+                        <form className="form">
+                            <div className="top-row">
+                                <div className="field-wrap">
+
+                                    <input name="name" type="text" value={name} onChange={this.handleChange} placeholder="Name"  />
+                                </div>
+                                <div className="field-wrap">
+
+
+                                    <input name="email" type="text" value={email} onChange={this.handleChange} placeholder="E-mail"/>
+                                </div>
+                                <div className="field-wrap">
+
+                                    <input name="password" type="text" value={password} onChange={this.handleChange} placeholder="Password"/>
+                                </div>
+                                <button type="submit">Register</button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+
+        );
+    }
+}
+
+
+
+
+export default Register;

src/components/loginComponents/style.css

@@ -0,0 +1,11 @@
+body {
+    background-color: red;
+}
+
+.navigation {
+    background-color: gray;
+}
+
+.nav-links li {
+    display: inline;
+}

src/constants.js

@@ -1 +1,3 @@
-// export const SOME_GLOBAL_CONFIG = "value";
+// export const SOME_GLOBAL_CONFIG = "value";
+export const FETCH_ADDRESS = "https://bitbookapi.azurewebsites.net/";
+export const API_KEY = "Y3dvKZsv"; 

src/index.html

@@ -1,15 +1,31 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta http-equiv="X-UA-Compatible" content="ie=edge">
-
-        <title>My React App</title>
-    </head>
-    <body>
-        <div class="container"></div>
-
-        <script src="bundle.js"></script>
-    </body>
-</html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+    <title>My React App</title>
+    <!-- Bootstrap 4 -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
+        crossorigin="anonymous">
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
+</head>
+
+<body>
+    <div class="container"></div>
+
+
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
+        crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
+        crossorigin="anonymous"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
+        crossorigin="anonymous"></script>
+    <script src="bundle.js"></script>
+</body>
+
+</html>

src/index.js

@@ -1,13 +1,14 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import { BrowserRouter } from "react-router-dom";
+import { HashRouter } from "react-router-dom";
 import "babel-polyfill";
 
 import App from "./components/app";
 
+
 ReactDOM.render(
-    <BrowserRouter>
+    <HashRouter>
         <App />
-    </BrowserRouter>,
+    </HashRouter>,
     document.querySelector(".container")
 );

src/services/communicationService.js

@@ -0,0 +1,60 @@
+import { FETCH_ADDRESS } from "../constants";
+import { API_KEY } from "../constants";
+import axios from "axios";
+
+class ApiCommunication {
+    constructor() {
+
+    }
+    get(address, callbackSuccess, callbackFail) {
+
+        axios.get(FETCH_ADDRESS + address, this.createRequest())
+            .then((response) => {
+                response.json()
+                    .then((response) => {
+                        callbackSuccess(response);
+                    }).catch((reason) => {
+                        callbackFail(reason);
+                    });
+            });
+    }
+    post(address, dataObj, callbackSuccess, callbackFail) {
+        axios.post(FETCH_ADDRESS + address, this.createRequest(dataObj))
+            .then((response) => response.json())
+            .then((response) => {
+                callbackSuccess(response);
+
+            }).catch((reason) => {
+                callbackFail(reason);
+            });
+
+    }
+    getSessionID() {
+        return sessionStorage.getItem("sessionID");
+
+    }
+    createRequest(dataObj = null) {
+        const sesID = this.getSessionID();
+        if (sesID) {
+            return {
+                headers: {
+                    "Accept": "application/json",
+                    "Content-Type": "application/json",
+                    "key": API_KEY,
+                    "sessionID": sesID
+                },
+                data: dataObj
+            };
+        }else{
+            return {
+                headers: {
+                    "Accept": "application/json",
+                    "Content-Type": "application/json",
+                    "key": API_KEY                    
+                },
+                data: dataObj
+            };
+        }
+    }
+}
+export default ApiCommunication;