rewrite frontend with DaisyUI

src/views/Approve.svelte

@@ -33,25 +33,43 @@
             deny();
         }
     }
+
+    var appName = null;
+    console.log(appName);
+    if (appState.currentRequest.clients.length === 1) {
+        let path = appState.currentRequest.clients[0].exe;
+        let m = path.match(/\/([^/]+?$)|\\([^\\]+?$)/);
+        appName = m[1] || m[2];
+    }
 </script>
 
+
 <svelte:window on:keydown={handleHotkey} />
 
-<h2 class="text-3xl text-gray-200">An application would like to access your AWS credentials.</h2>
+<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">
+            <h2 class="text-xl font-bold">{appName ? `"${appName}"` : 'An appplication'} would like to access your AWS credentials.</h2>
+            {#each appState.currentRequest.clients as client}
+                <p>Path: {client ? client.exe : 'Unknown'}</p>
+                <p>PID: {client ? client.pid : 'Unknown'}</p>
+            {/each}
+        </div>
 
-<div class="text-center">
-    <ul class="text-gray-200">
-        {#each appState.currentRequest.clients as client}
-            <li>PID: {client ? client.pid : 'Unknown'}</li>
-            <li>Path: {client ? client.exe : 'Unknown'}</li>
-        {/each}
-    </ul>
-
-    <button on:click={approve}>
-        <Icon name="check-circle" class="w-32 stroke-green-500" />
-    </button>
-
-    <button on:click={deny}>
-        <Icon name="x-circle" class="w-32 stroke-red-600" />
-    </button>
+        <div class="grid grid-cols-2">
+            <button class="btn btn-error justify-self-start" on:click={deny}>
+                Deny
+                &nbsp;
+                <!-- <kbd class="kbd kbd-xs bg-error border-base-100">Esc</kbd> -->
+                <kbd class="normal-case px-1 py-0.5 rounded border border-neutral">Esc</kbd>
+            </button>
+            <button class="btn btn-success justify-self-end" on:click={approve}>
+                Approve
+                &nbsp;
+                <kbd class="normal-case px-1 py-0.5 rounded border border-neutral">Shift</kbd>
+                <span class="mx-0.5">+</span>
+                <kbd class="normal-case px-1 py-0.5 rounded border border-neutral">Enter</kbd>
+            </button>
+        </div>
+    <!-- </div> -->
 </div>

src/views/EnterCredentials.svelte

@@ -35,19 +35,24 @@
     }
 </script>
 
+
 {#if errorMsg}
-    <div class="text-red-400">{errorMsg}</div>
+<div class="alert alert-error shadow-lg">
+  <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}">
-    <div class="text-gray-200">AWS Access Key ID</div>
-    <input class="text-gray-200 bg-zinc-800" type="text" bind:value="{AccessKeyId}" />
+<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>
 
-    <div class="text-gray-200">AWS Secret Access Key</div>
-    <input class="text-gray-200 bg-zinc-800" type="password" bind:value="{SecretAccessKey}" />
+        <input type="text" placeholder="AWS Access Key ID" bind:value="{AccessKeyId}" class="input input-bordered" />
 
-    <div class="text-gray-200">Passphrase</div>
-    <input class="text-gray-200 bg-zinc-800" type="password" bind:value="{passphrase}" />
+        <input type="password" placeholder="AWS Secret Access Key" bind:value="{SecretAccessKey}" class="input input-bordered" />
 
-    <input class="text-gray-200" type="submit" />
+        <input type="password" placeholder="Passphrase" bind:value="{passphrase}" class="input input-bordered" />
+
+        <input type="submit" class="btn btn-primary" />
 </form>

src/views/Home.svelte

@@ -1,7 +1,8 @@
 <script>
     import { onMount, createEventDispatcher } from 'svelte';
     import { invoke } from '@tauri-apps/api/tauri';
-    import Button from '../ui/Button.svelte';
+
+    import Icon from '../ui/Icon.svelte';
 
     export let appState;
 
@@ -21,14 +22,35 @@
     })
 </script>
 
-<h1 class="text-4xl text-gray-300">Creddy</h1>
 
-<p>Credential status: {status}</p>
+<nav class="fixed top-0 grid grid-cols-2 w-full p-2">
+    <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'}
-    <Button on:click={() => dispatch('navigate', {target: 'Unlock'})}>Unlock</Button>
+    <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>
+    </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>
+    </div>
+
 {:else if status === 'empty'}
