creddy/src/views/Approve.svelte

<script>
    import { onMount } from 'svelte';
    import { invoke } from '@tauri-apps/api/tauri';

    import { navigate } from '../lib/routing.js';
    import { appState, completeRequest } from '../lib/state.js';
    import ErrorAlert from '../ui/ErrorAlert.svelte';
    import Link from '../ui/Link.svelte';


    // Send response to backend, display error if applicable
    let error, alert;
    async function respond() {
        let {id, approval} = $appState.currentRequest;
        try {
            await invoke('respond', {response: {id, approval}});
            navigate('ShowResponse');
        }
        catch (e) {
            if (error) {
                alert.shake();
            }
            error = e;
        }
    }

    // Approval has one of several outcomes depending on current credential state
    async function approve() {
        $appState.currentRequest.approval = 'Approved';
        let status = await invoke('get_session_status');
        if (status === 'unlocked') {
            await respond();
        }
        else if (status === 'locked') {
            navigate('Unlock');
        }
        else {
            navigate('EnterCredentials');
        }
    }

    // Denial has only one
    async function deny() {
        $appState.currentRequest.approval = 'Denied';
        await respond();
    }

    // Extract executable name from full path
    let appName = null;
    if ($appState.currentRequest.clients.length === 1) {
        let path = $appState.currentRequest.clients[0].exe;
        let m = path.match(/\/([^/]+?$)|\\([^\\]+?$)/);
        appName = m[1] || m[2];
    }

    // Executable paths can be long, so ensure they only break on \ or /
    function breakPath(client) {
        return client.exe.replace(/(\\|\/)/g, '$1<wbr>');
    }

    // if the request has already been approved/denied, send response immediately
    onMount(async () => {
        if ($appState.currentRequest.approval) {
            await respond();
        }
    })
</script>


<!-- Don't render at all if we're just going to immediately proceed to the next screen -->
{#if error || !$appState.currentRequest.approval}
    <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}
                <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={respond}>Retry</button>
                </svelte:fragment>
            </ErrorAlert>
        {/if}

        {#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 (long-lived) AWS credentials. 
                        These crednetials 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">
                {#each $appState.currentRequest.clients as client}
                    <div class="text-right">Path:</div>
                    <code class="">{@html client ? breakPath(client) : 'Unknown'}</code>
                    <div class="text-right">PID:</div>
                    <code>{client ? client.pid : 'Unknown'}</code>
                {/each}
            </div>
        </div>

        <div class="w-full flex justify-between">
            <Link target={deny} hotkey="Escape">
                <button class="btn btn-error justify-self-start">
                    Deny
                    <kbd class="ml-2 normal-case px-1 py-0.5 rounded border border-neutral">Esc</kbd>
                </button>
            </Link>

            <Link target={approve} hotkey="Enter" shift="{true}">
                <button class="btn btn-success justify-self-end">
                    Approve
                    <kbd class="ml-2 normal-case px-1 py-0.5 rounded border border-neutral">Shift</kbd>
                    <span class="mx-0.5">+</span>
                    <kbd class="normal-case px-1 py-0.5 rounded border border-neutral">Enter</kbd>
                </button>
            </Link>
        </div>
    </div>
{/if}