feat: add signup page

Co-authored-by: Ishaan Upadhyay <[email protected]>

citrus/app/api/users/route.ts

@@ -11,7 +11,7 @@ export async function GET(request: Request) {
     var params = [];
     // If no cursor is provided, return the first page
     if (!next_id && !prev_id) {
-        query = query + " ORDER BY id DESC LIMIT $1";
+        query = query + " ORDER BY username DESC LIMIT $1";
         params = [limit];
     }
     else if (next_id && prev_id) {
@@ -50,11 +50,11 @@ export async function POST(request: Request) {
     const username = body.username;
     const password = body.password;
     // Check if the username is already taken
-    const check = await db.query("SELECT * FROM users WHERE username = $1", [username]);
+    const check = await db.query("SELECT * FROM _temp WHERE username = $1", [username]);
     if (check.rows.length > 0) {
         return NextResponse.json({error: "Username already taken"}, {status: 400});
     }
     // Create the new user
-    await db.query("INSERT INTO users (username, password) VALUES ($1, $2)", [username, password]);
+    await db.query("INSERT INTO _temp (username) VALUES ($1)", [username]);
     return NextResponse.json({username: username, message: "User created successfully"});
 }

citrus/app/signup/page.tsx

@@ -1,8 +1,57 @@
+"use client"
+
 import Image from "next/image"
-import { client } from "../../lib/db"
 
-export default async function SignUp() {
-    return <div>
-            <h1> hello </h1>
-        </div>;
-}
+import { useState, FormEvent } from 'react';
+
+const Signup = (): JSX.Element => {
+  const [name, setName] = useState<string>('');
+  const [email, setEmail] = useState<string>('');
+  const [password, setPassword] = useState<string>('');
+
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    // Handle form submission here
+    const res = await fetch('/api/users', {
+        method: 'POST',
+        body: JSON.stringify({"username": name}),
+    });
+    console.log(res);
+  };
+
+  return (
+    <div>
+      <h1>Sign Up</h1>
+      <form onSubmit={handleSubmit}>
+        <div>
+          <label>Name:</label>
+          <input
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+          />
+        </div>
+        <div>
+          <label>Email:</label>
+          <input
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+          />
+        </div>
+        <div>
+          <label>Password:</label>
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+        </div>
+        <button type="submit">Sign Up</button>
+      </form>
+    </div>
+  );
+};
+
+export default Signup;