Add notifications to basic auth. Basic Auth DONE

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

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' });
 }
 

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>