From bf7252fc967e9bf2c15b02231e6a0a529009090c Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Fri, 29 Sep 2017 08:56:30 +1300
Subject: [PATCH] Refining token button; Investigating auth popup issue (#200)

---
 .../Modal/AuthorizationModal_Send.js          |  2 +-
 .../components/SpotifyAuthenticationFrame.js  |  2 +-
 src/js/views/Settings.js                      | 19 ++++++++++---------
 src/scss/global/_forms.scss                   |  4 ++--
 4 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/js/components/Modal/AuthorizationModal_Send.js b/src/js/components/Modal/AuthorizationModal_Send.js
index 8e1832b6..f62c5531 100755
--- a/src/js/components/Modal/AuthorizationModal_Send.js
+++ b/src/js/components/Modal/AuthorizationModal_Send.js
@@ -31,7 +31,7 @@ class AuthorizationModal_Send extends React.Component{
 		}
 
 		if (connections.length <= 0){
-			return <div className="no-results">No connections available</div>
+			return <div className="no-results">No peer connections available</div>
 		} else {
 			return (
 				<div className="list small pusher-connection-list">
diff --git a/src/js/components/SpotifyAuthenticationFrame.js b/src/js/components/SpotifyAuthenticationFrame.js
index ed3ff9f6..eadb5f1e 100755
--- a/src/js/components/SpotifyAuthenticationFrame.js
+++ b/src/js/components/SpotifyAuthenticationFrame.js
@@ -81,7 +81,7 @@ class SpotifyAuthenticationFrame extends React.Component{
 			'playlist-read-collaborative',
 			'ugc-image-upload' // playlist image uploading
 		]
-		var popup = window.open(url+'&scope='+scopes.join('%20'),"popup","height=680,width=400");
+		var popup = window.open(url+'&scope='+scopes.join('%20'),"popup","height=500,width=350");
 
 		// Start timer to check our popup's state
 		var timer = setInterval(checkPopup, 1000);
diff --git a/src/js/views/Settings.js b/src/js/views/Settings.js
index 451a5e1e..53fc5975 100755
--- a/src/js/views/Settings.js
+++ b/src/js/views/Settings.js
@@ -286,19 +286,13 @@ class Settings extends React.Component {
 								onBlur={e => this.handleBlur('locale',e.target.value)} 
 								value={this.state.locale} />
 							<div className="description">
-								Lowercase <a href="http://en.wikipedia.org/wiki/ISO_639" target="_blank">ISO 639</a> language code and an uppercase <a href="http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2" target="_blank">ISO 3166-1 alpha-2</a> country code, joined by an underscore (eg <em>en_NZ</em>)
+								Lowercase <a href="http://en.wikipedia.org/wiki/ISO_639" target="_blank">ISO 639 language code</a> and an uppercase <a href="http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2" target="_blank">ISO 3166-1 alpha-2 country code</a>, joined by an underscore (eg <em>en_NZ</em>)
 							</div>
 						</div>
 					</div>
 
 					<h4 className="underline">Spotify</h4>
-					<div className="field">
-						<div className="name">Authorization</div>
-						<div className="input">
-							<SpotifyAuthenticationFrame />
-							{ this.renderSendAuthorizationButton() }
-						</div>
-					</div>
+
 					<div className="field current-user">
 						<div className="name">Current user</div>
 						<div className="input">
@@ -306,6 +300,14 @@ class Settings extends React.Component {
 								{ this.renderSpotifyUser() }
 							</div>
 						</div>
+					</div>	
+					<div className="field">
+						<div className="name">Authorization</div>
+						<div className="input">
+							<SpotifyAuthenticationFrame />
+							{ this.renderSendAuthorizationButton() }
+							{this.props.spotify.refreshing_token ? <button className="working">Refreshing...</button> : <button onClick={e => this.props.spotifyActions.refreshingToken()}>Force token refresh</button>}
+						</div>
 					</div>
 
 					<h4 className="underline">Advanced</h4>
@@ -353,7 +355,6 @@ class Settings extends React.Component {
 						<div className="name">Reset</div>
 						<div className="input">
 					        <ConfirmationButton className="destructive" content="Reset all settings" confirmingContent="Are you sure?" onConfirm={() => this.resetAllSettings()} />
-					        <button onClick={e => this.props.spotifyActions.refreshingToken()}>Refresh Spotify token</button>
 				        </div>
 			        </div>
 
diff --git a/src/scss/global/_forms.scss b/src/scss/global/_forms.scss
index eb5df075..53bc8e15 100755
--- a/src/scss/global/_forms.scss
+++ b/src/scss/global/_forms.scss
@@ -140,6 +140,7 @@ input[type="submit"] {
 
 	&.working {
 		position: relative;
+		cursor: wait !important;
 
 		&:after {
 			pointer-events: none;
@@ -147,8 +148,7 @@ input[type="submit"] {
 			display: block;
 			content: '';
 		    animation: slideloader 1s infinite;
-			background: $mid_grey;
-			opacity: 0.5;
+			background: rgba(200,200,200,0.4);
 			top: 0;
 			left: 0;
 			bottom: 0;