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>

client/src/pages/RegisterForm.vue

@@ -4,14 +4,15 @@
 import { onMounted, reactive } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
+import type { RegisterDto } from "../models/User.ts";
 import * as authApi from "../api/AuthApi";
 
 const router = useRouter();
 
-const user = reactive({
-    username: "",
+const user = reactive<RegisterDto>({ // the template ensures type consistency
+    name: "",
     email: "",
-    password: ""
+    password: "",
 });
 
 onMounted(() => {
@@ -39,7 +40,7 @@ async function register(): Promise<void> {
         <h2>Register</h2>
 
         <form @submit.prevent="register">
-            <input v-model="user.username" placeholder="username" />
+            <input v-model="user.name" placeholder="username" />
             <input v-model="user.email" placeholder="email" />
             <input v-model="user.password" placeholder="password" />