CaZzzer/vpgen
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

clients page: add required to new client input

Browse Source
This commit is contained in:
Yuri Tatishchev 2024-12-25 02:05:05 -08:00
parent bc2cf3c7ca
commit b8279e3c43
Signed by: CaZzzer
GPG Key ID: E0EBF441EA424369
1 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/routes/clients/+page.svelte
View File

@ -3,8 +3,8 @@
import { Badge } from '$lib/components/ui/badge'; import { Badge } from '$lib/components/ui/badge';
import { Button } from '$lib/components/ui/button'; import { Button } from '$lib/components/ui/button';
import { Input } from '$lib/components/ui/input'; import { Input } from '$lib/components/ui/input';
import type { PageData } from './$types';
import { LucidePlus } from 'lucide-svelte'; import { LucidePlus } from 'lucide-svelte';
import type { PageData } from './$types';
const { data }: { data: PageData } = $props(); const { data }: { data: PageData } = $props();
</script> </script>
@ -13,30 +13,33 @@
<title>Clients</title> <title>Clients</title>
</svelte:head> </svelte:head>
<Table.Root class="bg-accent rounded-lg overflow-hidden divide-y-2 divide-background"> <Table.Root class="divide-y-2 divide-background overflow-hidden rounded-lg bg-accent">
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
<Table.Head scope="col">Name</Table.Head> <Table.Head scope="col">Name</Table.Head>
<Table.Head scope="col">Public Key</Table.Head> <Table.Head scope="col">Public Key</Table.Head>
<!-- <Table.Head scope="col">Private Key</Table.Head>--> <!-- <Table.Head scope="col">Private Key</Table.Head>-->
<!-- <Table.Head scope="col">Pre-Shared Key</Table.Head>--> <!-- <Table.Head scope="col">Pre-Shared Key</Table.Head>-->
<Table.Head scope="col">IP Allocation</Table.Head> <Table.Head scope="col">IP Allocation</Table.Head>
</Table.Row> </Table.Row>
</Table.Header> </Table.Header>
<Table.Body class="divide-y-2 divide-background"> <Table.Body class="divide-y-2 divide-background">
{#each data.clients as client} {#each data.clients as client}
<Table.Row class="hover:bg-background hover:bg-opacity-40 group"> <Table.Row class="group hover:bg-background hover:bg-opacity-40">
<Table.Head scope="row"> <Table.Head scope="row">
<a href={`/clients/${client.id}`} class="flex items-center size-full group-hover:underline"> <a
href={`/clients/${client.id}`}
class="flex size-full items-center group-hover:underline"
>
{client.name} {client.name}
</a> </a>
</Table.Head> </Table.Head>
<Table.Cell class="truncate">{client.publicKey}</Table.Cell> <Table.Cell class="truncate">{client.publicKey}</Table.Cell>
<!-- <Table.Cell class="truncate max-w-[10ch]">{client.privateKey}</Table.Cell>--> <!-- <Table.Cell class="truncate max-w-[10ch]">{client.privateKey}</Table.Cell>-->
<!-- <Table.Cell class="truncate max-w-[10ch]">{client.preSharedKey}</Table.Cell>--> <!-- <Table.Cell class="truncate max-w-[10ch]">{client.preSharedKey}</Table.Cell>-->
<Table.Cell class="flex flex-wrap gap-1"> <Table.Cell class="flex flex-wrap gap-1">
{#each client.ips as ip} {#each client.ips as ip}
<Badge class="bg-background select-auto" variant="secondary">{ip}</Badge> <Badge class="select-auto bg-background" variant="secondary">{ip}</Badge>
{/each} {/each}
</Table.Cell> </Table.Cell>
</Table.Row> </Table.Row>
@ -46,8 +49,8 @@
<!--Floating action button for adding a new client--> <!--Floating action button for adding a new client-->
<!--Not sure if this is the best place for the input field, will think about it later--> <!--Not sure if this is the best place for the input field, will think about it later-->
<form class="flex self-end mt-auto pt-4" method="post" action="?/create"> <form class="mt-auto flex self-end pt-4" method="post" action="?/create">
<Input type="text" name="name" placeholder="New Client" class="mr-2" /> <Input required type="text" name="name" placeholder="New Client" class="mr-2" />
<Button type="submit"> <Button type="submit">
<LucidePlus class="mr-2 h-4 w-4" /> <LucidePlus class="mr-2 h-4 w-4" />
Add Client Add Client