creddy/src/views/Approve.svelte

<script>
    import { invoke } from '@tauri-apps/api/tauri';
    import { fly } from 'svelte/transition';
    import { expoIn } from 'svelte/easing';

    import { navigate } from '../lib/routing.js';
    import Icon from '../ui/Icon.svelte';

    export let appState;


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

    function deny() {
        navigate('ShowDenied');
    }

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

    var appName = null;
    console.log(appName);
    if (appState.currentRequest.clients.length === 1) {
        let path = appState.currentRequest.clients[0].exe;
        let m = path.match(/\/([^/]+?$)|\\([^\\]+?$)/);
        appName = m[1] || m[2];
    }
</script>


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

<!-- <div 
    out:fly="{{x: '-100vw', duration: 200, easing: expoIn}}"
    class="flex flex-col space-y-4 p-4 m-auto max-w-max h-screen justify-center"
> -->
<div class="flex flex-col space-y-4 p-4 m-auto max-w-max h-screen justify-center">
    <!-- <div class="p-4 rounded-box border-2 border-neutral-content"> -->
        <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>
            {#each appState.currentRequest.clients as client}
                <p>Path: {client ? client.exe : 'Unknown'}</p>
                <p>PID: {client ? client.pid : 'Unknown'}</p>
            {/each}
        </div>

        <div class="grid grid-cols-2">
            <button class="btn btn-error justify-self-start" on:click={deny}>
                Deny
                &nbsp;
                <!-- <kbd class="kbd kbd-xs bg-error border-base-100">Esc</kbd> -->
                <kbd class="normal-case px-1 py-0.5 rounded border border-neutral">Esc</kbd>
            </button>
            <button class="btn btn-success justify-self-end" on:click={approve}>
                Approve
                &nbsp;
                <kbd class="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>
        </div>
    <!-- </div> -->
</div>