Merge remote-tracking branch 'origin/main' into xmacna-prod

.directus/docker-compose.yaml

@@ -17,7 +17,7 @@ services:
     image: redis:6
 
   directus:
-    image: directus/directus:10.8.3
+    image: directus/directus:10.13.1
     ports:
       - 8055:8055
     volumes:

components/Logo.vue

@@ -2,7 +2,7 @@
 const appConfig = useAppConfig();
 
 const logo = computed(() => {
-	return appConfig.globals.logo_on_dark_bg;
+	return appConfig.globals?.logo_on_dark_bg;
 });
 
 const props = defineProps({

components/TeamCard.vue

@@ -9,10 +9,12 @@ const flipped = ref(false);
 </script>
 <template>
 	<div class="opacity-0 cursor-pointer select-none animate-fade-in" @click="flipped = !flipped">
-		<div class="relative w-full h-full overflow-hidden group rounded-card">
+		<div class="relative w-full aspect-square overflow-hidden group rounded-card">
 			<!-- Front of Team Card -->
 			<NuxtImg
 				v-if="person.image"
+				width="400"
+				height="400"
 				class="object-cover w-full h-full transition duration-300 grayscale group-hover:grayscale-0"
 				:src="person.image as string"
 				:alt="person.name ?? ''"
@@ -25,23 +27,21 @@ const flipped = ref(false);
 				class="absolute inset-0 p-2 -m-2 overflow-hidden bg-primary/80 backdrop-blur-sm"
 				:initial="{
 					opacity: 0,
-					y: 100,
-					x: 100,
+					y: 25,
+					x: 200,
 					scale: 0.9,
 				}"
 				:enter="{
 					opacity: 1,
 					scale: 1,
 					x: 0,
 					y: 0,
-					transformOrigin: 'bottom right',
 				}"
 				:leave="{
 					opacity: 0,
 					scale: 0.9,
-					x: 100,
-					y: 100,
-					transformOrigin: 'bottom right',
+					x: 200,
+					y: 25,
 				}"
 			>
 				<div class="relative p-4 space-y-2">
@@ -69,7 +69,7 @@ const flipped = ref(false);
 				<TypographyHeadline v-if="person.name" :content="person.name" size="sm" class="text-white drop-shadow">
 					{{ person?.name }}
 				</TypographyHeadline>
-				<TypographyTitle v-if="person.job_title">
+				<TypographyTitle v-if="person.job_title" class="text-white/50">
 					{{ person?.job_title }}
 				</TypographyTitle>
 			</div>

components/base/UForm.vue

