almost finish refactoring PersistentCredential trait

src/views/approve/CollectResponse.svelte

@@ -0,0 +1,91 @@
+<script>
+    import { createEventDispatcher } from 'svelte';
+    import { appState, cleanupRequest } from '../../lib/state.js';
+
+    import Link from '../../ui/Link.svelte';
+    import KeyCombo from '../../ui/KeyCombo.svelte';
+
+
+    // Executable paths can be long, so ensure they only break on \ or /
+    function breakPath(path) {
+        return path.replace(/(\\|\/)/g, '$1<wbr>');
+    }
+
+    // Extract executable name from full path
+    const client = $appState.currentRequest.client;
+    const m = client.exe?.match(/\/([^/]+?$)|\\([^\\]+?$)/);
+    const appName = m[1] || m[2];
+
+    const dispatch = createEventDispatcher();
+
+    function setResponse(approval, base) {
+        $appState.currentRequest.response = {
+            id: $appState.currentRequest.id,
+            approval,
+            base,
+        };
+        dispatch('response');
+    }
+</script>
+
+
+{#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 base AWS credentials. 
+                These credentials are less secure than session credentials, since they don't expire automatically.
+            </span>
+        </div>
+    </div>
+{/if}
+
+<div class="space-y-1 mb-4">
+    <h2 class="text-xl font-bold">{appName ? `"${appName}"` : 'An appplication'} would like to access your AWS credentials.</h2>
+
+    <div class="grid grid-cols-[auto_1fr] gap-x-3">
+        <div class="text-right">Path:</div>
+        <code class="">{@html client.exe ? breakPath(client.exe) : 'Unknown'}</code>
+        <div class="text-right">PID:</div>
+        <code>{client.pid}</code>
+    </div>
+</div>
+
+<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}
+            <h3 class="font-semibold">
+                Approve with session credentials
+            </h3>
+            <Link target={() => setResponse('Approved', false)} hotkey="Enter" shift={true}>
+                <button class="w-full btn btn-success">
+                    <KeyCombo keys={['Shift', 'Enter']} />
+                </button>
+            </Link>
+        {/if}
+
+        <h3 class="font-semibold">
+            <span class="mr-2">
+                {#if $appState.currentRequest?.base}
+                    Approve
+                {:else}
+                    Approve with base credentials
+                {/if}
+            </span>
+        </h3>
+        <Link target={() => setResponse('Approved', true)} hotkey="Enter" shift={true} ctrl={true}>
+            <button class="w-full btn btn-warning">
+                <KeyCombo keys={['Ctrl', 'Shift', 'Enter']} />
+            </button>
+        </Link>
+
+        <h3 class="font-semibold">
+            <span class="mr-2">Deny</span>
+        </h3>
+        <Link target={() => setResponse('Denied', false)} hotkey="Escape">
+            <button class="w-full btn btn-error">
+                <KeyCombo keys={['Esc']} />
+            </button>
+        </Link>
+</div>

src/views/approve/ShowResponse.svelte

@@ -0,0 +1,29 @@
+<script>
+    import { draw, fade } from 'svelte/transition';
+
+    import { appState } from '../../lib/state.js';
+    
+    let success = false;
+    let error = null;
+
+    let drawDuration = $appState.config.rehide_ms >= 750 ? 500 : 0;
+    let fadeDuration = drawDuration * 0.6;
+    let fadeDelay = drawDuration * 0.4;
+</script>
+
+
+<div class="flex flex-col h-screen items-center justify-center max-w-max m-auto">
+    {#if $appState.currentRequest.response.approval === 'Approved'}
+        <svg xmlns="http://www.w3.org/2000/svg" class="w-36 h-36" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
+          <path in:draw="{{duration: drawDuration}}" stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+    {:else}
+        <svg xmlns="http://www.w3.org/2000/svg" class="w-36 h-36" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
+            <path in:draw="{{duration: 500}}" stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+    {/if}
+
+    <div in:fade="{{duration: fadeDuration, delay: fadeDelay}}" class="text-2xl font-bold">
+        {$appState.currentRequest.response.approval}!
+    </div>
+</div>