Unify button and callback.html

1 files changed, 13 insertions, 1 deletions

diff --git a/dist/callback.html b/dist/callback.html
index 8f46292..ec2e584 100644
--- a/dist/callback.html
+++ b/dist/callback.html
@@ -61,7 +61,8 @@ body {
 </div>
 <div class="main">
     <h1>Spotify Intersect</h1>
-    <button id="Load_button" onclick="load_songs()">Load songs to database</button>
+    <button id="Connect_button" onclick="connect_button()">Connect to Spotify</button>
+    <button id="Load_button" onclick="load_songs()" disabled=true>Load songs to database</button>
     <p id="status"></p>
     <input type="text" id="name1" value="First name">
     <input type="text" id="name2" value="Second name">
@@ -80,6 +81,13 @@ body {
             if (!results[2]) return '';
             return decodeURIComponent(results[2].replace(/\+/g, " "));
         }
+        function connect_button() {
+            //http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript
+            let token = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+            sessionStorage.setItem('token', token);
+            document.getElementById("Connect_button").disabled = true;
+            window.location = "https://kobert.dev/spotify-api/token/" + token;
+        }
 
         function load_songs() {
             console.log("loading songs");
@@ -112,6 +120,10 @@ function match_users() {
             });    
 }
         function populate_users() {
+            if (getParameterByName("code") != null) {
+                document.getElementById("Connect_button").disabled = true;
+                document.getElementById("Load_button").disabled = false;
+            }
             fetch("https://kobert.dev/spotify-api/user")
             .then(function(response) {
               if (!response.ok) {