button component

src/ui/Button.svelte

@@ -0,0 +1,9 @@
+<script>
+    import Icon from './Icon.svelte';
+    export let icon = null;
+</script>
+
+<button on:click class="text-gray-200 bg-indigo-600 hover:bg-indigo-700 px-2 py-1 rounded-md">
+    {#if icon}<Icon name={icon} class="w-4 text-gray-200" />{/if}
+    <slot></slot>
+</button>

src/views/Home.svelte

@@ -1,10 +1,11 @@
 <script>
     import { onMount, createEventDispatcher } from 'svelte';
+    import { invoke } from '@tauri-apps/api/tauri';
+    import Button from '../ui/Button.svelte';
 
     export let appState;
 
     const dispatch = createEventDispatcher();
-
     onMount(async () => {
         // will block until a request comes in
         let req = await appState.pendingRequests.get();
@@ -13,6 +14,25 @@
         console.log(req);
         dispatch('navigate', {target: 'Approve'});
     });
+
+    let status = 'unknown';
+    onMount(async() => {
+        status = await invoke('get_session_status');
+    })
+
+    function blah() {
+        console.log('blah');
+    }
 </script>
 
-<h1 class="text-4xl text-gray-300">Creddy</h1>
+<h1 class="text-4xl text-gray-300">Creddy</h1>
+
+<p>Credential status: {status}</p>
+
+{#if status === 'locked'}
+    <Button on:click={() => dispatch('navigate', {target: 'Unlock'})}>Unlock</Button>
+{:else if status === 'empty'}
+    <Button on:click={() => dispatch('navigate', {target: 'EnterCredentials'})}>
+        Enter Credentials
+    </Button>
+{/if}

src/views/Unlock.svelte

@@ -1,6 +1,7 @@
 <script>
     import { invoke } from '@tauri-apps/api/tauri';
     import { createEventDispatcher } from 'svelte';
+    import Button from '../ui/Button.svelte';
 
     export let appState;
 
@@ -34,4 +35,5 @@
 <form action="#" on:submit|preventDefault="{unlock}">
     <div class="text-gray-200">Enter your passphrase:</div>
     <input autofocus class="text-gray-200 bg-zinc-800" type="password" placeholder="correct horse battery staple" bind:value="{passphrase}" />
+    <Button on:click={unlock}>Submit</Button>
 </form>