finish manage ui for ssh keys

2024-07-02 09:57:02 -04:00 · 2024-07-02 09:57:02 -04:00 · 6711ce2c43
commit 6711ce2c43
parent a3a11897c2
11 changed files with 336 additions and 224 deletions
--- a/src-tauri/src/credentials/record.rs
+++ b/src-tauri/src/credentials/record.rs
@ -21,6 +21,7 @@ use super::{
    Credential,
    Crypto,
    PersistentCredential,
+    SshKey,
 };


@ -48,6 +49,7 @@ impl CredentialRecord {
    pub async fn save(&self, crypto: &Crypto, pool: &SqlitePool) -> Result<(), SaveCredentialsError> {
        let type_name = match &self.credential {
            Credential::AwsBase(_) => AwsBaseCredential::type_name(),
+            Credential::Ssh(_) => SshKey::type_name(),
            _ => return Err(SaveCredentialsError::NotPersistent),
        };

@ -82,6 +84,7 @@ impl CredentialRecord {
        // save credential details to child table
        match &self.credential {
            Credential::AwsBase(b) => b.save_details(&self.id, crypto, &mut txn).await,
+            Credential::Ssh(s) => s.save_details(&self.id, crypto, &mut txn).await,
            _ => Err(SaveCredentialsError::NotPersistent),
        }?;

@ -147,6 +150,11 @@ impl CredentialRecord {
                .ok_or(LoadCredentialsError::InvalidData)?;
            records.push(Self::from_parts(parent, credential));
        }
+        for (id, credential) in SshKey::list(crypto, pool).await? {
+            let parent = parent_map.remove(&id)
+                .ok_or(LoadCredentialsError::InvalidData)?;
+            records.push(Self::from_parts(parent, credential));
+        }

        Ok(records)
    }
--- a/src/lib/errors.js
+++ b/src/lib/errors.js
@ -6,3 +6,12 @@ export function getRootCause(error) {
        return error;
    }
 }
+
+
+export function fullMessage(error) {
+    let msg = error?.msg ? error.msg : error;
+    if (error.source) {
+        msg = `${msg}: ${fullMessage(error.source)}`;
+    }
+    return msg
+}
--- a/src/ui/ErrorAlert.svelte
+++ b/src/ui/ErrorAlert.svelte
@ -2,6 +2,9 @@
    import { onMount } from 'svelte';
    import { slide } from 'svelte/transition';

+    import { fullMessage } from '../lib/errors.js';
+
+
    let extraClasses = "";
    export {extraClasses as class};
    export let slideDuration = 150;
@ -78,7 +81,7 @@
    <div transition:slide="{{duration: slideDuration}}" class="alert alert-error shadow-lg {animationClass} {extraClasses}">
        <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>
-            <slot {error}>{error.msg || error}</slot>
+            <slot {error}>{fullMessage(error)}</slot>
        </span>

        {#if $$slots.buttons}
--- a/src/ui/FileInput.svelte
+++ b/src/ui/FileInput.svelte
@ -1,20 +1,33 @@
 <script>
    // import { listen } from '@tauri-apps/api/event';
    import { open } from '@tauri-apps/plugin-dialog';
+    import { sep } from '@tauri-apps/api/path';
+    import { createEventDispatcher } from 'svelte';

    import Icon from './Icon.svelte';


    export let value = {};
    export let params = {};
+    let displayValue = value?.name || '';
+
+    const dispatch = createEventDispatcher();

    async function chooseFile() {
        let file = await open(params);
        if (file) {
            value = file;
+            displayValue = file.name;
+            dispatch('update', value);
        }
    }

+    function handleInput(evt) {
+        const segments = evt.target.value.split(sep());
+        const name = segments[segments.length - 1];
+        value = {name, path: evt.target.value};
+    }
+
    // some day, figure out drag-and-drop
    // let drag = null;
    // listen('tauri://drag', e => drag = e);
@ -32,8 +45,9 @@
    <input 
        type="text"
        class="join-item grow input input-bordered border-l-0 bg-transparent focus:outline-none"
-        value={value?.name || ''}
-        on:input={e => value.path = e.target.value}
-        on:change on:input on:focus on:blur
+        value={displayValue}
+        on:input={handleInput}
+        on:change={() => dispatch('update', value)}
+        on:focus on:blur
    >
 </div>
--- a/src/views/Home.svelte
+++ b/src/views/Home.svelte
@ -36,37 +36,41 @@

 <div class="flex flex-col h-screen items-center justify-center p-4 space-y-4">
    <div class="grid grid-cols-2 gap-6">
-        <Link target="ManageCredentials">
-            <div class="flex flex-col items-center gap-4 h-full max-w-56 rounded-box p-4 border border-primary hover:bg-base-200 transition-colors">
-                <Icon name="key" class="size-12 stroke-1 stroke-primary" />
-                <h3 class="text-lg font-bold">Credentials</h3>
-                <p class="text-sm">Add, remove, and change defaults credentials.</p>
-            </div>
-        </Link>
+        <button
+            on:click={() => navigate('ManageCredentials')}
+            class="flex flex-col items-center gap-4 h-full max-w-56 rounded-box p-4 border border-primary hover:bg-base-200 transition-transform active:scale-[.98] transition-transform"
+        >
+            <Icon name="key" class="size-12 stroke-1 stroke-primary" />
+            <h3 class="text-lg font-bold">Credentials</h3>
+            <p class="text-sm">Add, remove, and change default credentials.</p>
+        </button>
        
-        <Link target={launchTerminal}>
-            <div class="flex flex-col items-center gap-4 h-full max-w-56 rounded-box p-4 border border-secondary hover:bg-base-200 transition-colors">
-                <Icon name="command-line" class="size-12 stroke-1 stroke-secondary" />
-                <h3 class="text-lg font-bold">Terminal</h3>
-                <p class="text-sm">Launch a terminal pre-configured with AWS credentials.</p>
-            </div>
-        </Link>
+        <button 
+            on:click={launchTerminal}
+            class="flex flex-col items-center gap-4 h-full max-w-56 rounded-box p-4 border border-secondary hover:bg-base-200 transition-colors active:scale-[.98] transition-transform"
+        >
+            <Icon name="command-line" class="size-12 stroke-1 stroke-secondary" />
+            <h3 class="text-lg font-bold">Terminal</h3>
+            <p class="text-sm">Launch a terminal pre-configured with AWS credentials.</p>
+        </button>

-        <Link target={lock}>
-            <div class="flex flex-col items-center gap-4 h-full max-w-56 rounded-box p-4 border border-warning hover:bg-base-200 transition-colors">
-                <Icon name="shield-check" class="size-12 stroke-1 stroke-warning" />
-                <h3 class="text-lg font-bold">Lock</h3>
-                <p class="text-sm">Lock Creddy.</p>
-            </div>
-        </Link>
+        <button 
+            on:click={lock}
+            class="flex flex-col items-center gap-4 h-full max-w-56 rounded-box p-4 border border-warning hover:bg-base-200 transition-colors active:scale-[.98] transition-transform"
+        >
+            <Icon name="shield-check" class="size-12 stroke-1 stroke-warning" />
+            <h3 class="text-lg font-bold">Lock</h3>
+            <p class="text-sm">Lock Creddy.</p>
+        </button>

-        <Link target={() => invoke('exit')}>
-            <div class="flex flex-col items-center gap-4 h-full max-w-56 rounded-box p-4 border border-accent hover:bg-base-200 transition-colors">
-                <Icon name="arrow-right-start-on-rectangle" class="size-12 stroke-1 stroke-accent" />
-                <h3 class="text-lg font-bold">Exit</h3>
-                <p class="text-sm">Close Creddy.</p>
-            </div>
-        </Link>
+        <button 
+            on:click={() => invoke('exit')}
+            class="flex flex-col items-center gap-4 h-full max-w-56 rounded-box p-4 border border-accent hover:bg-base-200 transition-colors active:scale-[.98] transition-transform"
+        >
+            <Icon name="arrow-right-start-on-rectangle" class="size-12 stroke-1 stroke-accent" />
+            <h3 class="text-lg font-bold">Exit</h3>
+            <p class="text-sm">Close Creddy.</p>
+        </button>
    </div>
 </div>

--- a/src/views/ManageCredentials.svelte
+++ b/src/views/ManageCredentials.svelte
@ -5,15 +5,17 @@
    import { invoke } from '@tauri-apps/api/core';

    import AwsCredential from './credentials/AwsCredential.svelte';
-    import NewSshKey from './credentials/NewSshKey.svelte';
+    import ConfirmDelete from './credentials/ConfirmDelete.svelte';
+    import SshKey from './credentials/SshKey.svelte';
+    // import NewSshKey from './credentials/NewSshKey.svelte';
+    // import EditSshKey from './credentials/EditSshKey.svelte';
    import Icon from '../ui/Icon.svelte';
    import Nav from '../ui/Nav.svelte';

-    let show = false;

    let records = null
    $: awsRecords = (records || []).filter(r => r.credential.type === 'AwsBase');
-    $: sshRecords = (records || []).filter(r => r.credential.type === 'SshKey');
+    $: sshRecords = (records || []).filter(r => r.credential.type === 'Ssh');

    let defaults = writable({});
    async function loadCreds() {
@ -39,11 +41,22 @@
            id: crypto.randomUUID(),
            name: null,
            is_default: false,
-            credential: {type: 'SshKey', algorithm: '', private_key: '', public_key: '', comment: '',},
+            credential: {type: 'Ssh', algorithm: '', comment: '', private_key: '', public_key: '',},
            isNew: true,
        });
        records = records;
    }
