Integrated frontend and backend for sign up page

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

@@ -3,13 +3,20 @@ import "./App.css";
 import Login from "./Pages/Login/Login";
 import Signup from "./Pages/Signup/Signup";
 import Home from "./Pages/Home/Home";
+import { Route, Routes } from "react-router-dom";
+import { Toaster } from "react-hot-toast";
 
 function App() {
   const [count, setCount] = useState(0);
 
   return (
     <div className="p-4 h-screen flex items-center justify-center">
-      <Home></Home>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/signup" element={<Signup />} />
+      </Routes>
+      <Toaster />
     </div>
   );
 }

frontend/src/Hooks/useSignup.js

@@ -0,0 +1,69 @@
+import toast from "react-hot-toast";
+import { useState } from "react";
+
+const useSignup = () => {
+  const [loading, setLoading] = useState(false);
+  const signup = async ({
+    fullName,
+    UserName,
+    Password,
+    ConfirmPassword,
+    Gender,
+  }) => {
+    const success = handleInput({
+      fullName,
+      UserName,
+      Password,
+      ConfirmPassword,
+      Gender,
+    });
+    if (!success) {
+      console.log("Error in useSignup");
+      return;
+    }
+    try {
+      setLoading(true);
+      const res = await fetch("/api/auth/signup", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          fullName,
+          userName: UserName,
+          password: Password,
+          confirmPassword: ConfirmPassword,
+          gender: Gender,
+        }),
+      });
+      const data = await res.json();
+      console.log(data);
+    } catch (error) {
+      toast.error(error.message);
+      setLoading(false);
+      console.log(error.message);
+      return false;
+    }
+  };
+  return { loading, signup };
+};
+
+const handleInput = ({
+  fullName,
+  UserName,
+  Password,
+  ConfirmPassword,
+  Gender,
+}) => {
+  if (!fullName || !UserName || !Password || !ConfirmPassword || !Gender) {
+    toast.error("Ensure all fields are filled");
+    return false;
+  } else if (ConfirmPassword != Password) {
+    toast.error("Passwords don't match!!");
+    return false;
+  } else if (Password.length < 6) {
+    toast.error("Passwords must have atleast 6 characters");
+    return false;
+  }
+  return true;
+};
+
+export default useSignup;

frontend/src/Pages/Login/Login.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Link } from "react-router-dom";
 
 export default function Login() {
   return (
@@ -45,12 +46,14 @@ export default function Login() {
             </svg>
             <input type="password" className="grow" placeholder="Password" />
           </label>
-          <a
-            href="../Signup/Signup.jsx"
-            className="text-sm hover:underline hover:text-blue-500 inline-block mt-2"
-          >
-            Don't have an account?
-          </a>
+          <strong>
+            <Link
+              to="/signup"
+              className="text-sm link link-primary inline-block mt-2"
+            >
+              Don't have an account?
+            </Link>
+          </strong>
           <br />
           <input type="submit" className="btn btn-outline btn-primary" />
         </form>

frontend/src/Pages/Signup/GenderRadio.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export default function GenderCheckbox() {
+export default function GenderCheckbox({ inputs, setInputs }) {
   return (
     <div>
       <label htmlFor="Gender" className="label p-2 label-text mt-2">
@@ -12,6 +12,9 @@ export default function GenderCheckbox() {
             type="radio"
             id="Gender"
             name="radio-2"
+            onClick={() => {
+              setInputs({ ...inputs, Gender: "male" });
+            }}
             className="radio radio-primary hover:border-blue-300 "
             defaultChecked
           />
@@ -22,6 +25,9 @@ export default function GenderCheckbox() {
             type="radio"
             id="Gender"
             name="radio-2"
+            onClick={() => {
+              setInputs({ ...inputs, Gender: "female" });
+            }}
             className="radio radio-primary hover:border-blue-300 ml-6"
           />
           <span className="label-text m-1 ml-1">Female</span>