user dtos as strict object templates

client/src/api/AuthApi.ts

@@ -3,11 +3,11 @@
 // handles user registration, user logins, tokens, password reset, etc.
 
 import api from "./axios.ts"
-import type { User } from "../models/User.ts";
+import type { User, RegisterDto, LoginDto } from "../models/User.ts";
 
 const API_URL: string = "/auth";
 
-export const register = async (user: { username: string; email: string; password: string }) => {
+export const register = async (user: RegisterDto) => {
 
 	try {
 		const response = await api.post(`${API_URL}/register`, user);
@@ -24,7 +24,7 @@ export const register = async (user: { username: string; email: string; password
 
 }
 
-export const login = async (user: { username: string; password: string }) => {
+export const login = async (user: LoginDto ) => {
 
 	try {
 		const response = await api.post(`${API_URL}/login`, user);

client/src/models/User.ts

@@ -1,5 +1,6 @@
 
 // models are the data objects stored in the database. models defined here must match models defined in api/models 
+// dtos here must match the the dtos in api/src/Modelts/Dto.cs in name (case insensitive) (types are intermediately serialized to strings)
 
 export interface User {
     id: number;
@@ -7,3 +8,14 @@ export interface User {
     email: string;
     password: string;
 }
+
+export interface RegisterDto {
+    name: string;
+    email: string;
+    password: string;
+}
+
+export interface LoginDto {
+    name: string;
+    password: string;
+}

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" />