mirror of
https://github.com/idanoo/GoScrobble
synced 2025-07-03 14:42:18 +00:00
- Login flow working..
- Jellyfin scrobble working
- Returns scrobbles via API for authed users /api/v1/user/{uuid}/scrobble
- Add redis handler + funcs
- Move middleware to pass in uuid as needed
This commit is contained in:
parent
c83c086cdd
commit
5fd9d41069
GPG key ID:
387387CDBC02F132
54 changed files with 1093 additions and 386 deletions
|
|
@ -1 +0,0 @@
|
|||
// https://stackoverflow.com/questions/38397653/redux-what-is-the-correct-place-to-save-cookie-after-login-request
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
import React, { Component, PropTypes } from 'react';
|
||||
import { Provider } from 'react-redux';
|
||||
import { persistStore } from 'redux-persist';
|
||||
|
||||
class AppProvider extends Component {
|
||||
static propTypes = {
|
||||
store: PropTypes.object.isRequired,
|
||||
children: PropTypes.node
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = { rehydrated: false };
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
const opts = {
|
||||
whitelist: ['user'] // <-- Your auth/user reducer storing the cookie
|
||||
};
|
||||
|
||||
persistStore(this.props.store, opts, () => {
|
||||
this.setState({ rehydrated: true });
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this.state.rehydrated) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Provider store={this.props.store}>
|
||||
{this.props.children}
|
||||
</Provider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
AppProvider.propTypes = {
|
||||
store: PropTypes.object.isRequired,
|
||||
children: PropTypes.node
|
||||
}
|
||||
|
||||
export default AppProvider;
|
||||
|
|
@ -3,70 +3,106 @@ import { Navbar, NavbarBrand } from 'reactstrap';
|
|||
import { Link } from 'react-router-dom';
|
||||
import logo from '../logo.png';
|
||||
import './Navigation.css';
|
||||
import { connect } from 'react-redux';
|
||||
import { logout } from '../Actions/auth';
|
||||
|
||||
const menuItems = [
|
||||
'Home',
|
||||
'Help',
|
||||
'About',
|
||||
];
|
||||
|
||||
const loggedInMenuItems = [
|
||||
'Dashboard',
|
||||
'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" };
|
||||
}
|
||||
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:
|
||||
this.state = { active: "Home" };
|
||||
}
|
||||
|
||||
toggleLogin() {
|
||||
this.setState({ isLoggedIn: !this.state.isLoggedIn })
|
||||
}
|
||||
componentDidMount() {
|
||||
const isLoggedIn = this.props.isLoggedIn;
|
||||
|
||||
_handleClick(menuItem) {
|
||||
this.setState({ active: menuItem });
|
||||
}
|
||||
|
||||
render() {
|
||||
const activeStyle = { color: '#FFFFFF' };
|
||||
|
||||
const renderAuthButtons = () => {
|
||||
if (this.state.isLoggedIn) {
|
||||
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 <div className="navLinkLogin">
|
||||
<Link to="/login" className="navLink">Login</Link>
|
||||
<Link to="/register" className="navLink" history={this.props.history}>Register</Link>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Navbar color="dark" dark fixed="top">
|
||||
<NavbarBrand href="/" className="mr-auto"><img src={logo} className="nav-logo" alt="logo" /> 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>
|
||||
)}
|
||||
{renderAuthButtons()}
|
||||
</Navbar>
|
||||
</div>
|
||||
);
|
||||
if (isLoggedIn) {
|
||||
this.setState({
|
||||
isLoggedIn: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default Navigation;
|
||||
_handleClick(menuItem) {
|
||||
this.setState({ active: menuItem });
|
||||
}
|
||||
|
||||
render() {
|
||||
const activeStyle = { color: '#FFFFFF' };
|
||||
|
||||
const renderAuthButtons = () => {
|
||||
if (this.state.isLoggedIn) {
|
||||
return <div className="navLinkLogin">
|
||||
<Link to="/profile" className="navLink">Profile</Link>
|
||||
<Link to="/" className="navLink" onClick={logout()}>Logout</Link>
|
||||
</div>;
|
||||
} else {
|
||||
return <div className="navLinkLogin">
|
||||
<Link to="/login" className="navLink">Login</Link>
|
||||
<Link to="/register" className="navLink" history={this.props.history}>Register</Link>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
const renderMenuButtons = () => {
|
||||
if (this.state.isLoggedIn) {
|
||||
return <div>
|
||||
{loggedInMenuItems.map(menuItem =>
|
||||
<Link
|
||||
key={menuItem}
|
||||
className="navLink"
|
||||
style={this.state.active === menuItem ? activeStyle : {}}
|
||||
onClick={this._handleClick.bind(this, menuItem)}
|
||||
to={menuItem}
|
||||
>
|
||||
{menuItem}
|
||||
</Link>
|
||||
)}
|
||||
</div>;
|
||||
} else {
|
||||
return <div>
|
||||
{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>
|
||||
)}
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Navbar color="dark" dark fixed="top">
|
||||
<NavbarBrand href="/" className="mr-auto"><img src={logo} className="nav-logo" alt="logo" /> GoScrobble</NavbarBrand>
|
||||
{renderMenuButtons()}
|
||||
{renderAuthButtons()}
|
||||
</Navbar>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToProps(state) {
|
||||
const { isLoggedIn } = state.auth;
|
||||
return {
|
||||
isLoggedIn,
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps)(Navigation);
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
.aboutBody {
|
||||
padding: 20px 5px 5px 5px;
|
||||
font-size: 16pt;
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import '../../App.css';
|
||||
import './About.css';
|
||||
|
||||
function About() {
|
||||
return (
|
||||
<div className="pageWrapper">
|
||||
<h1>
|
||||
About GoScrobble.com
|
||||
</h1>
|
||||
<p className="aboutBody">
|
||||
Go-Scrobble is an open source music scorbbling service written in Go and React.<br/>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default About;
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
.helpBody {
|
||||
padding: 20px 5px 5px 5px;
|
||||
font-size: 16pt;
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import '../../App.css';
|
||||
import './Help.css';
|
||||
|
||||
function Help() {
|
||||
return (
|
||||
<div className="pageWrapper">
|
||||
<h1>
|
||||
Help Docs
|
||||
</h1>
|
||||
<p className="helpBody">
|
||||
Jellyfin Configuration<br/>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Help;
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import logo from '../../logo.png';
|
||||
import '../../App.css';
|
||||
|
||||
function Home() {
|
||||
return (
|
||||
<div className="App-header">
|
||||
<img src={logo} className="App-logo" alt="logo" />
|
||||
<p>
|
||||
goscrobble.com
|
||||
</p>
|
||||
<a
|
||||
className="App-link"
|
||||
href="https://gitlab.com/idanoo/go-scrobble"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
gitlab.com/idanoo/go-scrobble
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Home;
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
.loginBody {
|
||||
padding: 20px 5px 5px 5px;
|
||||
font-size: 16pt;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.loginFields {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.loginButton {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
margin-top:-5px;
|
||||
}
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
import React from 'react';
|
||||
import '../../App.css';
|
||||
import './Login.css';
|
||||
import { Button } from 'reactstrap';
|
||||
import { Formik, Form, Field } from 'formik';
|
||||
import { useToasts } from 'react-toast-notifications';
|
||||
import ScaleLoader from "react-spinners/ScaleLoader";
|
||||
|
||||
function withToast(Component) {
|
||||
return function WrappedComponent(props) {
|
||||
const toastFuncs = useToasts()
|
||||
return <Component {...props} {...toastFuncs} />;
|
||||
}
|
||||
}
|
||||
|
||||
class Login extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
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});
|
||||
}
|
||||
|
||||
handlePasswordChange(event) {
|
||||
this.setState({password: event.target.value});
|
||||
}
|
||||
|
||||
handleSubmit(values) {
|
||||
this.setState({loading: true});
|
||||
const requestOptions = {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
timeout: 5000,
|
||||
body: JSON.stringify({
|
||||
username: values.username,
|
||||
password: values.password,
|
||||
})
|
||||
};
|
||||
const apiUrl = process.env.REACT_APP_API_URL + '/api/v1/login';
|
||||
fetch(apiUrl, requestOptions)
|
||||
.then((response) => {
|
||||
if (response.status === 429) {
|
||||
this.props.addToast("Rate limited. Please try again soon", { appearance: 'error' });
|
||||
return "{}"
|
||||
} else {
|
||||
return response.json()
|
||||
}
|
||||
})
|
||||
.then((function(data) {
|
||||
if (data.error) {
|
||||
this.props.addToast(data.error, { appearance: 'error' });
|
||||
} else if (data.token) {
|
||||
this.props.addToast(data.token, { appearance: 'success' });
|
||||
}
|
||||
this.setState({loading: false});
|
||||
}).bind(this))
|
||||
.catch(() => {
|
||||
this.props.addToast('Error submitting form. Please try again', { appearance: 'error' });
|
||||
this.setState({loading: false});
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
let trueBool = true;
|
||||
return (
|
||||
<div className="pageWrapper">
|
||||
<h1>
|
||||
Login
|
||||
</h1>
|
||||
<div className="loginBody">
|
||||
<Formik
|
||||
initialValues={{ username: '', password: '' }}
|
||||
onSubmit={async values => this.handleSubmit(values)}
|
||||
>
|
||||
<Form>
|
||||
<label>
|
||||
Email / Username<br/>
|
||||
<Field
|
||||
name="username"
|
||||
type="text"
|
||||
required={trueBool}
|
||||
className="loginFields"
|
||||
/>
|
||||
</label>
|
||||
<br/>
|
||||
<label>
|
||||
Password<br/>
|
||||
<Field
|
||||
name="password"
|
||||
type="password"
|
||||
required={trueBool}
|
||||
className="loginFields"
|
||||
/>
|
||||
</label>
|
||||
<br/><br/>
|
||||
<Button
|
||||
color="primary"
|
||||
type="submit"
|
||||
className="loginButton"
|
||||
disabled={this.state.loading}
|
||||
>{this.state.loading ? <ScaleLoader color="#FFF" size={35} /> : "Login"}</Button>
|
||||
</Form>
|
||||
</Formik>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withToast(Login);
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
.loginBody {
|
||||
padding: 20px 5px 5px 5px;
|
||||
font-size: 16pt;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.loginFields {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.loginButton {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
margin-top:-5px;
|
||||
}
|
||||
|
|
@ -1,168 +0,0 @@
|
|||
import React from 'react';
|
||||
import '../../App.css';
|
||||
import './Login.css';
|
||||
import { Button } from 'reactstrap';
|
||||
import { useToasts } from 'react-toast-notifications';
|
||||
import ScaleLoader from "react-spinners/ScaleLoader";
|
||||
import { withRouter } from 'react-router-dom'
|
||||
|
||||
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('Password must be at least 8 characters', { appearance: 'error' });
|
||||
// return
|
||||
// }
|
||||
|
||||
this.setState({loading: true});
|
||||
const requestOptions = {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
timeout: 5000,
|
||||
body: JSON.stringify({
|
||||
username: this.state.username,
|
||||
email: this.state.email,
|
||||
password: this.state.password,
|
||||
})
|
||||
};
|
||||
|
||||
const apiUrl = process.env.REACT_APP_API_URL + '/api/v1/register';
|
||||
console.log(apiUrl);
|
||||
fetch(apiUrl, requestOptions)
|
||||
.then((response) => {
|
||||
if (response.status === 429) {
|
||||
this.props.addToast("Rate limited. Please try again soon", { appearance: 'error' });
|
||||
return "{}"
|
||||
} else {
|
||||
return response.json()
|
||||
}
|
||||
})
|
||||
.then((function(data) {
|
||||
console.log(data);
|
||||
if (data.error) {
|
||||
this.props.addToast(data.error, { appearance: 'error' });
|
||||
} else if (data.message) {
|
||||
this.props.addToast(data.message, { appearance: 'success' });
|
||||
this.props.history.push('/login')
|
||||
}
|
||||
this.setState({loading: false});
|
||||
}).bind(this))
|
||||
.catch(() => {
|
||||
this.props.addToast('Error submitting form. Please try again', { appearance: 'error' });
|
||||
this.setState({loading: false});
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
let trueBool = true;
|
||||
return (
|
||||
<div className="pageWrapper">
|
||||
{
|
||||
// TODO: Move to DB:config REGISTRATION_DISABLED=1|0
|
||||
process.env.REACT_APP_REGISTRATION_DISABLED === "true" ?
|
||||
<p>Registration is temporarily disabled. Please try again soon!</p>
|
||||
:
|
||||
<div>
|
||||
<h1>
|
||||
Register
|
||||
</h1>
|
||||
<div className="loginBody">
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<label>
|
||||
Username*<br/>
|
||||
<input
|
||||
type="text"
|
||||
required={trueBool}
|
||||
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={trueBool}
|
||||
className="loginFields"
|
||||
value={this.state.password}
|
||||
onChange={this.handlePasswordChange}
|
||||
/>
|
||||
</label>
|
||||
<br/>
|
||||
<label>
|
||||
Password*<br/>
|
||||
<input
|
||||
type="password"
|
||||
required={trueBool}
|
||||
className="loginFields"
|
||||
value={this.state.passwordconfirm}
|
||||
onChange={this.handlePasswordConfirmChange}
|
||||
/>
|
||||
</label>
|
||||
<br/><br/>
|
||||
<Button
|
||||
color="primary"
|
||||
type="submit"
|
||||
className="loginButton"
|
||||
disabled={this.state.loading}
|
||||
>{this.state.loading ? <ScaleLoader color="#FFF" size={35} /> : "Register"}</Button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withRouter(withToast(Register));
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
import React from 'react';
|
||||
import '../../App.css';
|
||||
import './Settings.css';
|
||||
|
||||
import { useToasts } from 'react-toast-notifications';
|
||||
|
||||
function withToast(Component) {
|
||||
return function WrappedComponent(props) {
|
||||
const toastFuncs = useToasts()
|
||||
return <Component {...props} {...toastFuncs} />;
|
||||
}
|
||||
}
|
||||
|
||||
class Settings extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {username: '', password: '', loading: false};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="pageWrapper">
|
||||
<h1>
|
||||
Settings
|
||||
</h1>
|
||||
<div className="loginBody">
|
||||
<p>
|
||||
All the settings
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withToast(Settings);
|
||||
Loading…
Add table
Add a link
Reference in a new issue