From 6563396a836d476b99757a8d2ef0771c7ee7dce1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=20Jurmanovi=C4=87?= <fjurma12@outlook.com>
Date: Mon, 22 Sep 2025 22:49:15 +0200
Subject: [PATCH] fix logout issues

---
 src/app/login/page.tsx             | 18 ++++++++++++++++--
 src/components/ui/LogoutButton.tsx |  2 +-
 src/lib/actions/auth.ts            |  4 ++++
 src/lib/api/server/base.ts         |  9 ++-------
 4 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 90e9971..8578791 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -1,7 +1,8 @@
 'use client';
 
-import { loginAction, LoginResult } from '@/lib/actions/auth';
-import { useActionState } from 'react';
+import { loginAction, LoginResult, clearExpiredSessionAction } from '@/lib/actions/auth';
+import { useActionState, useEffect } from 'react';
+import { useSearchParams } from 'next/navigation';
 
 const initialState: LoginResult = {
 	message: '',
@@ -9,7 +10,15 @@ const initialState: LoginResult = {
 };
 
 export default function LoginPage() {
+	const searchParams = useSearchParams();
+	const expired = searchParams.get('expired') === 'true';
 	const [state, formAction] = useActionState(loginAction, initialState);
+
+	useEffect(() => {
+		if (expired) {
+			clearExpiredSessionAction();
+		}
+	}, [expired]);
 	return (
 		<div className="flex min-h-screen items-center justify-center bg-gray-900 px-4">
 			<div className="w-full max-w-md space-y-8 rounded-lg bg-gray-800 p-8 shadow-lg">
@@ -17,6 +26,11 @@ export default function LoginPage() {
 					<h1 className="text-3xl font-bold text-white">ACC Server Manager</h1>
 					<p className="mt-2 text-gray-400">Sign in to manage your servers</p>
 				</div>
+				{expired && (
+					<div className="rounded-md border border-yellow-700 bg-yellow-900/50 p-3 text-sm text-yellow-200">
+						Your session has expired. Please sign in again.
+					</div>
+				)}
 				{state?.success ? null : (
 					<div className="rounded-md border border-red-700 bg-red-900/50 p-3 text-sm text-red-200">
 						{state?.message}
diff --git a/src/components/ui/LogoutButton.tsx b/src/components/ui/LogoutButton.tsx
index ba57d5a..3a3b526 100644
--- a/src/components/ui/LogoutButton.tsx
+++ b/src/components/ui/LogoutButton.tsx
@@ -4,7 +4,7 @@ import { logoutAction } from '@/lib/actions/auth';
 import { useActionState } from 'react';
 
 export default function LogoutButton() {
-	const [_, formAction] = useActionState(logoutAction, null);
+	const [, formAction] = useActionState(logoutAction, null);
 	return (
 		<form action={formAction}>
 			<button type="submit" className="flex items-center text-gray-300 hover:text-white">
diff --git a/src/lib/actions/auth.ts b/src/lib/actions/auth.ts
index 617579d..8fb0e24 100644
--- a/src/lib/actions/auth.ts
+++ b/src/lib/actions/auth.ts
@@ -45,3 +45,7 @@ export async function loginAction(prevState: LoginResult, formData: FormData) {
 export async function logoutAction() {
 	await logout();
 }
+
+export async function clearExpiredSessionAction() {
+	await logout();
+}
diff --git a/src/lib/api/server/base.ts b/src/lib/api/server/base.ts
index 547f4cd..19bb40e 100644
--- a/src/lib/api/server/base.ts
+++ b/src/lib/api/server/base.ts
@@ -6,11 +6,7 @@ type ApiResponse<T> = {
 	message?: string;
 };
 
-import { logout } from '@/lib/auth/server';
-
-const destroySession = async (): Promise<void> => {
-	await logout();
-};
+import { redirect } from 'next/navigation';
 
 export async function fetchServerAPI<T>(
 	endpoint: string,
@@ -32,8 +28,7 @@ export async function fetchServerAPI<T>(
 
 	if (!response.ok) {
 		if (response.status == 401) {
-			await destroySession();
-			return { error: 'unauthorized' };
+			redirect('/login?expired=true');
 		}
 		throw new Error(
 			`API Error: ${response.statusText} - ${method} - ${BASE_URL}${endpoint} - ${token}`