Material Redesign #1
@ -114,7 +114,7 @@ def auth():
|
||||
'client_id': client_id,
|
||||
'response_type': 'code',
|
||||
'scope': 'playlist-modify-public playlist-modify-private playlist-read-private user-read-playback-state user-modify-playback-state user-library-read',
|
||||
'redirect_uri': 'https://spotify.sarsoo.xyz/auth/spotify/token'
|
||||
'redirect_uri': 'https://music.sarsoo.xyz/auth/spotify/token'
|
||||
}
|
||||
)
|
||||
|
||||
@ -141,7 +141,7 @@ def token():
|
||||
data = {
|
||||
'grant_type': 'authorization_code',
|
||||
'code': code,
|
||||
'redirect_uri': 'https://spotify.sarsoo.xyz/auth/spotify/token'
|
||||
'redirect_uri': 'https://music.sarsoo.xyz/auth/spotify/token'
|
||||
}
|
||||
|
||||
req = requests.post('https://accounts.spotify.com/api/token', data=data, headers=headers)
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
import React, { Component } from "react";
|
||||
|
||||
import { Card, CardContent, Typography, Grid } from '@material-ui/core';
|
||||
|
||||
class Index extends Component{
|
||||
|
||||
constructor(props){
|
||||
@ -9,30 +11,26 @@ class Index extends Component{
|
||||
|
||||
render(){
|
||||
return (
|
||||
<table className="app-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="center-text text-no-select ui-text" style={{fontSize: "20px"}}>
|
||||
Construct spotify playlists from selections of other playlists
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="center-text text-no-select ui-text">
|
||||
Group sub-genre playlists
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="center-text text-no-select ui-text">
|
||||
Optionally append auto-generated recommendations
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="center-text text-no-select ui-text">
|
||||
<br></br>Playlists are run multiple times a day
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div style={{maxWidth: '500px', margin: 'auto', marginTop: '20px'}}>
|
||||
<Card align="center">
|
||||
<CardContent>
|
||||
<Grid container>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="body1">Construct spotify playlists from selections of other playlists</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="body1">Group sub-genre playlists</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="body1">Optionally append auto-generated recommendations</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="body1">Playlists are run multiple times a day</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -83,13 +83,14 @@ class NewPlaylist extends Component {
|
||||
|
||||
render(){
|
||||
return (
|
||||
<div style={{maxWidth: '500px', margin: 'auto', marginTop: '20px'}}>
|
||||
<Card align="center">
|
||||
<CardContent>
|
||||
<Grid container>
|
||||
<Grid container spacing={5}>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="h3">New</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={4}>
|
||||
<Grid item xs={12} sm={4}>
|
||||
<FormControl variant="filled">
|
||||
<InputLabel htmlFor="type-select">Type</InputLabel>
|
||||
<Select
|
||||
@ -100,19 +101,22 @@ class NewPlaylist extends Component {
|
||||
name: 'type',
|
||||
id: 'type-select',
|
||||
}}
|
||||
className="full-width"
|
||||
>
|
||||
<option value="default">Default</option>
|
||||
<option value="recents">Recents</option>
|
||||
<option value="fmchart">Last.fm Chart</option>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={8}>
|
||||
<Grid item xs={12} sm={8}>
|
||||
<TextField
|
||||
label="Name"
|
||||
variant="outlined"
|
||||
onChange={this.handleInputChange}
|
||||
name="name"
|
||||
value={this.state.name} />
|
||||
value={this.state.name}
|
||||
className="full-width" />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="body2" color="textSecondary">{ this.state.description }</Typography>
|
||||
@ -123,6 +127,7 @@ class NewPlaylist extends Component {
|
||||
<Button variant="contained" color="primary" className="full-width" onClick={this.handleSubmit}>Create</Button>
|
||||
</CardActions>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -421,6 +421,7 @@ export class Edit extends Component{
|
||||
<Grid item xs={8} sm={8} md={3}>
|
||||
<TextField
|
||||
name="newPlaylistName"
|
||||
variant="outlined"
|
||||
label="Spotify Playlist"
|
||||
value={this.state.newPlaylistName}
|
||||
onChange={this.handleInputChange}
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import React, { Component } from "react";
|
||||
const axios = require('axios');
|
||||
|
||||
import { Card, Grid, Button, TextField, CardContent, CardActions, Typography } from "@material-ui/core";
|
||||
|
||||
import showMessage from "../Toast.js"
|
||||
|
||||
class ChangePassword extends Component {
|
||||
@ -63,49 +65,52 @@ class ChangePassword extends Component {
|
||||
|
||||
render(){
|
||||
return (
|
||||
<div>
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<table className="app-table max-width">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colSpan="2"><h1 className="text-no-select">Change Password</h1></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="ui-text center-text text-no-select">Current:</td>
|
||||
<td><input
|
||||
<div style={{maxWidth: '500px', margin: 'auto', marginTop: '20px'}}>
|
||||
<Card align="center">
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<CardContent>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item className="full-width">
|
||||
<Typography variant="h4" color="textPrimary">Change Password</Typography>
|
||||
</Grid>
|
||||
<Grid item className="full-width">
|
||||
<TextField
|
||||
label="Current Password"
|
||||
type="password"
|
||||
variant="outlined"
|
||||
onChange={this.handleCurrentChange}
|
||||
name="current"
|
||||
value={this.state.current}
|
||||
onChange={this.handleCurrentChange}
|
||||
className="full-width" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="ui-text center-text text-no-select">New:</td>
|
||||
<td><input
|
||||
className="full-width" />
|
||||
</Grid>
|
||||
<Grid item className="full-width">
|
||||
<TextField
|
||||
label="New Password"
|
||||
variant="outlined"
|
||||
type="password"
|
||||
onChange={this.handleNewChange}
|
||||
name="new1"
|
||||
value={this.state.new1}
|
||||
onChange={this.handleNewChange}
|
||||
className="full-width" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="ui-text center-text text-no-select">New Again:</td>
|
||||
<td><input
|
||||
className="full-width" />
|
||||
</Grid>
|
||||
<Grid item className="full-width">
|
||||
<TextField
|
||||
label="New Password Again"
|
||||
variant="outlined"
|
||||
type="password"
|
||||
onChange={this.handleNew2Change}
|
||||
name="new2"
|
||||
value={this.state.new2}
|
||||
onChange={this.handleNew2Change}
|
||||
className="full-width" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colSpan="2"><input type="submit" style={{width: "100%"}} className="button" value="Change" /></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</form>
|
||||
{ this.state.error && <p style={{color: "red"}} className="center-text">{this.state.errorValue}</p>}
|
||||
className="full-width" />
|
||||
</Grid>
|
||||
{ this.state.error && <Grid item><Typography variant="textSeondary">{this.state.errorValue}</Typography></Grid>}
|
||||
</Grid>
|
||||
</CardContent>
|
||||
<CardActions>
|
||||
<Button type="submit" variant="contained" className="full-width" onClick={this.runStats}>Change</Button>
|
||||
</CardActions>
|
||||
</form>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import React, { Component } from "react";
|
||||
const axios = require('axios');
|
||||
|
||||
import { Card, Button, CardContent, CardActions, Typography, TextField, Grid } from "@material-ui/core";
|
||||
|
||||
import showMessage from "../Toast.js"
|
||||
|
||||
class LastFM extends Component {
|
||||
@ -65,29 +67,31 @@ class LastFM extends Component {
|
||||
|
||||
render(){
|
||||
const table =
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<table className="app-table max-width">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colSpan="2"><h1 className="ui-text center-text text-no-select">Last.fm Username</h1></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="ui-text center-text text-no-select">Username:</td>
|
||||
<td><input
|
||||
type="text"
|
||||
name="current"
|
||||
value={this.state.lastfm_username}
|
||||
onChange={this.handleChange}
|
||||
className="full-width" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colSpan="2"><input type="submit" style={{width: "100%"}} className="button" value="save" /></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</form>;
|
||||
<div style={{maxWidth: '400px', margin: 'auto', marginTop: '20px'}}>
|
||||
<Card align="center">
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<CardContent>
|
||||
<Grid container spacing={3}>
|
||||
<Grid item className="full-width">
|
||||
<Typography variant="h4" color="textPrimary">Last.fm Username</Typography>
|
||||
</Grid>
|
||||
<Grid item className="full-width">
|
||||
<TextField
|
||||
label="last.fm Username"
|
||||
variant="outlined"
|
||||
onChange={this.handleChange}
|
||||
name="current"
|
||||
value={this.state.lastfm_username}
|
||||
className="full-width" />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</CardContent>
|
||||
<CardActions>
|
||||
<Button type="submit" variant="contained" className="full-width">Save</Button>
|
||||
</CardActions>
|
||||
</form>
|
||||
</Card>
|
||||
</div>;
|
||||
|
||||
const loadingMessage = <p className="center-text text-no-select">Loading...</p>;
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import React, { Component } from "react";
|
||||
import { BrowserRouter as Route, Link } from "react-router-dom";
|
||||
import { Route, Link, Switch } from "react-router-dom";
|
||||
import { Paper, Tabs, Tab} from '@material-ui/core';
|
||||
|
||||
import ChangePassword from "./ChangePassword.js";
|
||||
import SpotifyLink from "./SpotifyLink.js";
|
||||
@ -7,19 +8,41 @@ import LastFM from "./LastFM.js";
|
||||
|
||||
class Settings extends Component {
|
||||
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
tab: 0
|
||||
}
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
}
|
||||
|
||||
handleChange(e, newValue){
|
||||
this.setState({
|
||||
tab: newValue
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<ul className="navbar" style={{width: "100%"}}>
|
||||
<li><Link to={`${this.props.match.url}/password`}>Password</Link></li>
|
||||
<li><Link to={`${this.props.match.url}/spotify`}>Spotify</Link></li>
|
||||
<li><Link to={`${this.props.match.url}/lastfm`}>Last.fm</Link></li>
|
||||
</ul>
|
||||
|
||||
<Route path={`${this.props.match.url}/password`} component={ChangePassword} />
|
||||
<Route path={`${this.props.match.url}/spotify`} component={SpotifyLink} />
|
||||
<Route path={`${this.props.match.url}/lastfm`} component={LastFM} />
|
||||
|
||||
<Paper>
|
||||
<Tabs
|
||||
value={this.state.tab}
|
||||
onChange={this.handleChange}
|
||||
indicatorColor="primary"
|
||||
centered
|
||||
width="50%"
|
||||
>
|
||||
<Tab label="Password" component={Link} to={`${this.props.match.url}/password`} />
|
||||
<Tab label="Spotify" component={Link} to={`${this.props.match.url}/spotify`} />
|
||||
<Tab label="Last.fm" component={Link} to={`${this.props.match.url}/lastfm`} />
|
||||
</Tabs>
|
||||
</Paper>
|
||||
<Switch>
|
||||
<Route path={`${this.props.match.url}/password`} component={ChangePassword} />
|
||||
<Route path={`${this.props.match.url}/spotify`} component={SpotifyLink} />
|
||||
<Route path={`${this.props.match.url}/lastfm`} component={LastFM} />
|
||||
</Switch>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import React, { Component } from "react";
|
||||
const axios = require('axios');
|
||||
|
||||
import { Card, Button, CardContent, CardActions, Typography } from "@material-ui/core";
|
||||
|
||||
import showMessage from "../Toast.js"
|
||||
|
||||
class SpotifyLink extends Component {
|
||||
@ -29,25 +31,17 @@ class SpotifyLink extends Component {
|
||||
|
||||
render(){
|
||||
const table =
|
||||
<table className="app-table max-width">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><h1 className="ui-text center-text text-no-select">Spotify Link</h1></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="ui-text center-text text-no-select">
|
||||
Status: { this.state.spotify_linked ? "Linked" : "Unlinked" }
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{ this.state.spotify_linked ? <DeAuthButton /> : <AuthButton /> }
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>;
|
||||
<div style={{maxWidth: '400px', margin: 'auto', marginTop: '20px'}}>
|
||||
<Card align="center">
|
||||
<CardContent>
|
||||
<Typography variant="h4" color="textPrimary">Admin Functions</Typography>
|
||||
<Typography variant="body2" color="textSecondary">Status: { this.state.spotify_linked ? "Linked" : "Unlinked" }</Typography>
|
||||
</CardContent>
|
||||
<CardActions>
|
||||
{ this.state.spotify_linked ? <DeAuthButton /> : <AuthButton /> }
|
||||
</CardActions>
|
||||
</Card>
|
||||
</div>;
|
||||
|
||||
const loadingMessage = <p className="center-text text-no-select">Loading...</p>;
|
||||
|
||||
@ -56,11 +50,11 @@ class SpotifyLink extends Component {
|
||||
}
|
||||
|
||||
function AuthButton(props) {
|
||||
return <a className="button full-width" href="/auth/spotify">Auth</a>;
|
||||
return <Button component='a' variant="contained" className="full-width" href="/auth/spotify">Auth</Button>;
|
||||
}
|
||||
|
||||
function DeAuthButton(props) {
|
||||
return <a className="button full-width" href="/auth/spotify/deauth">De-Auth</a>;
|
||||
return <Button component='a' variant="contained" className="full-width" href="/auth/spotify/deauth">De-Auth</Button>;
|
||||
}
|
||||
|
||||
export default SpotifyLink;
|
||||
Loading…
Reference in New Issue
Block a user