113 lines
3.6 KiB
Svelte
113 lines
3.6 KiB
Svelte
<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';
|
|
import PassphraseInput from '../../ui/PassphraseInput.svelte';
|
|
|
|
|
|
export let record;
|
|
|
|
let local = JSON.parse(JSON.stringify(record));
|
|
$: isModified = JSON.stringify(local) !== JSON.stringify(record);
|
|
let showDetails = record?.isNew;
|
|
|
|
let alert;
|
|
const dispatch = createEventDispatcher();
|
|
async function saveCredential() {
|
|
await invoke('save_credential', {record: local});
|
|
dispatch('save', local);
|
|
showDetails = false;
|
|
}
|
|
</script>
|
|
|
|
<div class="rounded-box space-y-4 bg-base-200">
|
|
<div class="flex items-center px-6 py-4 gap-x-4">
|
|
{#if !record.isNew}
|
|
{#if showDetails}
|
|
<input
|
|
type="text"
|
|
class="input input-bordered bg-transparent text-lg font-bold grow"
|
|
bind:value={local.name}
|
|
>
|
|
{:else}
|
|
<h3 class="text-lg font-bold break-all">
|
|
{record.name}
|
|
</h3>
|
|
{/if}
|
|
{/if}
|
|
|
|
<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('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">Name</span>
|
|
<input
|
|
type="text"
|
|
class="input input-bordered bg-transparent"
|
|
bind:value={local.name}
|
|
>
|
|
{/if}
|
|
|
|
<span class="justify-self-end">Server URL</span>
|
|
<input
|
|
type="text"
|
|
class="input input-bordered font-mono bg-transparent"
|
|
bind:value={local.credential.ServerURL}
|
|
>
|
|
|
|
<span class="justify-self-end">Username</span>
|
|
<input
|
|
type="text"
|
|
class="input input-bordered font-mono bg-transparent"
|
|
bind:value={local.credential.Username}
|
|
>
|
|
|
|
<span>Password</span>
|
|
<div class="font-mono">
|
|
<PassphraseInput class="bg-transparent" bind:value={local.credential.Secret} />
|
|
</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>
|
|
{/if}
|
|
</div>
|