modify example client to be API compliant

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",

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;
 };

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>

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" />