Skip to content

M
mernStack
Commit fdba7b09 authored by Venkaiah Naidu Singamchetty's avatar Venkaiah Naidu Singamchetty
Browse files
Options

Merge branch 'prasanth' into 'master' 

Prasanth

See merge request !3
parents ee6b2a1a 843b28c6
Hide whitespace changes
Inline Side-by-side
Showing with 459 additions and 85 deletions
package-lock.json
View file @ fdba7b09
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-redux": "^9.1.0", "react-redux": "^9.1.0",
"react-router-dom": "^6.22.0",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"typescript": "^4.9.5", "typescript": "^4.9.5",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
...@@ -3384,6 +3385,14 @@ ...@@ -3384,6 +3385,14 @@
"url": "https://opencollective.com/immer" "url": "https://opencollective.com/immer"
} }
}, },
"node_modules/@remix-run/router": {
"version": "1.15.0",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.0.tgz",
"integrity": "sha512-HOil5aFtme37dVQTB6M34G95kPM3MMuqSmIRVCC52eKV+Y/tGSqw9P3rWhlAx6A+mz+MoX+XxsGsNJbaI5qCgQ==",
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/@rollup/plugin-babel": { "node_modules/@rollup/plugin-babel": {
"version": "5.3.1", "version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
...@@ -14962,6 +14971,36 @@ ...@@ -14962,6 +14971,36 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/react-router": {
"version": "6.22.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.0.tgz",
"integrity": "sha512-q2yemJeg6gw/YixRlRnVx6IRJWZD6fonnfZhN1JIOhV2iJCPeRNSH3V1ISwHf+JWcESzLC3BOLD1T07tmO5dmg==",
"dependencies": {
"@remix-run/router": "1.15.0"
},
"engines": {
"node": ">=14.0.0"
},
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/react-router-dom": {
"version": "6.22.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.0.tgz",
"integrity": "sha512-z2w+M4tH5wlcLmH3BMMOMdrtrJ9T3oJJNsAlBJbwk+8Syxd5WFJ7J5dxMEW0/GEXD1BBis4uXRrNIz3mORr0ag==",
"dependencies": {
"@remix-run/router": "1.15.0",
"react-router": "6.22.0"
},
"engines": {
"node": ">=14.0.0"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/react-scripts": { "node_modules/react-scripts": {
"version": "5.0.1", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
......
package.json
View file @ fdba7b09
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-redux": "^9.1.0", "react-redux": "^9.1.0",
"react-router-dom": "^6.22.0",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"typescript": "^4.9.5", "typescript": "^4.9.5",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
......
server.js
View file @ fdba7b09
...@@ -46,7 +46,7 @@ app.get('/products/:id', (req, res) => { ...@@ -46,7 +46,7 @@ app.get('/products/:id', (req, res) => {
// Middleware function to check if userId already exists // Middleware function to check if userId already exists
const checkUserIdExists = (req, res, next) => { const checkUserIdExists = (req, res, next) => {
const userId = trim(req.body.userId); const userId = req.body.userId.trim();
db.collection('users').findOne({ userId: userId }) db.collection('users').findOne({ userId: userId })
.then(result => { .then(result => {
if (result) { if (result) {
...@@ -57,7 +57,7 @@ const checkUserIdExists = (req, res, next) => { ...@@ -57,7 +57,7 @@ const checkUserIdExists = (req, res, next) => {
}) })
.catch(error => res.status(500).json({ error: "Internal server error" })); .catch(error => res.status(500).json({ error: "Internal server error" }));
}; };
// Register User endpoint with middleware // Register User endpoint with middleware
app.post('/registeruser', checkUserIdExists, (req, res) => { app.post('/registeruser', checkUserIdExists, (req, res) => {
const user = req.body; const user = req.body;
...@@ -69,7 +69,7 @@ app.post('/registeruser', checkUserIdExists, (req, res) => { ...@@ -69,7 +69,7 @@ app.post('/registeruser', checkUserIdExists, (req, res) => {
}) })
.catch(err => res.status(500).json({ error: "Could not create a new document" })); .catch(err => res.status(500).json({ error: "Could not create a new document" }));
}); });
// Get Users endpoint // Get Users endpoint
app.get('/users', (req, res) => { app.get('/users', (req, res) => {
db.collection('users').find({}, { projection: { _id: false, userId: true, password: true } }).toArray() db.collection('users').find({}, { projection: { _id: false, userId: true, password: true } }).toArray()
...@@ -79,12 +79,11 @@ app.get('/users', (req, res) => { ...@@ -79,12 +79,11 @@ app.get('/users', (req, res) => {
.catch(error => res.status(500).send(error)); .catch(error => res.status(500).send(error));
}); });
app.delete('/deregister/:userid', (req, res) => { app.delete('/deregister/:userid', (req, res) => {
const userid = req.params.userid const userid = req.params.userid
if(isNaN(userid)){ if(isNaN(userid)){
db.collection('users').deleteOne({userId:userid}) db.collection('users').deleteOne({userId:userid})
.then(result => { .then(result => {
res.send(result) res.send(result)
db.collection('cartitems').deleteOne({userId:userid}) db.collection('cartitems').deleteOne({userId:userid})
}) })
...@@ -93,7 +92,7 @@ app.delete('/deregister/:userid', (req, res) => { ...@@ -93,7 +92,7 @@ app.delete('/deregister/:userid', (req, res) => {
res.status(500).json({ error: 'Invalid ID' }) res.status(500).json({ error: 'Invalid ID' })
} }
}) })
app.patch('/updateuser/:id', (req, res) => { app.patch('/updateuser/:id', (req, res) => {
const Id = req.params.id const Id = req.params.id
const data = req.body const data = req.body
...@@ -106,8 +105,6 @@ app.patch('/updateuser/:id', (req, res) => { ...@@ -106,8 +105,6 @@ app.patch('/updateuser/:id', (req, res) => {
} }
}) })
app.get('/cartItems/:userid', (req, res) => { app.get('/cartItems/:userid', (req, res) => {
const userid = req.params.userid const userid = req.params.userid
if(isNaN(userid)){ if(isNaN(userid)){
...@@ -118,11 +115,10 @@ app.get('/cartItems/:userid', (req, res) => { ...@@ -118,11 +115,10 @@ app.get('/cartItems/:userid', (req, res) => {
res.status(500).json({ error: 'Invalid UserId' }) res.status(500).json({ error: 'Invalid UserId' })
} }
}) })
app.post('/updateCartItems/:userid', (req, res) => { app.post('/updateCartItems/:userid', (req, res) => {
const userid=req.params.userid const userid=req.params.userid
const newCartItems = req.body const newCartItems = req.body
console.log(newCartItems)
if(isNaN(userid)){ if(isNaN(userid)){
db.collection('cartitems').updateOne({userId: userid},{$set:{cartItems:newCartItems}}) db.collection('cartitems').updateOne({userId: userid},{$set:{cartItems:newCartItems}})
.then(result => { res.send(result).status(200) }) .then(result => { res.send(result).status(200) })
...@@ -130,4 +126,4 @@ app.post('/updateCartItems/:userid', (req, res) => { ...@@ -130,4 +126,4 @@ app.post('/updateCartItems/:userid', (req, res) => {
} else { } else {
res.status(500).json({ error: 'Invalid UserId' }) res.status(500).json({ error: 'Invalid UserId' })
} }
}) })
\ No newline at end of file
src/App.css
View file @ fdba7b09
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
src/App.tsx
View file @ fdba7b09
import logo from './logo.svg'; import React from 'react';
import './App.css'; import { BrowserRouter, Route,Routes } from 'react-router-dom';
import Home from './components/Home'; import Home from './components/Home';
import store from './reduxstore/store'; import Login from './components/Login/Login';
import Register from './components/Register/Register';
import Cart from './components/Cart/Cart';
import Profile from './components/Profile/Profile';
import ForgetPasswordForm from './components/ForgetPasswordForm/ForgetPasswordForm';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import store from './reduxstore/store';
const App=()=> { function App() {
return ( return (
<div className="App"> <Provider store={store}>
<Provider store={store}> <BrowserRouter>
<Home/> <Routes>
</Provider> <Route path="/" Component={Home}/>
<Route path="/login" Component={Login} />
</div> <Route path="/register" Component={Register} />
<Route path="/cart" Component={Cart}/>
<Route path="/profile" Component={Profile}/>
<Route path="/forgot-password" Component={ForgetPasswordForm}/>
</Routes>
</BrowserRouter>
</Provider>
); );
} }
export default App
export default App; \ No newline at end of file
src/components/ForgetPasswordForm/ForgetPasswordForm.tsx 0 → 100644
View file @ fdba7b09
import React, { useState } from 'react';
const ForgetPasswordForm: React.FC = () => {
const [password, setPassword] = useState<string>('');
const [confirmPassword, setConfirmPassword] = useState<string>('');
const [errorMessage, setErrorMessage] = useState<string>('');
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
if (password === confirmPassword) {
// Passwords match, proceed with submissio
console.log('Password:', password);
} else {
// Passwords don't match, show error message
setErrorMessage('Passwords do not match');
}
};
return (
<div>
<h2>Forget Password</h2>
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="password">Password:</label>
<input
type="password"
id="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
</div>
<div>
<label htmlFor="confirmPassword">Confirm Password:</label>
<input
type="password"
id="confirmPassword"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
required
/>
</div>
{errorMessage && <p style={{ color: 'red' }}>{errorMessage}</p>}
<button type="submit">Submit</button>
</form>
</div>
);
};
export default ForgetPasswordForm;
\ No newline at end of file
src/components/Login.tsx deleted 100644 → 0
View file @ ee6b2a1a
import React, { memo } from 'react';
const Login = memo(() => {
return (
<div>
</div>
);
});
export default Login;
\ No newline at end of file
src/components/Login/Login.css 0 → 100644
View file @ fdba7b09
.loginsignup{
width:100%;
height: 80vh;
background:#fce3fe ;
padding-top: 100px;
}
.loginsignup-container{
width:580px;
height:600px;
background: white;
margin: auto;
padding:40px 60px;
}
.loginsignup-container h1{
margin: 20px 0px;
}
.loginsighnup-fields{
display: flex;
flex-direction: column;
gap:29px;
margin-top:30px;
}
.loginsighnup-fields input{
height: 72px;
width: 100%;
padding-left: 20px;
border: 1px solid #c9c9c9;
outline: none;
color:#5c5c5c;
font-size: 18px;
}
.loginsignup-container button{
width: 580px;
height: 72px;
color: white;
background:#ff4141;
margin-top: 30px;
border: none;
font-size: 24px;
font-weight: 500;
cursor: pointer;
}
.loginsignup-login{
margin-top:20px ;
color: #5c5c5c;
font-size: 18px;
font-weight: 500;
}
.loginsignup-login span{
color:blue;
font-weight: 600;
}
.loginsignup-{
display: flex;
align-items: center;
margin-top: 25px;
gap:20px;
color:#5c5c5c;
font-size: 18px;
font-weight: 500;
}
\ No newline at end of file
src/components/Login/Login.tsx 0 → 100644
View file @ fdba7b09
import React, { memo, useState,useEffect,useCallback } from 'react';
import { Link } from 'react-router-dom';
import "./Login.css"
import { useNavigate } from 'react-router-dom';
import {useSelector, useDispatch} from 'react-redux'
import { fetchUsers } from '../../reduxstore/usersSlice';
import { RootState } from '../../reduxstore/store';
const Login: React.FC = memo(() => {
const navigate=useNavigate()
const dispatch=useDispatch()
const users=useSelector((state:RootState)=> state.users.users)
const [error, setError] = useState<string>('');
const [values, setValues] = useState<any>({
userId: "",
password: ""
})
// const validateUserID=useCallback(()=>{
// },[values])
// useEffect(()=>{validateUserID()},[values])
useEffect(() => {
dispatch(fetchUsers());
}, []);
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
users.map((user)=>{
if(user.userId==values.userId.trim()){
if(user.password==values.password.trim()){
console.log(user.userId)
navigate("/")
}
else{
setError(("UserId/Password is incorrect"))
}
}
else{
setError(("UserId/Password is incorrect"))
}
})
};
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setValues({ ...values, [name]: value })
};
return (
<div className='loginsignup'>
<div className='loginsignup-container'>
<h1>Log In</h1>
<form onSubmit={handleSubmit}>
<div className='loginsighnup-fields'>
<input
type="text"
placeholder='User Id'
value={values.userId}
name='userId'
onChange={handleChange}
/>
<input
type="password"
placeholder='Password'
value={values.password}
name="password"
onChange={handleChange}
/>
</div>
{error!="" && <span style={{textAlign:"center",color:"red"}}>{error}</span>}
<button type="submit" >Login</button>
</form>
<p className='loginsignup-login'>
<span> <Link to="/forgot-password">Forgot Password</Link></span>
</p>
</div>
</div>
);
});
export default Login;
\ No newline at end of file
src/components/Register.tsx deleted 100644 → 0
View file @ ee6b2a1a
import React, { memo } from 'react';
const Register = memo(() => {
return (
<div>
</div>
);
});
export default Register;
\ No newline at end of file
src/components/Register/Register.css 0 → 100644
View file @ fdba7b09
p, div {
font-family: Lato;
}
.wrapper {
height: 97vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(6, 150, 30);
}
.form-wrapper {
display: flex;
flex-direction: column;
width: 380px;
padding: 20px 40px;
border-radius: 6px;
box-shadow: 0px 8px 36px #222;
background-color: #fefefe;
}
.form-wrapper > h2 {
display: flex;
justify-content: center;
font-family: "Segoe UI", "Ubuntu", "Roboto", "Open Sans", "Helvetica Neue", sans-serif;
font-size: 2em;
font-weight: lighter;
margin-top: 0.25em;
color: #222;
}
button {
min-width: 100%;
cursor: pointer;
margin-right: 0.25em;
margin-top: 0.5em;
padding: 0.938em;
border: none;
border-radius: 4px;
background-color: rgb(22, 165, 58);
color: #fefefe;
}
button:hover {
background-color: rgb(6, 73, 11);
color: #fefefe;
}
.userId, .fname, .lname, .email, .mobile, .password, .confirmpassword {
display: flex;
flex-direction: column;
margin-bottom: 15px;
width: 100%;
}
.submit {
width: 100%;
display: flex;
flex-wrap: wrap;
}
\ No newline at end of file
src/components/Register/Register.tsx 0 → 100644
View file @ fdba7b09
import React, { memo, useState, useEffect, useCallback } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
import './Register.css';
import {useSelector, useDispatch} from 'react-redux'
import { fetchUsers } from '../../reduxstore/usersSlice';
import { RootState } from '../../reduxstore/store';
const Register = () => {
const navigate=useNavigate()
const dispatch=useDispatch()
const users=useSelector((state:RootState)=> state.users.users)
const [userErr,setUserErr]=useState<string>('')
const [enablesubmit, setEnablesubmit] = useState(true);
const [values, setValues] = useState<any>({
userId: "",
fname: "",
lname: "",
email: "",
mobile: "",
password: ""
})
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setValues({ ...values, [name]: value })
};
const validateUserID=useCallback(()=>{
users.map((user)=>{
if(user.userId==values.userId.trim()){
setUserErr("userId taken")
setEnablesubmit(true)
}else{
setUserErr("userId available")
setEnablesubmit(false)
}
})
},[values])
useEffect(()=>{validateUserID()},[values])
const handleSubmit=(e:any)=>{
e.preventDefault()
axios.post('http://localhost:4000/registeruser', values)
.then((res)=>{
navigate("/login")
console.log(res.data)})
.catch((err)=>console.log(err))
}
useEffect(() => {
dispatch(fetchUsers());
}, []);
return (
<div className='wrapper'>
<div className='form-wrapper'>
<h2>Registration Form</h2>
<form onSubmit={handleSubmit} noValidate>
<table>
<tr>
{/* <div className='userId'> */}
<td><label>User ID : </label></td>
<td><input value={values.userId} name='userId' onChange={handleChange}/></td>
{/* </div> */}
</tr>
{
userErr!="" && <tr>
<td colSpan={2} style={{textAlign:"center",color:"red"}}><span>{userErr}</span></td>
</tr>
}
<tr>
{/* <div className='fname'> */}
<td><label>First Name : </label></td>
<td><input value={values.fname} name='fname' onChange={handleChange}/></td>
{/* </div> */}
</tr>
<tr>
{/* <div className='lname'> */}
<td><label>Last Name : </label></td>
<td><input value={values.lname} name='lname' onChange={handleChange}/></td>
{/* </div> */}
</tr>
<tr>
{/* <div className='email'> */}
<td><label>Email : </label></td>
<td><input value={values.email} name='email' onChange={handleChange}/></td>
{/* </div> */}
</tr>
<tr>
{/* <div className='mobile'> */}
<td><label>Mobile : </label></td>
<td><input value={values.mobile} name='mobile' onChange={handleChange}/></td>
{/* </div> */}
</tr>
<tr>
{/* <div className='password'> */}
<td><label>Password : </label></td>
<td><input value={values.password} name='password' onChange={handleChange}/></td>
{/* </div> */}
</tr>
<tr>
<td></td>
<div className='submit'>
<td><button type='submit' disabled={enablesubmit}>Submit</button></td>
</div>
</tr>
</table>
</form>
</div>
</div>
);
};
export default Register;
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment