feat: finish login system

src/routes/auth/login/+page.svelte

@@ -41,10 +41,16 @@
 	}
 
 	function handleDBErrors(e: ClientResponseError) {
-		const element = Object.keys(e.data.data)[0];
-		formErrors[element] = true;
-		const dbError = e.data.data[element];
-		error = dbError.message;
+		if (e.data.lenght > 0) {
+			const element = Object.keys(e.data.data)[0];
+			formErrors[element] = true;
+			const dbError = e.data.data[element];
+			error = dbError.message;
+		} else {
+			formErrors.email = true
+			formErrors.password = true
+			error = e.message;
+		}
 	}
 
 	async function login() {
@@ -60,6 +66,7 @@
 				await goto('/');
 				window.location.reload();
 			} catch (e) {
+				console.log(e);
 				if (e instanceof ClientResponseError) {
 					handleDBErrors(e);
 				}
@@ -81,16 +88,29 @@
 			<div class="flex flex-col gap-6">
 				<div class="grid gap-2">
 					<Label for="email">Email</Label>
-					<Input id="email" type="email" placeholder="m@example.com" required />
+					<Input
+						id="email"
+						type="email"
+						placeholder="someone@example.com"
+						required
+						aria-invalid={formErrors.email}
+						bind:value={form.email}
+					/>
 				</div>
 				<div class="grid gap-2">
 					<div class="flex items-center">
 						<Label for="password">Password</Label>
-						<a href="##" class="ml-auto inline-block text-sm underline-offset-4 hover:underline">
+						<a class="ml-auto inline-block text-sm underline-offset-4 hover:underline">
 							Forgot your password?
 						</a>
 					</div>
-					<Input id="password" type="password" required />
+					<Input
+						id="password"
+						type="password"
+						required
+						bind:value={form.password}
+						aria-invalid={formErrors.password}
+					/>
 				</div>
 			</div>
 		</form>