@mundogamernetwork/shared-ui 1.17.7 → 1.17.9

package/components/ui/MgHeaderAvatarToggle.vue

@@ -42,11 +42,12 @@ const initialized = computed(() => {
 		<MGIcon v-else-if="!signedIn" icon="profile" />
 		<img
 			v-else
-			:src="user?.avatar_url"
+			:src="user?.avatar_url || '/imgs/default-avatar.png'"
 			:width="props.size"
 			:height="props.size"
 			class="mg-avatar-img"
 			alt=""
+			@error="(e: Event) => { const t = e.target as HTMLImageElement; if (t) { t.onerror = null; t.src = '/imgs/default-avatar.png' } }"
 		/>
 		<template #fallback>
 			<div

package/components/ui/MgHeaderComponent.vue

@@ -109,7 +109,14 @@ onMounted(() => {
 					@click.prevent="show(false, !showUsers)"
 				>
 					<MGIcon v-if="!signedIn" icon="profile" />
-					<img v-else :src="user?.avatar_url" width="32" height="32" class="rounded-circle" />
+					<img
+						v-else
+						:src="user?.avatar_url || '/imgs/default-avatar.png'"
+						width="32"
+						height="32"
+						class="rounded-circle"
+						@error="(e: Event) => { const t = e.target as HTMLImageElement; if (t) { t.onerror = null; t.src = '/imgs/default-avatar.png' } }"
+					/>
 				</a>
 			</li>
 

package/components/ui/MgHeaderUIUser.vue

@@ -122,7 +122,14 @@ const handleToggleOnline = () => {
 						<div v-if="!user?.avatar_url" class="no-avatar-wrapper">
 							<MGIcon icon="profile" />
 						</div>
-						<img v-else :src="user.avatar_url" width="40" height="40" class="avatar-img" />
+						<img
+							v-else
+							:src="user.avatar_url"
+							width="40"
+							height="40"
+							class="avatar-img"
+							@error="(e: Event) => { const t = e.target as HTMLImageElement; if (t) { t.onerror = null; t.src = '/imgs/default-avatar.png' } }"
+						/>
 					</div>
 
 					<!--

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.17.7",
+  "version": "1.17.9",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",

package/pages/key-campaigns/[slug].vue

@@ -14,13 +14,17 @@ import {
 } from "../../services/campaignService"
 import { fetchDetailGame, fetchDetailGameImage } from "../../services/gamesService"
 import { formatEmbargoDateTime } from "../../utils/embargo"
+import { useLoginStore } from "../../stores/login"
 
 // Injected by each front — provide in app.vue / a plugin
 const mgPlatform = inject<string>("mgPlatform", "MGTV")
-const loginUrl = inject<string>("loginUrl", "/")
 const upgradeRoute = inject<string>("upgradeRoute", "/")
 // The consuming front should provide the authenticated user as { id, ... } or null
 const currentUser = inject<any>("currentUser", null)
+const loginStore = useLoginStore()
+// The auth store actually defaults `user` to `{}` (not null) even when signed
+// out, so a raw truthiness check on it is always true — `.id` is the real signal.
+const isSignedIn = () => !!unref(currentUser)?.id
 
 const { $i18n } = useNuxtApp()
 const locale = $i18n.locale
@@ -212,8 +216,9 @@ const following = ref(!!campaign.value?.is_following)
 const followBusy = ref(false)
 
 async function toggleFollow() {
-	if (!currentUser) {
-		return navigateTo(`${loginUrl}?redirect_to=${encodeURIComponent(route.fullPath)}`, { external: true })
+	if (!isSignedIn()) {
+		loginStore.showLoginModalComponent = true
+		return
 	}
 	if (!campaign.value?.id || followBusy.value) return
 
@@ -601,14 +606,11 @@ const tierLabel = computed(() => {
 // Auth guard for CTA actions
 // ------------------------------------------------------------------
 function requireAuth(targetPath: string) {
-	if (unref(currentUser)) {
+	if (isSignedIn()) {
 		navigateTo(targetPath)
 		return
 	}
-	const returnTo = typeof window !== "undefined"
-		? `${window.location.origin}${route.fullPath}`
-		: targetPath
-	navigateTo(`${loginUrl}?redirect_to=${encodeURIComponent(returnTo)}`, { external: true })
+	loginStore.showLoginModalComponent = true
 }
 
 // ------------------------------------------------------------------
@@ -622,7 +624,7 @@ const showUsersModal = ref(false)
 onMounted(async () => {
 	updateCountdown()
 
-	if (unref(currentUser) && campaign.value?.id) {
+	if (isSignedIn() && campaign.value?.id) {
 		try {
 			const response = await fetchMyRequests({ "filter[key_id]": campaign.value.id })
 			const requests = response?.data?.data

package/pages/key-campaigns/index.vue

@@ -470,7 +470,9 @@ function truthyFlag(value: unknown) {
 }
 
 function hasCurrentUser() {
-	return !!unref(currentUser)
+	// `currentUser` defaults to `{}` (not null) in the auth store even when
+	// signed out, so a raw truthiness check on it is always true.
+	return !!unref(currentUser)?.id
 }
 
 function requestLogin() {

package/pages/key-campaigns/redeem-key-approved.vue

@@ -14,13 +14,19 @@ import {
 	isEmbargoActive,
 	type EmbargoDisplay,
 } from "../../utils/embargo"
+import { useLoginStore } from "../../stores/login"
 
 const route = useRoute()
 const { $i18n } = useNuxtApp()
 const locale = $i18n.locale
+const loginStore = useLoginStore()
 
 const currentUser = inject<any>("currentUser", null)
 const loginUrl = inject<string>("loginUrl", "/")
+// `currentUser` defaults to `{}` (never null) in the auth store even when
+// signed out, so a raw truthiness check on it is always true. `.id` is the
+// same "really signed in" signal the store's own getters/persisted state use.
+const isSignedIn = () => !!unref(currentUser)?.id
 
 const requestId = Number(route.query.requestId)
 const keyItemsParam = route.query.keyItems as string | undefined
@@ -74,9 +80,8 @@ const redeemUrl = computed(() => {
 })
 
 onMounted(async () => {
-	if (!unref(currentUser)) {
-		const returnTo = typeof window !== "undefined" ? window.location.href : ""
-		navigateTo(`${loginUrl}?redirect_to=${encodeURIComponent(returnTo)}`, { external: true })
+	if (!isSignedIn()) {
+		loginStore.showLoginModalComponent = true
 		return
 	}
 	if (!requestId) {

package/pages/key-campaigns/redeem-key.vue

@@ -13,13 +13,19 @@ import {
 	buildReLoginUrl,
 } from "../../services/campaignService"
 import { formatEmbargoDateTime } from "../../utils/embargo"
+import { useLoginStore } from "../../stores/login"
 
 const route = useRoute()
 const { $i18n } = useNuxtApp()
 const locale = $i18n.locale
+const loginStore = useLoginStore()
 
 const currentUser = inject<any>("currentUser", null)
 const loginUrl = inject<string>("loginUrl", "/")
+// `currentUser` defaults to `{}` (never null) in the auth store even when
+// signed out, so a raw truthiness check on it is always true. `.id` is the
+// same "really signed in" signal the store's own getters/persisted state use.
+const isSignedIn = () => !!unref(currentUser)?.id
 
 const keyId = Number(route.query.keyId)
 
@@ -70,9 +76,8 @@ function clampQuantity() {
 }
 
 onMounted(async () => {
-	if (!unref(currentUser)) {
-		const returnTo = typeof window !== "undefined" ? window.location.href : ""
-		navigateTo(`${loginUrl}?redirect_to=${encodeURIComponent(returnTo)}`, { external: true })
+	if (!isSignedIn()) {
+		loginStore.showLoginModalComponent = true
 		return
 	}
 	try {
@@ -118,7 +123,7 @@ onMounted(async () => {
 watch(
 	() => unref(currentUser),
 	(user, previous) => {
-		if (previous && !user) {
+		if (previous?.id && !user?.id) {
 			sessionExpired.value = true
 			requestError.value = $i18n.t("keys.campaigns.error_session_expired")
 		}