@mundogamernetwork/shared-ui 1.1.0 → 1.1.2

package/components/ui/MgLoginRegisterMenu.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+/**
+ * MgLoginRegisterMenu — standardized guest dropdown for the header user icon.
+ *
+ * Shows a prominent Login button + "Don't have an account yet? Register" link,
+ * fully themed via platform CSS variables (academy orange, tv cyan, etc.).
+ *
+ * Redirect rules are baked in and correct for every platform:
+ *  - Login  → the platform's own login endpoint (apiBaseURL host) with
+ *             redirect_to = current page, so the user RETURNS here after login.
+ *  - Register → accountsBaseUrl/register with redirect_to + system_id.
+ *
+ * Usage (header guest state): place inside a `position: relative` parent
+ *   <li class="menu-item" style="position: relative">
+ *     <MgLoginRegisterMenu v-if="!signedIn && open" />
+ *   </li>
+ *
+ * Props let a platform override the login base or disable dropdown positioning.
+ */
+import { buildLoginUrl, buildRegisterUrl } from "../../utils/authRedirect";
+
+const props = defineProps({
+	// Override the login URL entirely (else derived from apiBaseURL host).
+	loginUrl: { type: String, default: "" },
+	// When false, renders as an inline card instead of an absolute dropdown.
+	dropdown: { type: Boolean, default: true },
+});
+
+const runtimeConfig = useRuntimeConfig();
+
+const apiBase = (
+	(runtimeConfig.public.mgSharedUi?.apiBaseURL as string) ||
+	(runtimeConfig.public.apiBaseURL as string) ||
+	(import.meta.env.VITE_API_BASE_URL as string) ||
+	""
+).replace(/\/api\/v1\/?$/, "");
+
+const accountsBaseUrl =
+	runtimeConfig.public.mgSharedUi?.accountsBaseUrl ||
+	runtimeConfig.public.accountsBaseUrl ||
+	import.meta.env.VITE_BASE_ACCOUNTS_URL ||
+	"";
+
+const systemId =
+	runtimeConfig.public.mgSharedUi?.systemId ||
+	runtimeConfig.public.platformId ||
+	import.meta.env.VITE_SYSTEM_ID ||
+	"";
+
+// Computed at click time so redirect_to is always the CURRENT url.
+function goLogin() {
+	if (typeof window === "undefined") return;
+	window.location.href = props.loginUrl || buildLoginUrl(apiBase);
+}
+function goRegister() {
+	if (typeof window === "undefined") return;
+	window.location.href = buildRegisterUrl(accountsBaseUrl, undefined, systemId);
+}
+</script>
+
+<template>
+	<div class="mg-login-register" :class="{ 'mg-login-register--dropdown': dropdown }">
+		<button type="button" class="mg-login-register__login" @click="goLogin">
+			{{ $t("header.login.btn_login") }}
+		</button>
+		<p class="mg-login-register__register">
+			{{ $t("header.login.no_account") }}
+			<a class="mg-login-register__register-link" @click.prevent="goRegister">
+				{{ $t("header.login.btn_register") }}
+			</a>
+		</p>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.mg-login-register {
+	display: flex;
+	flex-direction: column;
+	gap: 0.85rem;
+	padding: 1.25rem;
+	// Inline (default): fill the parent dropdown container.
+	width: 100%;
+	box-sizing: border-box;
+	background: var(--header-ui-config-bg, var(--sidebar-bg, var(--body-bg-card, #1c1c1c)));
+
+	// Dropdown variant: self-positioned card with its own width + border.
+	&--dropdown {
+		position: absolute;
+		top: 100%;
+		right: 0;
+		margin-top: 8px;
+		z-index: 9999;
+		width: 300px;
+		max-width: 300px;
+		border: 1px solid var(--header-ui-config-border, var(--border-card, rgba(255, 255, 255, 0.08)));
+	}
+
+	&__login {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		min-height: 44px;
+		padding: 10px 16px;
+		font-size: 15px;
+		font-weight: 600;
+		border: none;
+		cursor: pointer;
+		white-space: nowrap;
+		text-decoration: none;
+		// Platform theme highlight + readable contrast text.
+		background: var(--bt-active, var(--header-active-fg, var(--highlight-color, #f70)));
+		color: var(--header-active-bg, #18181a);
+		transition: opacity 0.15s;
+
+		&:hover { opacity: 0.9; }
+	}
+
+	&__register {
+		margin: 0;
+		text-align: center;
+		font-size: 13px;
+		color: var(--sidebar-menus-fg, var(--inactive, #aaa));
+	}
+
+	&__register-link {
+		color: var(--bt-active, var(--header-active-fg, var(--highlight-color, #f70)));
+		font-weight: 600;
+		text-decoration: none;
+		cursor: pointer;
+		margin-left: 4px;
+
+		&:hover { text-decoration: underline; }
+	}
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -39,4 +39,4 @@
     "nuxt": "^3.15.4",
     "typescript": "^5.0.0"
   }
-}
+}

package/services/httpService.ts

@@ -54,10 +54,11 @@ export function getHttpService(): AxiosInstance {
 					recoverFromSessionLoss();
 				}
 
-				// 5xx while a credentialed request is in flight is the classic
-				// stale-oauth_token loop (OAuth rejects → 500). Clear client-side so
-				// the next load is a clean guest instead of an infinite failure.
-				if (status >= 500) {
+				// 5xx ONLY on the auth probe = the stale-oauth_token loop (the session
+				// check itself fails). A 5xx from any OTHER endpoint (notifications,
+				// feed, etc.) is just a broken/erroring endpoint — it must NOT clear
+				// the session, otherwise a single backend 500 logs the user out.
+				if (status >= 500 && isAuthProbe) {
 					recoverFromSessionLoss();
 				}