add basic user authentication

front/src/SignUp.vue

@@ -1,7 +1,7 @@
 <script setup>
-  import { ref, reactive, computed } from 'vue'
-  import { postBook, postSignup } from './api.js'
-  import { useRouter, useRoute } from 'vue-router'
+  import { ref, computed } from 'vue'
+  import { postSignUp, extractFromErrorFromField, extractGlobalFormError } from './api.js'
+  import { useRouter } from 'vue-router'
 
   const router = useRouter();
 
@@ -9,28 +9,21 @@
     username: "",
     password: ""
   });
+
   const errors = ref(null)
+
+  const formError = computed(() => {
+    return extractGlobalFormError(errors.value);
+  })
   const userError = computed(() => {
-    return extractErrorFromField("Username");
+    return extractFromErrorFromField("Username", errors.value);
   })
   const passwordError = computed(() => {
-    return extractErrorFromField("Password");
+    return extractFromErrorFromField("Password", 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) {
-    postSignup(user)
+  function onSubmit() {
+    postSignUp(user)
       .then((res) => {
         if (res.ok) {
           router.push('/');
@@ -43,7 +36,10 @@
 </script>
 
 <template>
-  <form @submit.prevent="onSubmit">
+  <div v-if="formError" class="notification is-danger">
+    <p>{{formError}}</p>
+  </div>
+  <form class="box" @submit.prevent="onSubmit">
     <div class="field">
       <label class="label">Username</label>
       <div class="control">
@@ -62,7 +58,7 @@
     </div>
     <div class="field">
       <div class="control">
-        <button class="button is-link">Submit</button>
+        <button class="button is-link">Sign In</button>
       </div>
     </div>
   </form>