Task7

package.json

@@ -9,6 +9,7 @@
   "author": "BIT",
   "license": "ISC",
   "dependencies": {
+    "axios": "^0.17.1",
     "babel-polyfill": "^6.26.0",
     "react": "^16.1.0",
     "react-dom": "^16.1.0",

src/components/app.js

@@ -1,15 +1,35 @@
 import React from "react";
+import LoginPage from "./login/loginPage";
+import LoginForm from "./login/loginForm";
+import RegisterForm from "./login/registerForm";
+import { Switch, Route, Redirect } from "react-router-dom";
+import MainPage from "./common/mainPage";
+import AuthenticationService from "./../services/authenticationService";
 
-import HelloWorld from "./helloWorld/helloWorld";
 
 class App extends React.Component {
     constructor(props) {
         super(props);
+        this.authenticationService = new AuthenticationService();
     }
 
+
     render() {
-        return <HelloWorld />;
+        console.log("is auth: ", this.authenticationService.isUserAuthenticated());
+
+        if (!this.authenticationService.isUserAuthenticated()) {
+            return (
+                <Switch>
+                    <Redirect exact from="/" to="/login" />
+                    <Route exact path="/login" component={LoginPage} />
+                    <Route exact path="/register" component={LoginPage} />
+                </Switch>
+            );
+        }
+
+        return <MainPage />;
     }
 }
 
+
 export default App;

src/components/common/footer.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+const Footer = () => {
+    return (
+        <h4> Copyright Ⓒ Team Candies </h4>
+    );
+
+};
+export default Footer;

src/components/common/header.js

@@ -0,0 +1,37 @@
+import React from "react";
+import LogOutButton from "../common/logOutButton";
+import {Link} from "react-router-dom";
+
+const Header = () => {
+
+    return (
+        <div className="navbar navbar-expand-lg navbar-dark bg-primary">
+            <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
+                <span className="navbar-toggler-icon"></span>
+            </button>
+            <a className="navbar-brand" href="#">Bitbook</a>
+
+            <div className="collapse navbar-collapse" id="navbarTogglerDemo03">
+                <ul className="navbar-nav mr-auto mt-2 mt-lg-0">
+                    <li className="nav-item active">
+                        <Link className="nav-link" to="/profile">Profile<span className="sr-only">(current)</span></Link>
+                    </li>
+                    <li className="nav-item">
+                        <a className="nav-link" href="#">Link</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>
+                <LogOutButton />
+            </div>
+        </div>
+
+
+
+    );
+};
+
+export default Header;

src/components/common/logOutButton.js

@@ -0,0 +1,26 @@
+import React from "react";
+import AuthenticationService from "../../services/authenticationService";
+
+class LogOutButton extends React.Component {
+    constructor(props) {
+        super(props);
+        this.authenticationService = new AuthenticationService();
+        this.handleClickLogOut = this.handleClickLogOut.bind(this);
+    }
+
+    handleClickLogOut() {
+        this.authenticationService.logOut();
+    }
+
+    render() {
+        return (<button className="btn btn-secondary btn" type="button" name="action" id="logout" onClick={this.handleClickLogOut}>
+            LogOut</button>);
+    }
+}
+
+export default LogOutButton;
+
+
+
+
+

src/components/common/mainPage.js

@@ -0,0 +1,26 @@
+import React from "react";
+import Header from "./header";
+import Footer from "./footer";
+import ProfilePage from "../profile/profilePage";
+import { Switch, Route } from "react-router-dom";
+
+class MainPage extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (
+            <div>
+                <Header />
+
+                <Switch>
+                    <Route path="/profile" component={ProfilePage} />
+                </Switch>
+
+                <Footer />
+            </div>
+        );
+    }
+};
+
+export default MainPage;

src/components/login/loginForm.js

