cancel approval flow on frontend when request is abandoned by client

src/App.svelte

@@ -3,7 +3,7 @@ import { onMount } from 'svelte';
 import { listen } from '@tauri-apps/api/event';
 import { invoke } from '@tauri-apps/api/tauri';
 
-import { appState, acceptRequest } from './lib/state.js';
+import { appState, acceptRequest, cleanupRequest } from './lib/state.js';
 import { views, currentView, navigate } from './lib/routing.js';
 
 
@@ -16,6 +16,16 @@ listen('credentials-request', (tauriEvent) => {
     $appState.pendingRequests.put(tauriEvent.payload);
 });
 
+listen('request-cancelled', (tauriEvent) => {
+    const id = tauriEvent.payload;
+    if (id === $appState.currentRequest?.id) {
+        cleanupRequest()
+    }
+    else {
+        const found = $appState.pendingRequests.find_remove(r => r.id === id);
+    }
+});
+
 listen('launch-terminal-request', async (tauriEvent) => {
     if ($appState.currentRequest === null) {
         let status = await invoke('get_session_status');

src/lib/queue.js

@@ -30,5 +30,15 @@ export default function() {
             
             return this.items.shift();
         },
+
+        find_remove(pred) {
+            for (let i=0; i<this.items.length; i++) {
+                if (pred(this.items[i])) {
+                    this.items.splice(i, 1);
+                    return true;
+                }
+            }
+            return false;
+        },
     }
 }

src/lib/state.js

@@ -23,7 +23,7 @@ export async function acceptRequest() {
 }
 
 
-export function completeRequest() {
+export function cleanupRequest() {
     appState.update($appState => {
         $appState.currentRequest = null;
         return $appState;

src/ui/Link.svelte

@@ -30,7 +30,6 @@
             && alt === event.altKey
             && shift === event.shiftKey
         ) {
-            console.log({hotkey, ctrl, alt, shift});
             click();
         }
     }

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