new login

huangdarren1106 · Dec 12, 2024 · 0823a53 · 0823a53
1 parent a770500
commit 0823a53
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 104 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -392,13 +392,13 @@ <h1 class="text-4xl font-black text-gray-900 sm:text-5xl">Spotify Pie Chart: You
     <img src="/huan-hero-2.png" alt="App screenshot" width="768" height="511" class="" />
 
     <div x-data="spotifyLogin" class="py-6 text-gray-700">
-  <div class="w-full text-center" x-show="!token">
+  <div class="w-full text-center">
     <p class="mt-0 mb-4 text-center">
       Login with Spotify to see your charts now 👇
     </p>
-    <button @click="openSpotifyAuthUrl"
-      class="w-full px-6 py-3 text-xl font-bold text-center text-white bg-green-700 rounded-full md:w-1/2">Login
-      with Spotify</button>
+    <a :href="spotifyAuthUrl"
+      class="w-full px-6 py-3 text-xl font-bold text-center text-white no-underline bg-green-700 rounded-full md:w-1/2">Login
+      with Spotify</a>
     <div class="max-w-xs mx-auto text-sm text-left">
       <p class="mt-6">By logging in, you agree:</p>
       <ul class="">
@@ -409,29 +409,6 @@ <h1 class="text-4xl font-black text-gray-900 sm:text-5xl">Spotify Pie Chart: You
       </ul>
     </div>
   </div>
-  <div x-show="token" @login.window="openSpotifyAuthUrl" class="flex flex-col items-center w-full mb-4 text-center">
-    <p class="font-semibold" x-show="loading">Please hang tight while your Spotify Pie is baking...</p>
-    <img x-show="loading" class="w-10 my-2 motion-safe:animate-spin" src="spotify-pie.png" alt="Spotify Pie">
-
-    <div x-show="!loading" class="flex flex-col items-center justify-center">
-      <p class="mb-1 text-xl font-semibold text-green-800 sm:text-2xl">
-        Your Spotify Pie is ready! 🎉
-      </p>
-
-      <div class="max-w-xs mx-auto text-sm text-center text-green-800 sm:text-base sm:max-w-sm">
-        <p>Heads up: Clicking the button might show a quick ad. It's how we keep Spotify Pie free and tasty for
-          everyone!</p>
-        <p class="">Thank you for your support. Let's dig in!</p>
-      </div>
-
-      <a href="/spotify-pie"
-        class="flex items-center justify-center gap-2 px-6 py-3 text-xl font-bold text-white no-underline bg-green-600 rounded-full cursor-pointer rewarded">See
-        Your
-        Spotify Pie <img class="w-6 my-0 shrink-0" src="spotify-pie.png" alt="Spotify Pie"></a>
-
-
-    </div>
-  </div>
 
   </div>
 
@@ -904,32 +881,8 @@ <h3 class="text-lg font-black leading-6 text-neutral-900">Behind Spotify Pie</h3
 </div>
       <script>
       document.addEventListener('alpine:init', () => {
-        console.log('spotify-login.blade.php')
         Alpine.data('spotifyLogin', () => ({
-          token: null,
-          loading: false,
-          countdown: 5,
-          spotifyAuthUrl: 'https://auth.musicpiechart.com/auth/login?embed=true',
-          openSpotifyAuthUrl() {
-            window.open(this.spotifyAuthUrl, '_blank', 'height=600,width=800');
-          },
-          onMessage(event) {
-            if (event.data.app === 'musicpiechart') {
-              this.token = event.data.token;
-              localStorage.setItem('token', event.data.token);
-              this.loading = true;
-              // start countdown
-              setInterval(() => {
-                this.countdown--;
-              }, 1000);
-              setTimeout(() => {
-                this.loading = false;
-              }, this.countdown * 1000);
-            }
-          },
-          async init() {
-            window.addEventListener('message', this.onMessage.bind(this));
-          }
+          spotifyAuthUrl: 'https://auth.musicpiechart.com/auth/login?redirect_to=https://huangdarren1106.github.io/callback',
         }));
       });
     </script>

diff --git a/docs/spotify-stats.html b/docs/spotify-stats.html
@@ -452,9 +452,9 @@ <h1 class="text-4xl font-black text-gray-900 sm:text-5xl">Spotify Stats - View Y
       View your Spotify statistics 👇
     </p>
     <div class="flex justify-center">
-      <button @click="openSpotifyAuthUrl"
-        class="w-full px-6 py-3 text-xl font-bold text-center text-white bg-green-700 rounded-full md:w-2/3">Login
-        with Spotify</button>
+      <a :href="spotifyAuthUrl"
+        class="w-full px-6 py-3 text-xl font-bold text-center text-white no-underline bg-green-700 rounded-full md:w-2/3">Login
+        with Spotify</a>
     </div>
     <div class="max-w-xs mx-auto text-sm prose prose-lg text-left">
       <p class="mt-6">By logging in, you agree:</p>
@@ -1149,17 +1149,7 @@ <h3 class="text-lg font-black leading-6 text-neutral-900">Behind Spotify Pie</h3
               }
             },
 
-            spotifyAuthUrl: 'https://auth.musicpiechart.com/auth/login?embed=true',
-            openSpotifyAuthUrl() {
-              window.open(this.spotifyAuthUrl, '_blank', 'height=600,width=800');
-            },
-            onMessage(event) {
-              if (event.data.app === 'musicpiechart') {
-                this.token = event.data.token;
-                localStorage.setItem('token', event.data.token);
-                this.getTopTracks(this.time_range);
-              }
-            },
+            spotifyAuthUrl: 'https://auth.musicpiechart.com/auth/login?redirect_to=https://huangdarren1106.github.io/callback',
 
             getTopTracks(time_range) {
               fetch(`https://api.spotify.com/v1/me/top/tracks?limit=50&time_range=${time_range}`, {
@@ -1352,7 +1342,6 @@ <h3 class="text-lg font-black leading-6 text-neutral-900">Behind Spotify Pie</h3
             },
 
             async init() {
-              window.addEventListener('message', this.onMessage.bind(this));
               // read token from local storage
               this.token = localStorage.getItem('token');
               if (this.token) {
@@ -1363,7 +1352,6 @@ <h3 class="text-lg font-black leading-6 text-neutral-900">Behind Spotify Pie</h3
                   console.log(e);
                   this.reset();
                 }
-
               }
             }
           }));