all is change; in change is all again made new

src/views/Approve.svelte

@@ -1,10 +1,18 @@
 <script>
     import { createEventDispatcher } from 'svelte';
+    import { invoke } from '@tauri-apps/api/tauri';
+
+    export let appState;
 
     const dispatch = createEventDispatcher();
 
-    function approve() {
-        dispatch('navigate', {target: 'ShowApproved'});
+    async function approve() {
+        if (appState.credentialStatus === 'unlocked') {
+            dispatch('navigate', {target: 'ShowApproved'});
+        }
+        else {
+            dispatch('navigate', {target: 'Unlock'});
+        }
     }
 
     function deny() {

src/views/Home.svelte

@@ -1,12 +1,19 @@
 <script>
-    import { createEventDispatcher } from 'svelte';
+    import { onMount, createEventDispatcher } from 'svelte';
+
+    export let appState;
 
     const dispatch = createEventDispatcher();
 
-    let requests;
-    let r = await requests.get();
-
-    dispatch('navigate', {target: 'Approve.svelte'});
+    onMount(async () => {
+        // will block until a request comes in
+        let req = await appState.pendingRequests.get();
+        console.log(req);
+        appState.currentRequest = req;
+        console.log('Got credentials request from queue.');
+        console.log(appState);
+        dispatch('navigate', {target: 'Approve'});
+    });
 </script>
 
 <h1 class="text-4xl text-gray-300">Creddy</h1>

src/views/ShowApproved.svelte

@@ -1,5 +1,14 @@
 <script>
     import { createEventDispatcher } from 'svelte';
+    import { emit } from '@tauri-apps/api/event';
+    
+    export let appState;
+    
+    var p = emit('request-response', {response: 'approved', requestId: 1});
+    console.log('event emitted');
+    console.log(p);
+    appState.currentRequest = null;
+
     const dispatch = createEventDispatcher();
     window.setTimeout(() => dispatch('navigate', {target: 'Home'}), 3000);
 </script>

src/views/ShowDenied.svelte

@@ -1,5 +1,12 @@
 <script>
     import { createEventDispatcher } from 'svelte';
+    import { emit } from '@tauri-apps/api/event';
+    
+    export let appState;
+
+    emit('request-response', {response: 'denied', requestId: 1});
+    appState.currentRequest = null;
+
     const dispatch = createEventDispatcher();
     window.setTimeout(() => dispatch('navigate', {target: 'Home'}), 3000);
 </script>

src/views/Unlock.svelte

@@ -0,0 +1,29 @@
+<script>
+    import { invoke } from '@tauri-apps/api/tauri';
+    import { createEventDispatcher } from 'svelte';
+
+    export let appState;
+
+    const dispatch = createEventDispatcher();
+
+    let passphrase = '';
+    async function unlock() {
+        console.log('invoking unlock command.')
+        let res = await invoke('unlock', {passphrase});
+        if (res) {
+            appState.credentialStatus = 'unlocked';
+            console.log('Unlock successful!');
+            if (appState.currentRequest) {
+                dispatch('navigate', {target: 'ShowApproved'});
+            }
+        }
+        else {
+            // indicate decryption failed
+        }
+    }
+</script>
+
+<form action="#" on:submit|preventDefault="{unlock}">
+    <div class="text-gray-200">Enter your passphrase:</div>
+    <input class="text-gray-200 bg-zinc-800" type="password" placeholder="correct horse battery staple" bind:value="{passphrase}" />
+</form>