Button highlight

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/assets/css/main.css

@@ -0,0 +1,25 @@
+
+.checked{
+    background-color: rgb(104, 187, 231);
+}
+
+.hover:link {
+    text-decoration: none;
+}
+
+.hover:visited {
+    background-color: rgb(104, 187, 231);
+}
+
+.hover:hover {
+    background-color: rgb(104, 187, 231);
+}
+
+.hover:active {
+    background-color: rgb(104, 187, 231);
+} 
+
+
+
+
+

src/components/app.js

@@ -1,14 +1,34 @@
 import React from "react";
+import { Switch, Route, Redirect } from "react-router-dom";
 
-import HelloWorld from "./helloWorld/helloWorld";
+import EntryPage from "./entryPage/entryPage";
+import MainFeed from "./mainFeed/mainFeed";
+
+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 (
+            <MainFeed  />
+        );
     }
 }
 

src/components/entryPage/entryPage.js

@@ -0,0 +1,60 @@
+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: "3px",
+    border: "1px solid black",
+    float: "left",
+    borderRadius: "5px",
+    width: "50%",
+    textAlign: "center"
+};
+
+const switchBox = {
+    border: "1px solid black",
+    borderRadius: "5px",
+    display: "inline-block",
+    width: "100%",
+    backgroundColor: "rgb(104, 187, 231)",
+    padding: "15px",
+    height: "415px"
+};
+
+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;

src/components/entryPage/login.js

@@ -0,0 +1,116 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+import AuthenticationService from "../../services/authenticationService";
+import MainFeed from "../mainFeed/mainFeed";
+
+class Login extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            emailInput: "",
+            passInput: "",
+            errorMessage: "The password has to have at least 6 characters",
+            isThereError: false,
+            isDisabled: true
+        };
+
+        this.authService = new AuthenticationService();
+
+        this.bindInit();
+    }
+
+    bindInit() {
+        this.getEmailInput = this.getEmailInput.bind(this);
+        this.getPassInput = this.getPassInput.bind(this);
+        this.handleLoginRequest = this.handleLoginRequest.bind(this);
+        this.handleKeyPress = this.handleKeyPress.bind(this);
+        this.validateEmail = this.validateEmail.bind(this);
+    }
+
+    getEmailInput(event) {
+        const emailInput = event.target.value;
+
+        this.setState({
+            emailInput
+        });
+    }
+
+
+    getPassInput(event) {
+        const passInput = event.target.value;
+
+        this.setState({
+            passInput
+        });
+
+        if (passInput.length < 4) {
+            this.setState({
+                isThereError: true,
+                isDisabled: true
+            });
+        } else {
+            this.setState({
+                isThereError: false,
+                isDisabled: false
+            });
+        }
+    }
+
+    validateEmail(email) {
+        var re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        return re.test(email);
+    }
+
+    handleLoginRequest() {
+        const emailInput = this.state.emailInput;
+        const passInput = this.state.passInput;
+        if (this.validateEmail(emailInput) && passInput.length >= 4) {
+
+            const userData = {
+                username: emailInput,
+                password: passInput
+            };
+            console.log(userData);
+
+            this.authService.login(userData);
+
+            this.setState({
+                emailInput: "",
+                passInput: ""
+            });
+        }
+        else
+            return;
+    }
+
+    handleKeyPress(e) {
+        if (e.key === "Enter") {
+            this.handleLoginRequest();
+        }
+    }
+
+    render() {
+        const clName = this.state.isDisabled ? "disabled" : "";
+
+        return (
+            <div ref="loginDiv">
+                <form>
+                    <label htmlFor="loginEmail"><b>Email</b></label>
+                    <br />
+                    <input type="email" id="loginEmail" onChange={this.getEmailInput} onKeyPress={this.handleKeyPress} value={event.target.value} placeholder="Email" style={{ marginBottom: "5px", width: "100%" }} />
+                    <br />
+                    <label htmlFor="loginPass"><b>Password</b></label>
+                    <br />
+                    <input type="password" id="loginPass" onChange={this.getPassInput} onKeyPress={this.handleKeyPress} value={event.target.value} placeholder="Password" style={{ marginBottom: "15px", width: "100%" }} />
+                    <br />
+                    <button className={`btn btn-primary ${clName}`} id="loginButton" onClick={this.handleLoginRequest} style={{ marginLeft: "83%", borderRadius: "5px", width: "80px", position: "relative", top: "130px" }}>Login</button>
+                    <p id="error"> {this.state.isThereError ? this.state.errorMessage : ""} </p>
+                </form>
+            </div>
+        );
+    }
+}
+
+export default Login;

src/components/entryPage/register.js

