eliribble
/
drishti
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Show an alert when we click the "login" button. 

Yay, user interactivity.
This commit is contained in:
Eli Ribble 2024-08-27 10:09:41 -07:00
parent 302cbdd43d
commit 9ff63d96fd
2 changed files with 41 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@ -40,7 +40,7 @@ const App = () => {
return ( return (
<div className="App"> <div className="App">
{state ? <p>{state.username}</p> : <AuthModal></AuthModal>} {state ? <p>{state.username}</p> : <AuthModal doLogin={() => alert("login")}></AuthModal>}
</div> </div>
); );
}; };

75
src/AuthModal.tsx
View File

@ -1,41 +1,46 @@
import Button from "react-bootstrap/Button"; import Button from "react-bootstrap/Button"
import Form from "react-bootstrap/Form"; import Form from "react-bootstrap/Form"
import Modal from "react-bootstrap/Modal"; import Modal from "react-bootstrap/Modal"
function AuthModal() { import React from "react"
return (
<div
className="modal show"
style={{ display: "block", position: "initial" }}
>
<Modal.Dialog>
<Modal.Header closeButton>
<Modal.Title>Modal title</Modal.Title>
</Modal.Header>
<Modal.Body> type AuthProps = {
<Form> doLogin: () => void;
<Form.Group className="mb-3" controlId="formBasicEmail"> }
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword"> const AuthModal: React.FC<AuthProps> = ({ doLogin }) => {
<Form.Label>Password</Form.Label> return (
<Form.Control type="password" placeholder="Password" /> <div
</Form.Group> className="modal show"
</Form> style={{ display: "block", position: "initial" }}
</Modal.Body> >
<Modal.Dialog>
<Modal.Header closeButton>
<Modal.Title>Modal title</Modal.Title>
</Modal.Header>
<Modal.Footer> <Modal.Body>
<Button variant="secondary">Close</Button> <Form>
<Button variant="primary">Save changes</Button> <Form.Group className="mb-3" controlId="formBasicEmail">
</Modal.Footer> <Form.Label>Email address</Form.Label>
</Modal.Dialog> <Form.Control type="email" placeholder="Enter email" />
</div> <Form.Text className="text-muted">
); We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" />
</Form.Group>
</Form>
</Modal.Body>
<Modal.Footer>
<Button variant="primary" onClick={doLogin}>Login</Button>
</Modal.Footer>
</Modal.Dialog>
</div>
);
} }
export default AuthModal; export default AuthModal;