From b14646bfb1f9290049dac18869af222dd0d0566e Mon Sep 17 00:00:00 2001
From: Patrick Toal <ptoal@takeflight.ca>
Date: Tue, 7 Nov 2023 08:21:47 -0500
Subject: [PATCH] Add notifications to basic auth. Basic Auth DONE

---
 quasar.config.js           |  2 +-
 src/layouts/MainLayout.vue |  9 ++++++++
 src/pages/LoginPage.vue    | 44 +++++++++++++++++++-------------------
 3 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/quasar.config.js b/quasar.config.js
index 22eb311..9004385 100644
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -98,7 +98,7 @@ module.exports = configure(function (/* ctx */) {
       // directives: [],
 
       // Quasar plugins
-      plugins: ['LocalStorage', 'SessionStorage'],
+      plugins: ['Notify', 'LocalStorage', 'SessionStorage'],
     },
 
     // animations: 'all', // --- includes all animations
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 5f41199..3966d8c 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -41,6 +41,7 @@ import { account } from 'boot/appwrite';
 import type { Models } from 'appwrite';
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
 
 const linksList = [
   {
@@ -51,6 +52,7 @@ const linksList = [
   },
 ];
 
+const q = useQuasar();
 const leftDrawerOpen = ref(false);
 
 const loggedInUser = ref<Models.User<Models.Preferences> | null>();
@@ -63,6 +65,13 @@ account.get().then((result) => {
 
 async function logout() {
   await account.deleteSession('current');
+  q.notify({
+    message: 'Logged out!',
+    type: 'warning',
+    position: 'top',
+    timeout: 2000,
+    group: false,
+  });
   router.push({ name: 'login' });
 }
 
diff --git a/src/pages/LoginPage.vue b/src/pages/LoginPage.vue
index 8c6fc02..29d8ba8 100644
--- a/src/pages/LoginPage.vue
+++ b/src/pages/LoginPage.vue
@@ -12,13 +12,6 @@
             <div class="text-center q-pt-sm">
               <div class="col text-h6">Log in</div>
             </div>
-            <q-card-section v-if="errorMessage">
-              <div class="alert-box">
-                <strong>Error!</strong>
-                <br />
-                {{ errorMessage }}
-              </div>
-            </q-card-section>
           </q-card-section>
           <q-card-section>
             <q-form class="q-gutter-md">
@@ -72,25 +65,12 @@
 }
 </style>
 
-<style scoped>
-.alert-box {
-  color: #666;
-  border: 1px solid red;
-  border-radius: 4px;
-  padding: 20px;
-  background-color: #f8f8f8;
-}
-
-strong {
-  color: red;
-}
-</style>
-
 <script setup lang="ts">
 import { AppwriteException } from 'appwrite';
 import { ref } from 'vue';
 import { account } from 'boot/appwrite';
 import { useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
 
 defineOptions({
   name: 'LoginPage',
@@ -100,15 +80,35 @@ const email = ref('');
 const password = ref('');
 const errorMessage = ref('');
 const router = useRouter();
+const q = useQuasar();
 
 function login(email: string, password: string) {
+  const notification = q.notify({
+    type: 'primary',
+    position: 'top',
+    spinner: true,
+    message: 'Logging you in...',
+    timeout: 2000,
+    group: false,
+  });
   account
     .createEmailSession(email, password)
     .then(() => {
+      notification({
+        type: 'positive',
+        message: 'Logged in!',
+        timeout: 2000,
+        spinner: false,
+        icon: 'check_circle',
+      });
       router.push({ name: 'index' });
     })
     .catch((reason: AppwriteException) => {
-      errorMessage.value = reason.message;
+      notification({
+        type: 'negative',
+        message: 'Login failed. Error:' + reason.message,
+        timeout: 2000,
+      });
     });
 }
 </script>