From 3ad97812663c4848ab4f68f93660353ce4c6686f Mon Sep 17 00:00:00 2001 From: harikrishnan-git Date: Sun, 5 Jan 2025 19:50:54 +0530 Subject: [PATCH] Integrated frontend and backend for sign up page --- frontend/package-lock.json | 100 +++++++++++++++++++++- frontend/package.json | 4 +- frontend/src/App.jsx | 9 +- frontend/src/Hooks/useSignup.js | 69 +++++++++++++++ frontend/src/Pages/Login/Login.jsx | 15 ++-- frontend/src/Pages/Signup/GenderRadio.jsx | 8 +- frontend/src/Pages/Signup/Signup.jsx | 67 +++++++++++++-- frontend/src/main.jsx | 19 ++-- frontend/vite.config.js | 12 ++- 9 files changed, 272 insertions(+), 31 deletions(-) create mode 100644 frontend/src/Hooks/useSignup.js diff --git a/frontend/package-lock.json b/frontend/package-lock.json index d2cf0d6..e84150c 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,7 +10,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", @@ -1306,6 +1308,12 @@ "@babel/types": "^7.20.7" } }, + "node_modules/@types/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==", + "license": "MIT" + }, "node_modules/@types/estree": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", @@ -1886,6 +1894,15 @@ "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", "dev": true }, + "node_modules/cookie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", + "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==", + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/cross-spawn": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", @@ -1925,8 +1942,7 @@ "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", - "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, "node_modules/culori": { "version": "3.3.0", @@ -2882,6 +2898,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/goober": { + "version": "2.1.16", + "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.16.tgz", + "integrity": "sha512-erjk19y1U33+XAMe1VTvIONHYoSqE4iS7BYUZfHaqeohLmnC0FdxEh7rQU+6MZ4OajItzjZFSRtVANrQwNq6/g==", + "license": "MIT", + "peerDependencies": { + "csstype": "^3.0.10" + } + }, "node_modules/gopd": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz", @@ -4222,6 +4247,23 @@ "react": "^18.3.1" } }, + "node_modules/react-hot-toast": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.5.1.tgz", + "integrity": "sha512-54Gq1ZD1JbmAb4psp9bvFHjS7lje+8ubboUmvKZkCsQBLH6AOpZ9JemfRvIdHcfb9AZXRaFLrb3qUobGYDJhFQ==", + "license": "MIT", + "dependencies": { + "csstype": "^3.1.3", + "goober": "^2.1.16" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": ">=16", + "react-dom": ">=16" + } + }, "node_modules/react-icons": { "version": "5.4.0", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.4.0.tgz", @@ -4246,6 +4288,46 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.1.tgz", + "integrity": "sha512-39sXJkftkKWRZ2oJtHhCxmoCrBCULr/HAH4IT5DHlgu/Q0FCPV0S4Lx+abjDTx/74xoZzNYDYbOZWlJjruyuDQ==", + "license": "MIT", + "dependencies": { + "@types/cookie": "^0.6.0", + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0", + "turbo-stream": "2.4.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, + "node_modules/react-router-dom": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.1.tgz", + "integrity": "sha512-vSrQHWlJ5DCfyrhgo0k6zViOe9ToK8uT5XGSmnuC2R3/g261IdIMpZVqfjD6vWSXdnf5Czs4VA/V60oVR6/jnA==", + "license": "MIT", + "dependencies": { + "react-router": "7.1.1" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -4457,6 +4539,12 @@ "semver": "bin/semver.js" } }, + "node_modules/set-cookie-parser": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", + "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==", + "license": "MIT" + }, "node_modules/set-function-length": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", @@ -4946,6 +5034,12 @@ "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==", "dev": true }, + "node_modules/turbo-stream": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz", + "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==", + "license": "ISC" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index c799378..dc54cd0 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 5cb8289..f715bdb 100644 --- a/frontend/src/App.jsx +++ b/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 (
- + + } /> + } /> + } /> + +
); } diff --git a/frontend/src/Hooks/useSignup.js b/frontend/src/Hooks/useSignup.js new file mode 100644 index 0000000..fcbde89 --- /dev/null +++ b/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; diff --git a/frontend/src/Pages/Login/Login.jsx b/frontend/src/Pages/Login/Login.jsx index a8aae7b..6f09f22 100644 --- a/frontend/src/Pages/Login/Login.jsx +++ b/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() { - - Don't have an account? - + + + Don't have an account? + +
diff --git a/frontend/src/Pages/Signup/GenderRadio.jsx b/frontend/src/Pages/Signup/GenderRadio.jsx index 0b8ff67..a53ac6a 100644 --- a/frontend/src/Pages/Signup/GenderRadio.jsx +++ b/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 (