basic login page

web/src/App.js

@@ -1,10 +1,14 @@
 import './App.css';
 import Home from './Components/Pages/Home';
 import About from './Components/Pages/About';
+import Login from './Components/Pages/Login';
 import Navigation from './Components/Pages/Navigation';
+
 import { Route, Switch, HashRouter } from 'react-router-dom';
 import { connect } from "react-redux";
 
+import { ToastProvider, useToasts } from 'react-toast-notifications';
+
 import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
 
 function mapStateToProps(state) {
@@ -18,19 +22,22 @@ function mapDispatchToProps(dispatch) {
     logIn: () => dispatch({type: true}),
     logOut: () => dispatch({type: false})
   };
-
 }
 
-const App = (props) => {
+const App = () => {
+  let exact = true
   return (
     <HashRouter>
-      <div className="wrapper">
-        <Navigation />
-        <Switch>
-          <Route exact path="/" component={Home} />
-          <Route path="/about" component={About} />
-        </Switch>
-      </div>
+      <ToastProvider>
+        <div className="wrapper">
+          <Navigation />
+          <Switch>
+            <Route exact={exact} path="/" component={Home} />
+            <Route path="/about" component={About} />
+            <Route path="/login" component={Login} />
+          </Switch>
+        </div>
+        </ToastProvider>
       </HashRouter>
   );
 }

web/src/Components/Pages/About.css

@@ -1,4 +1,4 @@
 .aboutBody {
-    padding-top: 20px;
+    padding: 20px 5px 5px 5px;
     font-size: 16pt;
 }

web/src/Components/Pages/Login.css

@@ -0,0 +1,10 @@
+.loginBody {
+    padding: 20px 5px 5px 5px;
+    font-size: 16pt;
+}
+
+.loginButton {
+    height: 50px;
+    width: 295px;
+    margin-top:-5px;
+}

web/src/Components/Pages/Login.js

@@ -1,22 +1,106 @@
 import React from 'react';
+import '../../App.css';
+import './Login.css';
+import { Button } from 'reactstrap';
 
-export default function Login() {
-    return(
-      <div className="login-wrapper">
-        <h1>Please Log In</h1>
-        <form>
-          <label>
-            <p>Username</p>
-            <input type="text" />
-          </label>
-          <label>
-            <p>Password</p>
-            <input type="password" />
-          </label>
-          <div>
-            <button type="submit">Submit</button>
-          </div>
-        </form>
+import { ToastProvider, useToasts } from 'react-toast-notifications';
+
+// const FormWithToasts = () => {
+//   const { addToast } = useToasts();
+
+//   const onSubmit = async value => {
+//     // const { error } = await dataPersistenceLayer(value);
+
+//     if (error) {
+//       addToast(error.message, { appearance: 'error' });
+//     } else {
+//       addToast('Saved Successfully', { appearance: 'success' });
+//     }
+//   };
+
+//   return <form onSubmit={this.handleSubmit}>...</form>;
+// };
+// const { addToast } = useToasts();
+
+
+class About extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {username: '', password: ''};
+    this.handleUsernameChange = this.handleUsernameChange.bind(this);
+    this.handlePasswordChange = this.handlePasswordChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+  handleUsernameChange(event) {
+    this.setState({username: event.target.value});
+    // addToast(error.message, { appearance: 'error' });
+
+  }
+
+  handlePasswordChange(event) {
+    this.setState({password: event.target.value});
+  }
+
+
+  handleSubmit(event) {
+    event.preventDefault();
+    const requestOptions = {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        username: this.state.username,
+        password: this.state.password,
+      })
+  };
+    const apiUrl = 'http://127.0.0.1:42069/api/v1/login';
+    fetch(apiUrl, requestOptions)
+      .then((response) => response.json())
+      .then((data) => function() {
+
+
+
+
+
+
+      });
+  }
+
+  render() {
+    return (
+      <div className="pageWrapper">
+        <h1>
+          Login
+        </h1>
+        <div className="loginBody">
+          <form onSubmit={this.handleSubmit}>
+            <label>
+              Email / Username<br/>
+              <input
+                type="text"
+                value={this.state.username}
+                onChange={this.handleUsernameChange}
+              />
+            </label>
+            <br/>
+            <label>
+              Password<br/>
+              <input
+                type="password"
+                value={this.state.password}
+                onChange={this.handlePasswordChange}
+              />
+            </label>
+            <br/><br/>
+            <Button
+              color="primary"
+              type="submit"
+              className="loginButton"
+            >Login</Button>
+          </form>
+        </div>
       </div>
-    )
-  }
+    );
+  }
+}
+
+export default About;

web/src/Components/Pages/Navigation.js

@@ -11,7 +11,10 @@ const menuItems = [
 class Navigation extends Component {
     constructor(props) {
       super(props);
-      this.state = { isLoggedIn: false };
+      // Yeah I know you might not hit home.. but I can't get the
+      // path based finder thing working on initial load :sweatsmile:
+      console.log(this.props.initLocation)
+      this.state = { isLoggedIn: false, active: "Home" };
     }
 
     toggleLogin() {
@@ -23,33 +26,32 @@ class Navigation extends Component {
     }
 
     render() {
-      const activeStyle = { color: '#FFF' };
+      const activeStyle = { color: '#FFFFFF' };
 
       const renderAuthButton = () => {
         if (this.state.isLoggedIn) {
-          return <Link class="navLink" onClick={this.toggleLogin.bind(this)}>Logout</Link>;
+          return <Link to="/" className="navLink" onClick={this.toggleLogin.bind(this)}>Logout</Link>;
         } else {
-          return <Link class="navLink" onClick={this.toggleLogin.bind(this)}>Login</Link>;
+          return <Link to="/login" className="navLink">Login</Link>;
         }
       }
 
       return (
         <div>
           <Navbar color="dark" dark fixed="top">
-            <NavbarBrand exact href="/" className="mr-auto">GoScrobble</NavbarBrand>
+            <NavbarBrand href="/" className="mr-auto">GoScrobble</NavbarBrand>
             {menuItems.map(menuItem =>
-            <Link
-              class="navLink"
-              style={this.state.active === menuItem ? activeStyle : {}}
-             onClick={this._handleClick.bind(this, menuItem)}
-            >
-              {menuItem}
-            </Link>
-         )}
-
-            <Link class="navLink" to="/">Home</Link>
-            <Link class="navLink" to="/about">About</Link>
-            {renderAuthButton()}
+              <Link
+                key={menuItem}
+                className="navLink"
+                style={this.state.active === menuItem ? activeStyle : {}}
+                onClick={this._handleClick.bind(this, menuItem)}
+                to={menuItem === "Home" ? "/" : menuItem}
+              >
+                {menuItem}
+              </Link>
+            )}
+          {renderAuthButton()}
           </Navbar>
         </div>
       );