Tidy Login buttons and add API_URL env var

README.md

@@ -16,7 +16,7 @@ Copy .env.example to .env and set variables. You can use https://www.grc.com/pas
 
 ## Local build/run
     cp .env.example .env # Fill in the blanks
-    cd web && npm install && npm start
+    cd web && npm install && REACT_APP_API_URL=http://127.0.0.1:42069 npm start
     # In another terminal
     go mod tidy
     CGO_ENABLED=0 go run cmd/go-scrobble/*.go
@@ -29,6 +29,6 @@ Access dev frontend @ http://127.0.0.1:3000 + API @ http://127.0.0.1:42069/api/v
 ## Prod deployment
 We need to build NPM package, and then ship web/build with the binary.
     cp .env.example .env # Fill in the blanks
-    cd web npm install --production && npm run build
+    cd web npm install --production && REACT_APP_API_URL=https://goscrobble.com npm run build
     go build -o goscrobble cmd/go-scrobble/*.go
     ./goscrobble

internal/goscrobble/user.go

@@ -96,11 +96,11 @@ func loginUser(logReq *LoginRequest, ip net.IP) ([]byte, error) {
 	var user User
 
 	if logReq.Username == "" {
-		return resp, errors.New("username must be set")
+		return resp, errors.New("A username is required")
 	}
 
 	if logReq.Password == "" {
-		return resp, errors.New("password must be set")
+		return resp, errors.New("A password is required")
 	}
 
 	if strings.Contains(logReq.Username, "@") {

web/src/App.js

@@ -3,7 +3,7 @@ import Home from './Components/Pages/Home';
 import About from './Components/Pages/About';
 import Login from './Components/Pages/Login';
 import Register from './Components/Pages/Register';
-import Navigation from './Components/Pages/Navigation';
+import Navigation from './Components/Navigation';
 
 import { Route, Switch, HashRouter } from 'react-router-dom';
 import { connect } from "react-redux";

web/src/Components/Navigation.css

@@ -7,3 +7,9 @@
     color: #666666;
     text-decoration: none;
 }
+
+.navLinkLogin {
+    margin-left: 15px;
+    padding-left: 15px;
+    border-left: 1px solid #282c34;
+}

web/src/Components/Navigation.js

@@ -28,11 +28,17 @@ class Navigation extends Component {
     render() {
       const activeStyle = { color: '#FFFFFF' };
 
-      const renderAuthButton = () => {
+      const renderAuthButtons = () => {
         if (this.state.isLoggedIn) {
-          return <Link to="/" className="navLink" onClick={this.toggleLogin.bind(this)}>Logout</Link>;
+          return <div className="navLinkLogin">
+                  <Link to="/profile" className="navLink">Profile</Link>
+                  <Link to="/" className="navLink" onClick={this.toggleLogin.bind(this)}>Logout</Link>
+                </div>;
         } else {
-          return <Link to="/login" className="navLink">Login</Link>;
+          return <div className="navLinkLogin">
+                  <Link to="/login" className="navLink">Login</Link>
+                  <Link to="/register" className="navLink">Register</Link>
+                </div>;
         }
       }
 
@@ -51,7 +57,7 @@ class Navigation extends Component {
                 {menuItem}
               </Link>
             )}
-          {renderAuthButton()}
+          {renderAuthButtons()}
           </Navbar>
         </div>
       );

web/src/Components/Pages/Login.js

@@ -41,7 +41,7 @@ class Login extends React.Component {
         password: this.state.password,
       })
   };
-    const apiUrl = 'http://127.0.0.1:42069/api/v1/login';
+    const apiUrl = process.env.REACT_APP_API_URL + '/api/v1/login';
     fetch(apiUrl, requestOptions)
       .then((response) => response.json())
       .then((function(data) {

web/src/Components/Pages/Navigation.css

@@ -1,9 +0,0 @@
-.navLink {
-    padding: 0 15px 0 15px;
-    color: #CCCCCC;
-}
-
-.navLink:hover {
-    color: #666666;
-    text-decoration: none;
-}

web/src/Components/Pages/Navigation.js

@@ -1,61 +0,0 @@
-import { React, Component } from 'react';
-import { Navbar, NavbarBrand } from 'reactstrap';
-import { Link } from 'react-router-dom';
-import './Navigation.css';
-
-const menuItems = [
-  'Home',
-  'About',
-];
-
-class Navigation extends Component {
-    constructor(props) {
-      super(props);
-      // 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() {
-      this.setState({ isLoggedIn: !this.state.isLoggedIn })
-    }
-
-    _handleClick(menuItem) {
-      this.setState({ active: menuItem });
-    }
-
-    render() {
-      const activeStyle = { color: '#FFFFFF' };
-
-      const renderAuthButton = () => {
-        if (this.state.isLoggedIn) {
-          return <Link to="/" className="navLink" onClick={this.toggleLogin.bind(this)}>Logout</Link>;
-        } else {
-          return <div><Link to="/login" className="navLink">Login</Link><Link to="/register" className="navLink">Register</Link></div>;
-        }
-      }
-
-      return (
-        <div>
-          <Navbar color="dark" dark fixed="top">
-            <NavbarBrand href="/" className="mr-auto">GoScrobble</NavbarBrand>
-            {menuItems.map(menuItem =>
-              <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>
-      );
-    }
-  }
-
-export default Navigation;

web/src/Components/Pages/Register.js

@@ -56,6 +56,7 @@ class Register extends React.Component {
     const requestOptions = {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
+      timeout: 5000,
       body: JSON.stringify({
         username: this.state.username,
         email: this.state.email,
@@ -63,7 +64,8 @@ class Register extends React.Component {
       })
     };
 
-    const apiUrl = 'http://127.0.0.1:42069/api/v1/register';
+    const apiUrl = process.env.REACT_APP_API_URL + '/api/v1/register';
+    console.log(apiUrl);
     fetch(apiUrl, requestOptions)
       .then((response) => response.json())
       .then((function(data) {
@@ -74,7 +76,11 @@ class Register extends React.Component {
           this.props.addToast(data.message, { appearance: 'success' });
         }
         this.setState({loading: false});
-    }).bind(this));
+      }).bind(this))
+      .catch(() => {
+        this.props.addToast('Error submitting form. Please try again', { appearance: 'error' });
+        this.setState({loading: false});
+      });
   }
 
   render() {