-    <Button on:click={() => dispatch('navigate', {target: 'EnterCredentials'})}>
+    <button class="btn btn-primary" on:click={() => dispatch('navigate', {target: 'EnterCredentials'})}>
         Enter Credentials
-    </Button>
+    </button>
 {/if}

src/views/ShowApproved.svelte

@@ -1,7 +1,12 @@
 <script>
     import { onMount, createEventDispatcher } from 'svelte';
+    import { fly } from 'svelte/transition';
+    import { expoOut } from 'svelte/easing';
     import { emit } from '@tauri-apps/api/event';
     import { invoke } from '@tauri-apps/api/tauri';
+
+    import ErrorAlert from '../ui/ErrorAlert.svelte';
+    import Icon from '../ui/Icon.svelte';
     
     export let appState;
     let error = null;
@@ -21,14 +26,33 @@
             error = e;
         }
 
-        window.setTimeout(() => dispatch('navigate', {target: 'Home'}), 3000);
+        window.setTimeout(() => dispatch('navigate', {target: 'Home'}), 1000);
     }
 
     onMount(respond);
 </script>
 
+<style>
+    :global(body) {
+        overflow: hidden;
+    }
+</style>
+
+{#if error}
+    <ErrorAlert message="{error}" />
+{:else}
+    <div in:fly="{{x: '60vw', duration: 400, easing: expoOut}}" class="flex flex-col h-screen items-center justify-center max-w-max m-auto">
+        <Icon name="check-circle" class="w-36 h-36" />
+        <div class="text-2xl font-bold">Approved!</div>
+    </div>
+{/if}
+
+  
+
+<!-- 
 {#if error}
     <div class="text-red-400">{error}</div>
 {:else}
     <h1 class="text-4xl text-gray-300">Approved!</h1>
 {/if}
+ -->

src/views/ShowDenied.svelte

@@ -1,7 +1,12 @@
 <script>
     import { onMount, createEventDispatcher } from 'svelte';
+    import { fly, fade } from 'svelte/transition';
+    import { expoOut } from 'svelte/easing';
     import { emit } from '@tauri-apps/api/event';
     import { invoke } from '@tauri-apps/api/tauri';
+
+    import ErrorAlert from '../ui/ErrorAlert.svelte';
+    import Icon from '../ui/Icon.svelte';
     
     export let appState;
     let error = null;
@@ -21,14 +26,20 @@
             error = e;
         }
 
-        window.setTimeout(() => dispatch('navigate', {target: 'Home'}), 3000);
+        window.setTimeout(() => dispatch('navigate', {target: 'Home'}), 1000);
     }
 
     onMount(respond);
+    let k = 0;
 </script>
 
 {#if error}
-    <div class="text-red-400">{error}</div>
+    <ErrorAlert message="{error}" />
 {:else}
-    <h1 class="text-4xl text-gray-300">Denied!</h1>
+    {#key k}
+    <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}">
+        <Icon name="x-circle" class="w-36 h-36" />
+        <div class="text-2xl font-bold">Denied!</div>
+    </div>
+    {/key}
 {/if}

src/views/Unlock.svelte

@@ -1,20 +1,20 @@
 <script>
     import { invoke } from '@tauri-apps/api/tauri';
     import { createEventDispatcher } from 'svelte';
+
     import { getRootCause } from '../lib/errors.js';
-    import Button from '../ui/Button.svelte';
+    import ErrorAlert from '../ui/ErrorAlert.svelte';
 
     export let appState;
 
     const dispatch = createEventDispatcher();
 
     let errorMsg = null;
+    let alert = null;
     let passphrase = '';
     async function unlock() {
-        console.log('invoking unlock command.')
-
         try {
-            await invoke('unlock', {passphrase});
+            let r = await invoke('unlock', {passphrase});
             appState.credentialStatus = 'unlocked';
             if (appState.currentRequest) {
                 dispatch('navigate', {target: 'ShowApproved'});
@@ -32,16 +32,57 @@
             else {
                 errorMsg = e.msg;
             }
+            
+            if (alert) {
+                alert.shake();
+            }
         }
     }
 </script>
 
-{#if errorMsg}
-    <div class="text-red-400">{errorMsg}</div>
-{/if}
+<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}">
-    <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 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}" />
+    {/if}
+
+    <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" />
 </form>