@@ -0,0 +1,126 @@
+import React from "react";
+
+import AuthenticationService from "../../services/authenticationService";
+import ValidationService from "../../services/validationService";
+import RedirectionService from "../../services/redirectionService";
+
+class Register extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            nameString: "",
+            emailString: "",
+            passwordString: "",
+            usernameString: "",
+            confirmedPassword: "",
+            isDisabled: true
+        };
+
+        this.bindInit();
+
+        this.redirection = new RedirectionService();
+        this.authentication = new AuthenticationService();
+        this.validation = new ValidationService();
+    }
+
+    bindInit() {
+        this.nameChangeHandler = this.nameChangeHandler.bind(this);
+        this.emailChangeHandler = this.emailChangeHandler.bind(this);
+        this.passwordChangeHandler = this.passwordChangeHandler.bind(this);
+        this.usernameChangeHandler = this.usernameChangeHandler.bind(this);
+        this.allRegisterData = this.allRegisterData.bind(this);
+        this.passwordConfirmedHandler = this.passwordConfirmedHandler.bind(this);
+    }
+
+    nameChangeHandler(event) {
+        const usernameString = event.target.value;
+
+        this.setState({
+            usernameString
+        });
+    }
+    usernameChangeHandler(event) {
+        const nameString = event.target.value;
+
+        this.setState({
+            nameString
+        });
+    }
+    emailChangeHandler(event) {
+        const emailString = event.target.value;
+
+        this.setState({
+            emailString
+        });
+    }
+    passwordChangeHandler(event) {
+        const passwordString = event.target.value;
+
+        this.setState({
+            passwordString
+        });
+    }
+    passwordConfirmedHandler(event) {
+        const confirmedPassword = event.target.value;
+
+        this.setState({
+            confirmedPassword,
+            isDisabled: false
+        });
+    }
+
+    allRegisterData() {
+        let userData = {
+            username: this.state.emailString,
+            password: this.state.passwordString,
+            confirmedPassword: this.state.confirmedPassword,
+            email: this.state.emailString,
+            name: this.state.usernameString
+        };
+
+        let validateChecker = this.validation.validateEverything(userData);
+
+        if (validateChecker) {
+            delete userData.confirmedPassword;
+            this.authentication.register(userData);
+            this.redirection.redirect("");
+        }
+    }
+
+
+
+
+    render() {
+        const clName = this.state.isDisabled ? "disabled" : "";
+
+        return (
+            <div>
+                <form>
+                    <label htmlFor="fullName"><b>Name</b></label>
+                    <br />
+                    <input type="text" id="fullName" onChange={this.nameChangeHandler} value={event.target.value} placeholder="Name" style={{ marginBottom: "5px", width: "100%" }} />
+                    <br />
+                    <label htmlFor="surname"><b>Surname</b></label>
+                    <br />
+                    <input type="text" id="surname" onChange={this.usernameChangeHandler} value={event.target.value} placeholder="Surname" style={{ marginBottom: "5px", width: "100%" }} />
+                    <br />
+                    <label htmlFor="registerEmail"><b>Email</b></label>
+                    <br />
+                    <input type="email" id="registerEmail" onChange={this.emailChangeHandler} value={event.target.value} placeholder="Email Address" style={{ marginBottom: "5px", width: "100%" }} />
+                    <br />
+                    <label htmlFor="registerPass"><b>Password</b></label>
+                    <br />
+                    <input type="password" id="registerPass" onChange={this.passwordChangeHandler} value={event.target.value} placeholder="Min 6 characters" style={{ marginBottom: "15px", width: "100%" }} />
+                    <br />
+                    <label htmlFor="repeatedPass"><b>Repeat Password</b></label>
+                    <br />
+                    <input type="password" id="repeatedPass" onChange={this.passwordConfirmedHandler} value={event.target.value} placeholder="Min 6 characters" style={{ marginBottom: "15px", width: "100%" }} />
+                    <br />
+                    <button className={`btn btn-primary ${clName}`} id="registerButton" onClick={this.allRegisterData} style={{ marginLeft: "83%", borderRadius: "5px", width: "80px" }}>Register</button>
+                </form>
+            </div>
+        );
+    }
+}
+
+export default Register;

src/components/entryPage/welcome.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+const Welcome = () => {
+    return (
+        <div>
+            <h1 style={{fontSize: "2em"}}>Welcome to BitBook</h1>
+            <p>Fugiat voluptate laborum esse nulla non culpa non quis reprehenderit et veniam. Nulla laborum aliquip qui anim officia laborum. Exercitation ea voluptate sit magna eiusmod amet quis. Nisi laborum qui eu magna aliqua exercitation esse commodo proident do elit quis consectetur reprehenderit. Commodo reprehenderit ex commodo voluptate ipsum minim anim incididunt ullamco. Proident enim laboris aute officia exercitation deserunt eu ipsum enim aute sunt. Eiusmod id officia in ea.</p>
+        </div>
+    );
+};
+
+export default Welcome;