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