From 39bddca62155729c9e869605f7fbcdec7b1c01cd Mon Sep 17 00:00:00 2001 From: adityalaxkar123 Date: Fri, 4 Oct 2024 11:44:46 +0530 Subject: [PATCH] added login signup --- package-lock.json | 124 +++++++++++++++++++++++++++++++++++++++++----- package.json | 4 +- src/App.js | 5 +- src/Login.js | 83 +++++++++++++++++++++++++++++++ src/Nabar.js | 2 +- src/Signup.js | 114 ++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 316 insertions(+), 16 deletions(-) create mode 100644 src/Signup.js diff --git a/package-lock.json b/package-lock.json index 80b2712..29891cc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "enyan", "version": "0.1.0", "dependencies": { + "@reduxjs/toolkit": "^2.2.7", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -25,8 +26,9 @@ "react-bootstrap": "^2.10.1", "react-dom": "^18.2.0", "react-native-linear-gradient": "^2.8.3", + "react-redux": "^9.1.2", "react-responsive-carousel": "^3.2.23", - "react-router-dom": "^6.21.1", + "react-router-dom": "^6.26.2", "react-scripts": "5.0.1", "react-scroll": "^1.9.0", "react-slick": "^0.29.0", @@ -5827,10 +5829,45 @@ "react-native": "*" } }, + "node_modules/@reduxjs/toolkit": { + "version": "2.2.7", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.7.tgz", + "integrity": "sha512-faI3cZbSdFb8yv9dhDTmGwclW0vk0z5o1cia+kf7gCbaCwHI5e+7tP57mJUv22pNcNbeA62GSrPpfrUfdXcQ6g==", + "license": "MIT", + "dependencies": { + "immer": "^10.0.3", + "redux": "^5.0.1", + "redux-thunk": "^3.1.0", + "reselect": "^5.1.0" + }, + "peerDependencies": { + "react": "^16.9.0 || ^17.0.0 || ^18", + "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-redux": { + "optional": true + } + } + }, + "node_modules/@reduxjs/toolkit/node_modules/immer": { + "version": "10.1.1", + "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz", + "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/immer" + } + }, "node_modules/@remix-run/router": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.14.1.tgz", - "integrity": "sha512-Qg4DMQsfPNAs88rb2xkdk03N3bjK4jgX5fR24eHCTR9q6PrhZQZ4UJBPzCHJkIpTRN1UKxx2DzjZmnC+7Lj0Ow==", + "version": "1.19.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.2.tgz", + "integrity": "sha512-baiMx18+IMuD1yyvOGaHM9QrVUPGGG0jC+z+IPHnRJWUAUvaKuWKyE8gjDj2rzv3sz9zOGoRSPgeBVHRhZnBlA==", + "license": "MIT", "engines": { "node": ">=14.0.0" } @@ -7106,6 +7143,12 @@ "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==" }, + "node_modules/@types/use-sync-external-store": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz", + "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==", + "license": "MIT" + }, "node_modules/@types/warning": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz", @@ -20812,6 +20855,29 @@ "react-dom": "^16.8.0 || ^17 || ^18" } }, + "node_modules/react-redux": { + "version": "9.1.2", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.1.2.tgz", + "integrity": "sha512-0OA4dhM1W48l3uzmv6B7TXPCGmokUU4p1M44DGN2/D9a1FjVPukVjER1PcPX97jIg6aUeLq1XJo1IpfbgULn0w==", + "license": "MIT", + "dependencies": { + "@types/use-sync-external-store": "^0.0.3", + "use-sync-external-store": "^1.0.0" + }, + "peerDependencies": { + "@types/react": "^18.2.25", + "react": "^18.0", + "redux": "^5.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "redux": { + "optional": true + } + } + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -20831,11 +20897,12 @@ } }, "node_modules/react-router": { - "version": "6.21.1", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.21.1.tgz", - "integrity": "sha512-W0l13YlMTm1YrpVIOpjCADJqEUpz1vm+CMo47RuFX4Ftegwm6KOYsL5G3eiE52jnJpKvzm6uB/vTKTPKM8dmkA==", + "version": "6.26.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.2.tgz", + "integrity": "sha512-tvN1iuT03kHgOFnLPfLJ8V95eijteveqdOSk+srqfePtQvqCExB8eHOYnlilbOcyJyKnYkr1vJvf7YqotAJu1A==", + "license": "MIT", "dependencies": { - "@remix-run/router": "1.14.1" + "@remix-run/router": "1.19.2" }, "engines": { "node": ">=14.0.0" @@ -20845,12 +20912,13 @@ } }, "node_modules/react-router-dom": { - "version": "6.21.1", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.21.1.tgz", - "integrity": "sha512-QCNrtjtDPwHDO+AO21MJd7yIcr41UetYt5jzaB9Y1UYaPTCnVuJq6S748g1dE11OQlCFIQg+RtAA1SEZIyiBeA==", + "version": "6.26.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.2.tgz", + "integrity": "sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==", + "license": "MIT", "dependencies": { - "@remix-run/router": "1.14.1", - "react-router": "6.21.1" + "@remix-run/router": "1.19.2", + "react-router": "6.26.2" }, "engines": { "node": ">=14.0.0" @@ -21074,6 +21142,21 @@ "node": ">=8" } }, + "node_modules/redux": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", + "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==", + "license": "MIT" + }, + "node_modules/redux-thunk": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz", + "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==", + "license": "MIT", + "peerDependencies": { + "redux": "^5.0.0" + } + }, "node_modules/reflect.getprototypeof": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz", @@ -21225,6 +21308,12 @@ "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==" }, + "node_modules/reselect": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz", + "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==", + "license": "MIT" + }, "node_modules/resize-observer-polyfill": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", @@ -23427,6 +23516,15 @@ "requires-port": "^1.0.0" } }, + "node_modules/use-sync-external-store": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz", + "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==", + "license": "MIT", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", diff --git a/package.json b/package.json index adff2c4..dc32f1b 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "@reduxjs/toolkit": "^2.2.7", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -20,8 +21,9 @@ "react-bootstrap": "^2.10.1", "react-dom": "^18.2.0", "react-native-linear-gradient": "^2.8.3", + "react-redux": "^9.1.2", "react-responsive-carousel": "^3.2.23", - "react-router-dom": "^6.21.1", + "react-router-dom": "^6.26.2", "react-scripts": "5.0.1", "react-scroll": "^1.9.0", "react-slick": "^0.29.0", diff --git a/src/App.js b/src/App.js index 14c0765..d40a77b 100644 --- a/src/App.js +++ b/src/App.js @@ -7,7 +7,8 @@ import Quiz from './Quiz.js'; import Craft from './Craft.js'; import Sef from './Sef.js'; import Act from './Act.js'; - +import Login from './Login.js'; +import Signup from './Signup.js'; function App () { return ( <> @@ -22,6 +23,8 @@ function App () { }/> }/> }/> + }/> + }/> diff --git a/src/Login.js b/src/Login.js index e69de29..d359c9d 100644 --- a/src/Login.js +++ b/src/Login.js @@ -0,0 +1,83 @@ +// src/Login.js +import React, { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; + +function Login() { + const [username, setUsername] = useState(''); + const [password, setPassword] = useState(''); + const [error, setError] = useState(''); + const navigate = useNavigate(); + + const handleLogin = (e) => { + e.preventDefault(); + setError(''); // Reset error state + + // Basic validation + if (!username || !password) { + setError('Both fields are required.'); + return; + } + + // Placeholder for actual login logic + console.log('Logging in with:', { username, password }); + alert('Login successful!'); // This would be replaced with actual logic + + // Clear fields after successful login + setUsername(''); + setPassword(''); + }; + + const handleSignupRedirect = () => { + navigate('/signup'); + }; + + return ( +
+
+
+
+
+

