Login page

src/assets/css/style.css

@@ -0,0 +1,6 @@
+.bitform {
+    border: 1px solid #000;
+    /* height: 300px; */
+    padding: 2rem !important;
+    margin-top: 2rem;
+}

src/components/app.js

@@ -1,15 +1,26 @@
 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";
 
 class App extends React.Component {
     constructor(props) {
         super(props);
     }
 
     render() {
-        return <HelloWorld />;
+
+        return (
+            <div className="container">
+                <div className="row">
+                    <Welcome />
+                    <Switch>
+                        <Redirect exact from="/" to="/login" />
+                    </Switch>
+                    <Main />
+                </div>
+            </div>
+        );
     }
 }
-
 export default App;

src/components/login_register/loginForm.js

@@ -0,0 +1,64 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+class LoginForm extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            username: "",
+            password: ""
+        };
+
+        this.handleUsernameChange = this.handleUsernameChange.bind(this);
+        this.handlePasswordChange = this.handlePasswordChange.bind(this);
+        this.saveHandler = this.saveHandler.bind(this);
+    }
+
+    handleUsernameChange(event) {
+        this.setState({
+            username: event.target.value
+        });
+        console.log(this.state.username);
+    }
+
+    handlePasswordChange(event) {
+        this.setState({
+            password: event.target.value
+        });
+        console.log(this.state.password);
+    }
+
+    saveHandler() {
+        const data = {
+            username: this.state.username,
+            password: this.state.password
+        };
+        return data;
+    }
+
+    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" onClick={this.saveHandler}>Login</button>
+                    </form>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default LoginForm;

src/components/login_register/registerForm.js

@@ -0,0 +1,77 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+class RegisterForm extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            name: "",
+            email: "",
+            password: ""
+        };
+        this.handleNameChange = this.handleNameChange.bind(this);
+        this.handleEmailChange = this.handleEmailChange.bind(this);
+        this.handlePasswordChange = this.handlePasswordChange.bind(this);
+        this.saveHandler = this.saveHandler.bind(this);
+    }
+
+    handleNameChange(event) {
+        this.setState({
+            name: event.target.value
+        });
+        console.log(this.state.name);
+    }
+
+    handlePasswordChange(event) {
+        this.setState({
+            password: event.target.value
+        });
+        console.log(this.state.password);
+    }
+
+    handleEmailChange(event) {
+        this.setState({
+            email: event.target.value
+        });
+        console.log(this.state.email);
+    }
+
+    saveHandler() {
+        const data = {
+            name: this.state.name,
+            password: this.state.password,
+            email: this.state.email
+        };
+        return data;
+    }
+
+    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"}>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 Name..." />
+                        <label htmlFor="email">Email:</label>
+                        <input id="email" type="text" onChange={this.handleEmailChange} placeholder="Enter Email..." />
+                        <label htmlFor="password">Password:</label>
+                        <input id="password" type="password" onChange={this.handlePasswordChange} placeholder="Enter Password..." />
+                        <button className="waves-effect waves-light btn">Register</button>
+
+                    </form>
+
+                </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;

src/components/main.js

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

src/index.html

@@ -4,12 +4,16 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta http-equiv="X-UA-Compatible" content="ie=edge">
-
         <title>My React App</title>
+        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
+        <link rel="stylesheet" href="assets/css/style.css">
     </head>
     <body>
-        <div class="container"></div>
+        <div id="app"></div>
 
+        <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
         <script src="bundle.js"></script>
     </body>
 </html>

src/index.js

@@ -1,13 +1,13 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import { BrowserRouter } from "react-router-dom";
+import { HashRouter } from "react-router-dom";
 import "babel-polyfill";
 
 import App from "./components/app";
 
 ReactDOM.render(
-    <BrowserRouter>
+    <HashRouter>
         <App />
-    </BrowserRouter>,
-    document.querySelector(".container")
+    </HashRouter>,
+    document.querySelector("#app")
 );