Login and Signup forms completed. Axios not added

Author: Toruitas

djsr/frontend/src/components/App.js

@@ -1,13 +1,29 @@
 import React, { Component} from "react";
+import { Switch, Route, Link } from "react-router-dom";
+import Login from "./login";
+import Signup from "./signup";
 
-class App extends Component{
-  render(){
-    return(
-      <div className="site">
-        <h1>Ahhh after 10,000 years I'm free. Time to conquer the Earth!</h1>
-      </div>
-    );
-  }
+class App extends Component {
+    render() {
+        return (
+            <div className="site">
+                <nav>
+                    <Link className={"nav-link"} to={"/"}>Home</Link>
+                    <Link className={"nav-link"} to={"/login/"}>Login</Link>
+                    <Link className={"nav-link"} to={"/signup/"}>Signup</Link>
+                </nav>
+                <main>
+                    <h1>Ahhh after 10,000 years I'm free. Time to conquer the Earth!</h1>
+
+                    <Switch>
+                        <Route exact path={"/login/"} component={Login}/>
+                        <Route exact path={"/signup/"} component={Signup}/>
+                        <Route path={"/"} render={() => <div>Home again</div>}/>
+                    </Switch>
+                </main>
+            </div>
+        );
+    }
 }
 
 export default App;

djsr/frontend/src/components/login.js

@@ -0,0 +1,40 @@
+import React, { Component } from "react";
+
+class Login extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {username: "", password: ""};
+
+        this.handleChange = this.handleChange.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+    }
+
+    handleChange(event) {
+        this.setState({[event.target.name]: event.target.value});
+    }
+
+    handleSubmit(event) {
+        alert('A username and password was submitted: ' + this.state.username + " " + this.state.password);
+        event.preventDefault();
+    }
+
+    render() {
+        return (
+            <div>
+                Login
+                <form onSubmit={this.handleSubmit}>
+                    <label>
+                        Username:
+                        <input name="username" type="text" value={this.state.username} onChange={this.handleChange}/>
+                    </label>
+                    <label>
+                        Password:
+                        <input name="password" type="password" value={this.state.password} onChange={this.handleChange}/>
+                    </label>
+                    <input type="submit" value="Submit"/>
+                </form>
+            </div>
+        )
+    }
+}
+export default Login;

djsr/frontend/src/components/signup.js

@@ -0,0 +1,48 @@
+import React, { Component } from "react";
+
+class Signup extends Component{
+    constructor(props){
+        super(props);
+        this.state = {
+            username: "",
+            password: "",
+            email:""
+        };
+
+        this.handleChange = this.handleChange.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+    }
+
+    handleChange(event) {
+        this.setState({[event.target.name]: event.target.value});
+    }
+
+    handleSubmit(event) {
+        alert('A username and password was submitted: ' + this.state.username + " " + this.state.password + " " + this.state.email);
+        event.preventDefault();
+    }
+
+    render() {
+        return (
+            <div>
+                Signup
+                <form onSubmit={this.handleSubmit}>
+                    <label>
+                        Username:
+                        <input name="username" type="text" value={this.state.username} onChange={this.handleChange}/>
+                    </label>
+                    <label>
+                        Email:
+                        <input name="email" type="email" value={this.state.email} onChange={this.handleChange}/>
+                    </label>
+                    <label>
+                        Password:
+                        <input name="password" type="password" value={this.state.password} onChange={this.handleChange}/>
+                    </label>
+                    <input type="submit" value="Submit"/>
+                </form>
+            </div>
+        )
+    }
+}
+export default Signup;

djsr/frontend/src/index.js

@@ -1,5 +1,10 @@
 import React from 'react'
 import {render} from 'react-dom'
+import {BrowserRouter} from 'react-router-dom'
 import App from './components/App';
 
-render(<App  />, document.getElementById('root'));
+render((
+    <BrowserRouter>
+        <App  />
+    </BrowserRouter>
+), document.getElementById('root'));

djsr/frontend/static/frontend/public/main.js

@@ -1,4 +1,10 @@
 #root{
     background-color:rebeccapurple;
     color:white;
-}
+}
+
+.nav-link{
+    color:white;
+    border: 1px solid white;
+    padding: 1em;
+}

djsr/frontend/static/frontend/style.css

@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "react-dom": "^16.8.6",
+    "react-router-dom": "^5.0.1"
   }
 }