creddy/src/views/Approve.svelte

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

    import Icon from '../ui/icon.svelte';

    export let appState;

    const dispatch = createEventDispatcher();

    async function approve() {
        let status = await invoke('get_session_status');
        if (status === 'unlocked') {
            dispatch('navigate', {target: 'ShowApproved'});
        }
        else if (status === 'locked') {
            dispatch('navigate', {target: 'Unlock'})
        }
        else {
            dispatch('navigate', {target: 'EnterCredentials'});
        }
    }

    function deny() {
        dispatch('navigate', {target: 'ShowDenied'});
    }

    function handleHotkey(event) {
        if (event.shiftKey && (event.code === 'Enter' || event.code === 'NumpadEnter')) {
            approve();
        }
        else if (event.code === 'Escape') {
            deny();
        }
    }
</script>

<svelte:window on:keydown={handleHotkey} />

<h2 class="text-3xl text-gray-200">An application would like to access your AWS credentials.</h2>

<div class="text-center">
    <ul class="text-gray-200">
        {#each appState.currentRequest.clients as client}
            <li>PID: {client ? client.pid : 'Unknown'}</li>
            <li>Path: {client ? client.exe : 'Unknown'}</li>
        {/each}
    </ul>

    <button on:click={approve}>
        <Icon name="check-circle" class="w-32 stroke-green-500" />
    </button>

    <button on:click={deny}>
        <Icon name="x-circle" class="w-32 stroke-red-600" />
    </button>
</div>