fix: #142 fix logout process

skni-kod · Dec 22, 2024 · 194822b · 194822b
1 parent fd94222
commit 194822b
Show file tree

Hide file tree

Showing 9 changed files with 111 additions and 95 deletions.
diff --git a/src/app/api/logout/route.ts b/src/app/api/logout/route.ts
diff --git a/src/app/auth/logout/page.tsx b/src/app/auth/logout/page.tsx
diff --git a/src/app/auth/logout/route.ts b/src/app/auth/logout/route.ts
@@ -0,0 +1,20 @@
+import { NextRequest } from 'next/server';
+import AuthService from '@/services/auth/authService';
+
+const ACCESS_TOKEN_COOKIE = 'AUTH_CONTEXT';
+const REFRESH_TOKEN_COOKIE = 'AUTH_PERSIST';
+
+export async function GET(req: NextRequest) {
+	const domain = req.headers.get('host')?.split(':')[0];
+	const headers: HeadersInit = new Headers();
+	headers.append('Set-Cookie', `${ACCESS_TOKEN_COOKIE}=; Domain=${domain}; Path=/; Max-Age=0; SameSite=Lax; HttpOnly`);
+	headers.append('Set-Cookie', `${REFRESH_TOKEN_COOKIE}=; Domain=${domain}; Path=/; Max-Age=0; SameSite=Lax; HttpOnly`);
+
+	//await AuthService.logout();
+
+	const redirectUrl = new URL(req.nextUrl.origin);
+	redirectUrl.searchParams.append('logout', '');
+
+	//return NextResponse.redirect(req.nextUrl.origin, { status: HttpStatusCode.PermanentRedirect, headers });
+	return Response.json({ message: redirectUrl.toString() });
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -2,11 +2,12 @@ import { Metadata } from 'next';
 
 import HomePageContent from '@/components/home/HomePageContent';
 import { PAGE_TITLE } from '@/utils/constant';
+import PageQueryProps from '@/utils/types/page/pageQueryProps';
 
 export const metadata: Metadata = {
 	title: PAGE_TITLE.HOME,
 };
 
-export default function Home() {
-	return <HomePageContent />;
+export default async function Home({ searchParams }: PageQueryProps<{ logout: string }>) {
+	return <HomePageContent searchParams={await searchParams} />;
 }
diff --git a/src/components/auth/AuthProvidersBtns.tsx b/src/components/auth/AuthProvidersBtns.tsx
@@ -10,6 +10,7 @@ import AuthService from '@/services/auth/authService';
 import { ProviderLiResponse } from '@/services/auth/types';
 import { TEXT } from '@/utils/constant';
 import useFetchState, { Status } from '@/utils/hooks/useFetchState';
+import { capitalize } from '@/utils/methods';
 
 const PROVIDERS: { name: string; icoType: IconType; icoColor: string }[] = [
 	{
@@ -51,13 +52,15 @@ export default function AuthProvidersBtns() {
 				<button
 					key={index}
 					onClick={() => router.push(authorize)}
-					className="flex items-center gap-2 rounded-lg border border-secondary bg-bg px-4 py-2 hover:bg-bgHover hover:text-primaryHover"
+					className="p-0.25 flex w-72 items-center rounded-lg border border-secondary bg-bg px-2 hover:bg-bgHover"
 				>
-					{React.createElement(PROVIDERS_MAP[provider].icoType, {
-						className: PROVIDERS_MAP[provider].icoColor,
-						style: iconStyles,
-					})}
-					<h3 className="text-center text-sm md:text-base">{`${TEXT.AUTH.CONTINUE_WITH} ${provider.toUpperCase()}`}</h3>
+					<span className="flex aspect-square h-12 items-center justify-center">
+						{React.createElement(PROVIDERS_MAP[provider].icoType, {
+							className: PROVIDERS_MAP[provider].icoColor,
+							style: iconStyles,
+						})}
+					</span>
+					<h3 className="text-sm md:text-base">{`${TEXT.AUTH.CONTINUE_WITH} ${capitalize(provider)}`}</h3>
 				</button>
 			))}
 		</>

diff --git a/src/components/home/HomePageContent.tsx b/src/components/home/HomePageContent.tsx
@@ -1,10 +1,26 @@
-import React from 'react';
+'use client';
+import React, { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
 
 import HomeShowSection from '@/components/home/HomeShowSection';
 import Container from '@/components/layout/Container';
 import PageContent from '@/components/layout/PageContent';
 
-export default function HomePageContent() {
+interface HomePageContentProps {
+	searchParams?: { logout: string };
+}
+
+export default function HomePageContent({ searchParams }: HomePageContentProps) {
+	const router = useRouter();
+
+	useEffect(() => {
+		if (searchParams?.logout !== undefined) {
+			const url = new URL(window.location.href + '/auth');
+			url.searchParams.delete('logout');
+			router.replace(url.toString());
+		}
+	}, [searchParams, router]);
+
 	return (
 		<PageContent noHeader noContainer>
 			<HomeShowSection />

diff --git a/src/components/layout/navbar/right/UserDropDownMenu.tsx b/src/components/layout/navbar/right/UserDropDownMenu.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { IconType } from 'react-icons';
 import {
 	IoDocumentOutline,
@@ -32,57 +32,59 @@ interface UserDropDownMenuProps {
 export default function UserDropDownMenu({ menuClassName }: UserDropDownMenuProps) {
 	const { session } = useSessionContext();
 
-	const menus: MenuLink[] = [
-		{
-			type: Menu.LINK,
-			label: USER_NAV_MENU.LINK.USER_ACCOUNT,
-			icon: IoPersonOutline,
-			href: `/users/${session?.user.id}`,
-		},
-		{
-			type: Menu.HEADER,
-			label: 'ZAWARTOŚĆ',
-		},
-		{
-			type: Menu.LINK,
-			label: USER_NAV_MENU.LINK.YOUR_MATERIALS,
-			icon: IoDocumentOutline,
-			href: `/materials/users/${session?.user.id}`,
-			isParsed: true,
-		},
-		{
-			type: Menu.HEADER,
-			label: 'ADMINISTRACJA',
-		},
-		{
-			type: Menu.LINK,
-			label: USER_NAV_MENU.LINK.USERS_MATERIALS,
-			icon: IoFileTrayOutline,
-			href: '/materials/manage',
-		},
-		{
-			type: Menu.LINK,
-			label: USER_NAV_MENU.LINK.USERS,
-			icon: IoPersonOutline,
-			href: '/users/manage',
-		},
-		{
-			type: Menu.HEADER,
-			label: 'KONTO',
-		},
-		{
-			type: Menu.LINK,
-			label: USER_NAV_MENU.LINK.SETTINGS,
-			icon: IoSettingsOutline,
-			href: '/settings',
-		},
-		{
-			type: Menu.LINK,
-			label: USER_NAV_MENU.LINK.LOGOUT,
-			icon: IoLogOutOutline,
-			href: '/api/logout',
-		},
-	];
+	const menus: MenuLink[] = useMemo(() => {
+		return [
+			{
+				type: Menu.LINK,
+				label: USER_NAV_MENU.LINK.USER_ACCOUNT,
+				icon: IoPersonOutline,
+				href: `/users/${session?.user.id}`,
+			},
+			{
+				type: Menu.HEADER,
+				label: 'ZAWARTOŚĆ',
+			},
+			{
+				type: Menu.LINK,
+				label: USER_NAV_MENU.LINK.YOUR_MATERIALS,
+				icon: IoDocumentOutline,
+				href: `/materials/users/${session?.user.id}`,
+				isParsed: true,
+			},
+			{
+				type: Menu.HEADER,
+				label: 'ADMINISTRACJA',
+			},
+			{
+				type: Menu.LINK,
+				label: USER_NAV_MENU.LINK.USERS_MATERIALS,
+				icon: IoFileTrayOutline,
+				href: '/materials/manage',
+			},
+			{
+				type: Menu.LINK,
+				label: USER_NAV_MENU.LINK.USERS,
+				icon: IoPersonOutline,
+				href: '/users/manage',
+			},
+			{
+				type: Menu.HEADER,
+				label: 'KONTO',
+			},
+			{
+				type: Menu.LINK,
+				label: USER_NAV_MENU.LINK.SETTINGS,
+				icon: IoSettingsOutline,
+				href: '/settings',
+			},
+			{
+				type: Menu.LINK,
+				label: USER_NAV_MENU.LINK.LOGOUT,
+				icon: IoLogOutOutline,
+				href: '/auth/logout',
+			},
+		];
+	}, [session?.user.id]);
 
 	return (
 		<div className={`${menuClassName} w-60 bg-bg px-2 pb-2 pt-1 text-base font-normal shadow-md`}>

diff --git a/src/utils/methods/index.ts b/src/utils/methods/index.ts
@@ -117,3 +117,8 @@ export function calculateTimeDifference(createdDate: string) {
 		return 'Mniej niż 1 minutę temu';
 	}
 }
+
+export const capitalize = (text: string) => {
+	if (!text) return '';
+	return text.charAt(0).toUpperCase() + text.slice(1);
+};
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -41,6 +41,7 @@ const config: Config = {
 				nav: '3.75rem',
 				fullContent: 'calc(100vh - 3.5rem - 0.5rem - 0.5rem)',
 				navMenu: '2.625rem',
+				'13': '3.25rem',
 			},
 			inset: {
 				nav: '3.75rem',
@@ -67,6 +68,7 @@ const config: Config = {
 				fullContent: 'calc(100vh - 3.5rem - 0.5rem - 0.5rem)',
 			},
 			padding: {
+				'0.25': '0.0625rem',
 				'1/2': '50%',
 				'1/4': '25%',
 				nav: '3.75rem',