Improve authentication error modal — radicle-explorer

We tell users to check their firewall and ad blocker settings in case they bump into authentication problems.

   params: { title: string };
 }
 interface SessionRoute {
 export interface SessionRoute {
   resource: "session";
   params: {
     id: string;

   } edited ${absoluteTimestamp(timestamp)}`;
 }
 export function baseUrlToUrl(baseUrl: BaseUrl): URL {
   return new URL(`${baseUrl.scheme}://${baseUrl.hostname}:${baseUrl.port}`);
 export function baseUrlToString(baseUrl: BaseUrl): string {
   return `${baseUrl.scheme}://${baseUrl.hostname}:${baseUrl.port}`;
 }
 // Generates a publicly shareable link.

 <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>

   import { api, httpdStore } from "@app/lib/httpd";
   import { deduplicateStore } from "@app/lib/deduplicateStore";
   import { baseUrlToUrl } from "@app/lib/utils";
   import { baseUrlToString } from "@app/lib/utils";
   import { getProjectsListingData } from "@app/lib/projects";
   import { handleError } from "@app/views/home/error";
   import { isDelegate } from "@app/lib/roles";

               </div>
             {:else if localProjects instanceof Error}
               <ErrorMessage
                 {...handleError(
                   localProjects,
                   baseUrlToUrl(api.baseUrl).toString(),
                 )} />
                 {...handleError(localProjects, baseUrlToString(api.baseUrl))} />
             {:else if !localProjects?.length}
               <div class="heading">No local projects</div>
               <div class="label">

 import { HttpdClient } from "@httpd-client";
 import { config } from "@app/lib/config";
 import { baseUrlToUrl, isLocal } from "@app/lib/utils";
 import { baseUrlToString, isLocal } from "@app/lib/utils";
 import { getProjectsListingData } from "@app/lib/projects";
 import { handleError } from "@app/views/nodes/error";

       },
     };
   } catch (error: any) {
     return handleError(error, baseUrlToUrl(api.baseUrl).toString());
     return handleError(error, baseUrlToString(api.baseUrl));
   }
 }

           style:border-radius="var(--border-radius-small">
           <ErrorMessage
             title="Failed to load diff for this revision"
             description="Make sure you are able to connect to the seed <code>${utils
               .baseUrlToUrl(api.baseUrl)
               .toString()}</code>"
             description="Make sure you are able to connect to the seed <code>${utils.baseUrlToString(
               api.baseUrl,
             )}</code>"
             {error} />
         </div>
       {/if}

     <div class="message">
       <ErrorMessage
         title="Couldn't load commits"
         description="Make sure you are able to connect to the seed <code>${baseUrlToUrl(
         description="Make sure you are able to connect to the seed <code>${baseUrlToString(
           api.baseUrl,
         ).toString()}</code>"
         )}</code>"
         {error} />
     </div>
   {/if}

   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";

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

   import { ISSUES_PER_PAGE } from "./router";
   import { closeFocused } from "@app/components/Popover.svelte";
   import { httpdStore } from "@app/lib/httpd";
   import { baseUrlToUrl, isLocal } from "@app/lib/utils";
   import { baseUrlToString, isLocal } from "@app/lib/utils";
   import capitalize from "lodash/capitalize";
   import Button from "@app/components/Button.svelte";

 import type { ErrorRoute, NotFoundRoute } from "@app/lib/router/definitions";
 import type { ProjectRoute } from "@app/views/projects/router";
 import { baseUrlToUrl, isLocal } from "@app/lib/utils";
 import { baseUrlToString, isLocal } from "@app/lib/utils";
 import { ResponseParseError, ResponseError } from "@httpd-client/lib/fetcher";
 import { httpdStore } from "@app/lib/httpd";
 import { get } from "svelte/store";

   error: Error | ResponseParseError | ResponseError,
   route: ProjectRoute,
 ): NotFoundRoute | ErrorRoute {
   const url = baseUrlToUrl(route.node);
   const url = baseUrlToString(route.node);
   if (error instanceof ResponseError && error.status === 404) {
     let subject;

 <script lang="ts">
   import type { Route } from "@app/lib/router/definitions";
   import type { SessionRoute } from "@app/lib/router/definitions";
   import { onMount } from "svelte";

   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]);