links, navs, and more

src/ui/ErrorAlert.svelte

@@ -49,11 +49,11 @@
 </style>
 
 
-<div transition:slide="{{duration: slideDuration}}" class="alert alert-error shadow-lg {animationClass}">
+<div in:slide="{{duration: slideDuration}}" class="alert alert-error shadow-lg {animationClass}">
     <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>
-            <slot name="message"></slot>
+            <slot></slot>
         </span>
     </div>
 

src/ui/Link.svelte

@@ -0,0 +1,41 @@
+<script>
+    import { onMount } from 'svelte';
+
+    import { currentView } from '../lib/routing.js';
+
+    export let target = $currentView;
+    export let hotkey = null;
+    export let ctrl = false
+    export let alt = false;
+    export let shift = false;
+
+    function click() {
+        if (typeof target === 'string') {
+            $currentView = target;
+        }
+        else if (typeof target === 'function') {
+            target();
+        }
+        else {
+            throw(`Link target is not a string or a function: ${target}`)
+        }
+    }
+
+
+    function handleHotkey(event) {
+        if (!hotkey) return;
+        if (ctrl && !event.ctrlKey) return;
+        if (alt && !event.altKey) return;
+        if (shift && !event.shiftKey) return;
+
+        if (event.code === hotkey) click();
+        if (hotkey === 'Enter' && event.code === 'NumpadEnter') click();
+    }
+</script>
+
+
+<svelte:window on:keydown={handleHotkey} />
+
+<a href="#" on:click="{click}">
+    <slot></slot>
+</a>

src/ui/Nav.svelte

@@ -0,0 +1,23 @@
+<script>
+    import Link from './Link.svelte';
+    import Icon from './Icon.svelte';
+</script>
+
+
+<nav class="fixed top-0 grid grid-cols-2 w-full p-2">
+    <div>
+        <Link target="Home">
+            <button class="btn btn-squre btn-ghost align-middle">
+                <Icon name="home" class="w-8 h-8 stroke-2" />
+            </button>
+        </Link>
+    </div>
+
+    <div class="justify-self-end">
+        <Link target="Settings">
+            <button class="align-middle btn btn-square btn-ghost">
+                <Icon name="cog-8-tooth" class="w-8 h-8 stroke-2" />
+            </button>
+        </Link>
+    </div>
+</nav>

src/views/Approve.svelte

@@ -1,9 +1,8 @@
 <script>
     import { invoke } from '@tauri-apps/api/tauri';
-    import { fly } from 'svelte/transition';
-    import { expoIn } from 'svelte/easing';
 
     import { navigate } from '../lib/routing.js';
+    import Link from '../ui/Link.svelte';
     import Icon from '../ui/Icon.svelte';
 
     export let appState;
@@ -22,21 +21,7 @@
         }
     }
 
-    function deny() {
-        navigate('ShowDenied');
-    }
-
-    function handleHotkey(event) {
-        if (event.shiftKey && (event.code === 'Enter' || event.code === 'NumpadEnter')) {
-            approve();
-        }
-        else if (event.code === 'Escape') {
-            deny();
-        }
-    }
-
     var appName = null;
