diff --git a/src/js/components/Modal/AuthorizationModal_Receive.js b/src/js/components/Modal/AuthorizationModal_Receive.js new file mode 100755 index 00000000..9d5b3554 --- /dev/null +++ b/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 ( +
+

Spotify authorization received

+

{user.display_name ? user.display_name : user.id} has shared their Spotify authorization with you. Importing this will overwrite your existing Spotify Authorization.

+ +
+
+ +

{user.display_name ? user.display_name : user.id}

+
    +
  • {user.id}
  • +
  • {user.followers.total} followers
  • +
+
+
+ +
+ + +
+
+ ) + } +} \ No newline at end of file diff --git a/src/js/components/Modal/SendAuthorizationModal.js b/src/js/components/Modal/AuthorizationModal_Send.js similarity index 90% rename from src/js/components/Modal/SendAuthorizationModal.js rename to src/js/components/Modal/AuthorizationModal_Send.js index 0031f864..cf1ddfc7 100755 --- a/src/js/components/Modal/SendAuthorizationModal.js +++ b/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) \ No newline at end of file +export default connect(mapStateToProps, mapDispatchToProps)(AuthorizationModal_Send) \ No newline at end of file diff --git a/src/js/components/Modal/Modal.js b/src/js/components/Modal/Modal.js index 751c4f1c..20437114 100755 --- a/src/js/components/Modal/Modal.js +++ b/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' ? : null } { this.props.modal.name == 'create_playlist' ? : null } { this.props.modal.name == 'edit_playlist' ? : null } - { this.props.modal.name == 'send_authorization' ? : null } + { this.props.modal.name == 'send_authorization' ? : null } + { this.props.modal.name == 'receive_authorization' ? : null } { this.props.modal.name == 'edit_radio' ? : null } { this.props.modal.name == 'image_zoom' ? : null } { this.props.modal.name == 'kiosk_mode' ? : null } diff --git a/src/js/services/pusher/middleware.js b/src/js/services/pusher/middleware.js index 4e4f441f..a7d4563e 100755 --- a/src/js/services/pusher/middleware.js +++ b/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': diff --git a/src/js/services/spotify/actions.js b/src/js/services/spotify/actions.js index 2d215e7b..6b334bec 100755 --- a/src/js/services/spotify/actions.js +++ b/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 diff --git a/src/js/services/spotify/reducer.js b/src/js/services/spotify/reducer.js index 33e3e84a..b5f36d21 100755 --- a/src/js/services/spotify/reducer.js +++ b/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 }) diff --git a/src/scss/components/_lists.scss b/src/scss/components/_lists.scss index 665b1d7d..222b94c5 100755 --- a/src/scss/components/_lists.scss +++ b/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 { diff --git a/src/scss/components/_modal.scss b/src/scss/components/_modal.scss index 0752c52d..db8b07d7 100755 --- a/src/scss/components/_modal.scss +++ b/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 {