Add signup functionality

frontend/package.json

@@ -12,7 +12,9 @@
   "dependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-icons": "^5.4.0"
+    "react-hot-toast": "^2.5.1",
+    "react-icons": "^5.4.0",
+    "react-router-dom": "^7.1.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",

frontend/src/App.jsx

@@ -1,10 +1,19 @@
+import { Route, Routes } from "react-router-dom";
 import "./App.css";
 import Home from "./pages/home/Home";
+import Login from "./pages/login/Login";
+import SignUp from "./pages/signup/SignUp";
+import { Toaster } from "react-hot-toast";
 
 function App() {
   return (
     <div className="p-4 h-screen flex items-center justify-center">
-      <Home />
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/signup" element={<SignUp />} />
+      </Routes>
+      <Toaster />
     </div>
   );
 }

frontend/src/components/messages/MessageContainer.jsx

@@ -4,7 +4,7 @@ import MessageInput from "./MessageInput";
 import { TiMessages } from "react-icons/ti";
 
 const MessageContainer = () => {
-  const noChatSelected = false;
+  const noChatSelected = true;
   return (
     <div className="md:min-w-[450px] flex flex-col">
       {noChatSelected ? (

frontend/src/hooks/useSignup.js

@@ -0,0 +1,51 @@
+import React, { useState } from 'react'
+import { toast } from 'react-hot-toast';
+
+const useSignup = () => {
+  const [loading, setLoading] = useState(false);
+
+  const signup = async ({fullName, username, password, confirmPassword, gender}) => {
+    const success = handleInputErrors({fullName, username, password, confirmPassword, gender});
+    if(!success) return;
+
+    setLoading(true);
+    try {
+        const res = await fetch('/api/auth/signup', {
+            method: "POST",
+            headers: {"Content-Type": "application/json"},
+            body: JSON.stringify({fullName, username, password, confirmPassword, gender}),
+        })
+
+        const data = await res.json();
+        console.log(data);
+
+    } catch (error) {
+        toast.error(error.message)
+    } finally {
+        setLoading(false);
+    }
+  };
+  return {loading, signup};
+};
+
+
+export default useSignup;
+
+function handleInputErrors({fullName, username, password, confirmPassword, gender}) {
+    if(!fullName || !username || !password || !confirmPassword || !gender) {
+        toast.error('Please fill in all fields');
+        return false;
+    }
+
+    if (password !== confirmPassword) {
+        toast.error('Passwords do not match');
+        return false;
+    }
+
+    if (password.length < 6) {
+        toast.error('Password must be at least 6 characters');
+        return false;
+    }
+
+    return true;
+}

frontend/src/main.jsx

@@ -1,10 +1,13 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.jsx'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.jsx";
+import { BrowserRouter } from "react-router-dom";
 
-createRoot(document.getElementById('root')).render(
+createRoot(document.getElementById("root")).render(
   <StrictMode>
-    <App />
-  </StrictMode>,
-)
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>
+);

frontend/src/pages/login/Login.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Link } from "react-router-dom";
 
 const Login = () => {
   return (
@@ -31,12 +32,12 @@ const Login = () => {
               className="w-full input input-bordered h-10"
             />
           </div>
-          <a
-            href="#"
+          <Link
+            to="/signup"
             className="text-sm hover:underline hover:text-blue-600 mt-2 inline-block"
           >
             {"Don't"} have an account?
-          </a>
+          </Link>
 
           <div>
             <button className="btn btn-block btn-sm mt-2">Login</button>

frontend/src/pages/signup/GenderCheckbox.jsx

@@ -1,18 +1,36 @@
 import React from "react";
 
-const GenderCheckbox = () => {
+const GenderCheckbox = ({ onCheckboxChange, selectedGender }) => {
   return (
     <div className="flex">
       <div className="form-control">
-        <label className={`label gap-2 cursor-pointer`}>
+        <label
+          className={`label gap-2 cursor-pointer ${
+            selectedGender === "male" ? "selected" : ""
+          }`}
+        >
           <span className="label-text">Male</span>
-          <input type="checkbox" className="checkbox border-slate-900" />
+          <input
+            type="checkbox"
+            className="checkbox border-slate-900"
+            checked={selectedGender === "male"}
+            onChange={() => onCheckboxChange("male")}
+          />
         </label>
       </div>
       <div className="form-control">
-        <label className={`label gap-2 cursor-pointer`}>
+        <label
+          className={`label gap-2 cursor-pointer ${
+            selectedGender === "female" ? "selected" : ""
+          }`}
+        >
           <span className="label-text">Female</span>
-          <input type="checkbox" className="checkbox border-slate-900" />
+          <input
+            type="checkbox"
+            className="checkbox border-slate-900"
+            checked={selectedGender === "female"}
+            onChange={() => onCheckboxChange("female")}
+          />
         </label>
       </div>
     </div>