@@ -58,7 +58,8 @@ watch(
 		<div class="mb-4">
 			<VAlert v-if="error" type="error">Oops! {{ error }}</VAlert>
 			<VAlert v-if="form.on_success === 'message' && success" type="success">
-				{{ form.success_message ?? 'Successo! Seu formulário foi enviado.' }}
+				<div v-if="form.success_message" v-dompurify-html="form.success_message"></div>
+				<p v-else>Success! Your form has been submitted.</p>
 			</VAlert>
 		</div>
 		<div>

components/blocks/Columns.vue

@@ -23,28 +23,27 @@ defineProps<{
 					<BlocksButtonGroup v-if="row?.button_group" :data="row?.button_group as BlockButtonGroup" class="mt-4" />
 				</div>
 				<div
-					class="order-first block w-full overflow-hidden border aspect-square dark:border-gray-700 rounded-card"
+					v-if="row.image"
+					v-motion
+					class="order-first block w-full h-full overflow-hidden border dark:border-gray-700 rounded-card"
+					:initial="{ opacity: 0, scale: 0.5, y: 0 }"
+					:visibleOnce="{ opacity: 1, scale: 1, y: 0 }"
+					:duration="1000"
+					:delay="250"
 					:class="[
 						{
 							'lg:order-last': row?.image_position === 'right',
 							'lg:order-first': row?.image_position === 'left',
 						},
 					]"
 				>
-					<div
-						v-motion
-						:initial="{ opacity: 0, scale: 0.8, y: 50 }"
-						:visibleOnce="{ opacity: 1, scale: 1, y: 0 }"
-						:duration="1000"
-						:delay="250"
-					>
-						<NuxtImg
-							v-if="row.image"
-							:alt="safeRelation(row.image)?.description ?? ''"
-							:src="safeRelationId(row.image) ?? ''"
-							class="object-cover object-center w-full h-full bg-gray-100 rounded-card dark:brightness-90"
-						/>
-					</div>
+					<NuxtImg
+						:alt="safeRelation(row.image)?.description ?? ''"
+						:src="safeRelationId(row.image) ?? ''"
+						height="600"
+						width="600"
+						class="object-cover object-center w-full h-full bg-gray-100 rounded-card dark:brightness-90"
+					/>
 				</div>
 			</div>
 		</div>

components/navigation/MobileMenu.vue

@@ -69,7 +69,7 @@ watch(
 					<NuxtLink href="/">
 						<Logo class="h-6 dark:text-white" />
 					</NuxtLink>
-					<VText v-if="globals.tagline" class="pb-4 mt-2">
+					<VText v-if="globals?.tagline" class="pb-4 mt-2">
 						{{ globals.tagline }}
 					</VText>
 				</div>

components/navigation/TheFooter.vue

@@ -68,7 +68,7 @@ const { data: form } = await useAsyncData(
 					<NuxtLink href="/">
 						<Logo class="h-8 dark:text-white" />
 					</NuxtLink>
-					<VText v-if="globals.tagline" text-color="light" class="mt-2">
+					<VText v-if="globals?.tagline" text-color="light" class="mt-2">
 						{{ globals.tagline }}
 					</VText>
 				</div>
@@ -106,7 +106,7 @@ const { data: form } = await useAsyncData(
 		<div class="pt-6 mx-auto border-t dark:border-t-gray-700 max-w-7xl md:flex md:items-center md:justify-between">
 			<div class="flex items-center justify-center space-x-6 md:order-last md:mb-0">
 				<NuxtLink
-					v-for="link in globals.social_links"
+					v-for="link in globals?.social_links"
 					:key="link.url"
 					:href="link.url"
 					class="w-6 h-6 text-white"
@@ -118,9 +118,11 @@ const { data: form } = await useAsyncData(
 			</div>
 			<div class="mt-8 md:mt-0 md:order-1">
 				<span class="mt-2 text-gray-600 dark:text-gray-400">
-					Copyright © 2023 - {{ new Date().getFullYear() }}
-					<NuxtLink href="/" class="mx-2 hover:text-primary" rel="noopener noreferrer">{{ globals.title }}.</NuxtLink>
-					Todos os direitos reservados.
+					Copyright © 1988 - {{ new Date().getFullYear() }}
+					<NuxtLink v-if="globals?.title" href="/" class="mx-2 hover:text-primary" rel="noopener noreferrer">
+						{{ globals.title }}.
+					</NuxtLink>
+					All rights reserved.
 				</span>
 				<!-- You're free to remove this footer if you want. But we'd appreciate it if you keep the credits. -->
 				<span class="block mt-2 text-gray-600 dark:text-gray-400">

components/navigation/TheHeader.vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
-const {
-	theme,
-	globals: { title },
-} = useAppConfig();
+const { theme, globals } = useAppConfig();
 
 const {
 	data: navigation,
@@ -54,7 +51,7 @@ const {
 		<div class="flex items-center bg-gray-900 justify-between py-2 px-6 md:flex-1 rounded-card">
 			<NuxtLink href="/" class="py-2">
 				<Logo class="h-6 text-white" />
-				<span class="sr-only">{{ title }}</span>
+				<span v-if="globals?.title" class="sr-only">{{ globals.title }}</span>
 			</NuxtLink>
 			<nav class="hidden md:flex md:space-x-4 lg:space-x-6" aria-label="Global">
 				<NavigationMenuItem v-for="item in navigation?.items" :key="item.id" :item="item" />

modules/directus/index.ts

@@ -160,38 +160,52 @@ export default defineNuxtModule({
 		const directus = createDirectus<Schema>(moduleOptions.rest.baseUrl).with(rest());
 
 		// Handle Redirects
-		const redirects = await directus.request(readItems('redirects'));
+		try {
+			const redirects = await directus.request(readItems('redirects'));
+
+			for (const redirect of redirects) {
+				let responseCode = redirect.response_code ? parseInt(redirect.response_code as any) : 301;
+
+				if (responseCode !== 301 && responseCode !== 302) {
+					responseCode = 301;
+				}
+
+				// Add the redirect to the route rules
+				// https://nuxt.com/docs/guide/concepts/rendering#route-rules
+				extendRouteRules(redirect.url_old as string, {
+					redirect: {
+						to: redirect.url_new,
+						statusCode: responseCode as 301 | 302,
+					},
+				});
+			}
 
-		for (const redirect of redirects) {
-			let responseCode = redirect.response_code ? parseInt(redirect.response_code as any) : 301;
+			log.success(`${redirects.length} Redirects loaded`);
 
-			if (responseCode !== 301 && responseCode !== 302) {
-				responseCode = 301;
+			for (const redirect of redirects) {
+				log.info(`  • ${redirect.response_code}`, `From: ${redirect.url_old}`, `To: ${redirect.url_new}`);
 			}
-
-			// Add the redirect to the route rules
-			// https://nuxt.com/docs/guide/concepts/rendering#route-rules
-			extendRouteRules(redirect.url_old as string, {
-				redirect: {
-					to: redirect.url_new,
-					statusCode: responseCode as 301 | 302,
-				},
-			});
+		} catch (error) {
+			log.warn('Unable to load redirects due to the following error');
+			log.error(error);
+			log.warn(`Please ensure the directus instance is reachable at ${moduleOptions.rest.baseUrl}.`);
 		}
 
-		log.success(`${redirects.length} Redirects loaded`);
-
-		for (const redirect of redirects) {
-			log.info(`  • ${redirect.response_code}`, `From: ${redirect.url_old}`, `To: ${redirect.url_new}`);
-		}
+		try {
+			// Add Globals
+			const globals = await directus.request<Omit<Globals, 'id' | 'url'>>(readSingleton('globals'));
+			nuxt.options.appConfig.globals = defu(nuxt.options.appConfig.globals, globals);
+			log.success('Globals loaded into appConfig');
 
-		// Add Globals
-		const globals = await directus.request<Omit<Globals, 'id' | 'url'>>(readSingleton('globals'));
-		nuxt.options.appConfig.globals = defu(nuxt.options.appConfig.globals, globals);
-		log.success('Globals loaded into appConfig');
+			// Add title template to the app head for use with useHead composable
+			nuxt.options.app.head.titleTemplate = `%s - ${globals?.title ?? 'Agency OS'}`;
+		} catch (error) {
+			nuxt.options.app.head.titleTemplate = '%s - Agency OS';
 
-		// Add title template to the app head for use with useHead composable
-		nuxt.options.app.head.titleTemplate = `%s - ${globals?.title ?? 'Agency OS'}`;
+			log.warn('Unable to load redirects due to the following error');
+			log.error(error);
+			log.warn(`Please ensure the directus instance is reachable at ${moduleOptions.rest.baseUrl}.`);
+		}
 
 		log.success(`Directus Module Loaded`);
 	},

modules/directus/runtime/composables/useDirectusAuth.ts

@@ -1,4 +1,3 @@
-import jwtDecode from 'jwt-decode';
 import { readMe, passwordRequest, passwordReset } from '@directus/sdk';
 import type { RestClient, AuthenticationClient } from '@directus/sdk';
 import type { Schema } from '~/types/schema';
@@ -60,18 +59,11 @@ export default function useDirectusAuth<DirectusSchema extends object>() {
 		user.value = response as User;
 	}
 
-	async function isTokenExpired(token: string) {
-		const decodedToken = jwtDecode(token) as { exp: number };
-		const expirationDate = new Date(decodedToken.exp * 1000);
-		return expirationDate < new Date();
-	}
-
 	return {
 		user,
 		login,
 		logout,
 		fetchUser,
-		isTokenExpired,
 		_loggedIn,
 	};
 }

modules/directus/runtime/plugins/directus.ts

@@ -1,52 +1,16 @@
 import { createDirectus, rest, authentication } from '@directus/sdk';
-import type { AuthenticationClient, RestClient, AuthenticationStorage, AuthenticationData } from '@directus/sdk';
 import type { Schema } from '~/types/schema';
 
-import {
-	defineNuxtPlugin,
-	addRouteMiddleware,
-	useRuntimeConfig,
-	useState,
-	useDirectusAuth,
-	useRoute,
-	useNuxtApp,
-} from '#imports';
+import { defineNuxtPlugin, useRuntimeConfig, useRoute } from '#imports';
 
 export default defineNuxtPlugin((nuxtApp) => {
 	const route = useRoute();
 	const config = useRuntimeConfig();
-	const directusUrl = config.public.directus.rest.baseUrl as string;
+	const directusURL = config.public.directus.rest.baseUrl as string;
 
-	const { isTokenExpired } = useDirectusAuth();
-
-	// We're creating a custom storage class to use the Nuxt so we can use auth on the server and clien
-	class CookieStorage {
-		get() {
-			const cookie = useCookie('directus-auth');
-			return cookie.value;
-		}
-
-		set(value: AuthenticationData) {
-			const cookie = useCookie('directus-auth');
-			cookie.value = value as any;
-		}
-	}
-
-	const directus: RestClient<Schema> & AuthenticationClient<Schema> = createDirectus<Schema>(directusUrl, {
-		globals: {
-			fetch: $fetch, // We're using the built-in Nuxt $fetch from ofetch
-		},
-	})
-		.with(authentication('json', { storage: new CookieStorage() as AuthenticationStorage, credentials: 'include' }))
-		.with(
-			rest({
-				onRequest: async (request) => {
-					const userToken = await directus.getToken();
-
-					return request;
-				},
-			}),
-		);
+	const directus = createDirectus<Schema>(directusURL, { globals: { fetch: $fetch } })
+		.with(authentication('cookie', { credentials: 'include' }))
+		.with(rest({ credentials: 'include' }));
 
 	// ** Live Preview Bits **
 	// Check if we are in preview mode