Update download filename in log page and handle form submission errors in login page

src/routes/log/+page.svelte

@@ -53,7 +53,7 @@
     let url = URL.createObjectURL(blob);
 
     let link = document.createElement("a");
-    link.download = "data.json";
+    link.download = "adventurelog-export.json";
     link.href = url;
     link.click();
     URL.revokeObjectURL(url);

src/routes/login/+page.server.ts

@@ -1,5 +1,5 @@
 import { lucia } from "$lib/server/auth";
-import { fail, redirect } from "@sveltejs/kit";
+import { error, fail, redirect } from "@sveltejs/kit";
 import { Argon2id } from "oslo/password";
 import { db } from "$lib/db/db.server";
 
@@ -22,8 +22,8 @@ export const actions: Actions = {
     const password = formData.get("password");
 
     if (!username || !password) {
-      return fail(400, {
+      return error(400, {
-        message: "Invalid request",
+        message: "Missing username or password",
       });
     }
 
@@ -33,7 +33,7 @@ export const actions: Actions = {
       username.length > 31 ||
       !/^[a-z0-9_-]+$/.test(username)
     ) {
-      return fail(400, {
+      return error(400, {
         message: "Invalid username",
       });
     }
@@ -42,7 +42,7 @@ export const actions: Actions = {
       password.length < 6 ||
       password.length > 255
     ) {
-      return fail(400, {
+      return error(400, {
         message: "Invalid password",
       });
     }
@@ -55,7 +55,7 @@ export const actions: Actions = {
       .then((results) => results[0] as unknown as DatabaseUser | undefined);
 
     if (!existingUser) {
-      return fail(400, {
+      return error(400, {
         message: "Incorrect username or password",
       });
     }
@@ -65,7 +65,7 @@ export const actions: Actions = {
       password
     );
     if (!validPassword) {
-      return fail(400, {
+      return error(400, {
         message: "Incorrect username or password",
       });
     }
@@ -78,5 +78,6 @@ export const actions: Actions = {
     });
 
     return redirect(302, "/");
+
   },
 };

src/routes/login/+page.svelte

@@ -1,12 +1,34 @@
 <!-- routes/login/+page.svelte -->
 <script lang="ts">
   import { enhance } from "$app/forms";
+  import { goto } from "$app/navigation";
   import { getRandomQuote } from "$lib";
+  import { redirect, type SubmitFunction } from "@sveltejs/kit";
   import { onMount } from "svelte";
   let quote: string = "";
+  let errors: { message?: string } = {};
   onMount(async () => {
     quote = getRandomQuote();
   });
+  const handleSubmit: SubmitFunction = async ({ formData, action, cancel }) => {
+    const response = await fetch(action, {
+      method: "POST",
+      body: formData,
+    });
+
+    if (response.ok) {
+      // wait .5s before redirecting
+      goto("/login");
+      return;
+    }
+
+    const { type, error } = await response.json();
+    if (type === "error") {
+      errors = { message: error.message };
+    }
+    console.log(errors);
+    cancel();
+  };
 </script>
 
 <article class="text-center text-4xl font-extrabold">
@@ -14,7 +36,7 @@
 </article>
 
 <div class="flex justify-center">
-  <form method="post" use:enhance class="w-full max-w-xs">
+  <form method="post" use:enhance={handleSubmit} class="w-full max-w-xs">
     <label for="username">Username</label>
     <input
       name="username"
@@ -32,6 +54,12 @@
   </form>
 </div>
 
+{#if errors.message}
+  <div class="text-center text-red-500 mt-4">
+    {errors.message}
+  </div>
+{/if}
+
 <div class="flex justify-center mt-12 mr-25 ml-25">
   <blockquote class="w-80 text-center text-lg break-words">
     {#if quote != ""}