- 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:
Daniel Mason 2021-03-30 21:36:28 +13:00
parent 7ae9a0cd66
commit 2f8aa2e502
Signed by: idanoo
GPG key ID: 387387CDBC02F132
31 changed files with 425 additions and 171 deletions

View file

@ -1,4 +1,4 @@
.aboutBody {
padding: 20px 5px 5px 5px;
padding: 20px 0px 0px 0px;
font-size: 16pt;
}

View file

@ -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>
);
}

View file

@ -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
View file

View 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>
);

View file

@ -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;

View file

@ -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>