@@ -0,0 +1,96 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+import FetchDataService from "../../services/fetchDataService";
+import AuthenticationService from "../../services/authenticationService";
+import RedirectionService from "../../services/redirectService";
+import ErrorHandlerService from "../../services/errorHandlerService";
+
+class LoginForm extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            username: "",
+            password: "",
+            errorMsg: ""
+        };
+        this.importClasses();
+        this.bindFunction();
+    }
+
+    importClasses() {
+        this.dataService = new FetchDataService();
+        this.errorHandlerService = new ErrorHandlerService();
+        this.authenticationService = new AuthenticationService();
+        this.redirectionService = new RedirectionService();
+    }
+
+    bindFunction() {
+        this.handleClick = this.handleClick.bind(this);
+        this.handleChange = this.handleChange.bind(this);
+    }
+
+    handleChange(event) {
+        const name = event.target.name;
+        this.setState({
+            [name]: event.target.value
+        });
+
+    }
+
+    handleClick() {
+
+        const data = {
+            username: this.state.username,
+            password: this.state.password
+        };
+
+        const msg = this.errorHandlerService.validateLogInForm(data);
+        this.setState({ errorMsg: msg });
+
+        if (msg) {
+            return;
+        } else {
+            this.authenticationService.logIn(data, (success) => {
+                this.redirectionService.redirect("/");
+
+            }, (errorMsg) => {
+                this.setState({ errorMsg: errorMsg });
+            });
+        }
+    }
+
+    render() {
+        return (
+            <div className="row">
+
+                <div className="col s12" id="form">
+                    <div className="row">
+                        <div className="input-field col s6">
+                            <label className="login-form"> Username </label> <br />
+                            <input id="input_text" type="text" data-length="25" name="username"
+                                value={this.state.username} onChange={this.handleChange}
+                            />
+                        </div>
+
+                    </div>
+                    <div className="row">
+                        <div className="input-field col s6">
+                            <label className="login-form"> Password </label><br />
+                            <input id="input_text" type="text" data-length="25" name="password"
+                                value={this.state.password} onChange={this.handleChange}
+                            />
+                        </div>
+                    </div>
+                    <button className="btn btn-secondary btn-lg" type="submit" name="action" id="login" onClick={this.handleClick}>
+                        Login
+                    </button>< br />
+                    <div>{this.state.errorMsg}</div>
+                </div>
+            </div>
+        );
+
+    }
+}
+
+export default LoginForm; 

src/components/login/loginPage.js

@@ -0,0 +1,52 @@
+import React from "react";
+import LoginForm from "./loginForm";
+import RegisterForm from "./registerForm";
+import { Switch, Route } from "react-router-dom";
+import { Link } from "react-router-dom";
+
+
+console.log("Stop! This is a browser feature intended for developers. If someone told you to copy-paste something here to enable a Facebook feature or hack someones account, it is a scam and will give them access to your Facebook account. See bitbook website for more information");
+
+const LoginPage = (props) => {
+    return (
+        <div className="container-fluid">
+            <div className="row" id="mainrow">
+
+                <div className="col-lg-6" id="welcome">
+
+                    <h1>Welcome to BitBook</h1>
+                    <p>Lorem ipsum dolor sit amet, ad vis mazim legere virtute. Per ne labore graecis menandri. Vel mutat causae ut, ferri debet omnium vim et. Ea mel delenit consetetur, ne convenire philosophia pri, equidem omittam blandit no est. Id dicta nostro qui. Reque iisque nominavi sed in, eam in nulla consequat, sea philosophia definitionem et</p>
+                </div>
+
+                <div className="col-lg-6">
+
+
+
+                    <div className="table">
+
+                        <div className="row" id="thead">
+                            <div className="col-sm-6">
+                                <Link to="/login">Login</Link>
+                            </div>
+                            <div className="col-sm-6">
+                                <Link to="/register">Register</Link>
+                            </div>
+                        </div>
+                        <div className="col-lg-12">
+                            <Switch>
+                                <Route exact path="/" component={LoginForm} />
+                                <Route path="/login" component={LoginForm} />
+                                <Route path="/register" component={RegisterForm} />
+                            </Switch>
+                        </div>
+                    </div>
+
+                </div>
+
+            </div>
+        </div>
+    );
+};
+
+
+export default LoginPage;