Show a snackbar upon successful/failed login

src/App.vue

@@ -1,26 +1,48 @@
 <script setup lang="ts">
-import { useAuth } from './composables/useAuth';
+import { onMounted } from 'vue';
-import NavMenu from './components/ui/NavMenu.vue';
+import { useRouter } from 'vue-router';
 
-const { userLoadingFinished } = useAuth();
+import { useAuth } from './composables/useAuth';
+import { useSnackbar } from './composables/useSnackbar';
+
+import NavMenu from './components/ui/NavMenu.vue';
+import Snackbar from './components/ui/Snackbar.vue';
+
+const router = useRouter();
+const { loadingUserFinished } = useAuth();
+const { showSnackbar } = useSnackbar();
+
+onMounted(async () => {
+  await router.isReady();
+
+  if (router.currentRoute.value.hash === '#login-success') {
+    localStorage.removeItem('redirectPath');
+    showSnackbar({
+      color: 'success',
+      title: 'Success',
+      message: "You're logged in!"
+    });
+  }
+});
 </script>
 
 <template>
   <v-app>
+    <Snackbar />
     <NavMenu />
     <v-main>
       <section
-        v-if="!userLoadingFinished"
+        v-if="!loadingUserFinished"
         class="w-100 h-100 pb-4 d-flex justify-center align-center"
       >
         <v-progress-circular
-          :size="100"
+          :size="120"
           :width="7"
           color="indigo"
           indeterminate
         ></v-progress-circular>
       </section>
-      <RouterView v-show="userLoadingFinished" />
+      <RouterView v-show="loadingUserFinished" />
     </v-main>
   </v-app>
 </template>

src/views/LogIn.vue

@@ -1,7 +1,23 @@
 <script lang="ts" setup>
-import { useAuth } from '@/composables/useAuth';
+import { onMounted } from 'vue';
+import { useRoute } from 'vue-router';
 
+import { useAuth } from '@/composables/useAuth';
+import { useSnackbar } from '@/composables/useSnackbar';
+
+const route = useRoute();
 const { logIn } = useAuth();
+const { showSnackbar } = useSnackbar();
+
+onMounted(() => {
+  if (route.hash === '#login-error') {
+    showSnackbar({
+      color: 'error',
+      title: 'Error',
+      message: 'Failed to log you in.'
+    });
+  }
+});
 </script>
 
 <template>