@mundogamernetwork/shared-ui 1.17.7 → 1.17.10

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/components/ui/MgLoginModal.vue

@@ -40,23 +40,23 @@ function close() {
 			{{ $t("header.login.btn_register") }}
 		</a>
 		<Teleport to="body">
-			<div v-if="open" class="modal">
-				<div class="modal-backdrop" @click="close()"></div>
-				<div class="pop-up">
-					<div class="title">
+			<div v-if="open" class="mg-login-modal">
+				<div class="mg-login-modal-backdrop" @click="close()"></div>
+				<div class="mg-login-modal-popup">
+					<div class="mg-login-modal-title">
 						{{ $t("more.login_modal.title") }}
 					</div>
-					<div class="subtitle">
+					<div class="mg-login-modal-subtitle">
 						{{ $t("more.login_modal.subtitle") }}
 					</div>
-					<div class="buttons">
-						<a v-if="props.loginUrl" class="btn1" :href="props.loginUrl">
+					<div class="mg-login-modal-buttons">
+						<a v-if="props.loginUrl" class="mg-login-modal-btn1" :href="props.loginUrl">
 							{{ $t("more.login_modal.btn_login") }}
 						</a>
-						<a v-if="!signedIn" class="btn1" :href="registerUrl">
+						<a v-if="!signedIn" class="mg-login-modal-btn1" :href="registerUrl">
 							{{ $t("more.login_modal.btn_1") }}
 						</a>
-						<a class="btn2" @click="close()">
+						<a class="mg-login-modal-btn2" @click="close()">
 							{{ $t("more.login_modal.btn_2") }}
 						</a>
 					</div>
@@ -67,100 +67,109 @@ function close() {
 </template>
 
 <style lang="scss">
+// #mgLoginModal only wraps the inline "Register" link below — the modal
+// itself is <Teleport to="body">'d out of this element entirely, so it can
+// never be reached by a `#mgLoginModal .foo` selector. It previously used
+// bare, unscoped names (.modal, .pop-up, .title, .buttons, .btn1/2) that
+// silently collided with Bootstrap's own (and other) same-named classes —
+// Bootstrap's `.modal { display: none; z-index: 1055 }` always won since the
+// teleported node is no longer a descendant of #mgLoginModal, so the intended
+// `#mgLoginModal .modal` override never matched it. Every teleported class is
+// now uniquely prefixed and styled independently of #mgLoginModal.
 #mgLoginModal {
 	a {
 		cursor: pointer;
 		margin-left: 5px;
 	}
+}
+
+.mg-login-modal {
+	position: fixed;
+	display: block;
+	width: 100%;
+	height: 100vh;
+	z-index: 99999;
+	top: 0;
+	left: 0;
 
-	.modal {
+	.mg-login-modal-backdrop {
 		position: fixed;
-		display: block;
 		width: 100%;
+		background-color: rgba(0, 0, 0, 0.5);
 		height: 100vh;
-		z-index: 99999;
-		top: 0;
+		z-index: 1;
 		left: 0;
+		top: 0;
+	}
 
-		.modal-backdrop {
-			position: fixed;
-			width: 100%;
-			background-color: rgba(0, 0, 0, 0.5);
-			height: 100vh;
-			z-index: 1;
-			left: 0;
-			top: 0;
+	.mg-login-modal-popup {
+		max-height: 90vh;
+		width: 320px;
+		padding: 24px 32px;
+		background-color: var(--sidebar-bg);
+		border: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+		justify-content: center;
+		align-items: center;
+		text-align: center;
+		margin: auto;
+		margin-top: 15%;
+		position: relative;
+		z-index: 999;
+
+		.mg-login-modal-title {
+			font-size: 18px;
+			font-weight: 600;
+			line-height: 26px;
+			color: var(--active);
+		}
+
+		.mg-login-modal-subtitle {
+			font-size: 14px;
+			font-weight: 400;
+			line-height: 20px;
+			color: var(--active);
 		}
 
-		.pop-up {
-			max-height: 90vh;
-			width: 320px;
-			padding: 24px 32px;
-			background-color: var(--sidebar-bg);
-			border: 0;
+		.mg-login-modal-buttons {
 			display: flex;
 			flex-direction: column;
-			gap: 16px;
-			justify-content: center;
-			align-items: center;
-			text-align: center;
-			margin: auto;
-			margin-top: 15%;
-			position: relative;
-			z-index: 999;
-
-			.title {
-				font-size: 18px;
-				font-weight: 600;
-				line-height: 26px;
-				color: var(--active);
-			}
+			gap: 8px;
+			width: 100%;
 
-			.subtitle {
-				font-size: 14px;
-				font-weight: 400;
-				line-height: 20px;
+			.mg-login-modal-btn1 {
+				display: flex;
+				width: 100%;
+				height: 44px;
+				padding: 0 12px;
+				justify-content: center;
+				align-items: center;
+				font-size: 16px;
 				color: var(--active);
+				background-color: var(--sidebar-bg);
+				cursor: pointer;
+				border: 1px solid var(--chip-text);
 			}
 
-			.buttons {
+			.mg-login-modal-btn2 {
 				display: flex;
-				flex-direction: column;
-				gap: 8px;
 				width: 100%;
-
-				.btn1 {
-					display: flex;
-					width: 100%;
-					height: 44px;
-					padding: 0 12px;
-					justify-content: center;
-					align-items: center;
-					font-size: 16px;
-					color: var(--active);
-					background-color: var(--sidebar-bg);
-					cursor: pointer;
-					border: 1px solid var(--chip-text);
-				}
-
-				.btn2 {
-					display: flex;
-					width: 100%;
-					height: 44px;
-					padding: 0 12px;
-					justify-content: center;
-					align-items: center;
-					border: 0;
-					color: var(--chip-text);
-					cursor: pointer;
-					background-color: var(--search-bar-bg);
-				}
+				height: 44px;
+				padding: 0 12px;
+				justify-content: center;
+				align-items: center;
+				border: 0;
+				color: var(--chip-text);
+				cursor: pointer;
+				background-color: var(--search-bar-bg);
 			}
 		}
 	}
 
 	@media screen and (max-width: 768px) {
-		.modal .pop-up {
+		.mg-login-modal-popup {
 			width: 100%;
 			margin-top: 50%;
 		}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.17.7",
+  "version": "1.17.10",
   "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")
 		}