From d4f1cbf637c7ba1a5fa1a8c865930cf29de654cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20P=C4=99dzich?= <contact@maciejpedzi.ch>
Date: Fri, 26 May 2023 12:25:26 +0200
Subject: [PATCH] Show a snackbar upon successful/failed login

---
 src/App.vue         | 34 ++++++++++++++++++++++++++++------
 src/views/LogIn.vue | 18 +++++++++++++++++-
 2 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 862baa4..1db0c01 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,26 +1,48 @@
 <script setup lang="ts">
-import { useAuth } from './composables/useAuth';
-import NavMenu from './components/ui/NavMenu.vue';
+import { onMounted } from '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>
diff --git a/src/views/LogIn.vue b/src/views/LogIn.vue
index 6af4cec..645dee4 100644
--- a/src/views/LogIn.vue
+++ b/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>