4a5e67d Improve authentication error modal — radicle-explorer

Radicle web interface

Improve authentication error modal

Rūdolfs Ošiņš committed 2 years ago

commit 4a5e67dd2b50c898b20d2b0f86459e22dcb0a39d
parent 41435951c19d0507dd3d6e791fac1f616acc0f59

4 files changed +51 -28

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

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

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

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