logout functionality

src/app/api/auth/logout/route.ts

@@ -0,0 +1,20 @@
+import { revalidatePath } from "next/cache";
+import { NextRequest } from "next/server";
+import { logout } from "../actions";
+
+const dynamic = 'force-dynamic'
+
+export async function POST(request: NextRequest) {
+	await logout()
+	revalidatePath('/login')
+	const response = {
+		success: true,
+		message: 'Logged out successfully',
+	};
+
+	return new Response(JSON.stringify(response), {
+		headers: {
+			'Content-Type': 'application/json',
+		},
+	});
+}

src/app/layout.tsx

@@ -6,6 +6,9 @@ import "./globals.css";
 import Navlinks from "./ui/navLinks";
 import { ModeToggle } from "./ui/modeToggle";
 import { inter } from "./ui/fonts";
+import { LogOutIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import LogoutButton from "./ui/logoutButton";
 
 
 
@@ -15,7 +18,6 @@ export const metadata: Metadata = {
 };
 
 
-
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -37,7 +39,8 @@ export default function RootLayout({
                 <p className="mt-2 mx-1 text-sm antialiased w-40">The self-hosted literary submission tracker.</p>
               </header>
                 <Navlinks className="mt-6" />
-                <footer className="mt-auto"><ModeToggle /></footer>
+                <footer className="mt-auto flex justify-center"><ModeToggle /><LogoutButton />
+                </footer>
               </div>
               <div className="flex justify-center w-full">
                 {children}

src/app/login/page.tsx

@@ -17,7 +17,8 @@ import Link from "next/link";
 export default function LoginForm() {
 	const router = useRouter()
 	const searchParams = useSearchParams()
-	const redirect = searchParams.get("from") ?? "submission"
+	const redirect = searchParams.get("from") ?? "/submission"
+	console.log(redirect)
 	const form = useForm<z.infer<typeof loginSchema>>({
 		resolver: zodResolver(loginSchema),
 	})

src/app/tailwind.css

@@ -740,10 +740,6 @@ body {
   margin-bottom: 1.5rem;
 }
 
-.mb-4 {
-  margin-bottom: 1rem;
-}
-
 .ml-2 {
   margin-left: 0.5rem;
 }

src/app/ui/logoutButton.tsx

@@ -0,0 +1,22 @@
+"use client"
+import { Button } from "@/components/ui/button"
+import { LogOutIcon } from "lucide-react"
+
+
+async function handleLogout() {
+  const res = await fetch('/api/auth/logout', {
+    method: 'POST',
+    headers: {
+      'Content-type': 'application/json',
+    }
+  })
+  console.log(res)
+  window.location.reload()
+}
+export default function LogoutButton() {
+  return (
+    <Button variant="outline" className="w-fit" onClick={handleLogout} >
+      <LogOutIcon />
+    </Button>
+  )
+}