From b38cb779527b9fd6f887d5ac469bb505a8c5ea95 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Mon, 18 Nov 2024 21:05:47 +0600
Subject: [PATCH] web/turnstile: refresh turnstile if it expires in background

also renamed `turnstileLoaded` to `turnstileSolved` for more clarity
---
 web/src/components/misc/Turnstile.svelte | 10 ++++++++--
 web/src/components/save/Omnibox.svelte   | 15 +++------------
 web/src/lib/api/api.ts                   |  4 ++--
 web/src/lib/api/turnstile.ts             | 17 +++++++++++++++++
 web/src/lib/state/turnstile.ts           |  2 +-
 5 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/web/src/components/misc/Turnstile.svelte b/web/src/components/misc/Turnstile.svelte
index f1c9b625..7cb194c5 100644
--- a/web/src/components/misc/Turnstile.svelte
+++ b/web/src/components/misc/Turnstile.svelte
@@ -2,7 +2,9 @@
     import { onMount } from "svelte";
 
     import { cachedInfo } from "$lib/api/server-info";
-    import { turnstileLoaded, turnstileCreated } from "$lib/state/turnstile";
+    import { turnstileSolved, turnstileCreated } from "$lib/state/turnstile";
+
+    import turnstile from "$lib/api/turnstile";
 
     let turnstileElement: HTMLElement;
     let turnstileScript: HTMLElement;
@@ -21,7 +23,7 @@
                     return true;
                 },
                 callback: () => {
-                    $turnstileLoaded = true;
+                    $turnstileSolved = true;
                 }
             });
         }
@@ -31,6 +33,10 @@
         } else {
             turnstileScript.addEventListener("load", setup);
         }
+
+        window.addEventListener("focus", () => {
+            turnstile.refreshIfExpired();
+        });
     });
 </script>
 
diff --git a/web/src/components/save/Omnibox.svelte b/web/src/components/save/Omnibox.svelte
index 4b93f98f..8b0b443c 100644
--- a/web/src/components/save/Omnibox.svelte
+++ b/web/src/components/save/Omnibox.svelte
@@ -12,7 +12,7 @@
     import dialogs from "$lib/state/dialogs";
     import { link } from "$lib/state/omnibox";
     import { updateSetting } from "$lib/state/settings";
-    import { turnstileLoaded } from "$lib/state/turnstile";
+    import { turnstileSolved } from "$lib/state/turnstile";
 
     import type { Optional } from "$lib/types/generic";
     import type { DownloadModeOption } from "$lib/types/settings";
@@ -39,7 +39,8 @@
 
     let isDisabled = false;
     let isLoading = false;
-    let isBotCheckOngoing = false;
+    $: isBotCheckOngoing =
+        !!$cachedInfo?.info?.cobalt?.turnstileSitekey && !$turnstileSolved;
 
     const validLink = (url: string) => {
         try {
@@ -61,16 +62,6 @@
         goto("/", { replaceState: true });
     }
 
-    $: if ($cachedInfo?.info?.cobalt?.turnstileSitekey) {
-        if ($turnstileLoaded) {
-            isBotCheckOngoing = false;
-        } else {
-            isBotCheckOngoing = true;
-        }
-    } else {
-        isBotCheckOngoing = false;
-    }
-
     const pasteClipboard = () => {
         if ($dialogs.length > 0 || isDisabled || isLoading) {
             return;
diff --git a/web/src/lib/api/api.ts b/web/src/lib/api/api.ts
index fb265f54..f69c3323 100644
--- a/web/src/lib/api/api.ts
+++ b/web/src/lib/api/api.ts
@@ -5,7 +5,7 @@ import lazySettingGetter from "$lib/settings/lazy-get";
 
 import { getSession } from "$lib/api/session";
 import { currentApiURL } from "$lib/api/api-url";
-import { turnstileLoaded } from "$lib/state/turnstile";
+import { turnstileSolved } from "$lib/state/turnstile";
 import { cachedInfo, getServerInfo } from "$lib/api/server-info";
 
 import type { Optional } from "$lib/types/generic";
@@ -49,7 +49,7 @@ const request = async (url: string) => {
         } as CobaltErrorResponse;
     }
 
-    if (getCachedInfo?.info?.cobalt?.turnstileSitekey && !get(turnstileLoaded)) {
+    if (getCachedInfo?.info?.cobalt?.turnstileSitekey && !get(turnstileSolved)) {
         return {
             status: "error",
             error: {
diff --git a/web/src/lib/api/turnstile.ts b/web/src/lib/api/turnstile.ts
index 33d65a7f..6a39ad7e 100644
--- a/web/src/lib/api/turnstile.ts
+++ b/web/src/lib/api/turnstile.ts
@@ -1,3 +1,5 @@
+import { turnstileSolved } from "$lib/state/turnstile";
+
 const getResponse = () => {
     const turnstileElement = document.getElementById("turnstile-widget");
 
@@ -12,13 +14,28 @@ const update = () => {
     const turnstileElement = document.getElementById("turnstile-widget");
 
     if (turnstileElement) {
+        turnstileSolved.set(false);
         return window?.turnstile?.reset(turnstileElement);
     }
 
     return null;
 }
 
+const refreshIfExpired = () => {
+    const turnstileElement = document.getElementById("turnstile-widget");
+
+    if (turnstileElement) {
+        const isExpired = window?.turnstile?.isExpired(turnstileElement);
+        if (isExpired) {
+            console.log("expired, refreshing the turnstile widget rn");
+            return update();
+        }
+        console.log("turnstile not expired, nothing to do");
+    }
+}
+
 export default {
     getResponse,
     update,
+    refreshIfExpired,
 }
diff --git a/web/src/lib/state/turnstile.ts b/web/src/lib/state/turnstile.ts
index 5a165bc7..12231b11 100644
--- a/web/src/lib/state/turnstile.ts
+++ b/web/src/lib/state/turnstile.ts
@@ -1,4 +1,4 @@
 import { writable } from "svelte/store";
 
-export const turnstileLoaded = writable(false);
+export const turnstileSolved = writable(false);
 export const turnstileCreated = writable(false);