fix extract error from api call

front/src/AddBook.vue

@@ -1,6 +1,6 @@
 <script setup>
   import { ref, reactive, computed } from 'vue'
-  import { postBook } from './api.js'
+  import { postBook, extractFormErrorFromField } from './api.js'
   import { useRouter, useRoute } from 'vue-router'
 
   const router = useRouter();
@@ -11,24 +11,12 @@
   });
   const errors = ref(null)
   const titleError = computed(() => {
-    return extractErrorFromField("Title");
+    return extractFormErrorFromField("Title", errors.value);
   })
   const authorError = computed(() => {
-    return extractErrorFromField("Author");
+    return extractFormErrorFromField("Author", errors.value);
   })
 
-  function extractErrorFromField(fieldName) {
-    if (errors.value === null) {
-     return "";
-    }
-    const titleErr = errors.value.find((e) => e["field"] === fieldName);
-    if (typeof titleErr !== 'undefined') {
-      return titleErr.error
-    } else {
-      return "";
-    }
-  }
-
   function onSubmit(e) {
     postBook(book)
       .then((res) => {

front/src/LogIn.vue

@@ -1,6 +1,6 @@
 <script setup>
   import { ref, computed } from 'vue'
-  import { postLogin, extractFromErrorFromField, extractGlobalFormError } from './api.js'
+  import { postLogin, extractFormErrorFromField, extractGlobalFormError } from './api.js'
   import { useRouter } from 'vue-router'
   import { useAuthStore } from './auth.store.js'
 
@@ -17,10 +17,10 @@
     return extractGlobalFormError(errors.value);
   })
   const userError = computed(() => {
-    return extractFromErrorFromField("Username", errors.value);
+    return extractFormErrorFromField("Username", errors.value);
   })
   const passwordError = computed(() => {
-    return extractFromErrorFromField("Password", errors.value);
+    return extractFormErrorFromField("Password", errors.value);
   })
 
   async function onSubmit(e) {

front/src/SignUp.vue

@@ -1,6 +1,6 @@
 <script setup>
   import { ref, computed } from 'vue'
-  import { postSignUp, extractFromErrorFromField, extractGlobalFormError } from './api.js'
+  import { postSignUp, extractFormErrorFromField, extractGlobalFormError } from './api.js'
   import { useRouter } from 'vue-router'
 
   const router = useRouter();
@@ -16,10 +16,10 @@
     return extractGlobalFormError(errors.value);
   })
   const userError = computed(() => {
-    return extractFromErrorFromField("Username", errors.value);
+    return extractFormErrorFromField("Username", errors.value);
   })
   const passwordError = computed(() => {
-    return extractFromErrorFromField("Password", errors.value);
+    return extractFormErrorFromField("Password", errors.value);
   })
 
   function onSubmit() {

front/src/api.js

@@ -68,11 +68,11 @@ export function genericPostCall(apiRoute, object) {
   }
 }
 
-export function extractFromErrorFromField(fieldName, errors) {
+export function extractFormErrorFromField(fieldName, errors) {
-  if (errors === null || !('field' in errors)) {
+  if (errors === null) {
     return "";
   }
-  const titleErr = errs.find((e) => e["field"] === fieldName);
+  const titleErr = errors.find((e) => e["field"] === fieldName);
   if (typeof titleErr !== 'undefined') {
     return titleErr.error;
   } else {