Receive authorization modal (instead of alert

src/js/components/Modal/AuthorizationModal_Receive.js

@@ -0,0 +1,54 @@
+
+import React, { PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { Link } from 'react-router'
+import { createStore, bindActionCreators } from 'redux'
+
+import * as uiActions from '../../services/ui/actions'
+import * as helpers from '../../helpers'
+
+import Icon from '../Icon'
+import Thumbnail from '../Thumbnail'
+
+export default class extends React.Component{
+
+	constructor(props){
+		super(props)
+	}
+
+	handleImport(e){
+		this.props.spotifyActions.importAuthorization(this.props.data)
+		this.props.uiActions.closeModal()
+	}
+
+	render(){
+		if (!this.props.data || !this.props.data.user || !this.props.data.authorization){
+			return null
+		}
+
+		var user = this.props.data.user
+
+		return (
+			<div>
+				<h4 className="no-bottom-padding">Spotify authorization received</h4>
+				<h3 className="grey-text">{user.display_name ? user.display_name : user.id} has shared their Spotify authorization with you. Importing this will overwrite your existing Spotify Authorization.</h3>
+
+				<div className="user-view">
+					<div className="intro">
+						<Thumbnail images={user.images} circle />
+						<h1>{user.display_name ? user.display_name : user.id}</h1>
+						<ul className="details">
+							<li>{user.id}</li>
+							<li>{user.followers.total} followers</li>
+						</ul>
+					</div>
+				</div>
+
+				<div className="actions centered-text">
+					<button onClick={e => this.props.uiActions.closeModal()}>Ignore</button>
+					<button className="primary" onClick={e => this.handleImport(e)}>Import</button>
+				</div>
+			</div>
+		)
+	}
+}

src/js/components/Modal/SendAuthorizationModal.js → src/js/components/Modal/AuthorizationModal_Send.js

@@ -9,7 +9,7 @@ import * as helpers from '../../helpers'
 
 import Icon from '../Icon'
 
-class SendAuthorizationModal extends React.Component{
+class AuthorizationModal_Send extends React.Component{
 
 	constructor(props){
 		super(props)
@@ -71,4 +71,4 @@ const mapDispatchToProps = (dispatch) => {
 	}
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(SendAuthorizationModal)
+export default connect(mapStateToProps, mapDispatchToProps)(AuthorizationModal_Send)

src/js/components/Modal/Modal.js

@@ -9,11 +9,12 @@ import AddToPlaylistModal from './AddToPlaylistModal'
 import AddToQueueModal from './AddToQueueModal'
 import CreatePlaylistModal from './CreatePlaylistModal'
 import EditPlaylistModal from './EditPlaylistModal'
-import SendAuthorizationModal from './SendAuthorizationModal'
 import EditRadioModal from './EditRadioModal'
 import ImageZoomModal from './ImageZoomModal'
 import KioskModeModal from './KioskModeModal'
 import SearchSettingsModal from './SearchSettingsModal'
+import AuthorizationModal_Send from './AuthorizationModal_Send'
+import AuthorizationModal_Receive from './AuthorizationModal_Receive'
 
 import * as uiActions from '../../services/ui/actions'
 import * as mopidyActions from '../../services/mopidy/actions'
@@ -48,7 +49,8 @@ class Modal extends React.Component{
 					{ this.props.modal.name == 'add_to_queue' ? <AddToQueueModal uiActions={this.props.uiActions} mopidyActions={this.props.mopidyActions} /> : null }
 					{ this.props.modal.name == 'create_playlist' ? <CreatePlaylistModal uiActions={this.props.uiActions} /> : null }
 					{ this.props.modal.name == 'edit_playlist' ? <EditPlaylistModal uiActions={this.props.uiActions} data={this.props.modal.data} /> : null }
-					{ this.props.modal.name == 'send_authorization' ? <SendAuthorizationModal uiActions={this.props.uiActions} pusherActions={this.props.pusherActions} data={this.props.modal.data} /> : null }
+					{ this.props.modal.name == 'send_authorization' ? <AuthorizationModal_Send uiActions={this.props.uiActions} pusherActions={this.props.pusherActions} data={this.props.modal.data} /> : null }
+					{ this.props.modal.name == 'receive_authorization' ? <AuthorizationModal_Receive uiActions={this.props.uiActions} spotifyActions={this.props.spotifyActions} data={this.props.modal.data} /> : null }
 					{ this.props.modal.name == 'edit_radio' ? <EditRadioModal uiActions={this.props.uiActions} pusherActions={this.props.pusherActions} spotifyActions={this.props.spotifyActions} data={this.props.modal.data} radio={this.props.radio} artists={this.props.artists} tracks={this.props.tracks} /> : null }
 					{ this.props.modal.name == 'image_zoom' ? <ImageZoomModal uiActions={this.props.uiActions} data={this.props.modal.data} /> : null }
 					{ this.props.modal.name == 'kiosk_mode' ? <KioskModeModal uiActions={this.props.uiActions} data={this.props.modal.data} /> : null }

src/js/services/pusher/middleware.js

@@ -239,17 +239,7 @@ const PusherMiddleware = (function(){
                 break
 
             case 'PUSHER_SPOTIFY_AUTHORIZATION':
-                if( window.confirm('Spotify authorization for user '+action.me.id+' received. Do you want to import?') ){
-
-                    // remove any existing authentication
-                    store.dispatch({ type: 'SPOTIFY_AUTHORIZATION_REVOKED' })
-
-                    // import our new authentication
-                    store.dispatch({ type: 'SPOTIFY_ME_LOADED', data: action.me })
-                    store.dispatch({ type: 'SPOTIFY_AUTHORIZATION_GRANTED', data: action.authorization })
-                }else{
-                    console.log('Authorization ignored')
-                }
+                store.dispatch(uiActions.openModal('receive_authorization', {authorization: action.authorization, user: action.me}))
                 break
 
             case 'PUSHER_START_RADIO':

src/js/services/spotify/actions.js

@@ -199,6 +199,14 @@ export function refreshingToken(){
     }
 }
 
+export function importAuthorization(data){
+    return {
+        type: 'SPOTIFY_IMPORT_AUTHORIZATION',
+        user: data.user,
+        authorization: data.authorization
+    }
+}
+
 
 /**
  * Get current user

src/js/services/spotify/reducer.js

@@ -46,6 +46,17 @@ export default function reducer(spotify = {}, action){
                 me: false
             })
 
+        case 'SPOTIFY_IMPORT_AUTHORIZATION':
+            return Object.assign({}, spotify, { 
+                authorizing: false, 
+                authorized: true,
+                authorization: action.authorization,
+                access_token: action.authorization.access_token,
+                refresh_token: action.authorization.refresh_token,
+                token_expiry: action.authorization.token_expiry,
+                me: action.user
+            })
+
         case 'SPOTIFY_TOKEN_REFRESHING':
             return Object.assign({}, spotify, { refreshing_token: true })
 

src/scss/components/_lists.scss

@@ -23,9 +23,8 @@
 		}
 
 		:root .notouch &:not(.header):hover {
-			background: $faint_grey;
+			background: rgba(150,150,150,0.1);
 			cursor: pointer;
-			border-color: $faint_grey;
 		}
 
 		&.header {

src/scss/components/_modal.scss

@@ -195,6 +195,16 @@
 		}
 	}
 
+	&.receive_authorization {
+		.user-view {
+			padding-top: 40px;
+
+			.thumbnail {
+				max-width: 150px;
+			}
+		}
+	}
+
 	.actions {
 		padding-top: 50px;
 		text-align: center;
@@ -208,7 +218,7 @@
 	@include responsive( $bp_medium ){
 
 		.content {
-			padding: 50px 10%;
+			padding: 100px 10%;
 			width: 80%;
 
 			.list {