cancel approval flow on frontend when request is abandoned by client

src/views/Approve.svelte

@@ -3,7 +3,7 @@
     import { invoke } from '@tauri-apps/api/tauri';
 
     import { navigate } from '../lib/routing.js';
-    import { appState, completeRequest } from '../lib/state.js';
+    import { appState, cleanupRequest } from '../lib/state.js';
     import ErrorAlert from '../ui/ErrorAlert.svelte';
     import Link from '../ui/Link.svelte';
     import KeyCombo from '../ui/KeyCombo.svelte';
@@ -71,29 +71,29 @@
         if ($appState.currentRequest.response) {
             await respond();
         }
-    })
+    });
 </script>
 
 
 <!-- Don't render at all if we're just going to immediately proceed to the next screen -->
-{#if error || !$appState.currentRequest.response}
+{#if error || !$appState.currentRequest?.response}
     <div class="flex flex-col space-y-4 p-4 m-auto max-w-xl h-screen items-center justify-center">
         {#if error}
             <ErrorAlert bind:this={alert}>
-                {error}
+                {error.msg}
                 <svelte:fragment slot="buttons">
-                    <button class="btn btn-sm btn-alert-error" on:click={completeRequest}>Cancel</button>
+                    <button class="btn btn-sm btn-alert-error" on:click={cleanupRequest}>Cancel</button>
                     <button class="btn btn-sm btn-alert-error" on:click={respond}>Retry</button>
                 </svelte:fragment>
             </ErrorAlert>
         {/if}
 
-        {#if $appState.currentRequest.base}
+        {#if $appState.currentRequest?.base}
             <div class="alert alert-warning shadow-lg">
                 <div>
                     <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
                     <span>
-                        WARNING: This application is requesting your long-lived AWS credentials. 
+                        WARNING: This application is requesting your base AWS credentials. 
                         These credentials are less secure than session credentials, since they don't expire automatically.
                     </span>
                 </div>
@@ -113,7 +113,7 @@
 
         <div class="w-full grid grid-cols-[1fr_auto] items-center gap-y-6">
                 <!-- Don't display the option to approve with session credentials if base was specifically requested -->
-                {#if !$appState.currentRequest.base}
+                {#if !$appState.currentRequest?.base}
                     <h3 class="font-semibold">
                         Approve with session credentials
                     </h3>
@@ -126,7 +126,7 @@
 
                 <h3 class="font-semibold">
                     <span class="mr-2">
-                        {#if $appState.currentRequest.base}
+                        {#if $appState.currentRequest?.base}
                             Approve
                         {:else}
                             Approve with base credentials

src/views/ShowResponse.svelte

@@ -2,7 +2,7 @@
     import { onMount } from 'svelte';
     import { draw, fade } from 'svelte/transition';
 
-    import { appState, completeRequest } from '../lib/state.js';
+    import { appState, cleanupRequest } from '../lib/state.js';
     
     let success = false;
     let error = null;
@@ -13,7 +13,7 @@
 
     onMount(() => {
         window.setTimeout(
-            completeRequest,
+            cleanupRequest,
             // Extra 50ms so the window can finish disappearing before the redraw
             Math.min(5000, $appState.config.rehide_ms + 50),
         )