Login

+ {error &&
{error}
} +
+
+ + setUsername(e.target.value)} + required + /> +
+
+ + setPassword(e.target.value)} + required + /> +
+ +
+

+ Don't have an account? Sign Up +

+

+ Forgot Password? +

+
+
+
+
+
+ ); +} + +export default Login; diff --git a/src/Nabar.js b/src/Nabar.js index 59967ea..4de3189 100644 --- a/src/Nabar.js +++ b/src/Nabar.js @@ -10,7 +10,7 @@ function Nabar() { }; const handleSignup = () => { - navigate('/refer'); + navigate('/signup'); }; return ( diff --git a/src/Signup.js b/src/Signup.js new file mode 100644 index 0000000..6b4f5e4 --- /dev/null +++ b/src/Signup.js @@ -0,0 +1,114 @@ +// src/Signup.js +import React, { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; + +function Signup() { + const [username, setUsername] = useState(''); + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [confirmPassword, setConfirmPassword] = useState(''); + const [error, setError] = useState(''); + const [successMessage, setSuccessMessage] = useState(''); + const navigate = useNavigate(); + + const handleSignup = (e) => { + e.preventDefault(); + + // Simple validation + if (!username || !email || !password || !confirmPassword) { + setError('Please fill in all fields.'); + return; + } + if (password !== confirmPassword) { + setError('Passwords do not match.'); + return; + } + + // Replace with actual signup logic + console.log('Signing up with:', { username, email, password }); + + // Clear fields and show success message + setUsername(''); + setEmail(''); + setPassword(''); + setConfirmPassword(''); + setError(''); + setSuccessMessage('Signup successful! Redirecting to login...'); + + // Redirect after a short delay + setTimeout(() => { + navigate('/login'); + }, 2000); // Redirects after 2 seconds + }; + + return ( +
+
+
+
+
+

Sign Up

+ {error &&
{error}
} + {successMessage &&
{successMessage}
} +
+
+ + setUsername(e.target.value)} + required + /> +
+
+ + setEmail(e.target.value)} + required + /> +
+
+ + setPassword(e.target.value)} + required + /> +
+
+ + setConfirmPassword(e.target.value)} + required + /> +
+ +
+

+ Already have an account? navigate('/login')}>Login +

+
+
+
+
+
+ ); +} +export default Signup;