From 6ad049efeba084acc239fdce0f42dea24f3fb193 Mon Sep 17 00:00:00 2001
From: aj <andrewjpack@gmail.com>
Date: Wed, 29 Jan 2020 12:31:19 +0000
Subject: [PATCH] fixed auth process, material settings

---
 music/auth/auth.py                |  4 +-
 src/js/Index/Index.js             | 46 +++++++++---------
 src/js/Playlist/New.js            | 13 +++--
 src/js/Playlist/View/Edit.js      |  5 +-
 src/js/Settings/ChangePassword.js | 79 ++++++++++++++++---------------
 src/js/Settings/LastFM.js         | 52 ++++++++++----------
 src/js/Settings/SettingsRouter.js | 45 +++++++++++++-----
 src/js/Settings/SpotifyLink.js    | 36 ++++++--------
 8 files changed, 155 insertions(+), 125 deletions(-)

diff --git a/music/auth/auth.py b/music/auth/auth.py
index 5e10df5..520afe3 100644
--- a/music/auth/auth.py
+++ b/music/auth/auth.py
@@ -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)
diff --git a/src/js/Index/Index.js b/src/js/Index/Index.js
index dc7c701..1d14848 100644
--- a/src/js/Index/Index.js
+++ b/src/js/Index/Index.js
@@ -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>
         );
     }
 }
diff --git a/src/js/Playlist/New.js b/src/js/Playlist/New.js
index e8eaf8b..34cf4a4 100644
--- a/src/js/Playlist/New.js
+++ b/src/js/Playlist/New.js
@@ -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>
         );
     }
 
diff --git a/src/js/Playlist/View/Edit.js b/src/js/Playlist/View/Edit.js
index 6100ead..4745855 100644
--- a/src/js/Playlist/View/Edit.js
+++ b/src/js/Playlist/View/Edit.js
@@ -125,7 +125,7 @@ export class Edit extends Component{
 
     getPlaylistInfo(){
         return axios.get(`/api/playlist?name=${ this.state.name }`);
-    }
+    }    
 
     getPlaylists(){
         return axios.get(`/api/playlists`);
@@ -168,7 +168,7 @@ export class Edit extends Component{
             showMessage(`Error Updating Boundary Value (${error.response.status})`);
         });
     }
-
+    
     handleRecommendationsSampleChange(sample){
         if(sample == ''){
             sample = 0;
@@ -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}
diff --git a/src/js/Settings/ChangePassword.js b/src/js/Settings/ChangePassword.js
index 2cdb810..5b1f074 100644
--- a/src/js/Settings/ChangePassword.js
+++ b/src/js/Settings/ChangePassword.js
@@ -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" 
-                                        name="current" 
-                                        value={this.state.current} 
+                                        variant="outlined" 
                                         onChange={this.handleCurrentChange}
-                                        className="full-width" /></td>
-                            </tr>
-                            <tr>
-                                <td className="ui-text center-text text-no-select">New:</td>
-                                <td><input 
+                                        name="current"
+                                        value={this.state.current}
+                                        className="full-width" />
+                                </Grid>
+                                <Grid item className="full-width">
+                                    <TextField
+                                        label="New Password" 
+                                        variant="outlined" 
                                         type="password" 
-                                        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 
+                                        name="new1"
+                                        value={this.state.new1} 
+                                        className="full-width" />
+                                </Grid>
+                                <Grid item className="full-width">
+                                    <TextField
+                                        label="New Password Again" 
+                                        variant="outlined" 
                                         type="password" 
-                                        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>}
+                                        name="new2"
+                                        value={this.state.new2}
+                                        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>
         );
     }
diff --git a/src/js/Settings/LastFM.js b/src/js/Settings/LastFM.js
index 88174d1..3f673bd 100644
--- a/src/js/Settings/LastFM.js
+++ b/src/js/Settings/LastFM.js
@@ -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 {
@@ -64,30 +66,32 @@ 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>;
+        const table =
+            <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>;
 
diff --git a/src/js/Settings/SettingsRouter.js b/src/js/Settings/SettingsRouter.js
index d3c3955..ae7fef7 100644
--- a/src/js/Settings/SettingsRouter.js
+++ b/src/js/Settings/SettingsRouter.js
@@ -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>
         );
     }
diff --git a/src/js/Settings/SpotifyLink.js b/src/js/Settings/SpotifyLink.js
index 41efe8c..7d82a7f 100644
--- a/src/js/Settings/SpotifyLink.js
+++ b/src/js/Settings/SpotifyLink.js
@@ -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;
\ No newline at end of file