From 97cd3dfba16342889d380fdc4fd8f41618eb2c94 Mon Sep 17 00:00:00 2001 From: BIT Student Date: Tue, 21 Nov 2017 16:07:52 +0100 Subject: [PATCH] Login page --- src/assets/css/style.css | 6 ++ src/components/app.js | 19 ++++- src/components/helloWorld/helloWorld.js | 13 ---- src/components/login_register/loginForm.js | 64 +++++++++++++++ src/components/login_register/registerForm.js | 77 +++++++++++++++++++ src/components/login_register/welcome.js | 12 +++ src/components/main.js | 18 +++++ src/index.html | 8 +- src/index.js | 8 +- 9 files changed, 202 insertions(+), 23 deletions(-) create mode 100644 src/assets/css/style.css delete mode 100644 src/components/helloWorld/helloWorld.js create mode 100644 src/components/login_register/loginForm.js create mode 100644 src/components/login_register/registerForm.js create mode 100644 src/components/login_register/welcome.js create mode 100644 src/components/main.js diff --git a/src/assets/css/style.css b/src/assets/css/style.css new file mode 100644 index 0000000..0508f53 --- /dev/null +++ b/src/assets/css/style.css @@ -0,0 +1,6 @@ +.bitform { + border: 1px solid #000; + /* height: 300px; */ + padding: 2rem !important; + margin-top: 2rem; +} \ No newline at end of file diff --git a/src/components/app.js b/src/components/app.js index 688ddcc..e3332b8 100644 --- a/src/components/app.js +++ b/src/components/app.js @@ -1,6 +1,7 @@ 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) { @@ -8,8 +9,18 @@ class App extends React.Component { } render() { - return ; + + return ( +
+
+ + + + +
+
+
+ ); } } - export default App; 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/components/login_register/loginForm.js b/src/components/login_register/loginForm.js new file mode 100644 index 0000000..0570a66 --- /dev/null +++ b/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 ( +
+
+
    +
  • Login
    • +
  • Register
    • +
+
+ +
+
+ + + + + +
+
+
+ ); + } +} + +export default LoginForm; \ No newline at end of file diff --git a/src/components/login_register/registerForm.js b/src/components/login_register/registerForm.js new file mode 100644 index 0000000..43b4d29 --- /dev/null +++ b/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 ( +
+
+
    +
  • Login
    • +
  • Register
    • +
+
+
+
+ + + + + + + + +
+ +
+ +
+ ); + } +} + +export default RegisterForm; \ No newline at end of file diff --git a/src/components/login_register/welcome.js b/src/components/login_register/welcome.js new file mode 100644 index 0000000..a1400d5 --- /dev/null +++ b/src/components/login_register/welcome.js @@ -0,0 +1,12 @@ +import React from "react"; + +const Welcome = () => ( +
+

Welcome to BitBook

+

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.

+
+); + + + +export default Welcome; diff --git a/src/components/main.js b/src/components/main.js new file mode 100644 index 0000000..e1e8756 --- /dev/null +++ b/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 ( + + + + + + ); +}; + +export default Main; \ No newline at end of file diff --git a/src/index.html b/src/index.html index ac437dd..78a6456 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..c5ecb1a 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") + , + document.querySelector("#app") );