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

@@ -22,7 +22,7 @@ export interface NotFoundRoute {
   params: { title: string };
 }
 
-interface SessionRoute {
+export interface SessionRoute {
   resource: "session";
   params: {
     id: string;

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>

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);
+      }
     }
   }
 

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(