Refactor components. Improve design. Improve routing

src/pages/LoginPage.vue

@@ -31,7 +31,7 @@
               ></q-input>
               <q-btn
                 type="submit"
-                @click="login(email, password)"
+                @click="login($router, email, password)"
                 label="Login"
                 color="primary"
               ></q-btn>
@@ -43,22 +43,6 @@
                 flat
               ></q-btn> -->
             </q-form>
-
-            <q-dialog v-model="alert">
-              <q-card>
-                <q-card-section>
-                  <div class="text-h6">Login Failed</div>
-                </q-card-section>
-
-                <q-card-section class="q-pt-none">
-                  Login failed: {{ message }}
-                </q-card-section>
-
-                <q-card-actions align="right">
-                  <q-btn flat label="OK" color="primary" v-close-popup />
-                </q-card-actions>
-              </q-card>
-            </q-dialog>
           </q-card-section>
         </q-card>
       </q-page>
@@ -83,53 +67,12 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useAuthStore } from 'src/stores/auth';
-import { useRouter } from 'vue-router';
-import { useQuasar } from 'quasar';
+import { login } from 'boot/appwrite';
 
 defineOptions({
   name: 'LoginPage',
 });
 
-const authStore = useAuthStore();
-
 const email = ref('');
 const password = ref('');
-const router = useRouter();
-const q = useQuasar();
-const alert = ref(false);
-const message = ref('');
-
-function login(email: string, password: string) {
-  const notification = q.notify({
-    type: 'primary',
-    position: 'top',
-    spinner: true,
-    message: 'Logging you in...',
-    timeout: 8000,
-    group: false,
-  });
-  authStore
-    .login(email, password)
-    .then(() => {
-      notification({
-        type: 'positive',
-        message: 'Logged in!',
-        timeout: 2000,
-        spinner: false,
-        icon: 'check_circle',
-      });
-      console.log('Redirecting to index page');
-      router.replace({ name: 'index' });
-    })
-    .catch(function (reason: Error) {
-      notification({
-        type: 'negative',
-        message: 'Login failed.',
-        timeout: 1,
-      });
-      message.value = reason.message;
-      alert.value = true;
-    });
-}
 </script>