mirror of
https://github.com/idanoo/GoScrobble.git
synced 2024-11-22 08:25:14 +00:00
Basic auth flow
This commit is contained in:
parent
965df85383
commit
50154a009c
@ -113,6 +113,15 @@ func generateJsonMessage(m string) []byte {
|
||||
return js
|
||||
}
|
||||
|
||||
// generateJsonError - Generates a err:str response
|
||||
func generateJsonError(m string) []byte {
|
||||
jr := jsonResponse{
|
||||
Err: m,
|
||||
}
|
||||
js, _ := json.Marshal(&jr)
|
||||
return js
|
||||
}
|
||||
|
||||
// tokenMiddleware - Validates token to a user
|
||||
func tokenMiddleware(next http.HandlerFunc) http.HandlerFunc {
|
||||
return func(w http.ResponseWriter, r *http.Request) {
|
||||
@ -136,7 +145,7 @@ func limitMiddleware(next http.HandlerFunc, limiter *IPRateLimiter) http.Handler
|
||||
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
|
||||
limiter := limiter.GetLimiter(r.RemoteAddr)
|
||||
if !limiter.Allow() {
|
||||
msg := generateJsonMessage("Too many requests")
|
||||
msg := generateJsonError("Too many requests")
|
||||
w.WriteHeader(http.StatusTooManyRequests)
|
||||
w.Write(msg)
|
||||
return
|
||||
@ -183,7 +192,7 @@ func handleLogin(w http.ResponseWriter, r *http.Request) {
|
||||
ip := getUserIp(r)
|
||||
data, err := loginUser(&logReq, ip)
|
||||
if err != nil {
|
||||
throwBadReq(w, err.Error())
|
||||
throwOkMessage(w, err.Error())
|
||||
return
|
||||
}
|
||||
|
||||
|
@ -2,12 +2,13 @@ import './App.css';
|
||||
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 { Route, Switch, HashRouter } from 'react-router-dom';
|
||||
import { connect } from "react-redux";
|
||||
|
||||
import { ToastProvider, useToasts } from 'react-toast-notifications';
|
||||
import { ToastProvider } from 'react-toast-notifications';
|
||||
|
||||
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
|
||||
|
||||
@ -28,13 +29,14 @@ const App = () => {
|
||||
let exact = true
|
||||
return (
|
||||
<HashRouter>
|
||||
<ToastProvider>
|
||||
<ToastProvider autoDismiss="true" autoDismissTimeout="5000">
|
||||
<div className="wrapper">
|
||||
<Navigation />
|
||||
<Switch>
|
||||
<Route exact={exact} path="/" component={Home} />
|
||||
<Route path="/about" component={About} />
|
||||
<Route path="/login" component={Login} />
|
||||
<Route path="/register" component={Register} />
|
||||
</Switch>
|
||||
</div>
|
||||
</ToastProvider>
|
||||
|
9
web/src/Components/Navigation.css
Normal file
9
web/src/Components/Navigation.css
Normal file
@ -0,0 +1,9 @@
|
||||
.navLink {
|
||||
padding: 0 15px 0 15px;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
|
||||
.navLink:hover {
|
||||
color: #666666;
|
||||
text-decoration: none;
|
||||
}
|
61
web/src/Components/Navigation.js
Normal file
61
web/src/Components/Navigation.js
Normal file
@ -0,0 +1,61 @@
|
||||
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 <Link to="/login" className="navLink">Login</Link>;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
@ -3,7 +3,7 @@ import '../../App.css';
|
||||
import './Login.css';
|
||||
import { Button } from 'reactstrap';
|
||||
|
||||
import { ToastProvider, useToasts } from 'react-toast-notifications';
|
||||
import { useToasts } from 'react-toast-notifications';
|
||||
|
||||
// const FormWithToasts = () => {
|
||||
// const { addToast } = useToasts();
|
||||
@ -22,28 +22,33 @@ import { ToastProvider, useToasts } from 'react-toast-notifications';
|
||||
// };
|
||||
// const { addToast } = useToasts();
|
||||
|
||||
function withToast(Component) {
|
||||
return function WrappedComponent(props) {
|
||||
const toastFuncs = useToasts()
|
||||
return <Component {...props} {...toastFuncs} />;
|
||||
}
|
||||
}
|
||||
|
||||
class About extends React.Component {
|
||||
class Login extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {username: '', password: ''};
|
||||
this.state = {username: '', password: '', loading: false};
|
||||
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();
|
||||
this.setState({loading: true});
|
||||
const requestOptions = {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
@ -55,14 +60,14 @@ class About extends React.Component {
|
||||
const apiUrl = 'http://127.0.0.1:42069/api/v1/login';
|
||||
fetch(apiUrl, requestOptions)
|
||||
.then((response) => response.json())
|
||||
.then((data) => function() {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
.then((function(data) {
|
||||
if (data.error) {
|
||||
this.props.addToast(data.error, { appearance: 'error' });
|
||||
} else {
|
||||
this.props.addToast(data.token, { appearance: 'success' });
|
||||
}
|
||||
this.setState({loading: false});
|
||||
}).bind(this))
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -97,6 +102,7 @@ class About extends React.Component {
|
||||
color="primary"
|
||||
type="submit"
|
||||
className="loginButton"
|
||||
disabled={this.state.loading}
|
||||
>Login</Button>
|
||||
</form>
|
||||
</div>
|
||||
@ -105,4 +111,4 @@ class About extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
export default About;
|
||||
export default withToast(Login);
|
||||
|
@ -32,7 +32,7 @@ class Navigation extends Component {
|
||||
if (this.state.isLoggedIn) {
|
||||
return <Link to="/" className="navLink" onClick={this.toggleLogin.bind(this)}>Logout</Link>;
|
||||
} else {
|
||||
return <Link to="/login" className="navLink">Login</Link>;
|
||||
return <div><Link to="/login" className="navLink">Login</Link><Link to="/register" className="navLink">Register</Link></div>;
|
||||
}
|
||||
}
|
||||
|
||||
|
15
web/src/Components/Pages/Register.css
Normal file
15
web/src/Components/Pages/Register.css
Normal file
@ -0,0 +1,15 @@
|
||||
.loginBody {
|
||||
padding: 20px 5px 5px 5px;
|
||||
font-size: 16pt;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.loginFields {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.loginButton {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
margin-top:-5px;
|
||||
}
|
143
web/src/Components/Pages/Register.js
Normal file
143
web/src/Components/Pages/Register.js
Normal file
@ -0,0 +1,143 @@
|
||||
import React from 'react';
|
||||
import '../../App.css';
|
||||
import './Login.css';
|
||||
import { Button } from 'reactstrap';
|
||||
|
||||
import { useToasts } from 'react-toast-notifications';
|
||||
|
||||
function withToast(Component) {
|
||||
return function WrappedComponent(props) {
|
||||
const toastFuncs = useToasts()
|
||||
return <Component {...props} {...toastFuncs} />;
|
||||
}
|
||||
}
|
||||
|
||||
class Register extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {username: '', email: '', password: '', passwordconfirm: '', loading: false};
|
||||
this.handleUsernameChange = this.handleUsernameChange.bind(this);
|
||||
this.handleEmailChange = this.handleEmailChange.bind(this);
|
||||
this.handlePasswordChange = this.handlePasswordChange.bind(this);
|
||||
this.handlePasswordConfirmChange = this.handlePasswordConfirmChange.bind(this);
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
}
|
||||
|
||||
handleUsernameChange(event) {
|
||||
this.setState({username: event.target.value});
|
||||
}
|
||||
|
||||
handleEmailChange(event) {
|
||||
this.setState({email: event.target.value});
|
||||
}
|
||||
|
||||
handlePasswordChange(event) {
|
||||
this.setState({password: event.target.value});
|
||||
}
|
||||
|
||||
handlePasswordConfirmChange(event) {
|
||||
this.setState({passwordconfirm: event.target.value});
|
||||
}
|
||||
|
||||
handleSubmit(event) {
|
||||
event.preventDefault();
|
||||
|
||||
if (this.state.password !== this.state.passwordconfirm) {
|
||||
this.props.addToast('Passwords do not match', { appearance: 'error' });
|
||||
return
|
||||
}
|
||||
|
||||
if (this.state.password.len < 8) {
|
||||
this.props.addToast('Passwords do not match', { appearance: 'error' });
|
||||
return
|
||||
}
|
||||
|
||||
this.setState({loading: true});
|
||||
const requestOptions = {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
username: this.state.username,
|
||||
email: this.state.email,
|
||||
password: this.state.password,
|
||||
})
|
||||
};
|
||||
|
||||
const apiUrl = 'http://127.0.0.1:42069/api/v1/register';
|
||||
fetch(apiUrl, requestOptions)
|
||||
.then((response) => response.json())
|
||||
.then((function(data) {
|
||||
if (data.error) {
|
||||
this.props.addToast(data.error, { appearance: 'error' });
|
||||
} else {
|
||||
this.props.addToast(data.message, { appearance: 'success' });
|
||||
}
|
||||
this.setState({loading: false});
|
||||
}).bind(this));
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="pageWrapper">
|
||||
<h1>
|
||||
Register
|
||||
</h1>
|
||||
<div className="loginBody">
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<label>
|
||||
Username*<br/>
|
||||
<input
|
||||
type="text"
|
||||
required="true"
|
||||
className="loginFields"
|
||||
value={this.state.username}
|
||||
onChange={this.handleUsernameChange}
|
||||
/>
|
||||
</label>
|
||||
<br/>
|
||||
<label>
|
||||
Email<br/>
|
||||
<input
|
||||
type="email"
|
||||
className="loginFields"
|
||||
value={this.state.email}
|
||||
onChange={this.handleEmailChange}
|
||||
/>
|
||||
</label>
|
||||
<br/>
|
||||
<label>
|
||||
Password<br/>
|
||||
<input
|
||||
type="password"
|
||||
required="true"
|
||||
className="loginFields"
|
||||
value={this.state.password}
|
||||
onChange={this.handlePasswordChange}
|
||||
/>
|
||||
</label>
|
||||
<br/>
|
||||
<label>
|
||||
Password<br/>
|
||||
<input
|
||||
type="password"
|
||||
required="true"
|
||||
className="loginFields"
|
||||
value={this.state.passwordconfirm}
|
||||
onChange={this.handlePasswordConfirmChange}
|
||||
/>
|
||||
</label>
|
||||
<br/><br/>
|
||||
<Button
|
||||
color="primary"
|
||||
type="submit"
|
||||
className="loginButton"
|
||||
disabled={this.state.loading}
|
||||
>Login</Button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withToast(Register);
|
Loading…
Reference in New Issue
Block a user