Feat/auth link (#874)

* ✨ add auth link feature Co-authored-by: Cristian <[email protected]>
matchID-project · Nov 16, 2023 · de9ffa6 · de9ffa6
1 parent 055cb45
commit de9ffa6
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 4 deletions.
diff --git a/public/css/global.css b/public/css/global.css
@@ -1335,4 +1335,6 @@ svg.leaflet-image-layer.leaflet-interactive path {
   margin-top: -0.5rem;
 }
 
+.rf-fi--valid{color:var(--success)
+
   /* Leaflet */
diff --git a/src/App.svelte b/src/App.svelte
@@ -15,7 +15,7 @@
 <script>
 	import { onMount } from 'svelte';
 	import MatchIDHeader from './components/views/MatchIDHeader.svelte';
-	import { admin, user, alphaFeatures, version, route, searchInput, searchCanvas, current, resultsPerPage,
+	import { admin, user, accessToken, alphaFeatures, version, route, searchInput, searchCanvas, current, resultsPerPage,
 		updateURL, advancedSearch, fuzzySearch, displayMode, themeDnum, wasSearched, liveConfig
 	} from './components/tools/stores.js';
 	import { URLSearchSubmit } from './components/tools/search.js';
@@ -78,7 +78,18 @@
 		window.addEventListener('shake', handleShake, false);
 	});
 
-	$: if ($route.path === '/search') { URLSearchSubmit(new URLSearchParams(location.search)) };
+	$: if ($route.path === '/search') {
+		const searchParams = new URLSearchParams(location.search)
+		if (! $accessToken) {
+			const accessTokenTmp = searchParams.get('accessToken');
+			const userTmp = searchParams.get('user');
+			if (accessTokenTmp && userTmp) {
+				localStorage.setItem("accessToken", JSON.stringify(accessTokenTmp));
+				localStorage.setItem("user", JSON.stringify(userTmp));
+			}
+		}
+		URLSearchSubmit(searchParams);
+	};
 
 	const setCanonical = (url) => {
 		var link = !!document.querySelector("link[rel='canonical']") ? document.querySelector("link[rel='canonical']") : document.createElement('link');

diff --git a/src/components/tools/icons.js b/src/components/tools/icons.js
@@ -154,6 +154,19 @@ preserveAspectRatio="xMidYMid meet"
 viewBox="0 0 24 24">
 <path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10zm-.997-6l7.07-7.071l-1.414-1.414l-5.656 5.657l-2.829-2.829l-1.414 1.414L11.003 16z" fill="currentColor"/>
 <rect x="0" y="0" width="24" height="24" fill="rgba(0, 0, 0, 0)" />
+</svg>`,
+    "ri:clipboard-line": `<svg
+width="100%" 
+xmlns="http://www.w3.org/2000/svg"
+xmlns:xlink="http://www.w3.org/1999/xlink"
+aria-hidden="true"
+focusable="false"
+style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg);
+transform: rotate(360deg);"
+preserveAspectRatio="xMidYMid meet"
+viewBox="0 0 24 24">
+<path d="M7 4V2h10v2h3.007c.548 0 .993.445.993.993v16.014a.994.994 0 0 1-.993.993H3.993A.994.994 0 0 1 3 21.007V4.993C3 4.445 3.445 4 3.993 4H7zm0 2H5v14h14V6h-2v2H7V6zm2-2v2h6V4H9z" fill="currentColor"/>
+<rect x="0" y="0" width="24" height="24" fill="rgba(0, 0, 0, 0)" />
 </svg>`,
     "ri:close-line": `<svg
 width="100%" 

diff --git a/src/components/views/APIKey.svelte b/src/components/views/APIKey.svelte
@@ -26,10 +26,33 @@
         </div>
         <p></p>
         <button
-            class="rf-btn rf-padding-right-2N"
+            class="rf-btn rf-margin-1N rf-padding-right-2N"
+            on:click|preventDefault={() => copyToClipBoard($accessTokenInfos.access_token, "apiKey")}
+        >
+            Copier clé
+            &nbsp;
+            <Icon
+                icon={linkCopied.apiKey ? 'ri:check-line' : 'ri:clipboard-line' }
+                class="rf-fi--md {linkCopied.apiKey ? "rf-fi--valid" : ""}"
+            />
+        </button>
+        <button
+            class="rf-btn rf-margin-1N rf-padding-right-2N"
+            on:click|preventDefault={() => copyToClipBoard(link(), "link")}
+        >
+            Copier lien
+            &nbsp;
+            <Icon
+                icon={linkCopied.link ? 'ri:check-line' : 'ri:link' }
+                class="rf-fi--md {linkCopied.link ? "rf-fi--valid" : ""}"
+            />
+        </button>
+        <button
+            class="rf-btn rf-margin-1N rf-padding-right-2N"
             on:click|preventDefault={() => showAPIKey=false}
         >
             Fermer
+            &nbsp;
             <Icon
                 icon='ri:close-line'
                 class="rf-fi--md"
@@ -40,11 +63,26 @@
 
 <script>
 import { slide } from 'svelte/transition';
-import { accessTokenInfos } from '../tools/stores.js';
+import { user, accessTokenInfos } from '../tools/stores.js';
 import Modal from './Modal.svelte';
 import Icon from './Icon.svelte';
 
 export let showAPIKey = false;
+let linkCopied = {
+    apiKey: false,
+    link: false
+};
+
+const copyToClipBoard = (text, key) => {
+    navigator.clipboard.writeText(text);
+    linkCopied[key] = true;
+    blur();
+    setTimeout(() => linkCopied[key] = false, 2000)
+}
+
+const link = () => {
+    return `${location.origin}/search?user=${$user}&accessToken=${$accessTokenInfos.access_token}`;
+}
 
 
 </script>