8 root navigation

_config.yml

@@ -0,0 +1 @@
+theme: jekyll-theme-cayman

src/components/app.js

@@ -1,14 +1,26 @@
 import React from "react";
 
-import HelloWorld from "./helloWorld/helloWorld";
+import { Switch, Route } from "react-router-dom";
+import LoginPage from "./login-page/login-page";
+import MainPage from "./mainPage";
+// import AuthenticationService from '../services/authenticationService';
 
 class App extends React.Component {
     constructor(props) {
         super(props);
+
+        // this.isAuth = new AuthenticationService().isAuthenticated();
     }
 
+
     render() {
-        return <HelloWorld />;
+        // this.isAuth ? <MainPage /> : <LoginPage />
+        return (
+
+            <div>
+                <LoginPage />
+            </div>
+        );
     }
 }
 

src/components/common/header.js

@@ -0,0 +1,19 @@
+import React, { Component } from "react";
+
+class Header extends Component {
+    render() {
+        return (
+            <header>
+                <nav>
+                    <ul>
+                        <li> Home </li>
+                        <li> Profile </li>
+                        <li> Logout </li>
+                    </ul>
+                </nav>
+            </header>
+        );
+    }
+}
+
+export default Header;

src/components/login-page/login-page.js

@@ -0,0 +1,28 @@
+import React from "react";
+import Welcome from "./welcome";
+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 className="row container ">
+                <Welcome />
+                <Switch>
+                    <Route  path='/login' component={Login} />
+                    <Route  exact path='/' component={Login} />
+                    <Route  path='/register' component={Register} />
+                </Switch>
+            </div>
+
+        );
+    }
+}
+
+export default LoginPage;

src/components/login-page/login.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+class Login extends React.Component {
+    constructor(props){
+        super(props);
+    }
+
+    render(){
+
+        return(
+            <div className="login/register-form  col s6 container">
+                <div className="row">
+                    <h3 className="col s6"><Link to="/login">Login</Link></h3>
+                    <h3 className="col s6 "><Link to="/register">Register</Link></h3>
+                </div>
+                <form>
+                    email:<input type="text" placeholder="Email Address" value=""/> 
+                    <div className="error-email"> </div>
+
+                    pass:<input type="password" placeholder="Password" value=""/> 
+                    <div className="error-password"> </div>
+
+                    <input type="submit" value="Login" className="btn waves-effect waves-light blue lighten-3"/>
+                    <div className="error-submit "> </div>
+
+                </form>
+
+            </div>
+        );
+    }
+}
+
+export default Login;

src/components/login-page/register.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+class Register extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+
+        return (
+            <div className="login/register-form  col s6 ">
+                <div className="row">
+                    <h3 className="col s6"><Link to="/login">Login</Link></h3>
+                    <h3 className="col s6"><Link to="/register">Register</Link></h3>
+                </div>
+                <form>
+                    Name:<input type="text" placeholder="Name" value="" />
+
+                    email:<input type="text" placeholder="Email Address" value="" />
+
+                    pass:<input type="text" placeholder="Min 6 characters" value="" />
+
+                    <input type="submit" value="Register" className="btn waves-effect waves-light blue lighten-3"/>
+                    <div className="error-register"> </div>
+
+                </form>
+
+            </div>
+        );
+    }
+}
+
+export default Register;

src/components/login-page/welcome.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+const Welcome = () => {
+
+
+    return (
+        <div className="col s6 ">
+            <h1>
+                Welcome to BitBook
+            </h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consequat dignissim luctus. Sed eu rutrum purus. Morbi augue arcu, blandit nec ante sed, finibus tempor ex. Aenean vel arcu a eros fringilla facilisis in in lectus. Nam at ex posuere, pretium neque vel, tempor velit. Maecenas eget justo nec leo aliquet mollis. Sed ac luctus ipsum. Pellentesque tincidunt mauris urna. Morbi vitae tortor maximus, dignissim neque ut, mollis ipsum. Morbi nisl nibh, elementum non velit ut, sollicitudin consectetur eros. Quisque ac leo auctor, vehicula tellus sed, varius nulla. Aliquam ornare interdum consequat. In tincidunt ex a sagittis congue. Phasellus lacinia sit amet magna sit amet efficitur. Vivamus lobortis sem a bibendum iaculis. Fusce ut imperdiet justo.
+            </p>
+        </div>
+    );
+};
+
+export default Welcome;

src/components/mainPage.js

@@ -0,0 +1,20 @@
+import React, { Component } from "react";
+import Header from "./common/header";
+
+
+class MainPage extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <main>
+                <Header />
+                <div> Dobrodosli na main </div>
+            </main>
+        );
+    }
+}
+
+export default MainPage;

src/constants.js

@@ -1 +1,5 @@
-// export const SOME_GLOBAL_CONFIG = "value";
+// export const SOME_GLOBAL_CONFIG = "value";
+
+export const API_KEY = "jTAAZCA5";
+export const SESSION_STORAGE_KEY = "SESSION_ID";
+export const BASE_URL = "";

src/index.html

@@ -4,12 +4,15 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta http-equiv="X-UA-Compatible" content="ie=edge">
-
+        <!-- Compiled and minified CSS -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.1/css/materialize.min.css">
+
         <title>My React App</title>
     </head>
     <body>
         <div class="container"></div>
-
+
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.1/js/materialize.min.js"></script>
         <script src="bundle.js"></script>
     </body>
 </html>

src/index.js

@@ -1,13 +1,13 @@
 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/fetchService.js

@@ -0,0 +1,47 @@
+import fetch from "fetch";
+import { SESSION_STORAGE_KEY, API_KEY, BASE_URL } from "../../constants";
+
+export default class FetchService {
+
+    headers() {
+
+        let sessionId = sessionStorage.getItem(SESSION_STORAGE_KEY);
+        if (sessionId) {
+
+            return {
+                "Content-Type": "application/json",
+                "SessionId": sessionId,
+                "API": API_KEY
+            };
+        }
+
+        return {
+            "Content-Type": "application/json",
+            "API": API_KEY            
+        };
+    }
+
+    get(url, successHandler, errorHandler) {
+
+        fetch(`${BASE_URL}${url}`, {
+            method: "GET",
+            headers: this.headers()
+        })
+            .then(response => response.json())
+            .then(jsonData => successHandler(jsonData))
+            .catch(error => errorHandler(error));
+    }
+
+    post(url, postData) {
+
+        fetch(`${BASE_URL}${url}`, {
+            method: "POST",
+            body: JSON.stringify(postData),
+            headers: this.headers()
+        })
+            .then(response => response.json())
+            .then(jsonData => console.log(jsonData))
+            .catch(error => console.log(error));
+    }
+
+}

src/services/redirectService.js

@@ -0,0 +1,7 @@
+export default class RedirectService {
+
+    goTo(path) {
+        window.location.assign(`#/${path}`);
+        // this.props.history.push(`/${path}`);
+    }
+};