add basic user authentication

2025-10-01 21:43:37 +02:00
parent 57355fe9ac
commit f20e177480
16 changed files with 338 additions and 51 deletions
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -8,6 +8,7 @@
      "name": "personal-library-manager",
      "version": "0.0.0",
      "dependencies": {
+        "pinia": "^3.0.3",
        "vue": "^3.5.18",
        "vue-router": "^4.5.1"
      },
@@ -1903,7 +1904,6 @@
      "version": "2.5.0",
      "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.5.0.tgz",
      "integrity": "sha512-VSWO/W6nNQdyP520F1mhf+Lc2f8pjGQOtoHHm7Ze8Go1kX7akpVIrtTa0fn+HB0QJEDVacl6aO08YE0PgXfdnQ==",
-      "dev": true,
      "license": "MIT",
      "funding": {
        "url": "https://github.com/sponsors/antfu"
@@ -2063,7 +2063,6 @@
      "version": "3.0.5",
      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz",
      "integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "is-what": "^4.1.8"
@@ -2731,7 +2730,6 @@
      "version": "5.5.3",
      "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/human-signals": {
@@ -2882,7 +2880,6 @@
      "version": "4.1.16",
      "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.16.tgz",
      "integrity": "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=12.13"
@@ -3071,7 +3068,6 @@
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/mrmime": {
@@ -3299,7 +3295,6 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/picocolors": {
@@ -3321,6 +3316,60 @@
        "url": "https://github.com/sponsors/jonschlinkert"
      }
    },
+    "node_modules/pinia": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.3.tgz",
+      "integrity": "sha512-ttXO/InUULUXkMHpTdp9Fj4hLpD/2AoJdmAbAeW2yu1iy1k+pkFekQXw5VpC0/5p51IOR/jDaDRfRWRnMMsGOA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^7.7.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.4.4",
+        "vue": "^2.7.0 || ^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/@vue/devtools-api": {
+      "version": "7.7.7",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.7.tgz",
+      "integrity": "sha512-lwOnNBH2e7x1fIIbVT7yF5D+YWhqELm55/4ZKf45R9T8r9dE2AIOy8HKjfqzGsoTHFbWbr337O4E0A0QADnjBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^7.7.7"
+      }
+    },
+    "node_modules/pinia/node_modules/@vue/devtools-kit": {
+      "version": "7.7.7",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.7.tgz",
+      "integrity": "sha512-wgoZtxcTta65cnZ1Q6MbAfePVFxfM+gq0saaeytoph7nEa7yMXoi6sCPy4ufO111B9msnw0VOWjPEFCXuAKRHA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-shared": "^7.7.7",
+        "birpc": "^2.3.0",
+        "hookable": "^5.5.3",
+        "mitt": "^3.0.1",
+        "perfect-debounce": "^1.0.0",
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.2"
+      }
+    },
+    "node_modules/pinia/node_modules/@vue/devtools-shared": {
+      "version": "7.7.7",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.7.tgz",
+      "integrity": "sha512-+udSj47aRl5aKb0memBvcUG9koarqnxNM5yjuREvqwK6T3ap4mn3Zqqc17QrBFTqSMjr3HK1cvStEZpMDpfdyw==",
+      "license": "MIT",
+      "dependencies": {
+        "rfdc": "^1.4.1"
+      }
+    },
    "node_modules/postcss": {
      "version": "8.5.6",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
@@ -3443,7 +3492,6 @@
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/rollup": {
@@ -3577,7 +3625,6 @@
      "version": "14.0.1",
      "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz",
      "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
-      "dev": true,
      "license": "BSD-3-Clause",
      "engines": {
        "node": ">=0.10.0"
@@ -3613,7 +3660,6 @@
      "version": "2.2.2",
      "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.2.tgz",
      "integrity": "sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "copy-anything": "^3.0.2"
--- a/front/package.json
+++ b/front/package.json
@@ -14,6 +14,7 @@
    "format": "prettier --write src/"
  },
  "dependencies": {
+    "pinia": "^3.0.3",
    "vue": "^3.5.18",
    "vue-router": "^4.5.1"
  },
--- a/front/src/AppNavBar.vue
+++ b/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>
--- a/front/src/LogIn.vue
+++ b/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>
--- a/front/src/SignUp.vue
+++ b/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>
--- a/front/src/api.js
+++ b/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 "";
+  }
 }
--- a/front/src/auth.store.js
+++ b/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('/');
+    }
+  }
+});
--- a/front/src/main.js
+++ b/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')