finish manage ui for ssh keys

src/views/credentials/SshKey.svelte

@@ -1,46 +1,45 @@
 <script>
-    import { invoke } from '@tauri-apps/api/core';
-    import { homeDir } from '@tauri-apps/api/path';
-    import { open } from '@tauri-apps/plugin-dialog';
-    import { fade, slide } from 'svelte/transition';
+    import { createEventDispatcher } from 'svelte';
+    import { slide } from 'svelte/transition';
 
-    import ErrorAlert from '../../ui/ErrorAlert.svelte';
-    import FileInput from '../../ui/FileInput.svelte';
+    import NewSshKey from './NewSshKey.svelte';
+    import EditSshKey from './EditSshKey.svelte';
     import Icon from '../../ui/Icon.svelte';
 
     export let record;
 
-    let showDetails = record.isNew ? true : false;
+    const dispatch = createEventDispatcher();
 
-    let local = JSON.parse(JSON.stringify(record));
+    function copy(obj) {
+        return JSON.parse(JSON.stringify(obj));
+    }
+
+    let local = copy(record);
     $: isModified = JSON.stringify(local) !== JSON.stringify(record);
+    let showDetails = record?.isNew;
 
-    let file;
-    let passphrase;
-
-    let defaultPath = null;
-    homeDir().then(d => defaultPath = `${d}/.ssh`);
-
-    function conditionalDelete() {
-        // todo
+    function handleSave(evt) {
+        local = copy(evt.detail);
+        showDetails = false;
     }
-
-    let alert;
-    async function saveCredential() {
-        let key = await invoke('sshkey_from_file', {startDir, passphrase});
-        record.credential = {type: 'SshKey', ...key};
-        record.isNew = false; // just for now
-    }
-
 </script>
 
 
-<div
-    transition:slide|local={{duration: record.isNew ? 300 : 0}}
-    class="rounded-box space-y-4 bg-base-200"
->
+<div class="rounded-box space-y-4 bg-base-200">
     <div class="flex items-center px-6 py-4 gap-x-4">
-        <h3 class="text-lg font-bold">{record.name || ''}</h3>
+        {#if !record.isNew}
+            {#if showDetails}
+                <input 
+                    type="text"
+                    class="input input-bordered bg-transparent text-lg font-bold"
+                    bind:value={local.name}
+                >
+            {:else}
+                <h3 class="text-lg font-bold">
+                    {record.name}
+                </h3>
+            {/if}
+        {/if}
 
         <div class="join ml-auto">
             <button
@@ -53,58 +52,20 @@
             <button
                 type="button"
                 class="btn btn-outline btn-error join-item"
-                on:click={conditionalDelete}
+                on:click={() => dispatch('delete', record)}
             >
                 <Icon name="trash" class="size-6" />
             </button>
         </div>
     </div>
 
-    {#if showDetails}
-        <form
-            transition:slide|local={{duration: 200}}
-            class=" px-6 pb-4 space-y-4"
-            on:submit|preventDefault={() => alert.run(saveCredential)}
-        >
-            <ErrorAlert bind:this={alert} />
-
-            <div class="grid grid-cols-[auto_1fr] items-center gap-4">
-                {#if record.isNew}
-                    <span class="justify-self-end">File</span>
-                    <FileInput bind:value={file} params={{defaultPath}} />
-
-                    <span class="justify-self-end">Passphrase</span>
-                    <input
-                        type="text"
-                        class="input input-bordered bg-transparent"
-                        bind:value={passphrase}
-                    >
-                {:else}
-                    <span class="justify-self-end">Algorithm</span>
-                    <span class="font-mono">{record.credential.algorithm}</span>
-
-                    <span class="justify-self-end">Comment</span>
-                    <span class="font-mono">{record.credential.comment}</span>
-
-                    <span class="justify-self-end">Public key</span>
-                    <span class="font-mono">{record.credential.public_key}</span>
-
-                    <span class="justify-self-end">Private key</span>
-                    <span class="font-mono">{record.credential.private_key}</span>
-                {/if}
-            </div>
-
-            <div class="flex justify-end">
-                {#if isModified}
-                    <button
-                        transition:fade={{duration: 100}}
-                        type="submit"
-                        class="btn btn-primary"
-                    >
-                        Save
-                    </button>
-                {/if}
-            </div>
-        </form>
+    {#if record && showDetails}
+        <div transition:slide|local={{duration: 200}} class="px-6 pb-4 space-y-4">
+            {#if record.isNew}
+                <NewSshKey {record} on:save on:save={handleSave} />
+            {:else}
+                <EditSshKey bind:local={local} {isModified} on:save />
+            {/if}
+        </div>
     {/if}
-</div>
+</div>