almost finish refactoring PersistentCredential trait

src/ui/PassphraseInput.svelte

@@ -0,0 +1,44 @@
+<script>
+    import Icon from './Icon.svelte';
+
+    export let value = '';
+    export let placeholder = '';
+    export let autofocus = false;
+
+    let show = false;
+</script>
+
+
+<style>
+    button {
+        border: 1px solid oklch(var(--bc) / 0.2);
+        border-left: none;
+    }
+</style>
+
+
+<div class="join w-full">
+    <input
+        type={show ? 'text' : 'password'}
+        {value} {placeholder} {autofocus}
+        on:input on:change on:focus on:blur
+        class="input input-bordered flex-grow join-item placeholder:text-gray-500"
+        on:input={e => value = e.target.value}
+    />
+
+    <button
+        type="button"
+        class="btn btn-ghost join-item swap swap-rotate"
+        class:swap-active={show}
+        on:click={() => show = !show}
+    >
+        <Icon
+            name="eye"
+            class="w-5 h-5 swap-off"
+        />
+        <Icon
+            name="eye-slash"
+            class="w-5 h-5 swap-on"
+        />
+    </button>
+</div>

src/ui/icons/eye-slash.svelte

@@ -0,0 +1,9 @@
+<script>
+    let classes = "";
+    export {classes as class};
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class={classes}>
+  <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" />
+</svg>
+

src/ui/icons/eye.svelte

@@ -0,0 +1,9 @@
+<script>
+    let classes = "";
+    export {classes as class};
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class={classes}>
+  <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
+  <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+</svg>

src/ui/icons/pencil.svelte

@@ -0,0 +1,8 @@
+<script>
+    let classes = '';
+    export {classes as class};
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class={classes}>
+  <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" />
+</svg>

src/ui/icons/plus-circle-mini.svelte

@@ -0,0 +1,9 @@
+<script>
+  let classes = "";
+  export {classes as class};
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class={classes}>
+  <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm.75-11.25a.75.75 0 0 0-1.5 0v2.5h-2.5a.75.75 0 0 0 0 1.5h2.5v2.5a.75.75 0 0 0 1.5 0v-2.5h2.5a.75.75 0 0 0 0-1.5h-2.5v-2.5Z" clip-rule="evenodd" />
+</svg>
+

src/ui/icons/trash.svelte

@@ -0,0 +1,8 @@
+<script>
+    let classes = '';
+    export {classes as class};
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class={classes}>
+  <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+</svg>

src/views/ChangePassphrase.svelte

@@ -0,0 +1,14 @@
+<script>
+    import { navigate } from '../lib/routing.js';
+
+    import EnterPassphrase from './passphrase/EnterPassphrase.svelte';
+</script>
+
+
+<div class="flex flex-col h-screen max-w-sm m-auto gap-y-8 justify-center">
+        <h1 class="text-2xl font-bold text-center">
+            Change passphrase
+        </h1>
+
+        <EnterPassphrase cancellable={true} on:save={() => navigate('Home')}/>
+</div>

src/views/CreatePassphrase.svelte

@@ -0,0 +1,21 @@
+<script>
+    import EnterPassphrase from './passphrase/EnterPassphrase.svelte';
+</script>
+
+
+<div class="flex flex-col h-screen max-w-lg m-auto justify-center">
+    <div class="space-y-8">
+        <h1 class="text-2xl font-bold text-center">Welcome to Creddy!</h1>
+
+        <div class="space-y-4">
+            <p> Create a passphrase to get started.</p>
+
+            <p>Please note that if you forget your passphrase, there is no way to recover 
+            your stored credentials. You will have to start over with a new passphrase.</p>
+        </div>
+
+        <div class="max-w-sm mx-auto">
+            <EnterPassphrase />
+        </div>
+    </div>
+</div>

src/views/EnterAwsCredential.svelte

