mirror of
https://github.com/idanoo/GoScrobble
synced 2025-07-03 06:32:19 +00:00
0.0.5
- Only allow ItemType:Audio from Jellyfin - Fix NavBar for Mobile (Ugly hack but.. TO REWORK) - Fixed registration page issues - Add functionality to pull recent scrobbles to Dashboard - Add MX record lookup validation for emails - Add username validation for a-Z 0-9 _ and . - Dashboard shows basic table of last 500 scrobbles.
This commit is contained in:
parent
7ae9a0cd66
commit
2f8aa2e502
31 changed files with 425 additions and 171 deletions
|
@ -1,4 +1,4 @@
|
|||
.aboutBody {
|
||||
padding: 20px 5px 5px 5px;
|
||||
padding: 20px 0px 0px 0px;
|
||||
font-size: 16pt;
|
||||
}
|
|
@ -8,8 +8,16 @@ function About() {
|
|||
About GoScrobble.com
|
||||
</h1>
|
||||
<p className="aboutBody">
|
||||
Go-Scrobble is an open source music scorbbling service written in Go and React.
|
||||
Go-Scrobble is an open source music scorbbling service written in Go and React.<br/>
|
||||
Used to track your listening history and build a profile to discover new music.
|
||||
</p>
|
||||
<a
|
||||
className="aboutBodyw"
|
||||
href="https://gitlab.com/idanoo/go-scrobble"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>gitlab.com/idanoo/go-scrobble
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -2,15 +2,40 @@ import React from 'react';
|
|||
import '../App.css';
|
||||
import './Dashboard.css';
|
||||
import { connect } from 'react-redux';
|
||||
import { getRecentScrobbles } from '../Actions/api';
|
||||
import ScaleLoader from 'react-spinners/ScaleLoader';
|
||||
import ScrobbleTable from "../Components/ScrobbleTable";
|
||||
|
||||
class Dashboard extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isLoading: true,
|
||||
scrobbleData: [],
|
||||
uuid: null,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const { history } = this.props;
|
||||
const { history, uuid } = this.props;
|
||||
const isLoggedIn = this.props.isLoggedIn;
|
||||
|
||||
if (!isLoggedIn) {
|
||||
history.push("/login")
|
||||
}
|
||||
|
||||
getRecentScrobbles(uuid)
|
||||
.then((data) => {
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
data: data
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.setState({
|
||||
isLoading: false
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
|
@ -19,6 +44,10 @@ class Dashboard extends React.Component {
|
|||
<h1>
|
||||
Dashboard!
|
||||
</h1>
|
||||
{this.state.isLoading
|
||||
? <ScaleLoader color="#FFF" size={60} />
|
||||
: <ScrobbleTable data={this.state.data} />
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -26,8 +55,11 @@ class Dashboard extends React.Component {
|
|||
|
||||
function mapStateToProps(state) {
|
||||
const { isLoggedIn } = state.auth;
|
||||
const { uuid } = state.auth.user;
|
||||
|
||||
return {
|
||||
isLoggedIn,
|
||||
uuid,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
0
web/src/Pages/Home.css
Normal file
0
web/src/Pages/Home.css
Normal file
|
@ -1,24 +1,15 @@
|
|||
import logo from '../logo.png';
|
||||
import '../App.css';
|
||||
import './Home.css';
|
||||
import HomeBanner from '../Components/HomeBanner';
|
||||
import React from 'react';
|
||||
|
||||
class Home extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="App-header">
|
||||
<div className="pageWrapper">
|
||||
<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>
|
||||
<p className="homeText">Go-Scrobble is an open source music scrobbling service written in Go and React.</p>
|
||||
<HomeBanner />
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -1,14 +1,14 @@
|
|||
.loginBody {
|
||||
.registerBody {
|
||||
padding: 20px 5px 5px 5px;
|
||||
font-size: 16pt;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.loginFields {
|
||||
.registerFields {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.loginButton {
|
||||
.registerButton {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
margin-top:-5px;
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
import React from 'react';
|
||||
import '../App.css';
|
||||
import './Login.css';
|
||||
import { Button, Form } from 'reactstrap';
|
||||
import './Register.css';
|
||||
import { Button } from 'reactstrap';
|
||||
import ScaleLoader from "react-spinners/ScaleLoader";
|
||||
import { register } from '../Actions/auth';
|
||||
import { Formik, Field } from 'formik';
|
||||
import { Formik, Field, Form } from 'formik';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
class Register extends React.Component {
|
||||
|
@ -22,6 +22,7 @@ class Register extends React.Component {
|
|||
}
|
||||
|
||||
handleRegister(values) {
|
||||
console.log(values)
|
||||
this.setState({loading: true});
|
||||
|
||||
const { dispatch, history } = this.props;
|
||||
|
@ -53,10 +54,11 @@ class Register extends React.Component {
|
|||
<h1>
|
||||
Register
|
||||
</h1>
|
||||
<div className="loginBody">
|
||||
<div className="registerBody">
|
||||
<Formik
|
||||
initialValues={{ username: '', email: '', password: '', passwordconfirm: '' }}
|
||||
onSubmit={async values => this.handleRegister(values)}>
|
||||
onSubmit={async values => this.handleRegister(values)}
|
||||
>
|
||||
<Form>
|
||||
<label>
|
||||
Username*<br/>
|
||||
|
@ -64,7 +66,7 @@ class Register extends React.Component {
|
|||
name="username"
|
||||
type="text"
|
||||
required={trueBool}
|
||||
className="loginFields"
|
||||
className="registerFields"
|
||||
/>
|
||||
</label>
|
||||
<br/>
|
||||
|
@ -73,7 +75,7 @@ class Register extends React.Component {
|
|||
<Field
|
||||
name="email"
|
||||
type="email"
|
||||
className="loginFields"
|
||||
className="registerFields"
|
||||
/>
|
||||
</label>
|
||||
<br/>
|
||||
|
@ -83,7 +85,7 @@ class Register extends React.Component {
|
|||
name="password"
|
||||
type="password"
|
||||
required={trueBool}
|
||||
className="loginFields"
|
||||
className="registerFields"
|
||||
/>
|
||||
</label>
|
||||
<br/>
|
||||
|
@ -93,14 +95,14 @@ class Register extends React.Component {
|
|||
name="passwordconfirm"
|
||||
type="password"
|
||||
required={trueBool}
|
||||
className="loginFields"
|
||||
className="registerFields"
|
||||
/>
|
||||
</label>
|
||||
<br/><br/>
|
||||
<Button
|
||||
color="primary"
|
||||
type="submit"
|
||||
className="loginButton"
|
||||
className="registerButton"
|
||||
disabled={this.state.loading}
|
||||
>{this.state.loading ? <ScaleLoader color="#FFF" size={35} /> : "Register"}</Button>
|
||||
</Form>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue