rework routing

src/App.svelte

@@ -1,38 +1,26 @@
 <script>
 import { emit, listen } from '@tauri-apps/api/event';
-import queue from './lib/queue.js';
+import { invoke } from '@tauri-apps/api/tauri';
 
+import { currentView } from './lib/routing.js';
+import queue from './lib/queue.js';
 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;
-
-
-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;
-}
-window.navigate = navigate;
 
 listen('credentials-request', (tauriEvent) => {
     appState.pendingRequests.put(tauriEvent.payload);
-    console.log('Received request.');
 });
 </script>
 
-<svelte:component this={currentView} on:navigate={navigate} bind:appState={appState} />
+
-<!-- <svelte:component this="{VIEWS['./views/EnterCredentials.svelte'].default}" bind:appState="{appState}" /> -->
+<svelte:component
+    this={VIEWS[`./views/${$currentView}.svelte`].default}
+    bind:appState={appState}
+/>
+<!-- <svelte:component this="{VIEWS['./views/ShowApproved.svelte'].default}" bind:appState="{appState}" /> -->

src/lib/routing.js

@@ -0,0 +1,8 @@
+import { writable } from 'svelte/store';
+
+
+export const currentView = writable('Home');
+
+export function navigate(viewName) {
+    currentView.set(viewName);
+}

src/ui/ErrorAlert.svelte

@@ -2,7 +2,7 @@
     import { onMount } from 'svelte';
     import { slide } from 'svelte/transition';
 
-    export let message;
+    export let slideDuration = 150;
     let animationClass = "";
 
     export function shake() {
@@ -10,9 +10,6 @@
         window.setTimeout(() => animationClass = "", 400);
     }
 
-    // onMount(() => {
-    //     shake();
-    // });
 </script>
 
 
@@ -52,9 +49,17 @@
 </style>
 
 
-<div transition:slide="{{duration: 150}}" class="alert alert-error shadow-lg {animationClass}">
+<div transition:slide="{{duration: slideDuration}}" class="alert alert-error shadow-lg {animationClass}">
-  <div>
+    <div>
-    <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
-    <span>{message}</span>
+        <span>
-  </div>
+            <slot name="message"></slot>
+        </span>
+    </div>
+
+    {#if $$slots.buttons}
+        <div>
+            <slot name="buttons"></slot>
+        </div>
+    {/if}
 </div>

src/views/Approve.svelte

@@ -1,28 +1,29 @@
 <script>
-    import { createEventDispatcher } from 'svelte';
     import { invoke } from '@tauri-apps/api/tauri';
+    import { fly } from 'svelte/transition';
+    import { expoIn } from 'svelte/easing';
 
+    import { navigate } from '../lib/routing.js';
     import Icon from '../ui/Icon.svelte';
 
     export let appState;
 
-    const dispatch = createEventDispatcher();
 
     async function approve() {
         let status = await invoke('get_session_status');
         if (status === 'unlocked') {
-            dispatch('navigate', {target: 'ShowApproved'});
+            navigate('ShowApproved');
         }
         else if (status === 'locked') {
-            dispatch('navigate', {target: 'Unlock'})
+            navigate('Unlock');
         }
         else {
-            dispatch('navigate', {target: 'EnterCredentials'});
+            navigate('EnterCredentials');
         }
     }
 
     function deny() {
-        dispatch('navigate', {target: 'ShowDenied'});
+        navigate('ShowDenied');
     }
 
     function handleHotkey(event) {
@@ -46,6 +47,10 @@
 
 <svelte:window on:keydown={handleHotkey} />
 
+<!-- <div 
+    out:fly="{{x: '-100vw', duration: 200, easing: expoIn}}"
+    class="flex flex-col space-y-4 p-4 m-auto max-w-max h-screen justify-center"
+> -->
 <div class="flex flex-col space-y-4 p-4 m-auto max-w-max h-screen justify-center">
     <!-- <div class="p-4 rounded-box border-2 border-neutral-content"> -->
         <div class="space-y-1 mb-4">

src/views/EnterCredentials.svelte

@@ -1,12 +1,15 @@
 <script>
-    import { onMount, createEventDispatcher } from 'svelte';
+    import { onMount } from 'svelte';
     import { invoke } from '@tauri-apps/api/tauri';
     import { getRootCause } from '../lib/errors.js';
 
+    import { navigate } from '../lib/routing.js';
+    import ErrorAlert from '../ui/ErrorAlert.svelte';
+
     export let appState;
 
-    const dispatch = createEventDispatcher();
     let errorMsg = null;
+    let alert;
     let AccessKeyId, SecretAccessKey, passphrase
 
     async function save() {
@@ -16,14 +19,13 @@
         try {
             await invoke('save_credentials', {credentials, passphrase});
             if (appState.currentRequest) {
-                dispatch('navigate', {target: 'ShowApproved'})
+                navigate('ShowApproved');
             }
             else {
-                dispatch('navigate', {target: 'Home'})
+                navigate('Home');
             }
         }
         catch (e) {
-            window.error = e;
             if (e.code === "GetSession") {
                 let root = getRootCause(e);
                 errorMsg = `Error response from AWS (${root.code}): ${root.msg}`;
@@ -31,18 +33,17 @@
             else {
                 errorMsg = e.msg;
             }
+
+            if (alert) {
+                alert.shake();
+            }
         }
     }
 </script>
 
 
 {#if errorMsg}
-<div class="alert alert-error shadow-lg">
+    <ErrorAlert>{errorMsg}</ErrorAlert>
-  <div>
-    <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
-    <span>{errorMsg}</span>
-  </div>
-</div>
 {/if}
 
 <form action="#" on:submit|preventDefault="{save}" class="form-control space-y-4 max-w-sm m-auto p-4 h-screen justify-center">

src/views/Home.svelte

@@ -2,6 +2,7 @@
     import { onMount, createEventDispatcher } from 'svelte';
     import { invoke } from '@tauri-apps/api/tauri';
 
+    import { navigate } from '../lib/routing.js';
     import Icon from '../ui/Icon.svelte';
 
     export let appState;
@@ -11,9 +12,7 @@
         // will block until a request comes in
         let req = await appState.pendingRequests.get();
         appState.currentRequest = req;
-        console.log('Got credentials request from queue:');
+        navigate('Approve');
-        console.log(req);
-        dispatch('navigate', {target: 'Approve'});
     });
 
     let status = 'unknown';
@@ -40,7 +39,7 @@
     <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>
+        <button class="btn btn-primary" on:click={() => navigate('Unlock')}>Unlock</button>
     </div>
 
 {:else if status === 'unlocked'}
@@ -50,7 +49,7 @@
     </div>
 
 {:else if status === 'empty'}
-    <button class="btn btn-primary" on:click={() => dispatch('navigate', {target: 'EnterCredentials'})}>
+    <button class="btn btn-primary" on:click={() => navigate('EnterCredentials')}>
         Enter Credentials
     </button>
 {/if}

src/views/ShowApproved.svelte

@@ -1,17 +1,18 @@
 <script>
-    import { onMount, createEventDispatcher } from 'svelte';
+    import { onMount } from 'svelte';
-    import { fly } from 'svelte/transition';
+    import { fly, draw, fade } from 'svelte/transition';
-    import { expoOut } from 'svelte/easing';
+    import { expoIn, expoOut, expoInOut, linear } from 'svelte/easing';
     import { emit } from '@tauri-apps/api/event';
     import { invoke } from '@tauri-apps/api/tauri';
 
+    import { navigate } from '../lib/routing.js';
     import ErrorAlert from '../ui/ErrorAlert.svelte';
     import Icon from '../ui/Icon.svelte';
     
     export let appState;
+    let success = false;
     let error = null;
 
-    const dispatch = createEventDispatcher();
     async function respond() {
         let response = {
             id: appState.currentRequest.id,
@@ -20,13 +21,14 @@
 
         try {
             await invoke('respond', {response});
+            success = true;
             appState.currentRequest = null;
+            window.setTimeout(() => navigate('Home'), 1000);
         }
         catch (e) {
             error = e;
         }
 
-        window.setTimeout(() => dispatch('navigate', {target: 'Home'}), 1000);
     }
 
     onMount(respond);
@@ -39,11 +41,29 @@
 </style>
 
 {#if error}
-    <ErrorAlert message="{error}" />
+    <div class="flex flex-col h-screen items-center justify-center m-auto max-w-lg">
-{:else}
+        <ErrorAlert>
-    <div in:fly="{{x: '60vw', duration: 400, easing: expoOut}}" class="flex flex-col h-screen items-center justify-center max-w-max m-auto">
+            <svelte:fragment slot="message">{error}</svelte:fragment>
-        <Icon name="check-circle" class="w-36 h-36" />
+            <button 
-        <div class="text-2xl font-bold">Approved!</div>
+                slot="buttons"
+                class="btn btn-sm bg-transparent hover:bg-[#cd5a5a] border border-error-content text-error-content"
+                on:click="{() => navigate('Home')}"
+            >
+                Ok
+            </button>
+        </ErrorAlert>
+    </div>
+{:else if success}
+    <!-- <div on:click="{() => {console.log('redraw'); k += 1}}" in:fly="{{x: '60vw', duration: 400, easing: expoOut}}" class="flex flex-col h-screen items-center justify-center max-w-max m-auto"> -->
+    <div class="flex flex-col h-screen items-center justify-center max-w-max m-auto">
+        <!-- <Icon name="check-circle" class="w-36 h-36" /> -->
+
+        <svg xmlns="http://www.w3.org/2000/svg" class="w-36 h-36" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
+          <path in:draw="{{duration: 500}}" stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+
+
+        <div in:fade="{{delay: 200, duration: 300}}" class="text-2xl font-bold">Approved!</div>
     </div>
 {/if}
 

src/views/ShowDenied.svelte

@@ -1,17 +1,17 @@
 <script>
-    import { onMount, createEventDispatcher } from 'svelte';
+    import { onMount } from 'svelte';
-    import { fly, fade } from 'svelte/transition';
+    import { fade, draw } from 'svelte/transition';
     import { expoOut } from 'svelte/easing';
     import { emit } from '@tauri-apps/api/event';
     import { invoke } from '@tauri-apps/api/tauri';
 
+    import { navigate } from '../lib/routing.js';
     import ErrorAlert from '../ui/ErrorAlert.svelte';
     import Icon from '../ui/Icon.svelte';
     
     export let appState;
     let error = null;
     
-    const dispatch = createEventDispatcher();
     async function respond() {
         let response = {
             id: appState.currentRequest.id,
@@ -21,25 +21,39 @@
         try {
             await invoke('respond', {response});
             appState.currentRequest = null;
+            window.setTimeout(() => navigate('Home'), 1000);
         }
         catch (e) {
             error = e;
         }
 
-        window.setTimeout(() => dispatch('navigate', {target: 'Home'}), 1000);
     }
 
     onMount(respond);
-    let k = 0;
 </script>
 
 {#if error}
-    <ErrorAlert message="{error}" />
+    <div class="flex flex-col h-screen items-center justify-center m-auto max-w-lg">
-{:else}
+        <ErrorAlert>
-    {#key k}
+            <svelte:fragment slot="message">{error}</svelte:fragment>
-    <div in:fly="{{x: '60vw', duration: 400, easing: expoOut}}" class="flex flex-col items-center justify-center h-screen max-w-max m-auto" on:click="{() => k += 1}">
+            <button 
-        <Icon name="x-circle" class="w-36 h-36" />
+                slot="buttons"
-        <div class="text-2xl font-bold">Denied!</div>
+                class="btn btn-sm bg-transparent hover:bg-[#cd5a5a] border border-error-content text-error-content"
+                on:click="{() => dispatch('navigate', {target: 'Home'})}"
+            >
+                Ok
+            </button>
+        </ErrorAlert>
+    </div>
+{:else}
+    <!-- <div in:fly="{{x: '60vw', duration: 400, easing: expoOut}}" class="flex flex-col items-center justify-center h-screen max-w-max m-auto"> -->
+    <div class="flex flex-col items-center justify-center h-screen max-w-max m-auto">
+        <!-- <Icon name="x-circle" class="w-36 h-36" /> -->
+    
+        <svg xmlns="http://www.w3.org/2000/svg" class="w-36 h-36" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
+            <path in:draw="{{duration: 500}}" stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+
+        <div in:fade="{{delay: 200, duration: 300}}" class="text-2xl font-bold">Denied!</div>
     </div>
-    {/key}
 {/if}

src/views/Unlock.svelte

@@ -1,26 +1,25 @@
 <script>
     import { invoke } from '@tauri-apps/api/tauri';
-    import { createEventDispatcher } from 'svelte';
 
+    import { navigate } from '../lib/routing.js';
     import { getRootCause } from '../lib/errors.js';
     import ErrorAlert from '../ui/ErrorAlert.svelte';
 
     export let appState;
 
-    const dispatch = createEventDispatcher();
 
     let errorMsg = null;
-    let alert = null;
+    let alert;
     let passphrase = '';
     async function unlock() {
         try {
             let r = await invoke('unlock', {passphrase});
             appState.credentialStatus = 'unlocked';
             if (appState.currentRequest) {
-                dispatch('navigate', {target: 'ShowApproved'});
+                navigate('ShowApproved');
             }
             else {
-                dispatch('navigate', {target: 'Home'});
+                navigate('Home');
             }
         }
         catch (e) {
@@ -40,46 +39,12 @@
     }
 </script>
 
-<style>
-    @keyframes shake {
-        0% {
-            transform: translateX(0px);
-        }
-        20% {
-            transform: translateX(10px);
-        }
-        40% {
-            transform: translateX(-10px);
-        }
-        60% {
-            transform: translateX(5px);
-        }
-        80% {
-            transform: translateX(-5px);
-        }
-        90% {
-            transform: translateX(2px);
-        }
-        95% {
-            transform: translateX(-2px);
-        }
-        100% {
-            transform: translateX(0px);
-        }
-    }
-    .shake {
-        animation-name: shake;
-        animation-play-state: running;
-        animation-duration: 0.4s;
-    }
-</style>
-
 
 <form action="#" on:submit|preventDefault="{unlock}" class="form-control space-y-4 max-w-sm m-auto p-4 h-screen justify-center">
     <h2 class="font-bold text-2xl text-center">Enter your passphrase</h2>
 
     {#if errorMsg}
-        <ErrorAlert message="{errorMsg}" bind:this="{alert}" />
+        <ErrorAlert bind:this="{alert}">{errorMsg}</ErrorAlert>
     {/if}
 
     <input autofocus name="password" type="password" placeholder="correct horse battery staple" bind:value="{passphrase}" class="input input-bordered" />