Made the "old version notice" less red. Worked hard to make the OAuth process work more reliable with less code in Greenshot, by using an Ajax request from getgreenshot.org

_includes/oauth-code.html

@@ -0,0 +1,61 @@
+<script language="JavaScript">
+	var urlPart = window.location.href.split('?')[1];
+	var anchor = urlPart.split("#")[1];
+	var searchQuery = urlPart.split("#")[0];
+	
+	function getQueryVariable(query, variable) {
+		var vars = query.split('&');
+		for (var i = 0; i < vars.length; i++) {
+			var pair = vars[i].split('=');
+			if (decodeURIComponent(pair[0]) == variable) {
+				return decodeURIComponent(pair[1]);
+			}
+		}
+		return null;
+	}
+
+	var error = getQueryVariable(anchor, "error");
+	if (error != null) {
+		// Handle error?
+		window.console.error("Error: " + error);
+		jQuery('#authFailed').slideUp();
+	}
+	var port = getQueryVariable(searchQuery, "state");
+
+	// Build json object from the values provided by the oauth redirect
+	var jsonObject = {};
+
+	var vars = anchor.split('&');
+	for (var i = 0; i < vars.length; i++) {
+		var pair = vars[i].split('=');
+		jsonObject[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
+	}
+
+	// Send the data to the server, uses JQuery
+	$.ajax({
+		url: 'http://localhost:' + port + '/authorize',
+		contentType: 'application/json',
+		method: 'POST',
+		data: JSON.stringify(jsonObject),
+		dataType: 'json'
+	}).done(function(data) {
+		jQuery('#doingAuth').slideUp();
+		if (data.hasOwnProperty('version')) {
+			// Process used version to show any hints about newer versions, this is in the included "version-check.html"
+			checkVersion(data.version);
+		}
+		if (data.hasOwnProperty('error')) {
+			jQuery('#authFailed').slideDown();
+		} else {
+			jQuery('#authFailed').slideUp();
+			jQuery('#authOkay').slideDown();
+			jQuery('#donation').slideDown();
+		}
+	}).fail(function( jqXHR, textStatus, errorThrown) {
+		jQuery('#doingAuth').slideUp();
+		jQuery('#authFailed').slideDown();
+		jQuery('#authOkay').slideUp();
+		window.console.error("Error: " + textStatus);
+	});
+
+</script>

_includes/oauth-out-of-bounds.html

@@ -1,50 +0,0 @@
-<script language="JavaScript">
-	var oldTitle = window.document.title;
-	var searchQuery = window.location.href.split('?')[1].replace("#", "&");
-	var vars = searchQuery.split('&');
-
-	function getQueryVariable(variable) {
-		for (var i = 0; i < vars.length; i++) {
-			var pair = vars[i].split('=');
-			if (decodeURIComponent(pair[0]) == variable) {
-				return decodeURIComponent(pair[1]);
-			}
-		}
-		return null;
-	}
-
-	var index = 0;
-	var titles = [];
-	var nrOfTitles = 0;
-	function updateTitle() {
-		if (index >= nrOfTitles) {
-			index = 0;
-		}
-		window.document.title = titles[index];
-		index = index+1;
-	}
-
-	if (searchQuery && searchQuery.length >= 1) {
-		var state = getQueryVariable("state");
-		var error = getQueryVariable("error");
-
-		if (error == null && (state || code)) {
-			var numberOfArguments = vars.length;
-			nrOfTitles = numberOfArguments -1;
-			for (var i = 0; i < numberOfArguments; i++) {
-				var pair = vars[i].split('=');
-				if (decodeURIComponent(pair[0]) == "state") {
-					continue;
-				}
-				titles.push(oldTitle + "?nr=" + numberOfArguments + "&state=" + state + "&" + decodeURIComponent(pair[0]) + "=" + decodeURIComponent(pair[1]));
-			}
-			// Update the title in a loop
-			setInterval(updateTitle, 100);
-		} else {
-			window.document.title = oldTitle + "?error=" + error;
-		}
-	}
-	else {
-		window.document.title = oldTitle + "?error=noquery";
-	}
-</script>

_includes/oauth.html

@@ -0,0 +1,20 @@
+{% include version-check.html %}
+
+<div id="doingAuth">
+    <strong>Trying to inform Greenshot about the {{ include.service }} authorization...</strong></p>
+</div>
+<div id="authOkay" class="alert alert-success collapse" role="alert">
+    <i class="fa fa-check-circle"></i> Greenshot should now be able to use {{ include.service }}, you can close this window.
+</div>
+<div id="authFailed" class="alert alert-danger collapse" role="alert">
+    <i class="fa fa-exclamation-triangle"></i> <strong>Failed to contact Greenshot to inform about the {{ include.service }} authorization.</strong><br/>
+</div>
+
+{% include oauth-code.html %}
+
+<p></p>
+
+<div id="donation" class="collapse">
+    <strong>We are happy that you use Greenshot. If you like it, please consider to support the development of this open source screenshot tool with a donation.</strong></p>
+    {% include donate.html %}
+</div>

_includes/version-check.html

@@ -14,7 +14,7 @@ var release_blog_posts = new Array();
 <i class="fa fa-check-circle"></i> You are using the most recent version of Greenshot.
 <div id="blogPost1" class="collapse">More information about this version can be found <a id="blog1" href="">here</a>.</div>
 </div>
-<div id="oldVersion" class="alert alert-danger collapse" role="alert">
+<div id="oldVersion" class="alert alert-warning collapse" role="alert">
 <i class="fa fa-exclamation-triangle"></i> <strong>You are not using the newest Greenshot version.</strong><br/>
 <div id="blogPost2" class="collapse">More information about the version you are using can be found <a id="blog2" href="">here</a>.</div>
 You might want to download the newest version, which is {{ latest_release.tag_name }}, from <a href="/downloads/">here</a>. Also always make sure to get Greenshot from <a href="https://getgreenshot.org/">getgreenshot.org</a>, .
@@ -67,10 +67,7 @@ function compareVersion(a, b) {
     return 0;
 }
 
-$(document).ready(function () {
-var versionMatch = /version=([^&]+)/.exec(location);
-if (versionMatch) {
-    var installedVersion = versionMatch[1];
+function checkVersion(installedVersion) {
     var greenshotTag = {% if latest_release.tag_name %}"{{ latest_release.tag_name }}"{% else %}"Greenshot-Test-1.2.9.129"{% endif %};
     var releaseVersion = /.*(\d+\.\d+\.\d+\.\d+)/.exec(greenshotTag)[1];
     var compare=compareVersion(releaseVersion, installedVersion);
@@ -89,6 +86,12 @@ if (versionMatch) {
         jQuery('#currentVersion').slideDown();
     }
 }
+
+$(document).ready(function () {
+    var versionMatch = /version=([^&]+)/.exec(location);
+    if (versionMatch) {
+        checkVersion(versionMatch[1]);
+    }
 });
 
 </script>

pages/authorize/dropbox.html

@@ -0,0 +1,9 @@
+---
+layout: oauth
+title: Dropbox authorization
+permalink: /oauth/dropbox
+categories: [oauth]
+tags: [uses_alerts]
+comments: []
+---
+{% include oauth.html service="Dropbox" %}

pages/authorize/imgur.html

@@ -0,0 +1,9 @@
+---
+layout: oauth
+title: Imgur authorization
+permalink: /authorize/imgur
+categories: [oauth]
+tags: [uses_alerts]
+comments: []
+---
+{% include oauth.html service="Imgur" %}

pages/oauth/dropbox.html

@@ -1,15 +0,0 @@
----
-layout: oauth
-title: Greenshot authenticated with Dropbox
-permalink: /oauth/dropbox
-categories: [oauth]
-tags: [uses_alerts]
-comments: []
----
-{% include oauth-out-of-bounds.html %}
-{% include version-check.html %}
-<p>
-Greenshot should now be authenticated to use Dropbox, you can close this window.
-<p>
-<strong>We are happy that you use Greenshot. If you like it, please consider to support the development of this open source screenshot tool with a donation.</strong></p>
-{% include donate.html %}

pages/oauth/imgur.html

@@ -1,15 +0,0 @@
----
-layout: oauth
-title: Imgur
-permalink: /oauth/imgur
-categories: [oauth]
-tags: [uses_alerts]
-comments: []
----
-{% include oauth-out-of-bounds.html %}
-{% include version-check.html %}
-<p>
-Greenshot should now be authenticated to use Imgur, you can close this window.
-<p>
-<strong>We are happy that you use Greenshot. If you like it, please consider to support the development of this open source screenshot tool with a donation.</strong></p>
-{% include donate.html %}