From 0a5c98b6707a9a2d7c76de1d2170029431b111d0 Mon Sep 17 00:00:00 2001
From: sc02613 <sc02613@surrey.ac.uk>
Date: Fri, 21 Mar 2025 15:43:16 +0000
Subject: [PATCH] PFP synced with google
---
movie-group-8/src/components/Navbar.vue | 8 +++++++-
1 file changed, 7 insertions(+), 1 deletion(-)
diff --git a/movie-group-8/src/components/Navbar.vue b/movie-group-8/src/components/Navbar.vue
index 50e2353..5ae0401 100644
--- a/movie-group-8/src/components/Navbar.vue
+++ b/movie-group-8/src/components/Navbar.vue
@@ -48,7 +48,7 @@
<Menu as="div" class="relative" v-if="isLoggedIn">
<div>
<MenuButton class="flex rounded-full bg-gray-800 text-sm focus:ring-1 focus:ring-white focus:ring-offset-2">
- <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
+ <img class="h-8 w-8 rounded-full" :src="userPhotoURL" alt="User Avatar" />
</MenuButton>
</div>
<transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
@@ -81,6 +81,7 @@ const auth = getAuth();
const route = useRoute();
const router = useRouter();
const isLoggedIn = ref(false);
+const userPhotoURL = ref('');
const navigation = ref([
{ name: 'Films', href: '/films', authRequired: true },
@@ -103,6 +104,11 @@ const filteredNavigation = computed(() => {
onMounted(() => {
onAuthStateChanged(auth, (user) => {
isLoggedIn.value = !!user; // Sets to true if user exists, false otherwise
+ if(user && user.photoURL) {
+ userPhotoURL.value = user.photoURL;
+ } else {
+ userPhotoURL.value = 'https://static.vecteezy.com/system/resources/previews/009/292/244/non_2x/default-avatar-icon-of-social-media-user-vector.jpg';
+ }
});
});
--
GitLab