4redirect

.eslintrc.json

@@ -31,4 +31,4 @@
         ],
         "no-console": 0
     }
-}
+}

src/components/app.js

@@ -1,15 +1,29 @@
 import React from "react";
+import { Switch, Route, Redirect } from "react-router-dom";
 
-import HelloWorld from "./helloWorld/helloWorld";
+
+
+import WelcomePage from "./homePage/welcomePage";
 
 class App extends React.Component {
     constructor(props) {
         super(props);
     }
 
     render() {
-        return <HelloWorld />;
+        return (
+            <div>
+
+                <WelcomePage />
+                <Switch>
+                    <Redirect exact from="/" to="/loginPage" />
+                </Switch>
+            </div>
+        );
+
     }
 }
 
 export default App;
+
+

src/components/homePage/headerPage.js

@@ -0,0 +1,47 @@
+import React from "react";
+
+
+
+const Header = () => {
+    return (
+        <div>
+            <nav className="navbar navbar-expand-lg navbar-light bg-light">
+                <a className="navbar-brand" href="#">Navbar</a>
+                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                    <span className="navbar-toggler-icon"></span>
+                </button>
+
+                <div className="collapse navbar-collapse" id="navbarSupportedContent">
+                    <ul className="navbar-nav mr-auto">
+                        <li className="nav-item active">
+                            <a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
+                        </li>
+                        <li className="nav-item">
+                            <a className="nav-link" href="#">Link</a>
+                        </li>
+                        <li className="nav-item dropdown">
+                            <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                Dropdown </a>
+                            <div className="dropdown-menu" aria-labelledby="navbarDropdown">
+                                <a className="dropdown-item" href="#">Action</a>
+                                <a className="dropdown-item" href="#">Another action</a>
+                                <div className="dropdown-divider"></div>
+                                <a className="dropdown-item" href="#">Something else here</a>
+                            </div>
+                        </li>
+                        <li className="nav-item">
+                            <a className="nav-link disabled" href="#">Disabled</a>
+                        </li>
+                    </ul>
+                    <form className="form-inline my-2 my-lg-0">
+                        <input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
+                        <button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+                    </form>
+                </div>
+            </nav>
+
+        </div>
+    );
+};
+
+export default Header;

src/components/homePage/loginPage.js

@@ -0,0 +1,55 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import registerPage from "./registerPage";
+
+
+
+
+class LoginPage extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            email: "",
+            password: ""
+        };
+        this.handleEmailChange = this.handleEmailChange.bind(this);
+        this.handlePasswordChange = this.handlePasswordChange.bind(this);
+        this.handleLogin = this.handleLogin.bind(this);
+    }
+
+    handleEmailChange(event) {
+        this.setState({ email: event.target.value });
+        console.log(event.target.value);
+
+    }
+    handlePasswordChange(event) {
+        this.setState({ password: event.target.value });
+        console.log(event.target.value);
+    }
+
+    handleLogin(event) {
+        let data = {
+            email: this.state.email,
+            password: this.state.password
+        };
+        console.log(data);
+        // this.props.onLogin(data);
+    }
+
+    render() {
+        return (
+            <div>
+
+                <form className="homePageForm">
+                    Email<input type="email" onChange={this.handleEmailChange} /><br />
+                    Password<input type="password" onChange={this.handlePasswordChange} /><br />
+                    <input type="button" onClick={this.handleLogin} value="Login" />
+                </form>
+
+
+            </div>
+        );
+    }
+}
+
+export default LoginPage;

src/components/homePage/mainPage.js

@@ -0,0 +1,18 @@
+import React from "react";
+import Header from "HeaderPage";
+
+
+class MainPage extends React.Component {
+    constructor(props) {
+        super(props);
+
+
+    }
+    render (){
+        return (
+            <Header/>
+        );
+    }
+};
+
+export default MainPage;

src/components/homePage/registerPage.js

@@ -0,0 +1,63 @@
+import React from "react";
+import {Link} from "react-router-dom";
+
+
+
+class RegisterPage extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            name: "",
+            email: "",
+            password: ""
+        };
+        this.handleNameRegister = this.handleNameRegister.bind(this);
+        this.handleEmailRegister = this.handleEmailRegister.bind(this);
+        this.handlePasswordRegister = this.handlePasswordRegister.bind(this);
+        this.handleRegister = this.handleRegister.bind(this);
+    }
+    handleNameRegister(event) {
+        this.setState({ name: event.target.value });
+        console.log(event.target.value);
+    }
+
+    handleEmailRegister(event) {
+        this.setState({ email: event.target.value });
+        console.log(event.target.value);
+    }
+    handlePasswordRegister(event) {
+        this.setState({ password: event.target.value });
+        console.log(event.target.value);
+    }
+
+    handleRegister(event) {
+        let data = {
+            name: this.state.name,
+            email: this.state.email,
+            password: this.state.password
+        };
+        console.log(data);
+        // this.props.onRegister(data);
+    }
+
+
+    render() {
+        return (
+            <div className="loginFormDiv">
+                <form className="homePageForm">
+                    Name<input type="text" onChange={this.handleNameRegister}/><br/>
+                    Email<input type="email" onChange={this.handleEmailRegister} /><br />
+                    Password<input type="password" onChange={this.handlePasswordRegister} /><br />
+                    <input type="button" onClick={this.handleRegister} value="Register" />
+
+                </form>
+
+
+            </div>
+        );
+    }
+}
+
+export default RegisterPage;
+
+

src/components/homePage/welcomePage.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { Switch, Route } from "react-router-dom";
+import { Link } from "react-router-dom";
+
+import RegisterPage from "./registerPage";
+import LoginPage from "./loginPage";
+
+
+class WelcomePage extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <div>
+
+
+                <h1>Welcome to BitBook</h1>
+                <div className="loginFormDiv">
+
+                    <ul className="nav nav-tabs">
+                        <li className="active"><Link to="/loginPage">Login</Link></li>
+                        <li><Link to="/registerPage">Register here</Link></li>
+                    </ul>
+                </div>
+                <div>
+                    <Switch>
+
+                        <Route path="/loginPage" component={LoginPage} />
+                        <Route path="/registerPage" component={RegisterPage} />
+                    </Switch>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default WelcomePage;

src/constants.js

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

src/index.html

@@ -4,12 +4,19 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta http-equiv="X-UA-Compatible" content="ie=edge">
-
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
+        <link rel="stylesheet" href="style.css">
         <title>My React App</title>
     </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,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/service/authenticationService.js

@@ -0,0 +1,5 @@
+import React from "react";
+
+class AuthenticationService {
+
+}