Task search

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": {

reminder.txt

@@ -0,0 +1,5 @@
+-izvuci podatke za svakog user-a preko profile DTO
+-uradi validaciju edit profile forme
+-sa stranice People do svog naloga treba da dodjes na stranicu profile koja ima edit dugme, a ne na stranicu People/:userID
+-sredi Search dugme
+-sredi div za error na login formi i na register formi

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 />;
+
+        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,12 @@
+import React from "react";
+
+const Footer = () => {
+    return (
+
+        <footer className="footer">
+           Copyright Ⓒ  <span > Team Candies </span>
+        </footer>
+    );
+
+};
+export default Footer;

src/components/common/header.js

@@ -0,0 +1,36 @@
+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">
+            <div className='container'>
+                <Link className="navbar-brand" to="/feed">Bitbook</Link>
+
+                <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 active">
+                            <Link className="nav-link" to="/people">People<span className="sr-only">(current)</span></Link>
+                        </li>
+                        <li className="nav-item active">
+                            <Link className="nav-link" to="/feed">Feed<span className="sr-only">(current)</span></Link>
+                        </li>
+                    </ul>
+
+                    <LogOutButton />
+                </div>
+            </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,33 @@
+import React from "react";
+import Header from "./header";
+import Footer from "./footer";
+import ProfilePage from "../profile/profilePage";
+import { Switch, Route } from "react-router-dom";
+import People from "../peoplePage/people";
+import UserProfile from "../peoplePage/userProfile";
+import FeedPage from "../feed/feedPage";
+
+class MainPage extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (
+            <div>
+                <Header />
+
+                <Switch>
+                    <Route exact path="/profile" component={ProfilePage} />
+                    <Route exact path="/people" component={People} />
+                    <Route path="/people/:id" component={UserProfile} />
+                    <Route path="/feed" component={FeedPage} />
+
+                </Switch>
+
+                <Footer />
+            </div>
+        );
+    }
+};
+
+export default MainPage;

src/components/common/searchInput.js

@@ -0,0 +1,32 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+
+export default class Search extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            searchString: ""
+        };
+        this.handleChange = this.handleChange.bind(this);
+    }
+
+    handleChange(event) {
+        const value = event.target.value;
+        this.setState({ searchString: value });
+
+        this.props.useSearchString(value);
+    }
+
+    render() {
+        return (<div className="col-12">
+            <input className="searchInput" value={this.state.searchString} onChange={this.handleChange} placeholder="Search" />
+        </div>
+        );
+    }
+
+}
+Search.propTypes = {
+    useSearchString: PropTypes.func,
+};
+

src/components/feed/feedPage.js

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

src/components/login/loginForm.js

@@ -0,0 +1,111 @@
+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 HandleErrorService from "../../services/handleError";
+
+class LoginForm extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            username: "",
+            password: "",
+            emptyInput: "",
+            passLength: "",
+            invalidEmail: "",
+            errorMsgServer: ""
+        };
+        this.importClasses();
+        this.bindFunction();
+    }
+
+    importClasses() {
+        this.dataService = new FetchDataService();
+        this.authenticationService = new AuthenticationService();
+        this.redirectionService = new RedirectionService();
+        this.handleErrorService = new HandleErrorService();
+    }
+
+    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 emptyInput = this.handleErrorService.validateEmptyField(data);
+        const passLength = this.handleErrorService.validateInputLength(data.password, 1);
+        const invalidEmail = this.handleErrorService.validateEmail(data.username);
+
+        this.setState({
+            emptyInput: emptyInput,
+            passLength: passLength,
+            invalidEmail: invalidEmail
+        });
+
+        if (emptyInput || passLength || invalidEmail) {
+            return;
+        } else {
+            this.authenticationService.logIn(data, (success) => {
+                this.redirectionService.redirect("/");
+
+            }, (errorMsg) => {
+                this.setState({ errorMsgServer: 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><br />
+                        <div>{this.state.invalidEmail}</div>
+
+
+                    </div>
+                    <div className="row">
+                        <div className="input-field col s6">
+                            <label className="login-form"> Password </label><br />
+                            <input id="input_text" type="password" data-length="25" name="password"
+                                value={this.state.password} onChange={this.handleChange}
+                            />
+                        </div><br />
+                        <div>{this.state.passLength}</div>
+                    </div>
+                    <div>{this.state.emptyInput}</div>
+                    <button className="btn btn-secondary btn-lg" type="submit" name="action" id="login" onClick={this.handleClick}>
+                        Login
+                    </button>< br />
+
+                </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 logInPage'>
+            <div className="container logInForm">
+                <div className="row" >
+                    <div className="col-lg-6 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 btnBlue radiusBtnLeft">
+                                    <Link to="/login">Login</Link>
+                                </div>
+                                <div className="col-sm-6 btnBlue radiusBtnRight">
+                                    <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>
+        </div>
+    );
+};
+
+
+export default LoginPage;