Implement authenticated DisWho API as per KaKi87/deno-diswho (#43)

Implement authenticated DisWho API

package.json

@@ -24,6 +24,7 @@
     "@zerodevx/svelte-toast": "^0.1.4",
     "axios": "^0.21.1",
     "fflate": "^0.6.7",
+    "jwt-decode": "^3.1.2",
     "papaparse": "^5.3.0",
     "sass": "^1.35.1",
     "sirv-cli": "^0.4.4",

src/App.svelte

@@ -1,20 +1,39 @@
 <script>
-	import { Router, Route } from "svelte-routing";
+	import { onMount } from 'svelte';
+	import { Router, Route } from 'svelte-routing';
+	import decodeJwt from 'jwt-decode';
 
 	import Header from './components/Header.svelte';
 	import Footer from './components/Footer.svelte';
-	
+
 	import Stats from './views/Stats.svelte';
 	import Loader from './views/Loader.svelte';
-	import Help from "./views/Help.svelte";
+	import Help from './views/Help.svelte';
 
 	import Modal from 'svelte-simple-modal';
 
-	import { SvelteToast } from '@zerodevx/svelte-toast'
+	import { SvelteToast } from '@zerodevx/svelte-toast';
 
 	const options = {
-		duration: 10000
-	}
+	    duration: 10000
+	};
+
+	onMount(() => {
+	    const
+            paramDiswhoJwt = new URLSearchParams(window.location.search).get('diswhoJwt'),
+            storeDiswhoJwt = localStorage.getItem('diswhoJwt');
+        if(paramDiswhoJwt){
+            window.history.replaceState(null, document.title, location.pathname);
+            localStorage.setItem('diswhoJwt', paramDiswhoJwt);
+        }
+	    else if(
+	        !storeDiswhoJwt
+            ||
+	        storeDiswhoJwt && decodeJwt(storeDiswhoJwt).expirationTimestamp < Date.now()
+        ){
+            window.location.replace(`https://diswho.androz2091.fr?returnUrl=${window.location.href}`);
+        }
+    });
 </script>
 
 <svelte:head>

src/app/extractor.js

@@ -13,7 +13,11 @@ import { snakeCase } from 'snake-case';
  * @param userID The ID of the user to fetch
  */
 const fetchUser = async (userID) => {
-    const res = await axios(`https://diswho.androz2091.fr/user/${userID}`).catch(() => {});
+    const res = await axios(`https://diswho.androz2091.fr/user/${userID}`, {
+        headers: {
+            'Authorization': `Bearer ${localStorage.getItem('diswhoJwt')}`
+        }
+    }).catch(() => {});
     if (!res || !res.data) return {
         username: 'Unknown',
         discriminator: '0000',

src/components/FunFact.svelte

@@ -1,8 +1,8 @@
 <script>
     export let svg;
     export let strokeWidth = 2;
-    export let strokeLinecap = "round";
-    export let strokeLinejoin = "round"
+    export let strokeLinecap = 'round';
+    export let strokeLinejoin = 'round';
     export let count = null;
     export let content = null;
     export let explanation = null;

src/views/Stats.svelte

@@ -1,15 +1,15 @@
 <script>
     import { blur } from 'svelte/transition';
-    import { data } from "../app/store";
+    import { data } from '../app/store';
     import { generateAvatarURL, getGitHubContributors } from '../app/helpers';
     import generateDemoData from '../app/demo';
     import Chart from 'svelte-frappe-charts';
     import Modal from '../components/Modal.svelte';
     import { getContext, onMount, onDestroy } from 'svelte';
-    import SvelteTooltip from 'svelte-tooltip'
+    import SvelteTooltip from 'svelte-tooltip';
     import { toast } from '@zerodevx/svelte-toast';
     import { navigate } from 'svelte-routing';
-    
+
     import ProfileCard from '../components/ProfileCard.svelte';
     import Card from '../components/Card.svelte';
     import FunFact from '../components/FunFact.svelte';
@@ -33,19 +33,19 @@
             });
 
             timeout = setTimeout(() => {
-                showModal('<div style="text-align: center">Like what you see?<br><a href="https://androz2091.fr/discord" target="_blank">Support us by saying hello and sharing your stats in our Discord server!<a></div>')
+                showModal('<div style="text-align: center">Like what you see?<br><a href="https://androz2091.fr/discord" target="_blank">Support us by saying hello and sharing your stats in our Discord server!<a></div>');
             }, 10000);
         } else navigate('/');
     });
 
     onDestroy(() => timeout && clearTimeout(timeout));
-    
+
     const { open } = getContext('simple-modal');
-    
+
     const showModal = (message) => {
         open(Modal, { message });
     };
-    
+
     const hoursLabels = new Array(24).fill(0).map((v, i) => i == 0 ? '12am' : i < 12 ? `${i}am` : i == 12 ? '12pm' : `${i-12}pm`);
     </script>
 
@@ -188,14 +188,14 @@
                         {/each}
                     </Leaderboard>
                 </Card>
-                
+
                 <Card name="about">
                     <div style="text-align: center;">
                         <h2>About this project</h2>
                         <p>Discord Data Package Explorer is a free, ad-free and <a href="https://github.com/Androz2091/discord-data-package-explorer" target="_blank" class="text-discord" style="text-decoration: none;">open source</a> website made with Svelte.
                         <p>These are all the developers who contributed to the creation of DDPE!</p>
                     </div>
-                    
+
                     <div class="contributors">
                         {#await getGitHubContributors()}
                             <p>Loading...</p>
@@ -219,7 +219,7 @@
             </div>
         {/if}
     </div>
-    
+
     <style>
         .statistics {
             margin-top: 5rem;
@@ -242,21 +242,21 @@
             flex-wrap: wrap;
             justify-content: center;
             align-items: center;
-    
+
             margin-top: 5px;
-    
+
             border-radius: 10px;
         }
 
         .contributors-item {
             width: 50px;
             height: 50px;
-            
+
             margin-top: 5px;
             margin-bottom: 5px;
             margin-right: 5px;
             margin-left: 5px;
-    
+
             border-radius: 100%;
             background-color: #373c42;
             background-size: contain;
@@ -269,4 +269,3 @@
             }
         }
     </style>
-

yarn.lock

@@ -797,6 +797,11 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz"
   integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
 
+jwt-decode@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/jwt-decode/-/jwt-decode-3.1.2.tgz#3fb319f3675a2df0c2895c8f5e9fa4b67b04ed59"
+  integrity sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==
+
 kleur@^3.0.0:
   version "3.0.3"
   resolved "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz"