2 login

README.md

@@ -1 +1,3 @@
-## ReactStarter
+## BitBook
+
+Application by BlueTeam

src/components/app.js

@@ -1,14 +1,16 @@
 import React from "react";
-
-import HelloWorld from "./helloWorld/helloWorld";
+import LoginPage from "./login/loginPage";
+import { Switch, Route } from "react-router-dom";
 
 class App extends React.Component {
     constructor(props) {
         super(props);
     }
 
     render() {
-        return <HelloWorld />;
+        return (
+            <LoginPage />
+        );
     }
 }
 

src/components/login/loginForm.js

@@ -0,0 +1,63 @@
+import React from "react";
+
+import { Link } from "react-router-dom";
+
+class LoginForm extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = this.initState();
+        this.bindEventHandlers();
+    }
+
+
+    initState(){
+        return{
+            email: "",
+            password: ""
+        };
+
+    }
+
+    bindEventHandlers() {
+        this.handleInputChange = this.handleInputChange.bind(this);
+    }
+
+    handleInputChange(event) {
+        const value = event.target.value;
+        const name = event.target.name;
+
+        this.setState({
+            [name]: value
+        });
+    }
+
+    logIn() {
+        event.preventDefault();
+
+    }
+
+
+
+    render() {
+        return (
+            <main>
+                <div>
+                    <Link to="/login"><button>Login</button></Link>
+                    <Link to="/register"><button>Register</button></Link>
+                </div>
+                <form>
+                    <input type="email" name="email" placeholder="Email Address" value={this.state.email} onChange={this.handleInputChange} />
+                    <input type="password" name="password" placeholder="Password" value={this.state.password} onChange={this.handleInputChange} />
+                    <input type="submit" value="Login" onClick={this.logIn} />
+                </form>
+            </main>
+        );
+    }
+
+
+
+
+}
+
+export default LoginForm;

src/components/login/loginPage.js

@@ -0,0 +1,26 @@
+import React from "react";
+import LoginForm from "./loginForm";
+import RegisterForm from "./registerForm";
+import { Switch, Route, Link } from "react-router-dom";
+
+
+
+
+class LoginPage extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <Switch>
+                <Route exact path="/" component={LoginForm} />
+                <Route path="/login" component={LoginForm} />
+                <Route path="/register" component={RegisterForm} />
+            </Switch>
+        );
+    }
+}
+
+
+export default LoginPage;

src/components/login/registerForm.js

@@ -0,0 +1,64 @@
+import React from "react";
+
+import { Link } from "react-router-dom";
+
+class RegisterForm extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = this.initState();
+        this.bindEventHandlers();
+
+    }
+
+    initState(){
+        return{
+            fullName: "",
+            email: "",
+            password: ""
+        };
+
+    }
+
+    bindEventHandlers() {
+        this.handleInputChange = this.handleInputChange.bind(this);
+    }
+
+    handleInputChange(event) {
+        const value = event.target.value;
+        const name = event.target.name;
+
+        this.setState({
+            [name]: value
+        });
+    }
+
+    register() {
+        event.preventDefault();
+
+    }
+
+    render() {
+        return (
+            <main>
+                <div>
+                    <Link to="/login"><button>Login</button></Link>
+                    <Link to="/register"><button>Register</button></Link>
+                </div>
+                <form>
+                    <input type="text" name="fullName" placeholder="Full Name" value={this.state.fullName} onChange={this.handleInputChange} />
+                    <input type="email" name="email" placeholder="Email Address" value={this.state.email} onChange={this.handleInputChange} />
+                    <input type="password" name="password" placeholder="Min 6 characters" value={this.state.password} onChange={this.handleInputChange} />
+                    <input type="submit" value="Register" onClick={this.register} />
+                </form>
+            </main>
+        );
+
+
+    }
+
+
+
+}
+
+export default RegisterForm;

src/index.html

@@ -8,7 +8,7 @@
         <title>My React App</title>
     </head>
     <body>
-        <div class="container"></div>
+        <div class="app"></div>
 
         <script src="bundle.js"></script>
     </body>

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")
 );