8 profile page

package.json

@@ -9,9 +9,11 @@
   "author": "BIT",
   "license": "ISC",
   "dependencies": {
+    "axios": "^0.17.1",
     "babel-polyfill": "^6.26.0",
     "react": "^16.1.0",
     "react-dom": "^16.1.0",
+    "react-modal": "^3.1.3",
     "react-router-dom": "^4.2.2"
   },
   "devDependencies": {

src/assets/css/main.css

@@ -0,0 +1,113 @@
+html {
+    min-height: 100%;
+}
+
+.bg {
+       background-image: url("https://wallpaperlayer.com/img/2015/6/gaussian-blur-wallpaper-3225-3429-hd-wallpapers.jpg");
+        height: 100%; 
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: cover;
+}
+
+.checked{
+    background-color: rgba(116, 208, 146, 0.2);
+    box-shadow: -12px 11px 34px -1px rgba(44,62,80,0.34);
+}
+
+.hover:link {
+    text-decoration: none;
+}
+
+
+.hover:hover {
+    background-color: rgba(116, 208, 146, 0.2);
+}
+
+.hover:active {
+    box-shadow: -12px 11px 34px -1px rgba(44,62,80,0.34);
+} 
+
+.navColor {
+    background-color: rgba(65, 105, 144, 1);
+}
+
+.navLink:hover {
+    font-weight: bold;
+}
+
+.profileName {
+    font-weight: bold;
+    color: rgba(44, 62, 80, 0.9)
+
+}
+
+.profileButton {
+    margin: 30px 20%;
+}
+
+.loginProfileButton {
+    width: 60%;
+    margin: 10px 0px 30px 0;  
+    box-shadow: -12px 11px 34px -1px rgba(44,62,80,0.34); 
+}
+
+.loginProfileButton:hover {
+    width: 90%;
+}
+
+.updateProfileForm {
+    display: block;
+    width: 60%;
+    margin: 30px auto;
+}
+
+.updateProfileCloseButton {
+   float: right;
+   margin-bottom: 30px;
+   width: 20%;
+}
+
+.updateProfileCloseButton:hover {
+    width: 30%;
+}
+
+.updateProfileUpdateButton {
+    width: 30%;
+
+}
+
+.updateProfileUpdateButton:hover {
+    width: 40%; 
+}
+
+.updateProfileHeading {
+    color: rgba(67, 93, 119,0.9);
+}
+
+.modalNavColor {
+    background-color: rgba(116, 162, 208, 0.3);
+}
+
+.labelStyle {
+    color: rgba(46, 79, 96, 0.9);
+}
+
+.entryPageButton {
+    width: 25%;
+}
+.entryPageButton:hover {
+    width: 50%;
+}
+
+.welcomeStyle {
+    text-align: center;
+    color: rgba(44, 62, 80, 1);
+    padding-right: 15%;
+    line-height: 2em;
+}
+
+
+
+
+

src/components/app.js

@@ -1,14 +1,32 @@
 import React from "react";
+import { Switch, Route, Redirect } from "react-router-dom";
 
-import HelloWorld from "./helloWorld/helloWorld";
+import EntryPage from "./entryPage/entryPage";
+import Main from "./userPages/main";
+
+import AuthenticationService from "../services/authenticationService";
 
 class App extends React.Component {
     constructor(props) {
         super(props);
+
+        this.auth = new AuthenticationService();
     }
 
     render() {
-        return <HelloWorld />;
+        if (!this.auth.isUserAuthenticated()) {
+            return (
+                <div className="container">
+                    <Switch>
+                        <Redirect exact from='/' to='/login' />
+                        <Route path='/login' component={EntryPage} />
+                        <Route path='/register' component={EntryPage} />
+                    </Switch>
+                </div>
+            );
+        }
+
+        return <Main  />;
     }
 }
 

src/components/common/header.js

@@ -0,0 +1,59 @@
+import React, { Component } from "react";
+import { Link } from "react-router-dom";
+
+import AuthenticationService from "../../services/authenticationService";
+
+const navLinkStyle = {
+    transition: "font-weight 0.2s",
+    transitionTimingFunction: "step-start",
+    paddingLeft: "25px"
+
+};
+
+class Header extends Component {
+    constructor(props) {
+        super(props);
+
+        this.logout = new AuthenticationService();
+    }
+    render() {
+        return (
+            <div>
+                <nav className="navbar navbar-expand-lg navbar-dark navColor ">
+                    <Link to="feed">
+                        <p className="navbar-brand" style={{ fontSize: "1.7em", fontWeight: "bold", paddingLeft: "15px", paddingTop: "10px" }}>BitBook</p>
+                    </Link>
+                    <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
+                        <span className="navbar-toggler-icon"></span>
+                    </button>
+                    <div className="collapse navbar-collapse justify-content-end pull-right" id="navbarColor01">
+                        <ul className="navbar-nav" style={{ fontSize: "1.2em" }}>
+                            <Link to="/feed">
+                                <li className="nav-item">
+                                    <p className="nav-link navLink" style={navLinkStyle}>Feed <span className="sr-only">(current)</span></p>
+                                </li>
+                            </Link>
+                            <Link to="/people">
+                                <li className="nav-item navLink" style={navLinkStyle}>
+                                    <p className="nav-link">People</p>
+                                </li>
+                            </Link>
+                            <Link to="/profile">
+                                <li className="nav-item navLink" style={navLinkStyle}>
+                                    <p className="nav-link">Profile</p>
+                                </li>
+                            </Link>
+                            <Link to="/login">
+                                <li className="nav-item navLink" style={navLinkStyle} onClick={this.logout.logout}>
+                                    <p className="nav-link">Log Out</p>
+                                </li>
+                            </Link>
+                        </ul>
+                    </div>
+                </nav>
+            </div>
+        );
+    }
+}
+
+export default Header;

src/components/entryPage/entryPage.js

@@ -0,0 +1,63 @@
+import React from "react";
+import { Switch, Route } from "react-router-dom";
+import { Link } from "react-router-dom";
+
+import Login from "./login";
+import Register from "./register";
+import Welcome from "./welcome";
+
+const formStyle = {
+    fontSize: "1.5em",
+    padding: "5px",
+    float: "left",
+    borderRadius: "5px",
+    width: "50%",
+    height: "50px",
+    textAlign: "center",
+    margin: "10px 0",
+    color: "rgba(46, 79, 96, 0.7)"
+};
+
+const switchBox = {
+    borderRadius: "5px",
+    boxShadow: "-12px 11px 34px -1px rgba(44,62,80,0.34)",
+    display: "inline-block",
+    width: "100%",
+    backgroundColor: "rgba(116, 208, 146, 0.2)",
+    padding: "30px 20px 20px 20px",
+    minHeight: "400px",
+    positon: "relative"
+};
+
+class EntryPage extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <div className="row" style={{ marginTop: "100px" }}>
+                <div className="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
+                    <Welcome />
+                </div>
+                <div className="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 table">
+                    <div>
+                        <Link to="/"><h3 style={formStyle} className={ window.location.hash.indexOf("/register") !== -1 ? "hover" : "hover checked"} onClick={this.changeClass} >Log In</h3></Link>
+                        <Link to="/register"><h3 style={formStyle} className={ window.location.hash.indexOf("/register") !== -1 ? "hover checked" : "hover"}>Register</h3></Link>
+                    </div>
+                    <div style={switchBox}>
+                        <div>
+                            <Switch>
+                                <Route exact path="/login" component={Login} />
+                                <Route exact path="/register" component={Register} />
+                            </Switch>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        );
+    }
+}
+
+export default EntryPage;