Login wip

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/style.css

@@ -0,0 +1,70 @@
+body {
+    background: url(../img/bg.jpg) no-repeat;
+    background-size: cover;
+    background-position-y: 100%;
+    min-height: calc(100vh - 20px);
+    box-sizing: border-box;
+    margin:0;
+    padding: 0;
+
+}
+
+.bitform {
+    border: 1px solid #5c7d72;
+    /* height: 300px; */
+    padding: 2rem !important;
+    margin-top: 2rem;
+    border-radius: 15px;
+}
+li {
+    margin-right: 20px;
+    font-size: 20px;
+}
+.brand-logo {
+    margin-left: 25px;  
+}
+#error{
+    color: red;
+}
+
+.tabs li.tab a.active {
+    background-color: #ee6e73;
+    color: #fff;
+    border-radius: 5px 5px 0 0;
+}
+
+form {
+    margin-top: 2rem;
+}
+
+button.registration {
+    margin-top: 1rem;
+}
+
+
+.center-content {
+    text-align: center;
+    margin: 0 auto;
+}
+
+#logout {
+    padding: 5px 10px;
+    line-height: 1;
+    font-size: 0.8rem;
+    margin-left: 3rem;
+}
+.profile {
+    margin-top: 5rem;
+}
+
+.btn-floating.halfway-fab.editprofile {
+    bottom: 125px;
+}
+
+.ReactModal__Overlay.ReactModal__Overlay--after-open{
+    z-index: 1000;
+}
+
+.closebtn {
+    float: right;
+}

src/components/app.js

@@ -1,15 +1,32 @@
 import React from "react";
-
-import HelloWorld from "./helloWorld/helloWorld";
+import { Switch, Route, Redirect } from "react-router-dom";
+import Welcome from "./login_register/welcome";
+import Main from "./main/main";
+import LoginRegister from "./login_register/loginregister";
+import AuthService from "../service/authService";
 
 class App extends React.Component {
     constructor(props) {
         super(props);
+        this.authService = new AuthService();
     }
 
     render() {
-        return <HelloWorld />;
+        if (this.authService.isUserAuth()) {
+            return <Main />;
+        }
+
+        return (
+            <div className="container">
+                <div className="row">
+                    <Welcome />
+                    <Switch>
+                        <Redirect exact from="/" to="/login" />
+                    </Switch>
+                    <LoginRegister />
+                </div>
+            </div>
+        );
     }
 }
-
 export default App;

src/components/login_register/loginForm.js

