From 5ac529ce264f35af95d5e0931494bab251c5e416 Mon Sep 17 00:00:00 2001
From: William P <me@williamtpeebles.com>
Date: Sun, 25 May 2025 13:32:29 -0400
Subject: [PATCH] modify example client to be API compliant

---
 example_client/svelte-client/package.json     |  2 +-
 example_client/svelte-client/src/api.js       | 22 +++++++++++++++++--
 .../svelte-client/src/routes/Login.svelte     |  5 +++--
 .../svelte-client/src/routes/Messages.svelte  |  2 +-
 4 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/example_client/svelte-client/package.json b/example_client/svelte-client/package.json
index 8a653ed..223e060 100644
--- a/example_client/svelte-client/package.json
+++ b/example_client/svelte-client/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",
-    "start": "sirv public --no-clear"
+    "start": "sirv public --single"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.0.0",
diff --git a/example_client/svelte-client/src/api.js b/example_client/svelte-client/src/api.js
index 6601478..9a7c6ae 100644
--- a/example_client/svelte-client/src/api.js
+++ b/example_client/svelte-client/src/api.js
@@ -3,7 +3,17 @@ import axios from 'axios';
 const API_BASE_URL = 'http://localhost:3000';
 
 export const login = async (username, password) => {
-    const response = await axios.post(`${API_BASE_URL}/login`, { username, password });
+    const formData = new FormData();
+    formData.append('username', username);
+    formData.append('password', password);
+
+    const response = await axios.post(`${API_BASE_URL}/login`, formData, {
+        headers: {
+            'Content-Type': 'multipart/form-data',
+        },
+        withCredentials: true,
+    });
+
     return response.data;
 };
 
@@ -13,6 +23,14 @@ export const fetchMessages = async () => {
 };
 
 export const createMessage = async (body) => {
-    const response = await axios.post(`${API_BASE_URL}/messages/new`, { body }, { withCredentials: true});
+    const formData = new FormData();
+    formData.append('body', body);
+
+    const response = await axios.post(`${API_BASE_URL}/messages/new`, formData, {
+        headers: {
+            'Content-Type': 'multipart/form-data',
+        },
+        withCredentials: true,
+    });
     return response.data;
 };
\ No newline at end of file
diff --git a/example_client/svelte-client/src/routes/Login.svelte b/example_client/svelte-client/src/routes/Login.svelte
index b2658ec..87a129c 100644
--- a/example_client/svelte-client/src/routes/Login.svelte
+++ b/example_client/svelte-client/src/routes/Login.svelte
@@ -1,5 +1,6 @@
 <script>
     import { login } from '../api.js';
+    import { push } from 'svelte-spa-router';
     let username = '';
     let password = '';
     let error = '';
@@ -7,9 +8,9 @@
     const handleLogin = async () => {
       try {
         await login(username, password);
-        window.location.href = '/messages';
+        push('/messages');
       } catch (err) {
-        error = 'Invalid username or password';
+        error = err;
       }
     };
   </script>
diff --git a/example_client/svelte-client/src/routes/Messages.svelte b/example_client/svelte-client/src/routes/Messages.svelte
index e696547..b75a4ff 100644
--- a/example_client/svelte-client/src/routes/Messages.svelte
+++ b/example_client/svelte-client/src/routes/Messages.svelte
@@ -19,7 +19,7 @@
   <h1>Messages</h1>
   <ul>
     {#each messages as message}
-      <li>{message.body} - {message.timestamp}</li>
+      <li>{message.user.name} - {message.body} - {message.timestamp}</li>
     {/each}
   </ul>
   <input type="text" bind:value={newMessage} placeholder="New message" />