'loginRegisterUI'

server.js

@@ -44,32 +44,56 @@ app.get('/products/:id', (req, res) => {
     }
 })
 
-app.post('/registeruser',(req,res)=>{
-    const user=req.body
+// Middleware function to check if userId already exists
+const checkUserIdExists = (req, res, next) => {
+    const userId = req.body.userId.trim();
+    db.collection('users').findOne({ userId: userId })
+    .then(result => {
+        if (result) {
+            res.status(400).json({ error: "userId already exists" });
+        } else {
+            next(); // Proceed to register user if userId is not taken
+        }
+    })
+    .catch(error => res.status(500).json({ error: "Internal server error" }));
+};
+ 
+// Register User endpoint with middleware
+app.post('/registeruser', checkUserIdExists, (req, res) => {
+    const user = req.body;
+    const userid=req.body.userId;
     db.collection('users').insertOne(user)
     .then(result => {
-        res.status(201).json(result)})
-     .catch((err)=>res.status(500).json({error:"Could not create a new document"}))
- })
-
+        res.status(201).json(result);
+        db.collection('cartitems').insertOne({userId:userid,cartItems:[]})
+    })
+    .catch(err => res.status(500).json({ error: "Could not create a new document" }));
+});
+ 
+// Get Users endpoint
 app.get('/users', (req, res) => {
-    db.collection('users').find().toArray()
-    .then(result => {res.send(result)})
-    .catch(error => res.status(500).send(error))
-})
+    db.collection('users').find({}, { projection: { _id: false, userId: true, password: true } }).toArray()
+    .then(result => {
+        res.send(result);
+    })
+    .catch(error => res.status(500).send(error));
+});
 
