initial ssh key model and creation ui

2024-07-01 06:38:46 -04:00
parent f311fde74e
commit 5e6542d08e
20 changed files with 555 additions and 28 deletions
--- a/src/views/credentials/SshKey.svelte
+++ b/src/views/credentials/SshKey.svelte
@ -0,0 +1,110 @@
+<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 ErrorAlert from '../../ui/ErrorAlert.svelte';
+    import FileInput from '../../ui/FileInput.svelte';
+    import Icon from '../../ui/Icon.svelte';
+
+    export let record;
+
+    let showDetails = record.isNew ? true : false;
+
+    let local = JSON.parse(JSON.stringify(record));
+    $: isModified = JSON.stringify(local) !== JSON.stringify(record);
+
+    let file;
+    let passphrase;
+
+    let defaultPath = null;
+    homeDir().then(d => defaultPath = `${d}/.ssh`);
+
+    function conditionalDelete() {
+        // todo
+    }
+
+    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="flex items-center px-6 py-4 gap-x-4">
+        <h3 class="text-lg font-bold">{record.name || ''}</h3>
+
+        <div class="join ml-auto">
+            <button
+                type="button"
+                class="btn btn-outline join-item"
+                on:click={() => showDetails = !showDetails}
+            >
+                <Icon name="pencil" class="size-6" />
+            </button>
+            <button
+                type="button"
+                class="btn btn-outline btn-error join-item"
+                on:click={conditionalDelete}
+            >
+                <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}
+</div>