@@ -0,0 +1,94 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import AuthService from "../../service/authService";
+import ValidationService from "../../service/validationService";
+
+class LoginForm extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            username: "",
+            password: "",
+            isNotValid: false,
+            errorMsg: ""
+        };
+        this.initBind();
+        this.authService = new AuthService();
+        this.validService = new ValidationService();
+    }
+
+    initBind() {
+        this.handleUsernameChange = this.handleUsernameChange.bind(this);
+        this.handlePasswordChange = this.handlePasswordChange.bind(this);
+        this.loginHandler = this.loginHandler.bind(this);
+    }
+
+    handleUsernameChange(event) {
+        this.setState({
+            username: event.target.value
+        });
+    }
+
+    handlePasswordChange(event) {
+        this.setState({
+            password: event.target.value
+        });
+    }
+
+    login(sessID) {
+        const sessionId = sessionStorage.setItem(SESSION_ID_KEY, JSON.stringify(sessID));
+        console.log("Successfully logged in!");
+    }
+
+    loginHandler() {
+        const data = {
+            username: this.state.username,
+            password: this.state.password
+        };
+
+        if (this.validService.isLoginFormValid(data)) {
+            this.setState({
+                isNotValid: false
+            });
+            this.authService.login(data, (error) => {
+                this.setState({
+                    isNotValid: true,
+                    errorMsg: error
+                });
+            });
+        } else {
+            this.setState({
+                isNotValid: true,
+                errorMsg: "All fields must be filled out!"             
+            });
+        }
+
+    }
+
+    render() {
+        return (
+            <div className="bitform col s6">
+                <div className="col s12">
+                    <ul className="tabs">
+                        <li className="tab col s6"><Link to={"/login"} className="active">Login</Link></li>
+                        <li className="tab col s6"><Link to={"/register"}>Register</Link></li>
+                    </ul>
+                </div>
+
+                <div className="col s12">
+                    <form>
+                        <label htmlFor="username">Username:</label>
+                        <input id="username" type="text" onChange={this.handleUsernameChange} placeholder="Enter Username..." />
+                        <label htmlFor="password">Password:</label>
+                        <input id="password" type="password" onChange={this.handlePasswordChange} placeholder="Enter Password..." />
+                        <button className="waves-effect waves-light btn registration" onClick={this.loginHandler}>Login</button>
+                    </form>
+                    <p id="error">{this.state.isNotValid ? `${this.state.errorMsg}` : ""}</p>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default LoginForm;

src/components/login_register/loginregister.js

@@ -0,0 +1,18 @@
+import React from "react";
+import LoginForm from "./loginForm";
+import RegisterForm from "./registerForm";
+import { Switch, Route } from "react-router-dom";
+
+
+const LoginRegister = (props) => {
+
+    return (
+        <Switch>
+            <Route exact path="/login" component={LoginForm} />
+            <Route path="/register" component={RegisterForm} />
+        </Switch>
+
+    );
+};
+
+export default LoginRegister;

src/components/login_register/registerForm.js

@@ -0,0 +1,126 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import AuthService from "../../service/authService";
+import ValidationService from "../../service/validationService";
+
+class RegisterForm extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            name: "",
+            username: "",
+            email: "",
+            password: "",
+            repeatPassword: "",
+            isNotValid: false,
+            errorMsg: []
+        };
+        this.initBind();
+        this.authService = new AuthService();
+        this.validService = new ValidationService();
+    }
+
+    initBind() {
+        this.handleNameChange = this.handleNameChange.bind(this);
+        this.handleUsernameChange = this.handleUsernameChange.bind(this);
+        this.handleEmailChange = this.handleEmailChange.bind(this);
+        this.handlePasswordChange = this.handlePasswordChange.bind(this);
+        this.handleRepeatPasswordChange = this.handleRepeatPasswordChange.bind(this);
+
+        this.registerHandler = this.registerHandler.bind(this);
+    }
+
+    handleNameChange(event) {
+        this.setState({
+            name: event.target.value
+        });
+    }
+
+    handleUsernameChange(event) {
+        this.setState({
+            username: event.target.value
+        });
+    }
+
+    handlePasswordChange(event) {
+        this.setState({
+            password: event.target.value
+        });
+    }
+    handleRepeatPasswordChange(event) {
+        this.setState({
+            repeatPassword: event.target.value
+        });
+    }
+
+    handleEmailChange(event) {
+        this.setState({
+            email: event.target.value
+        });
+    }
+
+    registerHandler() {
+        const data = {
+            name: this.state.name,
+            username: this.state.username,
+            password: this.state.password,
+            repeatPassword: this.state.repeatPassword,
+            email: this.state.email
+        };
+
+
+        if(this.validService.isRegisterFormValid(data, (errorMsgs)=>{
+            let newarr = errorMsgs;
+            this.setState({
+                isNotValid: true,
+                errorMsg: newarr
+            });
+        })){
+            this.setState({
+                isNotValid: false,
+            });
+            this.authService.register(data, (error) => {
+                this.setState({
+                    isNotValid: true,
+                    errorMsg: error
+                });
+            });
+        }
+
+
+    }
+
+    render() {
+        return (
+            <div className="bitform col s6">
+                <div className="col s12">
+                    <ul className="tabs">
+                        <li className="tab col s6"><Link to={"/login"}>Login</Link></li>
+                        <li className="tab col s6"><Link to={"/register"} className="active">Register</Link></li>
+                    </ul>
+                </div>
+                <div className="col s12">
+                    <form>
+                        <label htmlFor="name">Name:</label>
+                        <input id="name" type="text" onChange={this.handleNameChange} placeholder="Enter first name and last name..." />
+                        <label htmlFor="username">Username:</label>
+                        <input id="username" type="text" onChange={this.handleUsernameChange} placeholder="Enter username..." />
+                        <label htmlFor="email">Email:</label>
+                        <input id="email" type="email" onChange={this.handleEmailChange} placeholder="Enter Email..." />
+                        <label htmlFor="password">Password:</label>
+                        <input id="password" type="password" onChange={this.handlePasswordChange} placeholder="Enter Password..." />
+                        <label htmlFor="repeat-password">Confirm Password:</label>
+                        <input id="repeat-password" type="password" onChange={this.handleRepeatPasswordChange} placeholder="Re-enter Password..." />
+                        <button className="waves-effect waves-light btn registration" onClick={this.registerHandler}>Register</button>
+
+                    </form>
+                    <p id="error">{this.state.isNotValid ? `${this.state.errorMsg}` : ""}</p>
+                </div>
+
+            </div>
+        );
+    }
+}
+
+export default RegisterForm;

src/components/login_register/welcome.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+const Welcome = () => (
+    <div className="col s6">
+        <h1>Welcome to BitBook</h1>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet nisi ac eros interdum rutrum. Nam tincidunt arcu sit amet risus semper commodo. Aliquam cursus consequat ipsum, sed rhoncus sapien. Morbi ac felis id orci tempor iaculis. In sit amet porttitor lacus, ut pretium eros. Praesent mattis consectetur nulla, mollis iaculis lorem aliquam vel. Fusce ultricies, est vel tempus condimentum, augue ante aliquet lorem, at laoreet libero augue quis odio.</p>
+    </div>
+);
+
+
+
+export default Welcome;