added userDtos

client/src/pages/UsersForm.vue

@@ -1,56 +0,0 @@
-<!-- pages/views in vue are basically root-level full-page components -->
-
-<script setup lang="ts">
-
-import { ref, onMounted } from "vue";
-import { useRoute, useRouter } from "vue-router";
-
-import { useItemsStore } from "../stores/ItemsStore.ts";
-import type { Item } from "../models/Item.ts";
-
-const store = useItemsStore();
-const route = useRoute();
-const router = useRouter();
-
-const item = ref<Item>({
-    id: 0,
-    name: "",
-    description: "",
-    createdAt: "",
-    lastEditedAt: ""
-});
-
-const id: string | undefined = route.params.id as string | undefined
-
-onMounted(() => {
-    if(id) {
-        const existing = store.items.find(i => i.id == Number(id));
-        if (existing) item.value = { ...existing };
-    }
-});
-
-async function save(): Promise<void> {
-    if(id) {
-        await store.updateItem(Number(id), item.value);
-    } else {
-        await store.addItem(item.value);
-    }
-
-    router.push("/items"); // redirect
-}
-
-</script>
-
-<template>
-
-    <div>
-        <h2>{{ id ? "Edit Item" : "Create Item" }}</h2> <!-- omg I love ternary operator :D -->
-
-        <form @submit.prevent="save">
-            <input v-model="item.name" placeholder="Name" />
-            <input v-model="item.description" placeholder="Name" />
-            <button type="submit">Save</button>
-        </form>
-    </div>
-
-</template>

client/src/pages/UsersList.vue

@@ -0,0 +1,37 @@
+
+<script setup lang="ts">
+
+import { onMounted } from "vue"
+import { useRoute, useRouter } from "vue-router";
+import { useUsersStore } from "../stores/UsersStore.ts"
+import * as authApi from "../api/AuthApi";
+
+const store = useUsersStore()
+const router = useRouter();
+
+onMounted(() => {
+  store.fetchUsers()
+})
+
+function logout() {
+    authApi.logout();
+    router.push("/login");
+}
+
+</script>
+
+<template>
+    <div>
+        <h1>Users</h1>
+
+        <table>
+            <tr v-for="user in store.users" :key="user.id">
+                <td>{{ user.username }}</td>
+                <td>
+                    <button @click="store.removeUser(user.id)">Delete</button>
+                </td>
+            </tr>
+        </table>
+        <button @click="logout()">Logout</button>
+    </div>
+</template>

client/src/pages/index.vue

@@ -10,10 +10,16 @@
     <h3>yeah im so cool rn</h3>
     <h1>imagining what I could do with themes :o</h1>
 
+    <h3>TODO: if(logged in) show this stuff; else dont.</h3>
+
     <router-link to="/items" custom v-slot="{ navigate }">
         <button @click="navigate" role="link">Items</button>
     </router-link>
 
+    <router-link to="/users" custom v-slot="{ navigate }">
+        <button @click="navigate" role="link">Users</button>
+    </router-link>
+
     <router-link to="/register" custom v-slot="{ navigate }"> <!-- TODO: only if token == invalid -->
         <button @click="navigate" role="link">Register</button>
     </router-link>