Show a snackbar upon successful/failed login

This commit is contained in:
Maciej Pędzich 2023-05-26 12:25:26 +02:00
parent 3cd08d7daf
commit d4f1cbf637
2 changed files with 45 additions and 7 deletions

View File

@ -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>

View File

@ -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>