user dtos as strict object templates

client/src/pages/LoginForm.vue

@@ -4,13 +4,14 @@
 import { onMounted, reactive } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
+import type { LoginDto } from "../models/User.ts";
 import * as authApi from "../api/AuthApi";
 
 const router = useRouter();
 
-const user = reactive({
-    username: "",
-    password: ""
+const user = reactive<LoginDto>({ // the template ensures type consistency
+    name: "",
+    password: "",
 });
 
 onMounted(() => {
@@ -37,7 +38,7 @@ async function login(): Promise<void> {
         <h2>Login</h2>
 
         <form @submit.prevent="login">
-            <input v-model="user.username" placeholder="username" />
+            <input v-model="user.name" placeholder="username" />
             <input v-model="user.password" type="password" placeholder="password" />
             
             <button type="submit">Submit</button>