jfmonty2/creddy
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 15 Wiki Activity

finish manage ui for ssh keys

Browse Source
This commit is contained in:
Joseph Montanaro 2024-07-02 09:57:02 -04:00
parent a3a11897c2
commit 6711ce2c43
11 changed files with 336 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src-tauri/src/credentials/record.rs
View File

@ -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)
}

9
src/lib/errors.js
View File

@ -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
}

5
src/ui/ErrorAlert.svelte
View File

@ -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}

20
src/ui/FileInput.svelte
View File

@ -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>

38
src/views/Home.svelte
View File

@ -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">
<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 defaults credentials.</p>
</div>
</Link>
<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">
<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>
</div>
</Link>
</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">
<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>
</div>
</Link>
</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">
<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>
</div>
</Link>
</button>
</div>
</div>

39
src/views/ManageCredentials.svelte
View File

@ -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} />

45
src/views/credentials/AwsCredential.svelte
View File

@ -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>

62
src/views/credentials/ConfirmDelete.svelte Normal file
View File

@ -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>

85
src/views/credentials/EditSshKey.svelte Normal file
View File

@ -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>

62
src/views/credentials/NewSshKey.svelte
View File

@ -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,43 +22,29 @@
homeDir().then(d => defaultPath = `${d}/.ssh`);
let alert;
let saving = false;
async function saveCredential() {
saving = true;
try {
let key = await invoke('sshkey_from_file', {path: file.path, passphrase});
dispatch('update', key);
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>
</div>
{#if showDetails}
<form
transition:slide|local={{duration: 200}}
class=" px-6 pb-4 space-y-4"
on:submit|preventDefault={() => alert.run(saveCredential)}
>
<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">
@ -66,11 +52,11 @@
<input
type="text"
class="input input-bordered bg-transparent"
vind:value={name}
bind:value={name}
>
<span class="justify-self-end">File</span>
<FileInput bind:value={file} params={{defaultPath}} />
<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} />
@ -83,10 +69,12 @@
type="submit"
class="btn btn-primary"
>
Save
{#if saving}
<Spinner class="size-5 min-w-16" thickness="12" />
{:else}
<span class="min-w-16">Save</span>
{/if}
</button>
{/if}
</div>
</form>
{/if}
</div>

105
src/views/credentials/SshKey.svelte
View File

@ -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 && showDetails}
<div transition:slide|local={{duration: 200}} class="px-6 pb-4 space-y-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}
>
<NewSshKey {record} on:save on:save={handleSave} />
{: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>
<EditSshKey bind:local={local} {isModified} on:save />
{/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>