login implemented

actions/login.action.ts

@@ -0,0 +1,9 @@
+"use server";
+
+export function CheckLoggedIn(username: string, password: string) {
+	if (
+		username === process.env.ADMIN_USERNAME &&
+		password === process.env.ADMIN_PASSWORD
+	) {
+	}
+}

app/(auth)/admin/page.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const AdminPage = () => {
+  return (
+    <div>AdminPage</div>
+  )
+}
+
+export default AdminPage

app/(auth)/layout.tsx

@@ -0,0 +1,11 @@
+export default function PageLayout({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	return (
+		<main className="flex flex-col min-h-screen">
+			<div className="flex-grow flex-1">{children}</div>
+		</main>
+	);
+}

app/(auth)/login/page.tsx

@@ -0,0 +1,64 @@
+"use client";
+import React, { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+
+const LoginPage = () => {
+	const [username, setUsername] = useState("");
+	const [password, setPassword] = useState("");
+	const [error, setError] = useState("");
+	const router = useRouter();
+
+	const handleLogin = async (e: React.FormEvent) => {
+		e.preventDefault();
+
+		const response = await fetch("/api/login", {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+			},
+			body: JSON.stringify({ username, password }),
+		});
+
+		if (response.ok) {
+			router.push("/admin");
+		} else {
+			const data = await response.json();
+			setError(data.message);
+		}
+	};
+
+	return (
+		<div className="max-w-xl h-screen flex justify-center bg-gray-900 flex-col container">
+			<h1 className="text-3xl font-bold mb-4">SVRJS ADMIN PANEL</h1>
+			{error && <p className="text-red-500 mb-4">{error}</p>}
+			<form onSubmit={handleLogin}>
+				<div className="mb-4">
+					<input
+						type="text"
+						id="username"
+						placeholder="Username"
+						value={username}
+						onChange={(e) => setUsername(e.target.value)}
+						className="mt-1 block w-full bg-gray-800 rounded-full px-5 py-2 shadow-sm p-2"
+					/>
+				</div>
+				<div className="mb-4">
+					<input
+						type="password"
+						placeholder="Password"
+						id="password"
+						value={password}
+						onChange={(e) => setPassword(e.target.value)}
+						className="mt-1 block w-full bg-gray-800 rounded-full px-5 py-2 shadow-sm"
+					/>
+				</div>
+				<Button type="submit" className="w-full rounded-full" size={"lg"}>
+					Login
+				</Button>
+			</form>
+		</div>
+	);
+};
+
+export default LoginPage;

app/(root)/layout.tsx

@@ -0,0 +1,16 @@
+import Footer from "@/components/shared/Footer";
+import Navbar from "@/components/shared/Navbar";
+
+export default function PageLayout({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	return (
+		<main className="flex flex-col min-h-screen">
+			<Navbar />
+			<div className="flex-grow flex-1">{children}</div>
+			<Footer />
+		</main>
+	);
+}

app/api/login/route.ts

@@ -0,0 +1,31 @@
+import { NextRequest, NextResponse } from "next/server";
+import { serialize } from "cookie";
+
+export async function POST(request: NextRequest) {
+	const { username, password } = await request.json();
+
+	const adminUsername = process.env.ADMIN_USERNAME;
+	const adminPassword = process.env.ADMIN_PASSWORD;
+
+	if (username === adminUsername && password === adminPassword) {
+		const cookie = serialize("auth", "authenticated", {
+			httpOnly: true,
+			path: "/",
+			maxAge: 60 * 60 * 24, // 1 day
+		});
+
+		return new NextResponse(JSON.stringify({ message: "Login successful" }), {
+			headers: {
+				"Set-Cookie": cookie,
+				"Content-Type": "application/json",
+			},
+		});
+	}
+
+	return new NextResponse(JSON.stringify({ message: "Invalid credentials" }), {
+		status: 401,
+		headers: {
+			"Content-Type": "application/json",
+		},
+	});
+}

app/layout.tsx

@@ -2,8 +2,6 @@ import type { Metadata } from "next";
 import { Poppins } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "@/components/shared/providers/themeprovider";
-import Navbar from "@/components/shared/Navbar";
-import Footer from "@/components/shared/Footer";
 
 const poppins = Poppins({
 	weight: ["400", "600", "700", "900"],
@@ -29,11 +27,7 @@ export default function RootLayout({
 					enableSystem
 					disableTransitionOnChange
 				>
-          <main className="flex flex-col min-h-screen">
+					{children}
-            <Navbar />
-            <div className="flex-grow flex-1">{children}</div>
-            <Footer />
-          </main>
 				</ThemeProvider>
 			</body>
 		</html>

middleware.ts

@@ -0,0 +1,21 @@
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+
+export function middleware(req: NextRequest) {
+	const url = req.nextUrl.clone();
+
+	if (url.pathname.startsWith("/admin")) {
+		const authCookie = req.cookies.get("auth");
+
+		if (!authCookie) {
+			url.pathname = "/login";
+			return NextResponse.redirect(url);
+		}
+	}
+
+	return NextResponse.next();
+}
+
+export const config = {
+	matcher: ["/admin/:path*"],
+};

package-lock.json

@@ -17,8 +17,10 @@
         "@radix-ui/react-navigation-menu": "^1.1.4",
         "@radix-ui/react-slot": "^1.0.2",
         "@radix-ui/themes": "^3.0.5",
+        "@types/cookie": "^0.6.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
+        "cookie": "^0.6.0",
         "framer-motion": "^11.2.10",
         "lucide-react": "^0.394.0",
         "mini-svg-data-uri": "^1.4.4",
@@ -1909,6 +1911,11 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -2620,6 +2627,14 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
+    "node_modules/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",

package.json

@@ -18,8 +18,10 @@
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/themes": "^3.0.5",
+    "@types/cookie": "^0.6.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "cookie": "^0.6.0",
     "framer-motion": "^11.2.10",
     "lucide-react": "^0.394.0",
     "mini-svg-data-uri": "^1.4.4",