...

src/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,53 @@
+import { pool } from "@/lib/db";
+import NextAuth, { SessionStrategy } from "next-auth";
+import CredentialsProvider from "next-auth/providers/credentials";
+import bcrypt from "bcryptjs";
+
+export const authOptions = {
+  providers: [
+    CredentialsProvider({
+      name: "Credentials",
+      credentials: {
+        username: { label: "Username", type: "text", placeholder: "jsmith" },
+        password: { label: "Password", type: "password" },
+      },
+      async authorize(credentials) {
+        if (!credentials?.username || !credentials?.password) {
+          return null;
+        }
+
+        try {
+          const result = await pool.query(
+            "SELECT * FROM users WHERE username = $1",
+            [credentials.username],
+          );
+
+          const user = result.rows[0];
+
+          if (!user) {
+            return null;
+          }
+
+          const isValidPassword = await bcrypt.compare(
+            credentials.password,
+            user.password,
+          );
+          if (!isValidPassword) return null;
+
+          return {
+            id: user.id,
+            username: user.username,
+          };
+        } catch (error) {
+          console.error("Auth error:", error);
+          return null;
+        }
+      },
+    }),
+  ],
+  session: { strategy: "jwt" as SessionStrategy },
+  pages: { signIn: "/login" },
+};
+
+const handler = NextAuth(authOptions);
+export { handler as GET, handler as POST };

src/app/api/users/[...slug]/route.ts

@@ -0,0 +1,22 @@
+import { UserController } from "@/lib/db";
+import { NextRequest } from "next/server";
+
+async function handler(
+  req: NextRequest,
+  { params }: { params: { slug: string[] } },
+) {
+  const { slug } = params;
+  if (slug.length !== 1) {
+    return new Response("Invalid slug", { status: 400 });
+  }
+  
+  if (req.method === "GET") {
+    return UserController.getUsers();
+  } else if (req.method === "POST") {
+    return UserController.createUser(await req.json());
+  } else {
+    return new Response("Method not allowed", { status: 405 });
+  }
+}
+
+export { handler as GET, handler as POST };

src/app/api/users/route.ts

@@ -0,0 +1,7 @@
+import { UserController } from "@/lib/db";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET() {
+  const users = await UserController.getUsers();
+  return NextResponse.json(users, { status: 200 });
+}

src/app/login/page.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import LightButton from "@/components/buttons/LightButton";
+import ACard from "@/components/cards/ACard";
+import Input from "@/components/Input";
+import NavbarCenterWrapper from "@/components/NavbarCenterWrapper";
+import { useRef } from "react";
+
+export default function Login() {
+  const usernameRef = useRef<HTMLInputElement>(null);
+  const passwordRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <NavbarCenterWrapper>
+      <ACard className="md:border-2 border-gray-200 flex items-center justify-center flex-col gap-8">
+        <h1 className="text-2xl md:text-4xl font-bold">Login</h1>
+        <form className="flex flex-col gap-2 md:text-xl">
+          <Input ref={usernameRef} placeholder="username" type="text" />
+          <Input ref={passwordRef} placeholder="password" type="password" />
+          <LightButton>Submit</LightButton>
+        </form>
+      </ACard>
+    </NavbarCenterWrapper>
+  );
+}

src/components/Input.tsx

@@ -0,0 +1,22 @@
+interface Props {
+  ref?: React.Ref<HTMLInputElement>;
+  placeholder?: string;
+  type?: string;
+  className?: string;
+}
+
+export default function Input({
+  ref,
+  placeholder = "",
+  type = "text",
+  className = "",
+}: Props) {
+  return (
+    <input
+      ref={ref}
+      placeholder={placeholder}
+      type={type}
+      className={`block focus:outline-none border-b-2 border-gray-600 ${className}`}
+    />
+  );
+}

src/components/cards/ACard.tsx

@@ -8,7 +8,7 @@ interface ACardProps {
 export default function ACard({ children, className }: ACardProps) {
   return (
     <div
-      className={`${className} w-[95dvw] md:w-[61vw] h-96 p-2 shadow-2xl bg-white rounded-xl`}
+      className={`${className} w-[95dvw] md:w-[61vw] h-96 p-2 md:shadow-2xl rounded-xl`}
     >
       {children}
     </div>

src/lib/db.ts

@@ -0,0 +1,37 @@
+import bcrypt from "bcryptjs";
+import { Pool } from "pg";
+
+export const pool = new Pool({
+  user: "postgres",
+  host: "localhost",
+  max: 20,
+  idleTimeoutMillis: 3000,
+  connectionTimeoutMillis: 2000,
+  maxLifetimeSeconds: 60,
+});
+
+export class UserController {
+  static async createUser(username: string, password: string) {
+    const encodedPassword = await bcrypt.hash(password, 10);
+    try {
+      await pool.query(
+        "INSERT INTO users (username, password) VALUES ($1, $2)",
+        [username, encodedPassword],
+      );
+    } catch (e) {
+      console.log(e);
+    }
+  }
+  static async getUserByUsername(username: string) {
+    try {
+      const user = await pool.query("SELECT * FROM users WHERE username = $1", [username]);
+      return user.rows[0];
+    } catch (e) {
+      console.log(e);
+    }
+  }
+}
+
+export class FolderController {
+  
+}