diff --git a/src/js/components/SpotifyAuthenticationFrame.js b/src/js/components/SpotifyAuthenticationFrame.js
index 71f100d4..df7d3876 100755
--- a/src/js/components/SpotifyAuthenticationFrame.js
+++ b/src/js/components/SpotifyAuthenticationFrame.js
@@ -17,7 +17,6 @@ class SpotifyAuthenticationFrame extends React.Component{
super(props);
this.state = {
- frameUrl: this.props.authorization_url+'?action=frame',
authorizing: false
}
}
@@ -30,71 +29,89 @@ class SpotifyAuthenticationFrame extends React.Component{
// This is triggered when the popup posts a message, which is then passed to
// the iframe, and then passed on to the parent frame (our application)
window.addEventListener('message', function(event){
-
- // only allow incoming data from our authorized authenticator proxy
- var authorization_domain = self.props.authorization_url.substring(0,self.props.authorization_url.indexOf('/',8))
- if (event.origin != authorization_domain){
- self.props.uiActions.createNotification('Authorization failed. '+event.origin+' is not the configured authorization_url.','bad')
- return false
- }
-
- // Window prematurely closed
- if (event.data == 'closed'){
- self.setState({
- frameUrl: self.props.authorization_url+'?action=frame',
- authorizing: false
- })
-
- // Popup was blocked by the browser
- } else if (event.data == 'blocked'){
- self.props.uiActions.createNotification('Popup blocked. Please allow popups and try again.','bad')
- self.setState({
- frameUrl: self.props.authorization_url+'?action=frame',
- authorizing: false
- })
-
- } else {
- var data = JSON.parse(event.data);
-
- // Spotify bounced with an error
- if (typeof(data.error) !== 'undefined'){
- self.props.uiActions.createNotification(data.error,'bad')
-
- // No errors? We're in!
- } else {
- self.props.spotifyActions.authorizationGranted(data);
- self.props.spotifyActions.getMe();
- }
-
- // Turn off our authorizing switch
- self.setState({
- frameUrl: self.props.authorization_url+'?action=frame',
- authorizing: false
- })
- }
-
+ self.handleMessage(event)
}, false);
}
+ handleMessage(event){
+
+ var data = JSON.parse(event.data)
+
+ // Only allow incoming data from our authorized authenticator proxy
+ var authorization_domain = this.props.authorization_url.substring(0,this.props.authorization_url.indexOf('/',8))
+ if (event.origin != authorization_domain){
+ this.props.uiActions.createNotification('Authorization failed. '+event.origin+' is not the configured authorization_url.','bad')
+ return false
+ }
+
+ // Spotify bounced with an error
+ if (typeof(data.error) !== 'undefined'){
+ this.props.uiActions.createNotification(data.error,'bad')
+
+ // No errors? We're in!
+ } else {
+ this.props.spotifyActions.authorizationGranted(data)
+ this.props.spotifyActions.getMe()
+ }
+
+ // Turn off our authorizing switch
+ this.setState({authorizing: false})
+ }
+
startAuthorization(){
- this.setState({
- frameUrl: this.props.authorization_url+'?action=authorize&app='+location.protocol+'//'+window.location.host,
- authorizing: true
- })
+
+ var self = this
+ this.setState({authorizing: true})
+
+ // Open an authentication request window (to spotify)
+ var url = this.props.authorization_url+'?action=authorize'
+ var scopes = [
+ 'playlist-modify-private',
+ 'playlist-modify-public',
+ 'playlist-read-private',
+ 'playlist-modify-private',
+ 'user-library-read',
+ 'user-library-modify',
+ 'user-follow-modify',
+ 'user-follow-read',
+ 'user-top-read',
+ 'user-read-currently-playing',
+ 'user-read-playback-state'
+ ]
+ var popup = window.open(url+'&scope='+scopes.join('%20'),"popup","height=680,width=400");
+
+ // Start timer to check our popup's state
+ var timer = setInterval(checkPopup, 1000);
+ function checkPopup(){
+
+ // Popup has been closed
+ if (typeof(popup) !== 'undefined' && popup){
+ if (popup.closed){
+ self.setState({authorizing: false})
+ clearInterval(timer);
+ }
+
+ // Popup does not exist, so must have been blocked
+ } else {
+ self.props.uiActions.createNotification('Popup blocked. Please allow popups and try again.','bad')
+ self.setState({authorizing: false})
+ clearInterval(timer);
+ }
+ }
}
renderAuthorizeButton(){
- if( this.state.authorizing ){
+ if (this.state.authorizing){
return (
)
- }else if( this.props.authorized ){
+ } else if (this.props.authorized){
return (
)
- }else{
+ } else {
return (
)
@@ -107,7 +124,7 @@ class SpotifyAuthenticationFrame extends React.Component{
if (this.props.refreshing_token){
return (
);
} else {
@@ -120,7 +137,6 @@ class SpotifyAuthenticationFrame extends React.Component{
render(){
return (
-
{ this.renderAuthorizeButton() }
{ this.renderRefreshButton() }