basic styling, add scopes

anxdpanic · Apr 5, 2017 · b4d2642 · b4d2642
1 parent 3ab61d1
commit b4d2642
Showing 1 changed file with 97 additions and 51 deletions.
diff --git a/docs/token/index.html b/docs/token/index.html
@@ -4,77 +4,123 @@
 <head>
     <meta charset="utf-8">
 
-    <title>Twitch for Kodi</title>
+    <title>Twitch on Kodi</title>
     <meta name="description" content="">
     <meta name="author" content="A Talented Community">
     <style>
-		div.body {
-			width: 800px;
-			margin: 0 auto;
+		body {
+			font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
+			font-size: 16px;
+			padding-top: 20px;
 		}
-		.parent div {
-			float: left;
-			clear: none;
-			padding-top: 30px;
-			padding-bottom: 30px;
+		div.container {
+			width: 80%
+			margin: 10%
 		}
-		div.head {
-			font-size: 22px;
-			font-weight: 900;
-			margin: 10px;
+		table#response {
+			text-align:center; 
+			margin-left:auto; 
+			margin-right:auto; 
+			width:420px;
 		}
-		div#response {
-			font-size: 22px;
-			margin: 10px;
+		tr, td, th {
+			text-align:left; 
+			padding-left: 5px;
+		}
+		th {
+			font-size: 20px;
+			color: white;
+			border-bottom: 3px solid grey;
+			background-color: #6034b1;
+		}
+		ul {
+			margin-top: 0px;
+			margin-bottom: 0px;
+		}		
+		li {
+			list-style-type: none;
+			font-size: 14px;
+		}
+		div.title-head {
+			display: inline-block;
+			margin-right: 10px;
+			font-weight: 600;
+		}
+		#response-token {
+			display: none;
+			width: 280px;
+			font-size: 16px;
+			text-align: center;
 		}
-
     </style>
 </head>
 
 <body>
 <div class="body">
-    <div class="parent">
-        <div class="head" id="response_type"></div>
-        <div id="response"></div>
+    <div class="container">
+		<table id="response">
+			<tr>
+			<th>Twitch on Kodi</th>
+			</tr>
+			<tr>
+			<td><div class="title-head" id="response-title"></div><input class="readonly-input" type="text" id="response-token" onClick="this.select();" readonly="readonly"></td>
+			</tr>		
+			<tr>
+			<td><div class="info" id="response-additional"></div></td>
+			</tr>
+		</table>		
     </div>
 </div>
 <script>
-		function get_pairs(pairString) {
-			var fragment = {};
-			var fragments = pairString.split('&');
-			var fragmentPair = [];
-			for (var i in fragments) {
-				fragmentPair = fragments[i].split('=');
-				if (fragmentPair.length !== 2) {
-					continue;
-				}
-				fragment[fragmentPair[0]] = fragmentPair[1];
+	function get_pairs(pairString) {
+		var fragment = {};
+		var fragments = pairString.split('&');
+		var fragmentPair = [];
+		for (var i in fragments) {
+			fragmentPair = fragments[i].split('=');
+			if (fragmentPair.length !== 2) {
+				continue;
 			}
-			return fragment;
+			fragment[fragmentPair[0]] = fragmentPair[1];
 		}
-		var response = "";
-		var response_type = "";
-		var fragment = null;
-		var locationHash = location.hash.substr(1);
-		fragment = get_pairs(locationHash);
-		if (typeof fragment["access_token"] != "undefined") {
-			response_type = "OAuth token";
-			response = fragment["access_token"];
+		return fragment;
+	}
+	var response = "";
+	var response_type = "";
+	var response_scopes = null;
+	var fragment = null;
+	var locationHash = location.hash.substr(1);
+	fragment = get_pairs(locationHash);
+	if (typeof fragment["access_token"] != "undefined") {
+		response_type = "OAuth Token";
+		response = fragment["access_token"];
+		if (typeof fragment["scope"] != "undefined") {
+			var temp_scopes = fragment["scope"];
+			temp_scopes = temp_scopes.split("+");
+			response_scopes = "<div class=\"title-head\" id=\"response-scopes-title\">Authorized Scopes</div><ul>";
+			for (i = 0; i < temp_scopes.length; i++) { 
+				response_scopes += "<li>" + temp_scopes[i] + "</li>";
+			}
+			response_scopes += "</ul>";
 		}
-		else {
-			var getParameters = location.search.substr(1);
-			fragment = get_pairs(getParameters);
-			if (typeof fragment["error"] != "undefined") {
-				response_type = "Error";
-				response = fragment["error"];
-				if (typeof fragment["error_description"] != "undefined") {
-					response += ": " + decodeURIComponent(fragment["error_description"].replace(/\+/g, " "));
-				}
+		document.getElementById('response-title').innerHTML = response_type;
+		document.getElementById('response-token').value = response;
+		document.getElementById('response-additional').innerHTML = response_scopes;
+		document.getElementById('response-token').style.display = "inline";
+	}
+	else {
+		var getParameters = location.search.substr(1);
+		fragment = get_pairs(getParameters);
+		if (typeof fragment["error"] != "undefined") {
+			response_type = "Error";
+			response = fragment["error"];
+			if (typeof fragment["error_description"] != "undefined") {
+				response += ": " + decodeURIComponent(fragment["error_description"].replace(/\+/g, " "));
 			}
+			document.getElementById('response-title').innerHTML = response_type;
+			document.getElementById('response-additional').innerHTML = response;
 		}
-		document.getElementById('response_type').innerHTML = response_type;
-		document.getElementById('response').innerHTML = response;
-
+	}
 </script>
 </body>
 </html>