Merge pull request #329 from claushaas/dev

fix login, logout and register
claushaas · Aug 7, 2024 · 80cbc1f · 80cbc1f
2 parents c9dbdf7 + e1e4573
commit 80cbc1f
Show file tree

Hide file tree

Showing 6 changed files with 296 additions and 216 deletions.
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -57,7 +57,7 @@ export default function Index() {
 
 				<section id='services' className='my-20 sm:my-40 max-w-[95%] sm:max-w-[90%] mx-auto flex justify-center'>
 					<div className='max-w-screen-lg w-full'>
-						<h1 className='text-purple-11 text-3xl xs:text-5xl md:text-6xl lg:text-7xl text-left mb-5 text-center'>Conheça nossos Serviços</h1>
+						<h1 className='text-purple-11 text-3xl xs:text-5xl md:text-6xl lg:text-7xl mb-5 text-center'>Conheça nossos Serviços</h1>
 
 						<div className='flex justify-center flex-wrap gap-10'>
 							<div className='w-60 shrink-0 p-5 shadow-sm shadow-mauve-11 dark:shadow-mauvedark-3 bg-mauve-4 dark:bg-mauvedark-3 rounded-2xl flex flex-col justify-center items-center gap-5'>

diff --git a/app/routes/login.tsx b/app/routes/login.tsx
@@ -81,8 +81,6 @@ export const action = defineAction(async ({request}: ActionFunctionArgs) => {
 		userSession.set('firstName', firstName);
 		userSession.set('lastName', lastName);
 		userSession.set('phoneNumber', phoneNumber);
-
-		return redirect('/courses');
 	} catch (error) {
 		logger.logError(`Error logging in: ${(error as Error).message}`);
 

diff --git a/app/routes/logout.tsx b/app/routes/logout.tsx
@@ -1,9 +1,11 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 import * as RadixForm from '@radix-ui/react-form';
 import {
 	type ActionFunctionArgs,
 	type LoaderFunctionArgs,
 	unstable_defineAction as defineAction,
 	unstable_defineLoader as defineLoader,
+	unstable_data as data,
 } from '@remix-run/node';
 import {
 	Form,
@@ -21,12 +23,23 @@ import {NavigateBar} from '~/components/navigation-bar.js';
 export const meta = ({data}: MetaArgs_SingleFetch<typeof loader>) => [
 	{title: 'Yoga em Movimento - Sair'},
 	{name: 'description', content: 'Faça o logout da plataforma do Yoga em Movimento.'},
-	...data!.meta,
+	...(data! as {
+		meta: Array<{
+			tagName: string;
+			rel: string;
+			href: string;
+		}>;
+		userData: TypeUserSession;
+	}).meta,
 ];
 
 export const loader = defineLoader(async ({request}: LoaderFunctionArgs) => {
 	const userSession = await getUserSession(request.headers.get('Cookie'));
 
+	if (!userSession.data.id) {
+		return redirect('/');
+	}
+
 	return {
 		meta: [{tagName: 'link', rel: 'canonical', href: new URL('/logout', request.url).toString()}],
 		userData: userSession.data as TypeUserSession,
@@ -36,15 +49,20 @@ export const loader = defineLoader(async ({request}: LoaderFunctionArgs) => {
 export const action = defineAction(async ({request}: ActionFunctionArgs) => {
 	const userSession = await getUserSession(request.headers.get('Cookie'));
 
-	await destroyUserSession(userSession);
-
-	return redirect('/');
+	return data({}, {headers: {'Set-Cookie': await destroyUserSession(userSession)}});
 });
 
 export default function Logout() {
 	const navigation = useNavigation();
 	const isSubmitting = navigation.formAction === '/logout';
-	const {userData} = useLoaderData<typeof loader>();
+	const {userData} = useLoaderData<typeof loader>() as {
+		meta: Array<{
+			tagName: string;
+			rel: string;
+			href: string;
+		}>;
+		userData: TypeUserSession;
+	};
 
 	return (
 		<>

diff --git a/app/routes/register.tsx b/app/routes/register.tsx
@@ -1,15 +1,18 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 import {useState} from 'react';
 import * as RadixForm from '@radix-ui/react-form';
 import {
 	type ActionFunctionArgs,
 	type LoaderFunctionArgs,
 	unstable_defineAction as defineAction,
 	unstable_defineLoader as defineLoader,
+	unstable_data as data,
 } from '@remix-run/node';
 import {
 	Form,
 	Link,
 	type MetaArgs_SingleFetch,
+	redirect,
 	useLoaderData,
 	useNavigation,
 } from '@remix-run/react';
@@ -28,12 +31,25 @@ import {NavigateBar} from '~/components/navigation-bar.js';
 export const meta = ({data}: MetaArgs_SingleFetch<typeof loader>) => [
 	{title: 'Yoga em Movimento - Cadastro'},
 	{name: 'description', content: 'Crie sua conta no Yoga em Movimento e tenha acesso a conteúdos exclusivos.'},
-	...data!.meta,
+	...(data! as {
+		error: string | undefined;
+		success: string | undefined;
+		meta: Array<{
+			tagName: string;
+			rel: string;
+			href: string;
+		}>;
+		userData: TypeUserSession;
+	}).meta,
 ];
 
 export const loader = defineLoader(async ({request}: LoaderFunctionArgs) => {
 	const userSession = await getUserSession(request.headers.get('Cookie'));
 
+	if (userSession.data.id) {
+		return redirect('/courses');
+	}
+
 	return {
 		error: userSession.get('error') as string | undefined,
 		success: userSession.get('success') as string | undefined,
@@ -67,13 +83,20 @@ export const action = defineAction(async ({request}: ActionFunctionArgs) => {
 		userSession.flash('error', (error as CustomError).message);
 	}
 
-	await commitUserSession(userSession);
-
-	return null;
+	return data({}, {headers: {'Set-Cookie': await commitUserSession(userSession)}});
 });
 
 export default function Register() {
-	const {success, error, userData} = useLoaderData<typeof loader>();
+	const {success, error, userData} = useLoaderData<typeof loader>() as {
+		error: string | undefined;
+		success: string | undefined;
+		meta: Array<{
+			tagName: string;
+			rel: string;
+			href: string;
+		}>;
+		userData: TypeUserSession;
+	};
 
 	const navigation = useNavigation();
 	const isSubmitting = navigation.formAction === '/register';