From 4a5e67dd2b50c898b20d2b0f86459e22dcb0a39d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Fri, 23 Feb 2024 15:49:36 +0000
Subject: [PATCH] Improve authentication error modal

We tell users to check their firewall and ad blocker settings in case
they bump into authentication problems. This also separates out the
modal to be only used by the session view.
---
 src/lib/router/definitions.ts              |  2 +-
 src/modals/AuthenticationErrorModal.svelte | 29 +++++++++++++++++---
 src/views/projects/Issue/New.svelte        | 32 ++++++++++++++--------
 src/views/session/Index.svelte             | 16 +++--------
 4 files changed, 51 insertions(+), 28 deletions(-)

diff --git a/src/lib/router/definitions.ts b/src/lib/router/definitions.ts
index b227b7ae5..c64597bf8 100644
--- a/src/lib/router/definitions.ts
+++ b/src/lib/router/definitions.ts
@@ -22,7 +22,7 @@ export interface NotFoundRoute {
   params: { title: string };
 }
 
-interface SessionRoute {
+export interface SessionRoute {
   resource: "session";
   params: {
     id: string;
diff --git a/src/modals/AuthenticationErrorModal.svelte b/src/modals/AuthenticationErrorModal.svelte
index f6dc4bf47..ac92c2ff7 100644
--- a/src/modals/AuthenticationErrorModal.svelte
+++ b/src/modals/AuthenticationErrorModal.svelte
@@ -1,15 +1,36 @@
 <script lang="ts">
+  import { baseUrlToString } from "@app/lib/utils";
+  import * as httpd from "@app/lib/httpd";
+
   import Modal from "@app/components/Modal.svelte";
   import Icon from "@app/components/Icon.svelte";
 
-  export let title: string;
-  export let subtitle: string[];
+  // @ts-expect-error https://github.com/microsoft/TypeScript/issues/41532
+  const isBrave = navigator.brave !== undefined;
+  const url = baseUrlToString(httpd.api.baseUrl);
 </script>
 
-<Modal {title} showCloseButton>
+<Modal title="Authentication failed" showCloseButton>
   <Icon name="alert" size="48" slot="icon" />
 
   <div slot="subtitle">
-    {@html subtitle.join("<br />")}
+    Make sure your browser is able to connect to <a href={url}>{url}</a>
+    &#x200B.
+
+    <br />
+
+    {#if isBrave}
+      It seems like you're using Brave browser, to make authentication work, <br />
+      disable trackers and ad blockers in settings/shields.
+    {:else}
+      Firewalls and ad blockers can interfere with authentication, <br />
+      try disabling them and try again.
+    {/if}
+
+    <br />
+    <br />
+    If the above doesn't help, check for errors in the browser console and
+    <br />
+    in the terminal where you ran the auth command.
   </div>
 </Modal>
diff --git a/src/views/projects/Issue/New.svelte b/src/views/projects/Issue/New.svelte
index 02c0a56ec..392e15bbf 100644
--- a/src/views/projects/Issue/New.svelte
+++ b/src/views/projects/Issue/New.svelte
@@ -8,7 +8,7 @@
   import { httpdStore } from "@app/lib/httpd";
 
   import AssigneeInput from "@app/views/projects/Cob/AssigneeInput.svelte";
-  import AuthenticationErrorModal from "@app/modals/AuthenticationErrorModal.svelte";
+  import ErrorModal from "@app/modals/ErrorModal.svelte";
   import CobHeader from "@app/views/projects/Cob/CobHeader.svelte";
   import ErrorMessage from "@app/components/ErrorMessage.svelte";
   import ExtendedTextarea from "@app/components/ExtendedTextarea.svelte";
@@ -45,16 +45,26 @@
         node: baseUrl,
         issue: result.id,
       });
-    } catch {
-      modal.show({
-        component: AuthenticationErrorModal,
-        props: {
-          title: "Authentication failed",
-          subtitle: [
-            "Could not create the issue. Make sure you're still logged in.",
-          ],
-        },
-      });
+    } catch (error) {
+      if (error instanceof Error) {
+        modal.show({
+          component: ErrorModal,
+          props: {
+            title: "Coult not create issue",
+            subtitle: [
+              "There was an error while updating the issue.",
+              "Make sure you're authenticated.",
+              "Check your radicle-httpd logs for details.",
+            ],
+            error: {
+              message: error.message,
+              stack: error.stack,
+            },
+          },
+        });
+      } else {
+        console.error(error);
+      }
     }
   }
 
diff --git a/src/views/session/Index.svelte b/src/views/session/Index.svelte
index f9c00aa13..1dbeb30ad 100644
--- a/src/views/session/Index.svelte
+++ b/src/views/session/Index.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { Route } from "@app/lib/router/definitions";
+  import type { SessionRoute } from "@app/lib/router/definitions";
 
   import { onMount } from "svelte";
 
@@ -12,7 +12,7 @@
 
   import AuthenticationErrorModal from "@app/modals/AuthenticationErrorModal.svelte";
 
-  export let activeRoute: Extract<Route, { resource: "session" }>;
+  export let activeRoute: SessionRoute;
 
   onMount(async () => {
     const port = Number.parseInt(activeRoute.params.apiAddr.split(":")[1]);
@@ -21,18 +21,10 @@
     }
     const isAuthenticated = await httpd.authenticate(activeRoute.params);
 
-    if (isAuthenticated) {
-      // TODO: Show toast.
-    } else {
+    if (!isAuthenticated) {
       modal.show({
         component: AuthenticationErrorModal,
-        props: {
-          title: "Authentication failed",
-          subtitle: [
-            "There was an error while authenticating.",
-            "Check your radicle-httpd logs for details.",
-          ],
-        },
+        props: {},
       });
     }
     void router.navigateToUrl(