all is change; in change is all again made new

src/App.svelte

@@ -1,33 +1,36 @@
 <script>
 import { emit, listen } from '@tauri-apps/api/event';
 import queue from './lib/queue.js';
-import Home from './views/Home.svelte';
-import Approve from './views/Approve.svelte';
-import ShowApproved from './views/ShowApproved.svelte';
-import ShowDenied from './views/ShowDenied.svelte';
 
-const VIEWS = {
-    Home: Home,
-    Approve: Approve,
-    ShowApproved: ShowApproved,
-    ShowDenied: ShowDenied,
-};
+const VIEWS = import.meta.glob('./views/*.svelte', {eager: true});
+
+window.emit = emit;
+window.queue = queue;
+
+var appState = {
+    currentRequest: null,
+    pendingRequests: queue(),
+    credentialStatus: 'locked',
+}
+window.appState = appState;
 
 
-let currentView = Home;
-function navigate(event) {
-    currentView = VIEWS[event.detail.target];
+import { invoke } from '@tauri-apps/api/tauri';
+window.invoke = invoke;
+
+
+var currentView = VIEWS['./views/Home.svelte'].default;
+window.currentView = currentView;
+window.VIEWS = VIEWS;
+function navigate(svelteEvent) {
+    const moduleName = `./views/${svelteEvent.detail.target}.svelte`;
+    currentView = VIEWS[moduleName].default;
 }
 
-listen('credentials-request', (event) => {
-    queue.put(1)
+listen('credentials-request', (tauriEvent) => {
+    appState.pendingRequests.put(tauriEvent.payload);
+    console.log('Received request.');
 });
-
-let requests = queue();
 </script>
 
-{#if currentView === Home}
-    <svelte:component this={currentView} on:navigate={navigate} {requests} />
-{:else}
-    <svelte:component this={currentView} on:navigate={navigate} />
-{/if}
+<svelte:component this={currentView} on:navigate={navigate} bind:appState={appState} />

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>