sarsoo/Mixonomer
1
0
Fork 0
Code Issues 15 Pull Requests Actions Packages Projects Releases Wiki Activity

Material Redesign #1

Merged
Sarsoo merged 6 commits from material into master 2020-01-29 12:33:42 +00:00
Conversation 0 Commits 6 Files Changed 28 +155 -125
8 changed files with 155 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 6ad049efeb - Show all commits

4
music/auth/auth.py
View File

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

46
src/js/Index/Index.js
View File

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

13
src/js/Playlist/New.js
View File

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

1
src/js/Playlist/View/Edit.js
View File

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

69
src/js/Settings/ChangePassword.js
View File

@ -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>
<div style={{maxWidth: '500px', margin: 'auto', marginTop: '20px'}}>
<Card align="center">
<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
<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>
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>
{ this.state.error && <p style={{color: "red"}} className="center-text">{this.state.errorValue}</p>}
</Card>
</div>
);
}

44
src/js/Settings/LastFM.js
View File

@ -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 =
<div style={{maxWidth: '400px', margin: 'auto', marginTop: '20px'}}>
<Card align="center">
<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"
<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}
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>;
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>;

39
src/js/Settings/SettingsRouter.js
View File

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

34
src/js/Settings/SpotifyLink.js
View File

@ -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>
<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 /> }
</td>
</tr>
</tbody>
</table>;
</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;