mirror of
https://github.com/maciejpedzich/racemash.git
synced 2024-11-10 00:53:03 +01:00
Show a snackbar upon successful/failed login
This commit is contained in:
parent
3cd08d7daf
commit
d4f1cbf637
34
src/App.vue
34
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>
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user