add example client

example_client/svelte-client/src/App.svelte

@@ -0,0 +1,6 @@
+<script>
+	import Router from 'svelte-spa-router';
+	import routes from './routes.js';
+  </script>
+  
+  <Router {routes} />

example_client/svelte-client/src/api.js

@@ -0,0 +1,18 @@
+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 });
+    return response.data;
+};
+
+export const fetchMessages = async () => {
+    const response = await axios.get(`${API_BASE_URL}/messages`, { withCredentials: true });
+    return response.data;
+};
+
+export const createMessage = async (body) => {
+    const response = await axios.post(`${API_BASE_URL}/messages/new`, { body }, { withCredentials: true});
+    return response.data;
+};

example_client/svelte-client/src/main.js

@@ -0,0 +1,10 @@
+import App from './App.svelte';
+
+const app = new App({
+	target: document.body,
+	props: {
+		name: 'world'
+	}
+});
+
+export default app;

example_client/svelte-client/src/routes.js

@@ -0,0 +1,7 @@
+import Login from './routes/Login.svelte';
+import Messages from './routes/Messages.svelte';
+
+export default {
+    '/': Login,
+    '/messages': Messages,
+};

example_client/svelte-client/src/routes/Login.svelte

@@ -0,0 +1,21 @@
+<script>
+    import { login } from '../api.js';
+    let username = '';
+    let password = '';
+    let error = '';
+  
+    const handleLogin = async () => {
+      try {
+        await login(username, password);
+        window.location.href = '/messages';
+      } catch (err) {
+        error = 'Invalid username or password';
+      }
+    };
+  </script>
+  
+  <h1>Login</h1>
+  <input type="text" bind:value={username} placeholder="Username" />
+  <input type="password" bind:value={password} placeholder="Password" />
+  <button on:click={handleLogin}>Login</button>
+  <p style="color: red">{error}</p>

example_client/svelte-client/src/routes/Messages.svelte

@@ -0,0 +1,26 @@
+<script>
+    import { fetchMessages, createMessage } from '../api.js';
+    let messages = [];
+    let newMessage = '';
+  
+    const loadMessages = async () => {
+      messages = await fetchMessages();
+    };
+  
+    const handleCreateMessage = async () => {
+      await createMessage(newMessage);
+      newMessage = '';
+      await loadMessages();
+    };
+  
+    loadMessages();
+  </script>
+  
+  <h1>Messages</h1>
+  <ul>
+    {#each messages as message}
+      <li>{message.body} - {message.timestamp}</li>
+    {/each}
+  </ul>
+  <input type="text" bind:value={newMessage} placeholder="New message" />
+  <button on:click={handleCreateMessage}>Send</button>