alice.pds.demo.boltless.dev
This repository has no description
1<script lang="ts">
2 import Plus from "$icon/plus";
3 import Button from "$lib/components/ui/Button.svelte";
4 import Field from "$lib/components/ui/Field.svelte";
5 import Input from "$lib/components/ui/Input.svelte";
6 import Textarea from "$lib/components/ui/Textarea.svelte";
7 import KeyCard from "$lib/components/settings/KeyCard.svelte";
8 import StepHeader from "./StepHeader.svelte";
9 import { addKey, draft, removeKey } from "./draft.svelte";
10
11 let name = $state("");
12 let key = $state("");
13
14 const canAdd = $derived(name.trim() !== "" && key.trim() !== "");
15
16 const add = (event: SubmitEvent) => {
17 event.preventDefault();
18 if (!canAdd) return;
19 addKey(name.trim(), key.trim());
20 name = "";
21 key = "";
22 };
23</script>
24
25<div class="flex flex-col gap-6">
26 <StepHeader
27 title="Add an SSH key"
28 subtitle="Add a public SSH key to push to your repositories over SSH."
29 />
30
31 {#if draft.keys.length > 0}
32 <ul class="flex flex-col gap-3">
33 {#each draft.keys as pubkey (pubkey.id)}
34 <li>
35 <KeyCard
36 name={pubkey.name}
37 fingerprint={pubkey.fingerprint}
38 createdAt={pubkey.createdAt}
39 onDelete={() => removeKey(pubkey.id)}
40 />
41 </li>
42 {/each}
43 </ul>
44 {/if}
45
46 <form class="flex flex-col gap-4" onsubmit={add}>
47 <Field label="Key name" labelCase="normal">
48 {#snippet children({ id })}
49 <Input {id} placeholder="my-laptop" required bind:value={name} />
50 {/snippet}
51 </Field>
52
53 <Field label="Public key" labelCase="normal">
54 {#snippet children({ id })}
55 <Textarea
56 {id}
57 size="compact"
58 rows={3}
59 required
60 placeholder="ssh-ed25519 AAAA..."
61 bind:value={key}
62 />
63 {/snippet}
64 </Field>
65
66 <Button type="submit" icon={Plus} disabled={!canAdd} class="ml-auto">Add key</Button>
67 </form>
68</div>