add basic user authentication

front/src/AppNavBar.vue

@@ -1,5 +1,8 @@
 <script setup>
   import { RouterLink } from 'vue-router'
+  import { useAuthStore } from './auth.store.js'
+
+  const authStore = useAuthStore();
 </script>
 
 <template>
@@ -14,7 +17,7 @@
         <RouterLink to="/" class="navbar-item" activeClass="is-active">
           Home
         </RouterLink>
-        <RouterLink to="/add" class="navbar-item" activeClass="is-active">
+  <RouterLink to="/add" class="navbar-item" activeClass="is-active">
           Add Book
         </RouterLink>
         <a class="navbar-item">
@@ -29,14 +32,22 @@
     </div>
 
     <div class="navbar-end">
-      <div class="navbar-item">
-        <div class="buttons">
+      <div v-if="authStore.user" class="navbar-item">
+        <div >
+           {{ authStore.user.username }}
+        </div>
+        <a @click="authStore.logout" class="button is-light">
+          Log out
+        </a>
+      </div>
+      <div v-else class="navbar-item">
+        <div  class="buttons">
           <RouterLink to="/signup" class="button is-primary">
             <strong>Sign up</strong>
           </RouterLink>
-          <a class="button is-light">
+          <RouterLink to="/login" class="button is-light">
             Log in
-          </a>
+          </RouterLink>
         </div>
       </div>
     </div>

front/src/LogIn.vue

@@ -0,0 +1,74 @@
+<script setup>
+  import { ref, computed } from 'vue'
+  import { postLogin, extractFromErrorFromField, extractGlobalFormError } from './api.js'
+  import { useRouter } from 'vue-router'
+  import { useAuthStore } from './auth.store.js'
+
+  const router = useRouter();
+
+  const user = ref({
+    username: "",
+    password: ""
+  });
+
+  const errors = ref(null)
+
+  const formError = computed(() => {
+    return extractGlobalFormError(errors.value);
+  })
+  const userError = computed(() => {
+    return extractFromErrorFromField("Username", errors.value);
+  })
+  const passwordError = computed(() => {
+    return extractFromErrorFromField("Password", errors.value);
+  })
+
+  function onSubmit(e) {
+    postLogin(user)
+      .then((res) => {
+        if (res.ok) {
+          res.json().then((json) => login(user.value.username, json));
+          router.push('/');
+          return;
+        } else {
+          res.json().then((json) => (errors.value = json));
+        }
+      })
+  }
+
+  function login(username, json) {
+    useAuthStore().login({username: username, token: json["token"]})
+  }
+</script>
+
+
+<template>
+  <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">
+        <input :class="'input ' + (userError ? 'is-danger' : '')" type="text" minlength="2" maxlength="20"
+        required v-model="user.username" placeholder="Username">
+      </div>
+      <p v-if="userError" class="help is-danger">{{userError}}</p>
+    </div>
+    <div class="field">
+      <label class="label">Password</label>
+      <div class="control">
+        <input :class="'input ' + (passwordError ? 'is-danger' : '')" type="password" minlength="6"
+        maxlength="100" v-model="user.password" required placeholder="Password">
+      </div>
+      <p v-if="passwordError" class="help is-danger">{{passwordError}}</p>
+    </div>
+    <div class="field">
+      <div class="control">
+        <button class="button is-link">Log In</button>
+      </div>
+    </div>
+  </form>
+</template>
+
+<style scoped></style>

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>

front/src/api.js

@@ -19,21 +19,43 @@ export function getBooks() {
 }
 
 export function postBook(book) {
-  return fetch(baseUrl + '/book', {
+  return genericPostCall('/book', book.value)
+}
+
+export function postLogin(user) {
+  return genericPostCall('/auth/login', user.value)
+}
+
+export function postSignUp(user) {
+  return genericPostCall('/auth/signup', user.value)
+}
+
+export function genericPostCall(apiRoute, object) {
+  return fetch(baseUrl + apiRoute, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json'
     },
-    body: JSON.stringify(book.value)
+    body: JSON.stringify(object)
   })
 }
 
-export function postSignup(user) {
-  return fetch(baseUrl + '/auth/signup', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify(user.value)
-  })
+export function extractFromErrorFromField(fieldName, errors) {
+  if (errors === null || !('field' in errors)) {
+    return "";
+  }
+  const titleErr = errs.find((e) => e["field"] === fieldName);
+  if (typeof titleErr !== 'undefined') {
+    return titleErr.error;
+  } else {
+    return "";
+  }
+}
+
+export function extractGlobalFormError(errors) {
+  if (errors !== null && "error" in errors) {
+    return errors["error"];
+  } else {
+    return "";
+  }
 }

front/src/auth.store.js

@@ -0,0 +1,21 @@
+import { defineStore } from 'pinia';
+import { useRouter } from 'vue-router'
+
+export const useAuthStore = defineStore('auth', {
+  state: () => ({
+    // initialize state from local storage to enable user to stay logged in
+    user: JSON.parse(localStorage.getItem('user')),
+    returnUrl: null
+  }),
+  actions: {
+    login(user) {
+      this.user = user;
+      localStorage.setItem('user', JSON.stringify(user));
+    },
+    logout() {
+      this.user = null;
+      localStorage.removeItem('user');
+      useRouter().push('/');
+    }
+  }
+});

front/src/main.js

@@ -1,15 +1,18 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import { createRouter, createWebHistory } from 'vue-router'
 import App from './App.vue'
 import BooksBrowser from './BooksBrowser.vue'
 import AddBook from './AddBook.vue'
 import SignUp from './SignUp.vue'
+import LogIn from './LogIn.vue'
 
 
 const routes = [
   { path: '/', component: BooksBrowser },
   { path: '/add', component: AddBook },
   { path: '/signup', component: SignUp },
+  { path: '/login', component: LogIn },
 ]
 
 export const router = createRouter({
@@ -17,4 +20,6 @@ export const router = createRouter({
   routes,
 })
 
-createApp(App).use(router).mount('#app')
+const pinia = createPinia()
+
+createApp(App).use(pinia).use(router).mount('#app')