-    console.log(appName);
     if (appState.currentRequest.clients.length === 1) {
         let path = appState.currentRequest.clients[0].exe;
         let m = path.match(/\/([^/]+?$)|\\([^\\]+?$)/);
@@ -45,12 +30,6 @@
 </script>
 
 
-<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">
@@ -62,19 +41,20 @@
         </div>
 
         <div class="grid grid-cols-2">
-            <button class="btn btn-error justify-self-start" on:click={deny}>
+            <Link target="ShowDenied" hotkey="Escape">
-                Deny
+                <button class="btn btn-error justify-self-start">
-                &nbsp;
+                    Deny
-                <!-- <kbd class="kbd kbd-xs bg-error border-base-100">Esc</kbd> -->
+                    <kbd class="ml-2 normal-case px-1 py-0.5 rounded border border-neutral">Esc</kbd>
-                <kbd class="normal-case px-1 py-0.5 rounded border border-neutral">Esc</kbd>
+                </button>
-            </button>
+            </Link>
-            <button class="btn btn-success justify-self-end" on:click={approve}>
+
-                Approve
+            <Link target="{approve}" hotkey="Enter" shift="{true}">
-                &nbsp;
+                <button class="btn btn-success justify-self-end">
-                <kbd class="normal-case px-1 py-0.5 rounded border border-neutral">Shift</kbd>
+                    Approve
-                <span class="mx-0.5">+</span>
+                    <kbd class="ml-2 normal-case px-1 py-0.5 rounded border border-neutral">Shift</kbd>
-                <kbd class="normal-case px-1 py-0.5 rounded border border-neutral">Enter</kbd>
+                    <span class="mx-0.5">+</span>
-            </button>
+                    <kbd class="normal-case px-1 py-0.5 rounded border border-neutral">Enter</kbd>
+                </button>
+            </Link>
         </div>
-    <!-- </div> -->
 </div>

src/views/EnterCredentials.svelte

@@ -4,6 +4,7 @@
     import { getRootCause } from '../lib/errors.js';
 
     import { navigate } from '../lib/routing.js';
+    import Link from '../ui/Link.svelte';
     import ErrorAlert from '../ui/ErrorAlert.svelte';
 
     export let appState;
@@ -42,18 +43,20 @@
 </script>
 
 
-{#if errorMsg}
-    <ErrorAlert>{errorMsg}</ErrorAlert>
-{/if}
 
 <form action="#" on:submit|preventDefault="{save}" class="form-control space-y-4 max-w-sm m-auto p-4 h-screen justify-center">
-        <h2 class="text-2xl font-bold text-center">Enter your credentials</h2>
+    <h2 class="text-2xl font-bold text-center">Enter your credentials</h2>
 
-        <input type="text" placeholder="AWS Access Key ID" bind:value="{AccessKeyId}" class="input input-bordered" />
+    {#if errorMsg}
+        <ErrorAlert bind:this="{alert}">{errorMsg}</ErrorAlert>
+    {/if}
 
-        <input type="password" placeholder="AWS Secret Access Key" bind:value="{SecretAccessKey}" class="input input-bordered" />
+    <input type="text" placeholder="AWS Access Key ID" bind:value="{AccessKeyId}" class="input input-bordered" />
+    <input type="password" placeholder="AWS Secret Access Key" bind:value="{SecretAccessKey}" class="input input-bordered" />
+    <input type="password" placeholder="Passphrase" bind:value="{passphrase}" class="input input-bordered" />
 
-        <input type="password" placeholder="Passphrase" bind:value="{passphrase}" class="input input-bordered" />
+    <input type="submit" class="btn btn-primary" />
-
+    <Link target="Home" hotkey="Escape">
-        <input type="submit" class="btn btn-primary" />
+        <button class="btn btn-sm btn-outline w-full">Cancel</button>
+    </Link>
 </form>

src/views/Home.svelte

@@ -3,6 +3,7 @@
     import { invoke } from '@tauri-apps/api/tauri';
 
     import { navigate } from '../lib/routing.js';
+    import Nav from '../ui/Nav.svelte';
     import Icon from '../ui/Icon.svelte';
 
     export let appState;
@@ -22,34 +23,25 @@
 </script>
 
 
-<nav class="fixed top-0 grid grid-cols-2 w-full p-2">
+<Nav />
-    <div id="nav-left flex">
-        <button class="btn btn-squre btn-ghost align-middle">
-            <Icon name="home" class="w-8 h-8 stroke-2" />
-        </button>
-    </div>
-    <div id="nav-right" class="justify-self-end">
-        <button class="align-middle btn btn-square btn-ghost">
-            <Icon name="cog-8-tooth" class="w-8 h-8 stroke-2" />
-        </button>
-    </div>
-</nav>
 
 {#if status === 'locked'}
     <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={() => navigate('Unlock')}>Unlock</button>
+        <Link target="Unlock">
+            <button class="btn btn-primary">Unlock</button>
+        </Link>
     </div>
 
 {:else if status === 'unlocked'}
     <div class="flex flex-col h-screen justify-center items-center space-y-4">
         <img src="/static/padlock-open.svg" alt="An unlocked padlock" class="w-24" />
-        <h2 class="text-2xl font-bold">Creddy is ready</h2>
+        <h2 class="text-2xl font-bold">Waiting for requests</h2>
     </div>
 
 {:else if status === 'empty'}
-    <button class="btn btn-primary" on:click={() => navigate('EnterCredentials')}>
+    <Link target="EnterCredentials">
-        Enter Credentials
+        <button class="btn btn-primary">Enter Credentials</button>
-    </button>
+    </Link>
 {/if}

src/views/ShowApproved.svelte

@@ -43,7 +43,7 @@
 {#if error}
     <div class="flex flex-col h-screen items-center justify-center m-auto max-w-lg">
         <ErrorAlert>
-            <svelte:fragment slot="message">{error}</svelte:fragment>
+            {error}
             <button 
                 slot="buttons"
                 class="btn btn-sm bg-transparent hover:bg-[#cd5a5a] border border-error-content text-error-content"

src/views/ShowDenied.svelte

@@ -35,7 +35,7 @@
 {#if error}
     <div class="flex flex-col h-screen items-center justify-center m-auto max-w-lg">
         <ErrorAlert>
-            <svelte:fragment slot="message">{error}</svelte:fragment>
+            {error}
             <button 
                 slot="buttons"
                 class="btn btn-sm bg-transparent hover:bg-[#cd5a5a] border border-error-content text-error-content"

src/views/Unlock.svelte

@@ -4,6 +4,7 @@
     import { navigate } from '../lib/routing.js';
     import { getRootCause } from '../lib/errors.js';
     import ErrorAlert from '../ui/ErrorAlert.svelte';
+    import Link from '../ui/Link.svelte';
 
     export let appState;
 
@@ -50,4 +51,7 @@
     <input autofocus name="password" type="password" placeholder="correct horse battery staple" bind:value="{passphrase}" class="input input-bordered" />
 
     <input type="submit" class="btn btn-primary" />
+    <Link target="Home" hotkey="Escape">
+        <button class="btn btn-outline btn-sm w-full">Cancel</button>
+    </Link>
 </form>