From 065f03691f6b6650f7bfcb54aaa89d5c218a36c8 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Tue, 27 Aug 2024 19:37:21 +0200
Subject: [PATCH] UX: Disable comparison tool if not logged in

---
 src/UI/Comparison/ComparisonTool.svelte | 54 +++++++++++++------------
 1 file changed, 29 insertions(+), 25 deletions(-)

diff --git a/src/UI/Comparison/ComparisonTool.svelte b/src/UI/Comparison/ComparisonTool.svelte
index 0a9a33d4c..4d3edc91c 100644
--- a/src/UI/Comparison/ComparisonTool.svelte
+++ b/src/UI/Comparison/ComparisonTool.svelte
@@ -15,6 +15,7 @@
   import AccordionSingle from "../Flowbite/AccordionSingle.svelte"
   import GlobeAlt from "@babeard/svelte-heroicons/mini/GlobeAlt"
   import { ComparisonState } from "./ComparisonState"
+  import LoginToggle from "../Base/LoginToggle.svelte"
 
   export let externalData: Store<
     | { success: { content: Record<string, string> } }
@@ -45,35 +46,38 @@
   let enableLogin = state.featureSwitches.featureSwitchEnableLogin
 </script>
 
-{#if !$sourceUrl || !$enableLogin}
-  <!-- empty block -->
-{:else if $externalData === undefined}
-  <Loading />
-{:else if $externalData["error"] !== undefined}
-  <div class="subtle low-interaction rounded p-2 px-4 italic">
-    <Tr t={Translations.t.external.error} />
-  </div>
-{:else if $propertyKeysExternal.length === 0 && $knownImages.size + $unknownImages.length === 0}
-  <Tr cls="subtle" t={t.noDataLoaded} />
-{:else if !$hasDifferencesAtStart}
+<LoginToggle {state} silentFail>
+
+  {#if !$sourceUrl || !$enableLogin}
+    <!-- empty block -->
+  {:else if $externalData === undefined}
+    <Loading />
+  {:else if $externalData["error"] !== undefined}
+    <div class="subtle low-interaction rounded p-2 px-4 italic">
+      <Tr t={Translations.t.external.error} />
+    </div>
+  {:else if $propertyKeysExternal.length === 0 && $knownImages.size + $unknownImages.length === 0}
+    <Tr cls="subtle" t={t.noDataLoaded} />
+  {:else if !$hasDifferencesAtStart}
   <span class="subtle text-sm">
     <Tr t={t.allIncluded.Subs({ source: $sourceUrl })} />
   </span>
-{:else if $comparisonState !== undefined}
-  <AccordionSingle expanded={!collapsed}>
+  {:else if $comparisonState !== undefined}
+    <AccordionSingle expanded={!collapsed}>
     <span slot="header" class="flex">
       <GlobeAlt class="h-6 w-6" />
       <Tr t={Translations.t.external.title} />
     </span>
-    <ComparisonTable
-      externalProperties={$externalData["success"]}
-      {state}
-      {feature}
-      {layer}
-      {tags}
-      {readonly}
-      sourceUrl={$sourceUrl}
-      comparisonState={$comparisonState}
-    />
-  </AccordionSingle>
-{/if}
+      <ComparisonTable
+        externalProperties={$externalData["success"]}
+        {state}
+        {feature}
+        {layer}
+        {tags}
+        {readonly}
+        sourceUrl={$sourceUrl}
+        comparisonState={$comparisonState}
+      />
+    </AccordionSingle>
+  {/if}
+</LoginToggle>