creddy/src/views/Home.svelte

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

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

    export let appState;

    const dispatch = createEventDispatcher();
    onMount(async () => {
        // will block until a request comes in
        let req = await appState.pendingRequests.get();
        appState.currentRequest = req;
        console.log('Got credentials request from queue:');
        console.log(req);
        dispatch('navigate', {target: 'Approve'});
    });

    let status = 'unknown';
    onMount(async() => {
        status = await invoke('get_session_status');
    })
</script>


<nav class="fixed top-0 grid grid-cols-2 w-full p-2">
    <div id="nav-left flex">
        <button class="btn btn-squre btn-ghost align-middle">
            <Icon name="home" class="w-8 h-8 stroke-2" />
        </button>
    </div>
    <div id="nav-right" class="justify-self-end">
        <button class="align-middle btn btn-square btn-ghost">
            <Icon name="cog-8-tooth" class="w-8 h-8 stroke-2" />
        </button>
    </div>
</nav>

{#if status === 'locked'}
    <div class="flex flex-col h-screen justify-center items-center space-y-4">
        <img src="/static/padlock-closed.svg" alt="An unlocked padlock" class="w-32" />
        <h2 class="text-2xl font-bold">Creddy is locked</h2>
        <button class="btn btn-primary" on:click={() => dispatch('navigate', {target: 'Unlock'})}>Unlock</button>
    </div>

{:else if status === 'unlocked'}
    <div class="flex flex-col h-screen justify-center items-center space-y-4">
        <img src="/static/padlock-open.svg" alt="An unlocked padlock" class="w-24" />
        <h2 class="text-2xl font-bold">Creddy is ready</h2>
    </div>

{:else if status === 'empty'}
    <button class="btn btn-primary" on:click={() => dispatch('navigate', {target: 'EnterCredentials'})}>
        Enter Credentials
    </button>
{/if}