-app.delete('/deregister/:id', (req, res) => {
-    const Id = req.params.id
-    if(ObjectId.isValid(Id)){
-        db.collection('users').deleteOne({_id:new ObjectId(Id)})
-        .then(result => { res.send(result) })
+app.delete('/deregister/:userid', (req, res) => {
+    const userid = req.params.userid
+    if(isNaN(userid)){
+        db.collection('users').deleteOne({userId:userid})
+        .then(result => {
+            res.send(result)
+            db.collection('cartitems').deleteOne({userId:userid})
+         })
         .catch(error => res.status(500).send(error))
     } else {
         res.status(500).json({ error: 'Invalid ID' })
     }
 })
-
-app.patch('/update/:id', (req, res) => {
+ 
+app.patch('/updateuser/:id', (req, res) => {
     const Id = req.params.id
     const data = req.body
     if(ObjectId.isValid(Id)){
@@ -80,3 +104,26 @@ app.patch('/update/:id', (req, res) => {
         res.status(500).json({ error: 'Invalid ID' })
     }
 })
+
+app.get('/cartItems/:userid', (req, res) => {
+    const userid = req.params.userid
+    if(isNaN(userid)){
+        db.collection('cartitems').find({userId: userid}).toArray()
+        .then(result => { res.send(result) })
+        .catch(error => res.status(500).send(error))
+    } else {
+        res.status(500).json({ error: 'Invalid UserId' })
+    }
+})
+ 
+app.post('/updateCartItems/:userid', (req, res) => {
+    const userid=req.params.userid
+    const newCartItems = req.body
+    if(isNaN(userid)){
+        db.collection('cartitems').updateOne({userId: userid},{$set:{cartItems:newCartItems}})
+        .then(result => { res.send(result).status(200) })
+        .catch(error => res.status(500).send(error))
+    } else {
+        res.status(500).json({ error: 'Invalid UserId' })
+    }
+})
\ No newline at end of file

src/App.css

-.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

@@ -6,13 +6,16 @@ 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 store from './reduxstore/store';
  
 function App() {
  
   return (
-    <BrowserRouter>
+ <Provider store={store}>
+      <BrowserRouter>
      <Routes>
-        <Route path="/home" Component={Home}/>
+        <Route path="/" Component={Home}/>
         <Route path="/login" Component={Login} />
         <Route path="/register" Component={Register} />
         <Route path="/cart" Component={Cart}/>
@@ -21,6 +24,7 @@ function App() {
            
         </Routes>
       </BrowserRouter>
+ </Provider>
   );
 }
 export default App
\ No newline at end of file

src/components/Login/Login.tsx

-import React, { memo, useState } from 'react';
+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 [name, setName] = useState<string>('');
-    const [email, setEmail] = useState<string>('');
-    const [password, setPassword] = useState<string>('');
+    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])
  
-    const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setName(e.target.value);
-    };
- 
-    const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setEmail(e.target.value);
-    };
- 
-    const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPassword(e.target.value);
-    };
+  useEffect(() => {
+        dispatch(fetchUsers());
+  }, []);
+   
  
     const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
-        console.log('Submitted values:', { name, email, password });
+        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'>
@@ -32,24 +63,22 @@ const Login: React.FC = memo(() => {
                     <div className='loginsighnup-fields'>
                         <input
                             type="text"
-                            placeholder='Your Name'
-                            value={name}
-                            onChange={handleNameChange}
-                        />
-                        <input
-                            type="email"
-                            placeholder='Email Address'
-                            value={email}
-                            onChange={handleEmailChange}
+                            placeholder='User Id'
+                            value={values.userId} 
+                            name='userId'
+                            onChange={handleChange}
                         />
+                        
                         <input
                             type="password"
                             placeholder='Password'
-                            value={password}
-                            onChange={handlePasswordChange}
+                            value={values.password}
+                            name="password"
+                            onChange={handleChange}
                         />
                     </div>
-                    <button type="submit">Login</button>
+                    {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>

src/components/Register/Register.tsx

-import React, { memo, useState } from 'react';
+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 = memo(() => {
-    // const [userId,setUserId]=useState('')
-    // const [fname,setFname]=useState('')
-    // const [lname,setLname]=useState('')
-    // const [email,setEmail]=useState('')
-    // const [mobile,setMobile]=useState('')
-    // const [password,setPassword]=useState('')
-    // const [confirmpassword,setConfirmpassword]=useState('')
-    
-    // const values1={
-    //     "userId":userId,
-    //     "fname":fname,
-    //     "lname":lname,
-    //     "email": email.toLowerCase(),
-    //     "mobno": mobile,
-    //     "passwd": password,
-    //     "c_passwd": confirmpassword
-    // }
+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({
-        userid: "",
+    const [values, setValues] = useState<any>({
+        userId: "",
         fname: "",
         lname: "",
         email: "",
-        mobno: "",
-        passwd: "",
-        c_passwd: ""
-    })
+        mobile: "",
+        password: ""
+        })
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         const { name, value } = e.target;
-        setValues({ ...values, [name]: value });
+        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()
-        console.log(values)
+        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'>
@@ -50,9 +65,14 @@ const Register = memo(() => {
                         <tr>
                             {/* <div className='userId'> */}
                                 <td><label>User ID : </label></td>
-                                <td><input value={values.userid} name='userid' onChange={handleChange}/></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>
@@ -74,25 +94,19 @@ const Register = memo(() => {
                         <tr>
                             {/* <div className='mobile'> */}
                                 <td><label>Mobile : </label></td>
-                                <td><input value={values.mobno} name='mobno' onChange={handleChange}/></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.passwd} name='passwd' onChange={handleChange}/></td>
-                            {/* </div> */}
-                        </tr>
-                        <tr>
-                            {/* <div className='confirmpassword'> */}
-                                <td><label>Confirm Password : </label></td>
-                                <td><input value={values.c_passwd} name='c_passwd' onChange={handleChange}/></td>
+                                <td><input value={values.password} name='password' onChange={handleChange}/></td>
                             {/* </div> */}
                         </tr>
                         <tr>
                             <td></td>
                             <div className='submit'>
-                                <td><button>Submit</button></td>
+                                <td><button type='submit' disabled={enablesubmit}>Submit</button></td>
                             </div>
                         </tr>
                     </table>
@@ -100,6 +114,5 @@ const Register = memo(() => {
             </div>   
         </div>
     );
-});
- 
+};
 export default Register;
\ No newline at end of file