UI partly done

src/assets/css/main.css

@@ -0,0 +1,15 @@
+.hover:active {
+    background-color: rgb(104, 187, 231);
+}
+
+.hover:hover {
+    background-color: rgb(104, 187, 231);
+}
+
+.hover:visited {
+    background-color: rgb(104, 187, 231);
+}
+
+.hover:link {
+    background-color: rgb(104, 187, 231);
+}

src/components/app.js

@@ -1,14 +1,18 @@
 import React from "react";
 
-import HelloWorld from "./helloWorld/helloWorld";
+import EntryPage from "./entryPage/entryPage";
 
 class App extends React.Component {
     constructor(props) {
         super(props);
     }
 
     render() {
-        return <HelloWorld />;
+        return (
+            <div className="container">
+                <EntryPage />
+            </div>
+        );
     }
 }
 

src/components/entryPage/entryPage.js

@@ -0,0 +1,58 @@
+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: "287px"
+};
+
+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="hover">Log In</h3></Link>
+                        <Link to="/register"><h3 style={formStyle} className="hover">Register</h3></Link>
+                    </div>
+                    <div style={switchBox}>
+                        <Switch>
+                            <Route exact path="/" component={Login} />
+                            <Route exact path="/register" component={Register} />
+                        </Switch>
+                    </div>
+                </div>
+            </div>
+
+        );
+    }
+}
+
+export default EntryPage;

src/components/entryPage/login.js

@@ -0,0 +1,64 @@
+import React from "react";
+
+class Login extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            emailInput: "",
+            passInput: "",
+            isFormValid: false
+        };
+
+        this.bindInit();
+    }
+
+    bindInit() {
+        this.getEmailInput = this.getEmailInput.bind(this);
+        this.getPassInput = this.getPassInput.bind(this);
+    }
+
+    getEmailInput(event) {
+        const emailInput = event.target.value;
+
+        this.setState({
+            emailInput
+        });
+    }
+
+    getPassInput() {
+        const passInput = event.target.value;
+
+        this.setState({
+            passInput
+        });
+    }
+
+    handleLoginRequest() {
+        const emailInput = this.state.emailInput;
+        const passInput = this.state.passInput;
+
+        // if(!emailInput || !passInput) {
+        //     let invalidInput = this.refs.inputDiv.getDOMNode();
+        //     // invalidInput.innerHTML = "Unable to login. Invalid credentials";
+        // }
+    }
+
+    render() {
+        return (
+            <div ref="loginDiv">
+                <label htmlFor="loginEmail"><b>Email</b></label>
+                <br/>
+                <input type="email" id="loginEmail" onChange={this.getEmailInput} placeholder="Email" style={{marginBottom: "5px", width: "100%"}} />
+                <br/>
+                <label htmlFor="loginPass"><b>Password</b></label>
+                <br/>
+                <input type="password" id="loginPass" onChange={this.getPassInput} placeholder="Password" style={{marginBottom: "15px", width: "100%"}} />
+                <br/>
+                <input type="button" id="loginButton" value="Login" onClick={this.handleLoginRequest} style={{marginLeft: "83%", borderRadius: "5px", width: "80px", position: "relative", top: "70px"}} />
+            </div>
+        );
+    }
+}
+
+export default Login;

src/components/entryPage/register.js

@@ -0,0 +1,68 @@
+import React from "react";
+
+class Register extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            fullName: "",
+            registerEmail: "",
+            registerPass: ""
+        };
+
+        this.initBind();
+    }
+
+    initBind() {
+        this.getFullName = this.getFullName.bind(this);
+        this.getPasswordInput = this.getPasswordInput.bind(this);
+        this.getEmailInput = this.getEmailInput.bind(this);
+    }
+
+    getFullName(event) {
+        let fullName = event.target.value;
+
+        this.setState({
+            fullName
+        });
+        console.log(this.state.fullName);
+    }
+
+    getPasswordInput(event) {
+        let registerPass = event.target.value;
+
+        this.setState({
+            registerPass
+        });
+    }
+
+    getEmailInput(event) {
+        let registerEmail = event.target.value;
+
+        this.setState({
+            registerEmail
+        });
+    }
+
+    render() {
+        return (
+            <div>
+                <label htmlFor="fullName"><b>Name</b></label>
+                <br />
+                <input type="text" id="fullName" onChange={this.getFullName} value={this.state.fullName} placeholder="Full Name" style={{marginBottom: "5px", width: "100%"}} />
+                <br />
+                <label htmlFor="registerEmail"><b>Email</b></label>
+                <br />
+                <input type="email" id="registerEmail" onChange={this.getEmailInput} placeholder="Email Address" style={{marginBottom: "5px", width: "100%"}} />
+                <br />
+                <label htmlFor="registerPass"><b>Password</b></label>
+                <br />
+                <input type="password" id="registerPass" onChange={this.getPasswordInput} placeholder="Min 6 characters" style={{marginBottom: "15px", width: "100%"}}  />
+                <br />
+                <input type="button" id="registerButton" value="Register" style={{marginLeft: "83%", borderRadius: "5px", width: "80px"}} />
+            </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;

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">
-
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
+        <link rel="stylesheet" href="assets/css/main.css">
         <title>My React App</title>
     </head>
     <body>
         <div class="container"></div>
 
+        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
+        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></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>,
+    </HashRouter>,
     document.querySelector(".container")
 );