Skip to content

M
mernStack
Commit aeb53a38 authored by Prashanth Vagalaboina's avatar Prashanth Vagalaboina
Browse files
Options

login and register changes

parent e5afda11
Show whitespace changes
Inline Side-by-side
Showing with 407 additions and 37 deletions
package-lock.json
View file @ aeb53a38
...@@ -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 @ aeb53a38
...@@ -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"
......
src/App.tsx
View file @ aeb53a38
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 { Provider } from 'react-redux'; import Register from './components/Register/Register';
import Cart from './components/Cart/Cart';
import Profile from './components/Profile/Profile';
import ForgetPasswordForm from './components/ForgetPasswordForm/ForgetPasswordForm';
function App() {
const App=()=> {
return ( return (
<div className="App"> <BrowserRouter>
<Provider store={store}> <Routes>
<Home/> <Route path="/home" Component={Home}/>
</Provider> <Route path="/login" Component={Login} />
<Route path="/register" Component={Register} />
<Route path="/cart" Component={Cart}/>
<Route path="/profile" Component={Profile}/>
<Route path="/forgot-password" Component={ForgetPasswordForm}/>
</div> </Routes>
</BrowserRouter>
); );
} }
export default App
export default App; \ No newline at end of file
src/components/ForgetPasswordForm/ForgetPasswordForm.tsx 0 → 100644
View file @ aeb53a38
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 @ e5afda11
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 @ aeb53a38
.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 @ aeb53a38
import React, { memo, useState } from 'react';
import { Link } from 'react-router-dom';
import "./Login.css"
const Login: React.FC = memo(() => {
const [name, setName] = useState<string>('');
const [email, setEmail] = useState<string>('');
const [password, setPassword] = useState<string>('');
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);
};
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
console.log('Submitted values:', { name, email, password });
};
return (
<div className='loginsignup'>
<div className='loginsignup-container'>
<h1>Log In</h1>
<form onSubmit={handleSubmit}>
<div className='loginsighnup-fields'>
<input
type="text"
placeholder='Your Name'
value={name}
onChange={handleNameChange}
/>
<input
type="email"
placeholder='Email Address'
value={email}
onChange={handleEmailChange}
/>
<input
type="password"
placeholder='Password'
value={password}
onChange={handlePasswordChange}
/>
</div>
<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 @ e5afda11
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 @ aeb53a38
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 @ aeb53a38
import React, { memo, useState } from 'react';
import axios from 'axios';
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 [values, setValues] = useState({
userid: "",
fname: "",
lname: "",
email: "",
mobno: "",
passwd: "",
c_passwd: ""
})
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setValues({ ...values, [name]: value });
};
const handleSubmit=(e:any)=>{
e.preventDefault()
console.log(values)
}
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>
<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.mobno} name='mobno' 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>
{/* </div> */}
</tr>
<tr>
<td></td>
<div className='submit'>
<td><button>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