homepage
Thu Apr 20 2023 01:09:28 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 "merchants": 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> {/* login form */} <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="enter 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