creddy/src/views/Home.svelte

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

    import { appState } from '../lib/state.js';
    import { navigate } from '../lib/routing.js';
    import Nav from '../ui/Nav.svelte';
    import Icon from '../ui/Icon.svelte';
    import Link from '../ui/Link.svelte';

    import vaultDoorSvg from '../assets/vault_door.svg?raw';

    let launchBase = false;
    function launchTerminal() {
        invoke('launch_terminal', {base: launchBase});
        launchBase = false;
    }
</script>


<Nav position="fixed">
    <h2 slot="title" class="text-3xl font-bold">Creddy</h2>
</Nav>

<div class="flex flex-col h-screen items-center justify-center p-4 space-y-4">
    <div class="flex flex-col items-center space-y-4">
        {@html vaultDoorSvg}
        {#await invoke('get_session_status') then status}
            {#if status === 'locked'}

                <h2 class="text-2xl font-bold">Creddy is locked</h2>
                <Link target="Unlock" hotkey="Enter" class="w-64">
                    <button class="btn btn-primary w-full">Unlock</button>
                </Link>

            {:else if status === 'unlocked'}
                <h2 class="text-2xl font-bold">Waiting for requests</h2>
                <button class="btn btn-primary w-full" on:click={launchTerminal}>
                    Launch Terminal
                </button>
                <label class="label cursor-pointer flex items-center space-x-2">
                    <span class="label-text">Launch with long-lived credentials</span>
                    <input type="checkbox" class="checkbox checkbox-sm" bind:checked={launchBase}>
                </label>

            {:else if status === 'empty'}
                <h2 class="text-2xl font-bold">No credentials found</h2>
                <Link target="EnterCredentials" hotkey="Enter" class="w-64">
                    <button class="btn btn-primary w-full">Enter Credentials</button>
                </Link>
            {/if}
        {/await}
    </div>
</div>

{#if $appState.setupErrors.some(e => e.show)}
    <div class="toast">
        {#each $appState.setupErrors as error}
            {#if error.show}
                <div class="alert alert-error shadow-lg">
                    {error.msg}
                    <button class="btn btn-sm btn-alert-error" on:click={() => error.show = false}>Ok</button>
                </div>
            {/if}
        {/each}
    </div>
{/if}