From 5a8131bdd236ae8e50b32c2601b47bae893f442a Mon Sep 17 00:00:00 2001 From: BIT Student Date: Tue, 21 Nov 2017 16:23:59 +0100 Subject: [PATCH] UI partly done --- src/assets/css/main.css | 15 ++++++ src/components/app.js | 8 ++- src/components/entryPage/entryPage.js | 58 +++++++++++++++++++++ src/components/entryPage/login.js | 64 +++++++++++++++++++++++ src/components/entryPage/register.js | 68 +++++++++++++++++++++++++ src/components/entryPage/welcome.js | 12 +++++ src/components/helloWorld/helloWorld.js | 13 ----- src/index.html | 6 ++- src/index.js | 6 +-- 9 files changed, 231 insertions(+), 19 deletions(-) create mode 100644 src/assets/css/main.css create mode 100644 src/components/entryPage/entryPage.js create mode 100644 src/components/entryPage/login.js create mode 100644 src/components/entryPage/register.js create mode 100644 src/components/entryPage/welcome.js delete mode 100644 src/components/helloWorld/helloWorld.js diff --git a/src/assets/css/main.css b/src/assets/css/main.css new file mode 100644 index 0000000..714cb5b --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/src/components/app.js b/src/components/app.js index 688ddcc..ec1b800 100644 --- a/src/components/app.js +++ b/src/components/app.js @@ -1,6 +1,6 @@ import React from "react"; -import HelloWorld from "./helloWorld/helloWorld"; +import EntryPage from "./entryPage/entryPage"; class App extends React.Component { constructor(props) { @@ -8,7 +8,11 @@ class App extends React.Component { } render() { - return ; + return ( +
+ +
+ ); } } diff --git a/src/components/entryPage/entryPage.js b/src/components/entryPage/entryPage.js new file mode 100644 index 0000000..8ad449f --- /dev/null +++ b/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 ( +
+
+ +
+
+
+

Log In

+

Register

+
+
+ + + + +
+
+
+ + ); + } +} + +export default EntryPage; diff --git a/src/components/entryPage/login.js b/src/components/entryPage/login.js new file mode 100644 index 0000000..801da41 --- /dev/null +++ b/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 ( +
+ +
+ +
+ +
+ +
+ +
+ ); + } +} + +export default Login; \ No newline at end of file diff --git a/src/components/entryPage/register.js b/src/components/entryPage/register.js new file mode 100644 index 0000000..eb5ecef --- /dev/null +++ b/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 ( +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ ); + } +} + +export default Register; \ No newline at end of file diff --git a/src/components/entryPage/welcome.js b/src/components/entryPage/welcome.js new file mode 100644 index 0000000..6d66c7a --- /dev/null +++ b/src/components/entryPage/welcome.js @@ -0,0 +1,12 @@ +import React from "react"; + +const Welcome = () => { + return ( +
+

Welcome to BitBook

+

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.

+
+ ); +}; + +export default Welcome; \ No newline at end of file diff --git a/src/components/helloWorld/helloWorld.js b/src/components/helloWorld/helloWorld.js deleted file mode 100644 index c0ba8a7..0000000 --- a/src/components/helloWorld/helloWorld.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from "react"; - -class HelloWorld extends React.Component { - constructor(props) { - super(props); - } - - render() { - return

Hello World!

; - } -} - -export default HelloWorld; diff --git a/src/index.html b/src/index.html index ac437dd..fc39758 100644 --- a/src/index.html +++ b/src/index.html @@ -4,12 +4,16 @@ - + + My React App
+ + + diff --git a/src/index.js b/src/index.js index 80d7d1b..7cb4896 100644 --- a/src/index.js +++ b/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( - + - , + , document.querySelector(".container") );