+
+    let confirmDelete;
+    function handleDelete(evt) {
+        const record = evt.detail;
+        if (record.isNew) {
+            records = records.filter(r => r.id !== record.id);
+        }
+        else {
+            confirmDelete.confirm(record);
+        }
+    }
 </script>


@ -59,7 +72,11 @@

        {#if awsRecords.length > 0}
            {#each awsRecords as record (record.id)}
-                <AwsCredential {record} {defaults} on:update={loadCreds} />
+                <AwsCredential
+                    {record} {defaults}
+                    on:update={loadCreds}
+                    on:delete={handleDelete}
+                />
            {/each}
            <button class="btn btn-primary btn-wide mx-auto" on:click={newAws}>
                <Icon name="plus-circle-mini" class="size-5" />
@ -83,12 +100,12 @@

        {#if sshRecords.length > 0}
            {#each sshRecords as record (record.id)}
-                {#if record.isNew}
-                    <NewSshKey {record} on:update={e => console.log(e)} />
-                {:else}
-                    <!-- EditSshKey -->
-                {/if}
+                <SshKey {record} on:save={loadCreds} on:delete={handleDelete} />
            {/each}
+            <button class="btn btn-primary btn-wide mx-auto" on:click={newSsh}>
+                <Icon name="plus-circle-mini" class="size-5" />
+                Add
+            </button>
        {:else if records !== null}
            <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 SSH keys.</div>
@ -101,3 +118,5 @@
    </div>

 </div>
+
+<ConfirmDelete bind:this={confirmDelete} on:confirm={loadCreds} />
--- a/src/views/credentials/AwsCredential.svelte
+++ b/src/views/credentials/AwsCredential.svelte
@ -31,36 +31,11 @@
        showDetails = false;
    }

-    let deleteModal;
-    function conditionalDelete() {
-        if (!record.isNew) {
-            deleteModal.showModal();
-        }
-        else {
-            deleteCredential();
-        }
-    }
-
-    async function deleteCredential() {
-        try {
-            if (!record.isNew) {
-                await invoke('delete_credential', {id: record.id});
-            }
-            dispatch('update');
-        }
-        catch (e) {
-            showDetails = true;
-            // wait for showDetails to take effect and the alert to be rendered
-            window.setTimeout(() => alert.setError(e), 0);
-        }
-    }
+    
 </script>


-<div 
-    transition:slide|local={{duration: record.isNew ? 300 : 0}}
-    class="rounded-box space-y-4 bg-base-200 {record.is_default ? 'border border-accent' : ''}"
->
+<div class="rounded-box space-y-4 bg-base-200 {record.is_default ? 'border border-accent' : ''}">
    <div class="flex items-center px-6 py-4 gap-x-4">
        <h3 class="text-lg font-bold">
            {#if !record?.isNew && showDetails}
@ -85,7 +60,7 @@
            <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>
@ -141,20 +116,4 @@
            </div>
        </form>
    {/if}
-
-    <dialog bind:this={deleteModal} 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>
--- a/src/views/credentials/ConfirmDelete.svelte
+++ b/src/views/credentials/ConfirmDelete.svelte
@ -0,0 +1,62 @@
+<script>
+    import { invoke } from '@tauri-apps/api/core';
+    import { createEventDispatcher } from 'svelte';
+
+    import ErrorAlert from '../../ui/ErrorAlert.svelte';
+
+    let record;
+    let modal;
+    let alert;
+
+    const dispatch = createEventDispatcher();
+
+    export function confirm(r) {
+        record = r;
+        modal.showModal();
+    }
+
+    async function deleteCredential() {
+        await invoke('delete_credential', {id: record.id})
+        // closing the modal is dependent on the previous step succeeding
+        modal.close();
+        dispatch('confirm');
+    }
+
+    function credentialDescription(record) {
+        if (record.credential.type === 'AwsBase') {
+            return 'AWS credential';
+        }
+        if (record.credential.type === 'Ssh') {
+            return 'SSH key';
+        }
+    }
+</script>
+
+<dialog bind:this={modal} class="modal">
+    <div class="modal-box space-y-6">
+        <ErrorAlert bind:this={alert} />
+        <h3 class="text-lg font-bold">
+            {#if record}
+                Delete {credentialDescription(record)} "{record.name}"?
+            {/if}
+        </h3>
+        <div class="modal-action">
+            <form method="dialog" class="flex gap-x-4">
+                <button
+                    class="btn btn-outline"
+                    on:click={() => alert.setError(null)}
+                >
+                    Cancel
+                </button>
+
+                <button
+                    autofocus
+                    class="btn btn-error"
+                    on:click|preventDefault={() => alert.run(deleteCredential)}
+                >
+                    Delete
+                </button>
+            </form>
+        </div>
+    </div>
+</dialog>
--- a/src/views/credentials/EditSshKey.svelte
+++ b/src/views/credentials/EditSshKey.svelte
@ -0,0 +1,85 @@
+<script>
+    import { invoke } from '@tauri-apps/api/core';
+    import { createEventDispatcher } from 'svelte';
+    import { fade } from 'svelte/transition';
+
+    import ErrorAlert from '../../ui/ErrorAlert.svelte';
+
+
+    export let local;
+    export let isModified;
+
+    const dispatch = createEventDispatcher();
+    let alert;
+
+    async function saveCredential() {
+        await invoke('save_credential', {record: local});
+        dispatch('save', local);
+        showDetails = false;
+    }
+
+    async function copyText(evt) {
+        const tooltip = event.currentTarget;
+        await navigator.clipboard.writeText(tooltip.dataset.copyText);
+        const prevText = tooltip.dataset.tip;
+        tooltip.dataset.tip = 'Copied!';
+        window.setTimeout(() => tooltip.dataset.tip = prevText, 2000);
+    }
+</script>
+
+
+<style>
+    .grid {
+        grid-template-columns: auto minmax(0, 1fr);
+    }
+</style>
+
+
+<form class="space-y-4" on:submit|preventDefault={() => alert.run(saveCredential)}>
+    <ErrorAlert bind:this={alert} />
+
+    <div class="grid items-baseline gap-4">
+        <span class="justify-self-end">Comment</span>
+        <input
+            type="text"
+            class="input input-bordered bg-transparent"
+            bind:value={local.credential.comment}
+        >
+
+        <span class="justify-self-end">Public key</span>
+        <div
+            class="tooltip tooltip-right"
+            data-tip="Click to copy"
+            data-copy-text={local.credential.public_key}
+            on:click={copyText}
+        >
+            <div class="cursor-pointer text-left textarea textarea-bordered bg-transparent font-mono break-all">
+                {local.credential.public_key}
+            </div>
+        </div>
+
+        <span class="justify-self-end">Private key</span>
+        <div
+            class="tooltip tooltip-right"
+            data-tip="Click to copy"
+            data-copy-text={local.credential.private_key}
+            on:click={copyText}
+        >
+            <div class="cursor-pointer text-left textarea textarea-bordered bg-transparent font-mono whitespace-pre overflow-x-auto">
+                {local.credential.private_key}
+            </div>
+        </div>
+    </div>
+
+    <div class="flex justify-end">
+        {#if isModified}
+            <button
+                transition:fade={{duration: 100}}
+                type="submit"
+                class="btn btn-primary"
+            >
+                Save
+            </button>
+        {/if}
+    </div>
+</form>
--- a/src/views/credentials/NewSshKey.svelte
+++ b/src/views/credentials/NewSshKey.svelte
@ -2,12 +2,12 @@
    import { createEventDispatcher } from 'svelte';
    import { invoke } from '@tauri-apps/api/core';
    import { homeDir } from '@tauri-apps/api/path';
-    import { fade, slide } from 'svelte/transition';
+    import { fade } from 'svelte/transition';

    import ErrorAlert from '../../ui/ErrorAlert.svelte';
    import FileInput from '../../ui/FileInput.svelte';
-    import Icon from '../../ui/Icon.svelte';
    import PassphraseInput from '../../ui/PassphraseInput.svelte';
+    import Spinner from '../../ui/Spinner.svelte';

    export let record;

@ -22,71 +22,59 @@
    homeDir().then(d => defaultPath = `${d}/.ssh`);

    let alert;
+    let saving = false;
    async function saveCredential() {
-        let key = await invoke('sshkey_from_file', {path: file.path, passphrase});
-        dispatch('update', key);
+        saving = true;
+        try {
+            let key = await invoke('sshkey_from_file', {path: file.path, passphrase});
+            const payload = {
+                id: record.id,
+                name,
+                is_default: false, // ssh keys don't care about defaults
+                credential: {type: 'Ssh', ...key},
+            };
+            await invoke('save_credential', {record: payload});
+            dispatch('save', payload);
+        }
+        finally {
+            saving = false;
+        }
    }

 </script>


-<div
-    transition:slide|local={{duration: 300}}
-    class="rounded-box space-y-4 bg-base-200"
->
-    <div class="flex justify-end px-6 py-4 gap-x-4">
-        <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={() => dispatch('update')}
-            >
-                <Icon name="trash" class="size-6" />
-            </button>
-        </div>
+<form class="space-y-4" on:submit|preventDefault={alert.run(saveCredential)}>
+    <ErrorAlert bind:this={alert} />
+
+    <div class="grid grid-cols-[auto_1fr] items-center gap-4">
+        <span class="justify-self-end">Name</span>
+        <input
+            type="text"
+            class="input input-bordered bg-transparent"
+            bind:value={name}
+        >
+
+        <span class="justify-self-end">File</span>
+        <FileInput params={{defaultPath}} bind:value={file} on:update={() => name = file.name} />
+
+        <span class="justify-self-end">Passphrase</span>
+        <PassphraseInput class="bg-transparent" bind:value={passphrase} />
    </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">
-                <span class="justify-self-end">Name</span>
-                <input
-                    type="text"
-                    class="input input-bordered bg-transparent"
-                    vind:value={name}
-                >
-
-                <span class="justify-self-end">File</span>
-                <FileInput bind:value={file} params={{defaultPath}} />
-
-                <span class="justify-self-end">Passphrase</span>
-                <PassphraseInput class="bg-transparent" bind:value={passphrase} />
-            </div>
-
-            <div class="flex justify-end">
-                {#if file?.path}
-                    <button
-                        transition:fade={{duration: 100}}
-                        type="submit"
-                        class="btn btn-primary"
-                    >
-                        Save
-                    </button>
+    <div class="flex justify-end">
+        {#if file?.path}
+            <button
+                transition:fade={{duration: 100}}
+                type="submit"
+                class="btn btn-primary"
+            >
+                {#if saving}
+                    <Spinner class="size-5 min-w-16" thickness="12" />
+                {:else}
+                    <span class="min-w-16">Save</span>
                {/if}
-            </div>
-        </form>
-    {/if}
-</div>
+            </button>
+        {/if}
+    </div>
+</form>
--- a/src/views/credentials/SshKey.svelte
+++ b/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>