Toast Messaging

diff --git a/client/App.vue b/client/App.vue
index 387db2a4c8508f0310e2e21d0a2a8bea95b775d8..11c0ac66f5c99645b9933b508998a0c4db817f7a 100644 (file)
--- a/client/App.vue
+++ b/client/App.vue
@@ -1,17 +1,19 @@
 <template>\r
   <div class="container mx-auto flex h-screen flex-col px-2 py-4">\r
+    <Toast class="ml-[20px]" :pt="toastStyle" position="bottom-right" />\r
     <NavBar v-if="showNavBar" :hide-logo="!showNavBarLogo" />\r
     <RouterView />\r
   </div>\r
 </template>\r
 \r
 <script setup>\r
-import { onBeforeMount, computed } from "vue";\r
+import Toast from "primevue/toast";\r
+import { computed, onBeforeMount } from "vue";\r
 import { RouterView, useRoute } from "vue-router";\r
 \r
-import NavBar from "./partials/NavBar.vue";\r
 import { getConfig } from "./api.js";\r
 import { useGlobalStore } from "./globalStore.js";\r
+import NavBar from "./partials/NavBar.vue";\r
 import { loadStoredToken } from "./tokenStorage.js";\r
 \r
 const globalStore = useGlobalStore();\r
@@ -38,4 +40,12 @@ const showNavBar = computed(() => {
 const showNavBarLogo = computed(() => {\r
   return route.name !== "home";\r
 });\r
+\r
+const toastStyle = {\r
+  message: "flex flex-col items-end",\r
+  container:\r
+  "bg-theme-background-elevated border border-theme-border mb-2 px-3 py-2 rounded-lg max-w-96",\r
+  icon: "invisible h-0 w-0",\r
+  summary: "font-bold",\r
+};\r
 </script>\r

diff --git a/client/index.js b/client/index.js
index e89ab7a991931a717ed7fbf93d883ca519889929..5c315dc281ad89690f9169248f66c46fbd19d1dc 100644 (file)
--- a/client/index.js
+++ b/client/index.js
@@ -1,11 +1,17 @@
 import App from "/App.vue";\r
+import PrimeVue from "primevue/config";\r
+import ToastService from 'primevue/toastservice';\r
 import { createApp } from "vue";\r
-import { createPinia } from 'pinia';\r
+import { createPinia } from "pinia";\r
 import router from "/router.js";\r
 \r
 const app = createApp(App);\r
-const pinia = createPinia()\r
+const pinia = createPinia();\r
 \r
 app.use(router);\r
-app.use(pinia)\r
+app.use(pinia);\r
+app.use(PrimeVue, {\r
+  unstyled: true,\r
+});\r
+app.use(ToastService);\r
 app.mount("#app");\r

diff --git a/client/views/Home.vue b/client/views/Home.vue
index ad79b567fef2b127304aaccb4b34029d7c3c0a6f..d5c140c99fb25ebf4b0135cb6136d3d0b9a0b06e 100644 (file)
--- a/client/views/Home.vue
+++ b/client/views/Home.vue
@@ -3,7 +3,7 @@
     <div class="flex h-full flex-col items-center justify-center">
       <Logo class="mb-5" />
       <SearchInput class="mb-5 shadow-[0_0_20px] shadow-theme-shadow" />
-      <div class="flex flex-col items-center min-h-56">
+      <div class="flex min-h-56 flex-col items-center">
         <p
           v-if="notes.length > 0"
           class="mb-2 text-xs font-bold text-theme-text-very-muted"

diff --git a/client/views/LogIn.vue b/client/views/LogIn.vue
index 49db2ef8bb4c78f37994a62d0d195100451777a0..abd887cb385b910728a64054d9010509e2e55c3a 100644 (file)
--- a/client/views/LogIn.vue
+++ b/client/views/LogIn.vue
@@ -40,6 +40,7 @@
 import { mdilLogin } from "@mdi/light-js";
 import { ref } from "vue";
 import { useRouter, useRoute } from "vue-router";
+import { useToast } from "primevue/usetoast";
 
 import { getToken } from "../api.js";
 import CustomButton from "../components/CustomButton.vue";
@@ -50,9 +51,10 @@ import { useGlobalStore } from "../globalStore.js";
 import { storeToken } from "../tokenStorage.js";
 import * as constants from "../constants.js";
 
+const globalStore = useGlobalStore();
 const router = useRouter();
 const route = useRoute();
-const globalStore = useGlobalStore();
+const toast = useToast();
 
 const username = ref("");
 const password = ref("");
@@ -71,8 +73,19 @@ function logIn() {
       }
     })
     .catch((error) => {
-      console.error(error);
-      // TODO: Trigger error toast
+      username.value = "";
+      password.value = "";
+      totp.value = "";
+
+      if (error.response?.status === 401) {
+        toast.add({
+          summary: "Login Failed",
+          detail: "Please check your credentials and try again.",
+          closable: false,
+          life: 5000,
+        });
+        // TODO: Trigger unknown error toast
+      }
     });
 }
 </script>

diff --git a/package-lock.json b/package-lock.json
index abc53abc285385a5e34bb52a6539d538f1df2bff..67c4846bc92359dc83f03c35f3f2c4e14163316e 100644 (file)
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "axios": "1.6.8",\r
         "mousetrap": "1.6.5",\r
         "pinia": "2.1.7",\r
+        "primevue": "3.52.0",\r
         "vue": "3.4.24",\r
         "vue-router": "4.3.2"\r
       },\r
@@ -2099,6 +2100,14 @@
         }\r
       }\r
     },\r
+    "node_modules/primevue": {\r
+      "version": "3.52.0",\r
+      "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.52.0.tgz",\r
+      "integrity": "sha512-HLOVP5YI0ArFKUhIyfZsWmTNMaBYNCBWC/3DYvdd/Po4LY5/WXf7yIYvArE2q/3OuwSXJXvjlR8UNQeJYRSQog==",\r
+      "peerDependencies": {\r
+        "vue": "^3.0.0"\r
+      }\r
+    },\r
     "node_modules/proxy-from-env": {\r
       "version": "1.1.0",\r
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",\r

diff --git a/package.json b/package.json
index 8b122ad8077170cfa7b63712ce8caa0beb3cf664..374c97a3cec525d03e3bdbacf0d04014534053de 100644 (file)
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "axios": "1.6.8",\r
     "mousetrap": "1.6.5",\r
     "pinia": "2.1.7",\r
+    "primevue": "3.52.0",\r
     "vue": "3.4.24",\r
     "vue-router": "4.3.2"\r
   },\r