Add notifications to basic auth. Basic Auth DONE

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>