@mundogamernetwork/shared-ui 1.0.0

package/components/ui/MgHeaderUIConfig.vue

@@ -0,0 +1,225 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import type { MgLanguage } from "../../types";
+
+const switchLocalePath = useSwitchLocalePath();
+const runtimeConfig = useRuntimeConfig();
+const configuredLangs: string[] = runtimeConfig.public.mgSharedUi?.languages || ["pt-BR", "en", "es", "de", "ro"];
+const features = runtimeConfig.public.mgSharedUi?.features ?? {};
+
+const theme = ref(useNuxtApp().$colorMode.preference);
+const active = ref(0);
+
+const allLanguages: MgLanguage[] = [
+	{
+		name: "Brasil",
+		name_abrev: "pt-BR",
+		flag_url: "https://storage.mundogamer.network/mg-public/countries/flags-svg/255-brazil.svg",
+		native_name: "Portugues",
+		localized_name: "Portuguese",
+	},
+	{
+		name: "Espanha",
+		name_abrev: "es",
+		flag_url: "https://storage.mundogamer.network/mg-public/countries/flags-svg/128-spain.svg",
+		native_name: "Espanol",
+		localized_name: "Spanish",
+	},
+	{
+		name: "Alemanha",
+		name_abrev: "de",
+		flag_url: "https://storage.mundogamer.network/mg-public/countries/flags-svg/162-germany.svg",
+		native_name: "Deutsch",
+		localized_name: "German",
+	},
+	{
+		name: "Estados Unidos",
+		name_abrev: "en",
+		flag_url: "https://storage.mundogamer.network/mg-public/countries/flags-svg/226-united-states.svg",
+		native_name: "English",
+		localized_name: "English",
+	},
+	{
+		name: "Romania",
+		name_abrev: "ro",
+		flag_url: "https://storage.mundogamer.network/mg-public/countries/flags-svg/109-romania.svg",
+		native_name: "Romana",
+		localized_name: "Romanian",
+	},
+	{
+		name: "Emirados Arabes",
+		name_abrev: "ar",
+		flag_url: "https://storage.mundogamer.network/mg-public/countries/flags-svg/151-united-arab-emirates.svg",
+		native_name: "العربية",
+		localized_name: "Arabic",
+	},
+];
+
+const tempLanguages = ref(allLanguages.filter((l) => configuredLangs.includes(l.name_abrev)));
+
+const container = ref();
+const wrapper = ref();
+
+onMounted(() => {
+	setHeight();
+	scrollWrapper();
+});
+
+watch(theme, (themeChanged) => {
+	useNuxtApp().$colorMode.preference = themeChanged;
+});
+
+function setHeight() {
+	const elIndex = active.value;
+	const el = wrapper.value.children[elIndex];
+	const height = el.scrollHeight;
+	container.value.style.height = height + 32 + "px";
+}
+
+function scrollWrapper() {
+	const offset = 100 * active.value;
+	wrapper.value.style.transform = `translate3d(-${offset}%, 0, 0)`;
+}
+
+function changeTab(i: number) {
+	active.value = i;
+	scrollWrapper();
+	setHeight();
+}
+
+const selectedLanguage = computed(() => {
+	return useNuxtApp().$i18n.locale;
+});
+
+const emit = defineEmits(["toggleVisible"]);
+const count = ref(0);
+const focusOut = (event: MouseEvent) => {
+	if (count.value === 0) {
+		count.value++;
+		return;
+	}
+	const target = event.target as HTMLElement;
+	if (!container.value.contains(target)) emit("toggleVisible");
+};
+
+onBeforeMount(() => {
+	document.addEventListener("click", focusOut);
+});
+onUnmounted(() => {
+	document.removeEventListener("click", focusOut);
+});
+</script>
+
+<template>
+	<div ref="container" class="ui-config">
+		<div ref="wrapper" class="ui-config__content">
+			<div class="ui-config__content__tab">
+				<div v-if="features.darkMode" class="ui-config__option">
+					<div>
+						<MGIcon icon="moon" />
+						{{ $t("header.menus.dark_mode") }}
+					</div>
+					<label class="switch">
+						<input v-model="theme" type="checkbox" :true-value="'dark'" :false-value="'light'" />
+						<span class="slider"></span>
+					</label>
+				</div>
+				<div class="ui-config__option" @click="changeTab(1)">
+					<div>
+						<MGIcon icon="region" />
+						{{ $t("header.menus.country") }}
+					</div>
+					<div>
+						<MGIcon icon="chevron-right" class="m-0" />
+					</div>
+				</div>
+			</div>
+			<div class="ui-config__content__tab">
+				<div class="ui-config__option" @click="changeTab(0)">
+					<div>
+						<MGIcon icon="chevron-left" />
+						{{ $t("community.buttons.back") }}
+					</div>
+				</div>
+				<p>{{ $t("header.menus.select_country_message") }}</p>
+				<NuxtLink
+					v-for="(item, index) in tempLanguages"
+					:key="'select_languages_' + index"
+					:to="switchLocalePath(item.name_abrev)"
+					:class="{ active: selectedLanguage === item.name_abrev }"
+					class="ui-config__option"
+				>
+					<div class="w-100">
+						<img :src="item.flag_url" class="me-1" alt="" /> {{ item.name }}
+					</div>
+				</NuxtLink>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.ui-config {
+	position: absolute;
+	max-width: 240px;
+	width: 100%;
+	padding: 1rem 0;
+	background-color: var(--header-ui-config-bg);
+	border: 1px solid var(--header-ui-config-border);
+	top: 60px;
+	right: 0;
+	z-index: 999;
+	overflow: hidden;
+	transition: background ease 0.3s;
+
+	&__option {
+		color: var(--sidebar-menus-fg);
+		display: flex;
+		justify-content: space-between;
+		padding: 0 1rem;
+		font-size: 0.875rem;
+		min-height: 48px;
+		align-items: center;
+		cursor: pointer;
+
+		img {
+			max-width: 16px;
+			display: inline-block;
+		}
+
+		&:hover {
+			background-color: var(--header-ui-config-hover);
+		}
+
+		& > div {
+			.icon {
+				display: inline-block;
+				vertical-align: middle;
+				font-size: 1.5rem;
+				margin-right: 0.5rem;
+			}
+		}
+	}
+
+	&__content {
+		display: flex;
+		justify-content: flex-start;
+		align-items: flex-start;
+		transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
+
+		&__tab {
+			flex: 1 0 100%;
+			width: 100%;
+			background-color: var(--header-ui-config-bg);
+			transition: background-color ease 0.3s;
+
+			p {
+				color: var(--active);
+				font-size: 12px;
+				padding: 0.5rem 1rem;
+				margin: 0;
+			}
+		}
+	}
+}
+</style>

