I’m learning React.js and I’m creating a demo.
I have created a Login page. Now I want to develop the functionality that if I’m using admin’s credentials then I should change the current page layout to listing of employees. And if I’m using the employee’s credentials then I should change page to show the details of that employee.
Currently it’s not able to print content after proper login.
App.js
import { useState } from 'react';
import './App.css';
import USER_DATA from './userData';
import AdminPage from './components/Admin';
import EmployeePage from './components/Employee';
function App() {
let [userEmail, setEmail] = useState('[email protected]'),
[userPassword, setPassword] = useState('password');
function handleEmail(event) {
setEmail(event.target.value);
}
function handlePassword(event) {
setPassword(event.target.value);
}
function handleLogin(email, password) {
for (let user of USER_DATA) {
if (user.userEmail === email) {
if (user.password === password) {
if (user.isAdmin) return <AdminPage />;
else return <EmployeePage />;
} else {
console.log('Password not matched ..... ');
}
} else {
console.log('Email not matched ..... ');
}
}
}
return (
<div className='App'>
<header className='App-header'>
<p className='P'>Welcome there!</p>
<div
id='input-div'
style={{
display: 'flex',
flexDirection: 'column',
margin: '20px',
alignContent: 'left',
}}
>
<label>Email</label>
<input
type='email'
id='email'
onChange={handleEmail}
placeholder={userEmail}
// value={userEmail}
required
/>
<label>Password</label>
<input
type='password'
id='password'
onChange={handlePassword}
// value={userPassword}
placeholder={userPassword}
required
/>
</div>
<div style={{ display: 'flex', margin: '10px' }}>
<button
className='Button'
onClick={() => handleLogin(userEmail, userPassword)}
>
Login
</button>
<button className='Button'>Registration</button>
</div>
</header>
</div>
);
}
export default App;
userData.js
const userData = [
{
userId: 1,
userEmail: '[email protected]',
password: 'password',
isAdmin: true,
},
];
export default userData;
Admin.jsx
export default function AdminPage() {
return (
<>
<p>Admin Login</p>
</>
);
}
Thank for in advance.
