client/src/models/User.ts

@@ -6,16 +6,16 @@ export interface UserDto {
     createdAt: string;
     email: string;
     id: string;
-    username: string;
+    userName: string;
 }
 
 export interface RegisterDto {
-    username: string;
+    userName: string;
     email: string;
     password: string;
 }
 
 export interface LoginDto {
-    username: string;
+    userName: string;
     password: string;
 }

client/src/pages/LoginForm.vue

@@ -10,7 +10,7 @@ import * as authApi from "../api/AuthApi";
 const router = useRouter();
 
 const user = reactive<LoginDto>({ // the template ensures type consistency
-    username: "",
+    userName: "",
     password: "",
 });
 
@@ -40,7 +40,7 @@ async function login(): Promise<void> {
         <h2>Login</h2>
 
         <form @submit.prevent="login">
-            <input v-model="user.username" placeholder="username" />
+            <input v-model="user.userName" placeholder="username" />
             <input v-model="user.password" type="password" placeholder="password" />
             
             <button type="submit">Submit</button>

client/src/pages/RegisterForm.vue

@@ -10,7 +10,7 @@ import * as authApi from "../api/AuthApi";
 const router = useRouter();
 
 const user = reactive<RegisterDto>({ // the template ensures type consistency
-    username: "",
+    userName: "",
     email: "",
     password: "",
 });
@@ -40,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.userName" placeholder="username" />
             <input v-model="user.email" placeholder="email" />
             <input v-model="user.password" placeholder="password" />
             

client/src/pages/UsersList.vue

@@ -26,7 +26,7 @@ function logout() {
 
         <table>
             <tr v-for="user in store.users" :key="user.id">
-                <td>{{ user.username }}</td>
+                <td>{{ user.userName }}</td>
                 <td>
                     <button @click="store.removeUser(user.id)">Delete</button>
                 </td>