From: Adam Dullage <redacted>
Date: Sat, 27 Apr 2024 18:00:13 +0000 (+0100)
Subject: Toast Messaging
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=40383f93e4ffb2e354456d4c77fe0f3b00fe45e1;p=flatnotes.git

Toast Messaging
---

diff --git a/client/App.vue b/client/App.vue
index 387db2a..11c0ac6 100644
--- a/client/App.vue
+++ b/client/App.vue
@@ -1,17 +1,19 @@
 <template>
   <div class="container mx-auto flex h-screen flex-col px-2 py-4">
+    <Toast class="ml-[20px]" :pt="toastStyle" position="bottom-right" />
     <NavBar v-if="showNavBar" :hide-logo="!showNavBarLogo" />
     <RouterView />
   </div>
 </template>
 
 <script setup>
-import { onBeforeMount, computed } from "vue";
+import Toast from "primevue/toast";
+import { computed, onBeforeMount } from "vue";
 import { RouterView, useRoute } from "vue-router";
 
-import NavBar from "./partials/NavBar.vue";
 import { getConfig } from "./api.js";
 import { useGlobalStore } from "./globalStore.js";
+import NavBar from "./partials/NavBar.vue";
 import { loadStoredToken } from "./tokenStorage.js";
 
 const globalStore = useGlobalStore();
@@ -38,4 +40,12 @@ const showNavBar = computed(() => {
 const showNavBarLogo = computed(() => {
   return route.name !== "home";
 });
+
+const toastStyle = {
+  message: "flex flex-col items-end",
+  container:
+  "bg-theme-background-elevated border border-theme-border mb-2 px-3 py-2 rounded-lg max-w-96",
+  icon: "invisible h-0 w-0",
+  summary: "font-bold",
+};
 </script>
diff --git a/client/index.js b/client/index.js
index e89ab7a..5c315dc 100644
--- a/client/index.js
+++ b/client/index.js
@@ -1,11 +1,17 @@
 import App from "/App.vue";
+import PrimeVue from "primevue/config";
+import ToastService from 'primevue/toastservice';
 import { createApp } from "vue";
-import { createPinia } from 'pinia';
+import { createPinia } from "pinia";
 import router from "/router.js";
 
 const app = createApp(App);
-const pinia = createPinia()
+const pinia = createPinia();
 
 app.use(router);
-app.use(pinia)
+app.use(pinia);
+app.use(PrimeVue, {
+  unstyled: true,
+});
+app.use(ToastService);
 app.mount("#app");
diff --git a/client/views/Home.vue b/client/views/Home.vue
index ad79b56..d5c140c 100644
--- 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 49db2ef..abd887c 100644
--- 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 abc53ab..67c4846 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "axios": "1.6.8",
         "mousetrap": "1.6.5",
         "pinia": "2.1.7",
+        "primevue": "3.52.0",
         "vue": "3.4.24",
         "vue-router": "4.3.2"
       },
@@ -2099,6 +2100,14 @@
         }
       }
     },
+    "node_modules/primevue": {
+      "version": "3.52.0",
+      "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.52.0.tgz",
+      "integrity": "sha512-HLOVP5YI0ArFKUhIyfZsWmTNMaBYNCBWC/3DYvdd/Po4LY5/WXf7yIYvArE2q/3OuwSXJXvjlR8UNQeJYRSQog==",
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
diff --git a/package.json b/package.json
index 8b122ad..374c97a 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "axios": "1.6.8",
     "mousetrap": "1.6.5",
     "pinia": "2.1.7",
+    "primevue": "3.52.0",
     "vue": "3.4.24",
     "vue-router": "4.3.2"
   },