From b8279e3c43ae88db6cb0b7be62d57a7d2a66f3a7 Mon Sep 17 00:00:00 2001
From: Yuri Tatishchev <itatishch@gmail.com>
Date: Wed, 25 Dec 2024 02:05:05 -0800
Subject: [PATCH] clients page: add required to new client input

---
 src/routes/clients/+page.svelte | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/routes/clients/+page.svelte b/src/routes/clients/+page.svelte
index 9e6f3f2..8c939e4 100644
--- a/src/routes/clients/+page.svelte
+++ b/src/routes/clients/+page.svelte
@@ -3,8 +3,8 @@
 	import { Badge } from '$lib/components/ui/badge';
 	import { Button } from '$lib/components/ui/button';
 	import { Input } from '$lib/components/ui/input';
-	import type { PageData } from './$types';
 	import { LucidePlus } from 'lucide-svelte';
+	import type { PageData } from './$types';
 
 	const { data }: { data: PageData } = $props();
 </script>
@@ -13,30 +13,33 @@
 	<title>Clients</title>
 </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.Row>
 			<Table.Head scope="col">Name</Table.Head>
 			<Table.Head scope="col">Public Key</Table.Head>
-<!--			<Table.Head scope="col">Private Key</Table.Head>-->
-<!--			<Table.Head scope="col">Pre-Shared Key</Table.Head>-->
+			<!--			<Table.Head scope="col">Private Key</Table.Head>-->
+			<!--			<Table.Head scope="col">Pre-Shared Key</Table.Head>-->
 			<Table.Head scope="col">IP Allocation</Table.Head>
 		</Table.Row>
 	</Table.Header>
 	<Table.Body class="divide-y-2 divide-background">
 		{#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">
-					<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}
 					</a>
 				</Table.Head>
 				<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.preSharedKey}</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="flex flex-wrap gap-1">
 					{#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}
 				</Table.Cell>
 			</Table.Row>
@@ -46,8 +49,8 @@
 
 <!--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-->
-<form class="flex self-end mt-auto pt-4" method="post" action="?/create">
-	<Input type="text" name="name" placeholder="New Client" class="mr-2" />
+<form class="mt-auto flex self-end pt-4" method="post" action="?/create">
+	<Input required type="text" name="name" placeholder="New Client" class="mr-2" />
 	<Button type="submit">
 		<LucidePlus class="mr-2 h-4 w-4" />
 		Add Client