package/components/ui/MgHeaderUIUser.vue

@@ -0,0 +1,301 @@
+<script setup lang="ts">
+import { storeToRefs } from "pinia";
+
+const emit = defineEmits(["toggleVisible"]);
+
+const showOnline = ref(true);
+const authStore = useAuthStore();
+const { user, signedIn } = storeToRefs(authStore);
+const { performLogout } = useLogout();
+
+const runtimeConfig = useRuntimeConfig();
+const accountsBaseUrl = runtimeConfig.public.mgSharedUi?.accountsBaseUrl || runtimeConfig.public.accountsBaseUrl;
+const features = runtimeConfig.public.mgSharedUi?.features ?? {};
+
+const refDiv = ref<HTMLElement | null>(null);
+const count = ref(0);
+
+const focusOut = (event: MouseEvent) => {
+	if (count.value === 0) {
+		count.value++;
+		return;
+	}
+	const target = event.target as HTMLElement;
+	if (refDiv.value && !refDiv.value.contains(target)) emit("toggleVisible");
+};
+
+onMounted(() => {
+	document.addEventListener("click", focusOut);
+	document.addEventListener("keydown", ({ key }) => {
+		if (key === "Escape") emit("toggleVisible");
+	});
+});
+
+onUnmounted(() => {
+	document.removeEventListener("click", focusOut);
+});
+
+const login = () => {
+	const redirectTo = encodeURIComponent(window.location.href);
+	window.location.href = `${accountsBaseUrl}/login?redirect_to=${redirectTo}`;
+};
+
+const handleLogout = async () => {
+	await performLogout(`${accountsBaseUrl}/login`);
+};
+</script>
+
+<template>
+	<div ref="refDiv" :class="{ 'ui-config-user': true, 'signed-in': signedIn }">
+		<div ref="wrapper" class="ui-config-user__content">
+			<div v-if="!signedIn" class="ui-config-user__content__tab">
+				<div class="ui-config-user__option">
+					<div class="w-100">
+						<a class="btn primary lg w-100" href="#" @click.prevent="login">
+							{{ $t("header.login.btn_login") }}
+						</a>
+					</div>
+				</div>
+				<div class="ui-config-user__option">
+					<div>
+						<p class="d-flex">
+							{{ $t("header.login.register_message") }}
+							<a :href="`${accountsBaseUrl}/register?redirect_to=${encodeURIComponent(window.location.href)}`" class="ms-1">
+								{{ $t("header.login.btn_register") }}
+							</a>
+						</p>
+					</div>
+				</div>
+			</div>
+
+			<div v-else class="signed-in-menu">
+				<div class="row info-row ps-0">
+					<div class="col-auto px-3">
+						<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="round" />
+					</div>
+				</div>
+
+				<div class="row info-row">
+					<div class="col p-0 d-flex flex-column">
+						<span class="username">{{ user?.nickname || user?.name }}</span>
+					</div>
+				</div>
+
+				<div v-if="user?.followers_count !== undefined" class="row info-row stats">
+					<div class="col-6 p-0">
+						<span class="stat-label">{{ $t("account_menu.following") }}</span>
+						<span class="stat-value">{{ user?.following_count ?? 0 }}</span>
+					</div>
+					<div class="col-6 p-0">
+						<span class="stat-label">{{ $t("account_menu.followers") }}</span>
+						<span class="stat-value">{{ user?.followers_count ?? 0 }}</span>
+					</div>
+				</div>
+
+				<div v-if="features.wallet && user?.coins !== null" class="row info-row">
+					<span class="coins">
+						<MGIcon icon="coin" />
+						{{ user?.coins ?? 0 }}
+					</span>
+				</div>
+
+				<div v-if="features.statusOnline" class="row info-row">
+					<div class="status-toggle">
+						<span>{{ $t("account_menu.buttons.show_online") }}</span>
+						<label class="switch">
+							<input v-model="showOnline" type="checkbox" />
+							<span class="slider"></span>
+						</label>
+					</div>
+				</div>
+
+				<div class="row info-row">
+					<a :href="accountsBaseUrl" target="_blank" class="btn btn-primary-outline mt-3">
+						{{ $t("account_menu.buttons.manage_account") }}
+					</a>
+				</div>
+
+				<slot name="extra-menu-items" />
+
+				<div class="row info-row my-3">
+					<button class="logout" type="button" @click="handleLogout">
+						{{ $t("account_menu.buttons.logout") }}
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.ui-config-user {
+	position: absolute;
+	max-width: 240px;
+	width: 100%;
+	padding: 1rem 0;
+	background-color: var(--header-ui-config-bg);
+	border: 1px solid var(--header-ui-config-border);
+	top: 45px;
+	right: 0;
+	z-index: 999;
+	overflow: hidden;
+	transition: all ease 0.5s;
+
+	&:not(.signed-in) {
+		max-width: 340px;
+	}
+
+	&__option {
+		color: var(--sidebar-menus-fg);
+		display: flex;
+		justify-content: space-between;
+		padding: 0 1rem;
+		font-size: 0.875rem;
+		min-height: 48px;
+		align-items: center;
+
+		a {
+			font-size: 16px !important;
+			font-weight: 400;
+		}
+
+		& > div > p {
+			font-size: 15px !important;
+			font-weight: 400;
+			color: var(--sidebar-menus-fg);
+		}
+	}
+
+	&__content {
+		display: flex;
+		justify-content: flex-start;
+		align-items: flex-start;
+		transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
+
+		&__tab {
+			flex: 1 0 100%;
+			width: 100%;
+			background-color: var(--header-ui-config-bg);
+
+			p {
+				color: var(--active);
+				font-size: 12px;
+				padding: 0.5rem 1rem;
+				margin: 0;
+			}
+		}
+	}
+
+	.signed-in-menu {
+		width: 240px;
+		padding: 16px 0;
+		background-color: var(--header-ui-config-bg);
+
+		.row {
+			width: 100%;
+			max-width: 100%;
+			margin-left: auto;
+			margin-right: auto;
+
+			&.info-row {
+				padding: 0 16px;
+			}
+		}
+
+		.round {
+			border-radius: 100%;
+		}
+
+		.no-avatar-wrapper {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 40px;
+			width: 40px;
+			border-radius: 100%;
+			background: #555;
+			color: var(--ck-highlight-marker-blue);
+
+			i {
+				font-size: 1.6rem !important;
+			}
+		}
+
+		.username {
+			margin-top: 4px;
+			line-height: 1.25rem;
+			font-weight: 400;
+			font-size: 0.875rem;
+			color: var(--active);
+		}
+
+		.stats {
+			margin-top: 8px;
+
+			.stat-label {
+				font-size: 0.75rem;
+				color: var(--secondary-info-fg);
+			}
+
+			.stat-value {
+				font-size: 0.875rem;
+				font-weight: 500;
+				color: var(--active);
+				margin-left: 4px;
+			}
+		}
+
+		.coins {
+			display: flex;
+			align-items: center;
+			gap: 4px;
+			font-size: 0.875rem;
+			color: var(--active);
+			margin-top: 8px;
+		}
+
+		.status-toggle {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			margin-top: 8px;
+			font-size: 0.75rem;
+			color: var(--sidebar-menus-fg);
+		}
+
+		.btn-primary-outline {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 32px !important;
+			padding: 0 12px;
+			border: 1px solid var(--ck-highlight-marker-blue);
+			font-weight: 400;
+			font-size: 0.75rem;
+			color: var(--active);
+
+			&:hover,
+			&:active,
+			&:focus {
+				background: var(--ck-highlight-marker-blue);
+			}
+		}
+
+		.logout {
+			margin-top: 14px;
+			background: none;
+			border: none;
+			font-weight: 400;
+			font-size: 0.75rem;
+			color: var(--ck-highlight-marker-blue);
+			width: 100%;
+			display: block;
+			text-align: center;
+			cursor: pointer;
+		}
+	}
+}
+</style>