@@ -0,0 +1,93 @@
+<script>
+    import { onMount } from 'svelte';
+    import { invoke } from '@tauri-apps/api/core';
+    import { emit } from '@tauri-apps/api/event';
+    import { getRootCause } from '../lib/errors.js';
+
+    import { appState } from '../lib/state.js';
+    import { navigate } from '../lib/routing.js';
+    import Link from '../ui/Link.svelte';
+    import ErrorAlert from '../ui/ErrorAlert.svelte';
+    import Spinner from '../ui/Spinner.svelte';
+
+
+    let errorMsg = null;
+    let alert;
+    let AccessKeyId, SecretAccessKey, passphrase, confirmPassphrase
+
+    function confirm() {
+        if (passphrase !== confirmPassphrase) {
+            errorMsg = 'Passphrases do not match.'
+        }
+    }
+
+    let saving = false;
+    async function save() {
+        if (passphrase !== confirmPassphrase) {
+            alert.shake();
+            return;
+        }
+
+        let credentials = {AccessKeyId, SecretAccessKey};
+        try {
+            saving = true;
+            await invoke('save_credentials', {credentials, passphrase});
+            emit('credentials-event', 'entered');
+            if ($appState.currentRequest) {
+                navigate('Approve');
+            }
+            else {
+                navigate('Home');
+            }
+        }
+        catch (e) {
+            const root = getRootCause(e);
+            if (e.code === 'GetSession' && root.code) {
+                errorMsg = `Error response from AWS (${root.code}): ${root.msg}`;
+            }
+            else {
+                // some of the built-in Tauri errors are plain strings,
+                // so fall back to e if e.msg doesn't exist
+                errorMsg = e.msg || e;
+            }
+
+            // if the alert already existed, shake it
+            if (alert) {
+                alert.shake();
+            }
+
+            saving = false;
+        }
+    }
+
+    function cancel() {
+        emit('credentials-event', 'enter-canceled');
+        navigate('Home');
+    }
+</script>
+
+
+
+<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>
+
+    {#if errorMsg}
+        <ErrorAlert bind:this="{alert}">{errorMsg}</ErrorAlert>
+    {/if}
+
+    <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="Re-enter passphrase" bind:value={confirmPassphrase} class="input input-bordered" on:change={confirm} />
+
+    <button type="submit" class="btn btn-primary">
+        {#if saving }
+            <Spinner class="w-5 h-5" thickness="12"/>
+        {:else}
+            Submit
+        {/if}
+    </button>
+    <Link target={cancel} hotkey="Escape">
+        <button class="btn btn-sm btn-outline w-full">Cancel</button>
+    </Link>
+</form>

src/views/ManageCredentials.svelte

@@ -0,0 +1,62 @@
+<script>
+    import { onMount } from 'svelte';
+    import { slide, fade } from 'svelte/transition';
+    import { invoke } from '@tauri-apps/api/core';
+
+    import AwsCredential from './credentials/AwsCredential.svelte';
+    import Icon from '../ui/Icon.svelte';
+    import Nav from '../ui/Nav.svelte';
+
+    let show = false;
+
+    let records = []
+    async function loadCreds() {
+        records = await invoke('list_credentials');
+        console.log(records);
+    }
+    onMount(loadCreds);
+
+    function newCred() {
+        console.log('hello!');
+        records.push({
+            id: crypto.randomUUID(),
+            name: '',
+            is_default: false,
+            credential: {type: 'AwsBase', AccessKeyId: '', SecretAccessKey: ''},
+            isNew: true,
+        });
+        records = records;
+    }
+</script>
+
+
+<Nav>
+    <h1 slot="title" class="text-2xl font-bold">Credentials</h1>
+</Nav>
+
+<div class="max-w-xl mx-auto flex flex-col gap-y-4 justify-center">
+    <div class="divider">
+        <h2 class="text-xl font-bold">AWS Access Keys</h2>
+    </div>
+
+    {#if records.length > 0}
+        <div class="rounded-box border-2 border-neutral-content/30 divide-y-2 divide-neutral-content/30">
+            {#each records as record (record.id)}
+                <AwsCredential {record} on:update={loadCreds} />
+            {/each}
+        </div>
+        <button class="btn btn-primary btn-wide mx-auto" on:click={newCred}>
+            <Icon name="plus-circle-mini" class="size-5" />
+            Add
+        </button>
+    {:else}
+        <div class="flex flex-col gap-6 items-center rounded-box border-2 border-dashed border-neutral-content/30 p-6">
+            <div>You have no saved AWS credentials.</div>
+            <button class="btn btn-primary btn-wide mx-auto" on:click={newCred}>
+                <Icon name="plus-circle-mini" />
+                Add
+            </button>
+        </div>
+    {/if}
+
+</div>

src/views/approve/CollectResponse.svelte

@@ -0,0 +1,91 @@
+<script>
+    import { createEventDispatcher } from 'svelte';
+    import { appState, cleanupRequest } from '../../lib/state.js';
+
+    import Link from '../../ui/Link.svelte';
+    import KeyCombo from '../../ui/KeyCombo.svelte';
+
+
+    // Executable paths can be long, so ensure they only break on \ or /
+    function breakPath(path) {
+        return path.replace(/(\\|\/)/g, '$1<wbr>');
+    }
+
+    // Extract executable name from full path
+    const client = $appState.currentRequest.client;
+    const m = client.exe?.match(/\/([^/]+?$)|\\([^\\]+?$)/);
+    const appName = m[1] || m[2];
+
+    const dispatch = createEventDispatcher();
+
+    function setResponse(approval, base) {
+        $appState.currentRequest.response = {
+            id: $appState.currentRequest.id,
+            approval,
+            base,
+        };
+        dispatch('response');
+    }
+</script>
+
+
+{#if $appState.currentRequest?.base}
+    <div class="alert alert-warning 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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
+            <span>
+                WARNING: This application is requesting your base AWS credentials. 
+                These credentials are less secure than session credentials, since they don't expire automatically.
+            </span>
+        </div>
+    </div>
+{/if}
+
+<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>
+
+    <div class="grid grid-cols-[auto_1fr] gap-x-3">
+        <div class="text-right">Path:</div>
+        <code class="">{@html client.exe ? breakPath(client.exe) : 'Unknown'}</code>
+        <div class="text-right">PID:</div>
+        <code>{client.pid}</code>
+    </div>
+</div>
+
+<div class="w-full grid grid-cols-[1fr_auto] items-center gap-y-6">
+        <!-- Don't display the option to approve with session credentials if base was specifically requested -->
+        {#if !$appState.currentRequest?.base}
+            <h3 class="font-semibold">
+                Approve with session credentials
+            </h3>
+            <Link target={() => setResponse('Approved', false)} hotkey="Enter" shift={true}>
+                <button class="w-full btn btn-success">
+                    <KeyCombo keys={['Shift', 'Enter']} />
+                </button>
+            </Link>
+        {/if}
+
+        <h3 class="font-semibold">
+            <span class="mr-2">
+                {#if $appState.currentRequest?.base}
+                    Approve
+                {:else}
+                    Approve with base credentials
+                {/if}
+            </span>
+        </h3>
+        <Link target={() => setResponse('Approved', true)} hotkey="Enter" shift={true} ctrl={true}>
+            <button class="w-full btn btn-warning">
+                <KeyCombo keys={['Ctrl', 'Shift', 'Enter']} />
+            </button>
+        </Link>
+
+        <h3 class="font-semibold">
+            <span class="mr-2">Deny</span>
+        </h3>
+        <Link target={() => setResponse('Denied', false)} hotkey="Escape">
+            <button class="w-full btn btn-error">
+                <KeyCombo keys={['Esc']} />
+            </button>
+        </Link>
+</div>

src/views/approve/ShowResponse.svelte

@@ -0,0 +1,29 @@
+<script>
+    import { draw, fade } from 'svelte/transition';
+
+    import { appState } from '../../lib/state.js';
+    
+    let success = false;
+    let error = null;
+
+    let drawDuration = $appState.config.rehide_ms >= 750 ? 500 : 0;
+    let fadeDuration = drawDuration * 0.6;
+    let fadeDelay = drawDuration * 0.4;
+</script>
+
+
+<div class="flex flex-col h-screen items-center justify-center max-w-max m-auto">
+    {#if $appState.currentRequest.response.approval === 'Approved'}
+        <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: drawDuration}}" 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>
+    {:else}
+        <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>
+    {/if}
+
+    <div in:fade="{{duration: fadeDuration, delay: fadeDelay}}" class="text-2xl font-bold">
+        {$appState.currentRequest.response.approval}!
+    </div>
+</div>

src/views/credentials/AwsCredential.svelte

@@ -0,0 +1,157 @@
+<script>
+    import { createEventDispatcher } from 'svelte';
+    import { fade, slide } from 'svelte/transition';
+    import { invoke } from '@tauri-apps/api/core';
+
+    import ErrorAlert from '../../ui/ErrorAlert.svelte';
+    import Icon from '../../ui/Icon.svelte';
+
+    export let record
+
+    import PassphraseInput from '../../ui/PassphraseInput.svelte';
+
+
+    const dispatch = createEventDispatcher();
+
+    // if record.credential is blank when component is first instantiated, this is
+    // a newly-added credential, so show details so that data can be filled out
+    let showDetails = record.isNew ? true : false;
+
+    let localName = name;
+    let local = JSON.parse(JSON.stringify(record));
+    $: isModified = JSON.stringify(local) !== JSON.stringify(record);
+
+    let error, alert;
+    async function saveCredential() {
+        try {
+            await invoke('save_credential', {cred: local});
+            dispatch('update');
+            showDetails = false;
+        }
+        catch (e) {
+            if (error) alert.shake();
+            error = e;
+        }
+    }
+
+
+    let confirmDelete;
+    function conditionalDelete() {
+        if (!record.isNew) {
+            confirmDelete.showModal();
+        }
+        else {
+            deleteCredential();
+        }
+    }
+
+    async function deleteCredential() {
+        try {
+            if (!record.isNew) {
+
+                await invoke('delete_credential', {id: record.id});
+            }
+            dispatch('update');
+        }
+        catch (e) {
+            if (error) alert.shake();
+            error = e;
+        }
+    }
+</script>
+
+
+<div transition:slide|local={{duration: record.isNew ? 300 : 0}} class="px-6 py-4 space-y-4">
+    <div class="flex items-center gap-x-4">
+        <h3 class="text-lg font-bold">{record.name}</h3>
+
+        {#if record.is_default}
+            <span class="badge badge-secondary">Default</span>
+        {/if}
+
+        <div class="join ml-auto">
+            <button
+                type="button"
+                class="btn btn-sm btn-primary join-item"
+                on:click={() => showDetails = !showDetails}
+            >
+                <Icon name="pencil" class="w-5 h-5" />
+            </button>
+            <button
+                type="button"
+                class="btn btn-sm btn-error join-item"
+                on:click={conditionalDelete}
+            >
+                <Icon name="trash" class="w-5 h-5" />
+            </button>
+        </div>
+    </div>
+
+
+    {#if showDetails}
+        {#if error}
+            <ErrorAlert bind:this={alert}>{error}</ErrorAlert>
+        {/if}
+
+        <form
+            transition:slide|local={{duration: 200}}
+            class="space-y-4"
+            on:submit|preventDefault={saveCredential}
+        >
+            <div class="grid grid-cols-[auto_1fr] items-center gap-4">
+                {#if record.isNew}
+                    <span class="justify-self-end">Name</span>
+                    <input
+                        type="text"
+                        class="input input-bordered"
+                        bind:value={local.name}
+                    >
+                {/if}
+
+                <span class="justify-self-end">Key ID</span>
+                <input
+                    type="text"
+                    class="input input-bordered font-mono"
+                    bind:value={local.credential.AccessKeyId}
+                >
+
+                <span>Secret key</span>
+                <div class="font-mono">
+                    <PassphraseInput bind:value={local.credential.SecretAccessKey} />
+                </div>
+            </div>
+
+            <div class="flex justify-between">
+                <label class="label cursor-pointer justify-self-start space-x-4">
+                    <span class="label-text">Default for type</span>
+                    <input type="checkbox" class="toggle toggle-secondary" bind:checked={local.is_default}>
+                </label>
+                {#if isModified}
+                    <button
+                        transition:fade={{duration: 100}}
+                        type="submit"
+                        class="btn btn-primary"
+                        >
+                            Save
+                        </button>
+                {/if}
+            </div>
+        </form>
+    {/if}
+
+    <dialog bind:this={confirmDelete} class="modal">
+        <div class="modal-box">
+            <h3 class="text-lg font-bold">Delete AWS credential "{record.name}"?</h3>
+            <div class="modal-action">
+                <form method="dialog" class="flex gap-x-4">
+                    <button class="btn btn-outline">Cancel</button>
+                    <button 
+                        autofocus
+                        class="btn btn-error"
+                        on:click={deleteCredential}
+                    >Delete</button>
+                </form>
+            </div>
+        </div>
+    </dialog>
+</div>

src/views/passphrase/EnterPassphrase.svelte

@@ -0,0 +1,84 @@
+<script>
+    import { createEventDispatcher } from 'svelte';
+    import { invoke } from '@tauri-apps/api/core';
+    import { appState } from '../../lib/state.js';
+
+    import ErrorAlert from '../../ui/ErrorAlert.svelte';
+    import Link from '../../ui/Link.svelte';
+    import PassphraseInput from '../../ui/PassphraseInput.svelte';
+    import Spinner from '../../ui/Spinner.svelte';
+
+    export let cancellable = false;
+
+
+    const dispatch = createEventDispatcher();
+
+    let alert, saving;
+    let passphrase = '';
+    let confirmPassphrase = '';
+    let error = null;
+
+    function confirm() {
+        if (passphrase !== confirmPassphrase) {
+            error = 'Passphrases do not match.';
+        }
+    }
+
+    async function save() {
+        if (passphrase === '' || passphrase !== confirmPassphrase) {
+            alert.shake();
+            return;
+        }
+
+        saving = true;
+        try {
+            await invoke('set_passphrase', {passphrase});
+            $appState.sessionStatus = 'unlocked';
+            dispatch('save');
+        }
+        catch (e) {
+            if (error) alert.shake();
+            error = e;
+        }
+        saving = false;
+    }
+</script>
+
+
+<form class="form-control gap-y-4" on:submit|preventDefault={save}>
+    {#if error}
+        <ErrorAlert bind:this={alert}>{error}</ErrorAlert>
+    {/if}
+
+    <label class="form-control w-full">
+        <div class="label">
+            <span class="label-text">Passphrase</span>
+        </div>
+        <PassphraseInput bind:value={passphrase} placeholder="correct horse battery staple" />
+    </label>
+
+    <label class="form-control w-full">
+        <div class="label">
+            <span class="label-text">Re-enter passphrase</span>
+        </div>
+        <PassphraseInput
+            bind:value={confirmPassphrase}
+            placeholder="correct horse battery staple"
+            on:change={confirm}
+        />
+    </label>
+
+    <button type="submit" class="btn btn-primary">
+        {#if saving}
+            <Spinner class="w-5 h-5" thickness="12"/>
+        {:else}
+            Submit
+        {/if}
+    </button>
+
+    {#if cancellable}
+        <Link target="Home" hotkey="Escape">
+            <button type="button" class="btn btn-outline btn-sm w-full">Cancel</button>
+        </Link>
+    {/if}
+</form>