diff --git a/README.md b/README.md index ef38f214..fad570b6 100644 --- a/README.md +++ b/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 \ No newline at end of file diff --git a/internal/goscrobble/user.go b/internal/goscrobble/user.go index 8e7feac6..a604f926 100644 --- a/internal/goscrobble/user.go +++ b/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, "@") { diff --git a/web/src/App.js b/web/src/App.js index e5739e8d..26d9422f 100644 --- a/web/src/App.js +++ b/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"; diff --git a/web/src/Components/Navigation.css b/web/src/Components/Navigation.css index 8480283c..617b6ece 100644 --- a/web/src/Components/Navigation.css +++ b/web/src/Components/Navigation.css @@ -6,4 +6,10 @@ .navLink:hover { color: #666666; text-decoration: none; +} + +.navLinkLogin { + margin-left: 15px; + padding-left: 15px; + border-left: 1px solid #282c34; } \ No newline at end of file diff --git a/web/src/Components/Navigation.js b/web/src/Components/Navigation.js index c4ab9903..7325143c 100644 --- a/web/src/Components/Navigation.js +++ b/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 Logout; + return
+ Profile + Logout +
; } else { - return Login; + return
+ Login + Register +
; } } @@ -51,7 +57,7 @@ class Navigation extends Component { {menuItem} )} - {renderAuthButton()} + {renderAuthButtons()} ); diff --git a/web/src/Components/Pages/Login.js b/web/src/Components/Pages/Login.js index 04faac1e..38fde58d 100644 --- a/web/src/Components/Pages/Login.js +++ b/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) { diff --git a/web/src/Components/Pages/Navigation.css b/web/src/Components/Pages/Navigation.css deleted file mode 100644 index 8480283c..00000000 --- a/web/src/Components/Pages/Navigation.css +++ /dev/null @@ -1,9 +0,0 @@ -.navLink { - padding: 0 15px 0 15px; - color: #CCCCCC; -} - -.navLink:hover { - color: #666666; - text-decoration: none; -} \ No newline at end of file diff --git a/web/src/Components/Pages/Navigation.js b/web/src/Components/Pages/Navigation.js deleted file mode 100644 index f55c8213..00000000 --- a/web/src/Components/Pages/Navigation.js +++ /dev/null @@ -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 Logout; - } else { - return
LoginRegister
; - } - } - - return ( -
- - GoScrobble - {menuItems.map(menuItem => - - {menuItem} - - )} - {renderAuthButton()} - -
- ); - } - } - -export default Navigation; \ No newline at end of file diff --git a/web/src/Components/Pages/Register.js b/web/src/Components/Pages/Register.js index e1926e4e..bbd60aa0 100644 --- a/web/src/Components/Pages/Register.js +++ b/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() {