almost finish refactoring PersistentCredential trait

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>