package/components/ui/MgLoginModal.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { storeToRefs } from "pinia";
+
+const loginStore = useLoginStore();
+const runtimeConfig = useRuntimeConfig();
+const authStore = useAuthStore();
+const { signedIn } = storeToRefs(authStore);
+const accountsBaseUrl = runtimeConfig.public.mgSharedUi?.accountsBaseUrl || runtimeConfig.public.accountsBaseUrl;
+
+defineProps({
+	open: {
+		type: Boolean,
+		default: false,
+	},
+});
+
+const registerUrl = computed(() => {
+	const current = typeof window !== "undefined" ? window.location.href : "";
+	return `${accountsBaseUrl}/register?redirect_to=${current}`;
+});
+
+function close() {
+	loginStore.toggleLoginModalComponent();
+}
+</script>
+
+<template>
+	<div id="mgLoginModal">
+		<a v-if="!signedIn" class="menus__item__option" @click="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">
+						{{ $t("more.login_modal.title") }}
+					</div>
+					<div class="subtitle">
+						{{ $t("more.login_modal.subtitle") }}
+					</div>
+					<div class="buttons">
+						<a v-if="!signedIn" class="btn1" :href="registerUrl">
+							{{ $t("more.login_modal.btn_1") }}
+						</a>
+						<a class="btn2" @click="close()">
+							{{ $t("more.login_modal.btn_2") }}
+						</a>
+					</div>
+				</div>
+			</div>
+		</Teleport>
+	</div>
+</template>
+
+<style lang="scss">
+#mgLoginModal {
+	a {
+		cursor: pointer;
+		margin-left: 5px;
+	}
+
+	.modal {
+		position: fixed;
+		display: block;
+		width: 100%;
+		height: 100vh;
+		z-index: 99999;
+		top: 0;
+		left: 0;
+
+		.modal-backdrop {
+			position: fixed;
+			width: 100%;
+			background-color: rgba(0, 0, 0, 0.5);
+			height: 100vh;
+			z-index: 1;
+			left: 0;
+			top: 0;
+		}
+
+		.pop-up {
+			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;
+
+			.title {
+				font-size: 18px;
+				font-weight: 600;
+				line-height: 26px;
+				color: var(--active);
+			}
+
+			.subtitle {
+				font-size: 14px;
+				font-weight: 400;
+				line-height: 20px;
+				color: var(--active);
+			}
+
+			.buttons {
+				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);
+				}
+			}
+		}
+	}
+
+	@media screen and (max-width: 768px) {
+		.modal .pop-up {
+			width: 100%;
+			margin-top: 50%;
+		}
+	}
+}
+</style>