Dandrugi

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,14 +1,33 @@
 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 Header from "./common/header";
+
+
+
 
-import HelloWorld from "./helloWorld/helloWorld";
 
 class App extends React.Component {
     constructor(props) {
         super(props);
     }
 
     render() {
-        return <HelloWorld />;
+
+        return (
+
+            <div>
+                <Switch>
+                    <Route exact path="/" component={LoginPage} />   
+
+                    <Route path="/login" component={LoginPage} />
+                    <Route path="/register" component={LoginPage} />
+                </Switch>
+            </div>
+        );
     }
 }
 

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,34 @@
+import React from "react";
+
+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">
+                        <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>
+
+                </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>
+        </div>
+
+
+
+    );
+};
+
+export default Header;

src/components/common/mainPage.js

@@ -0,0 +1,22 @@
+import React from "react";
+import Header from "./header";
+import AuthenticationService from "../../services/authenticationService";
+
+
+class MainPage extends React.Component {
+    constructor(props) {
+        super(props);
+        this.AuthenticationService = new AuthenticationService();
+
+    }
+
+    render() {
+        return (
+            <div>
+                <Header />
+            </div>
+        );
+    }
+};
+
+export default MainPage;

src/components/login/loginForm.js

@@ -0,0 +1,87 @@
+import React from "react";
+
+import FetchDataService from "../../services/fetchDataService";
+import AuthenticationService from "../../services/authenticationService";
+
+class LoginForm extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            username: "",
+            password: ""
+        };
+        this.dataService = new FetchDataService();
+        this.authenticationService = new AuthenticationService();
+
+        this.usernameEntry = this.usernameEntry.bind(this);
+        this.passwordEntry = this.passwordEntry.bind(this);
+        this.handleClick = this.handleClick.bind(this);
+        this.handleClickLogOut = this.handleClickLogOut.bind(this);
+
+    }
+    usernameEntry(event) {
+        const usernameValue = event.target.value;
+        this.setState({
+            username: usernameValue
+        });
+
+    };
+
+    passwordEntry(event) {
+        const passwordValue = event.target.value;
+        this.setState({
+            password: passwordValue
+        });
+    };
+
+    handleClick(){
+        const data = {
+            username: this.state.username,
+            password: this.state.password
+        };
+
+        this.authenticationService.logIn(data);
+        // this.dataService.post("/login",data, (response)=>{console.log(response);});
+
+
+    }
+    handleClickLogOut(){
+        this.authenticationService.logOut();
+    }
+
+
+    render() {
+        return (
+            <div className="row">
+
+                <form 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"
+                                value={this.state.username} onChange={this.usernameEntry}
+                            />
+                        </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"
+                                value={this.state.password} onChange={this.passwordEntry}
+                            />
+                        </div>
+                    </div>
+                    <button className="btn btn-secondary btn-lg" type="submit" name="action" id="login" onClick= {this.handleClick}>
+                    Login
+                    </button>< br />
+                    <button className="btn btn-secondary btn-lg" type="button" name="action" id="login" onClick= {this.handleClickLogOut}>
+                    LogOut
+                    </button>
+                </form>
+            </div>
+        );
+
+    }
+}
+
+export default LoginForm; 

src/components/login/loginPage.js

@@ -0,0 +1,69 @@
+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";
+
+
+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} />
+>>
+
+
+                    <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 >
+    );
+};
+
+
+export default LoginPage;