single login
Mon Apr 17 2023 23:40:58 GMT+0000 (Coordinated Universal Time)
Saved by @preston #javascript
import React, { useState } from 'react'; import { Navigate } from 'react-router-dom'; import { Navbar, Nav, Container, Card, Form, Button } from 'react-bootstrap'; const LoginPage = () => { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const [redirectTo, setRedirectTo] = useState(null); const handleUsernameChange = (event) => { setUsername(event.target.value); }; const handlePasswordChange = (event) => { setPassword(event.target.value); }; const handleLogin = (event) => { event.preventDefault(); // Implement your login logic here // Assume that you get a response object with the user's role as a property const response = { role: 'admin' }; // replace with your authentication logic switch (response.role) { case 'admin': setRedirectTo('/admin'); break; case 'manager': setRedirectTo('/manager'); break; case 'manager': setRedirectTo('/merchants'); break; default: console.log('Invalid role'); break; } }; if (redirectTo) { return <Navigate to={redirectTo} />; } return ( <div> <Navbar bg="dark" variant="dark" expand="lg"> <Container> <Navbar.Brand>The Merchandisers</Navbar.Brand> <Navbar.Toggle aria-controls="basic-navbar-nav" /> <Navbar.Collapse id="basic-navbar-nav"> <Nav className="me-auto"> <Nav.Link>Contact Us</Nav.Link> </Nav> <Nav> <Nav.Link>Logout</Nav.Link> </Nav> </Navbar.Collapse> </Container> </Navbar> <Container className="mt-4 d-flex justify-content-center"> <Card style={{ maxWidth: '500px' }}> <Card.Body> <h1>Product Smart</h1> <Form onSubmit={handleLogin}> <Form.Group controlId="formBasicUsername"> <Form.Label></Form.Label> <Form.Control type="text" placeholder="Enter username" value={username} onChange={handleUsernameChange} /> </Form.Group> <Form.Group controlId="formBasicPassword"> <Form.Label></Form.Label> <Form.Control type="password" placeholder="Password" value={password} onChange={handlePasswordChange} /> </Form.Group> <br /> <Button variant="primary" type="submit">Login</Button> <br /> </Form> </Card.Body> </Card> </Container> </div> ); }; export default LoginPage;
Comments