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

Yay, user interactivity.

src/App.tsx

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

src/AuthModal.tsx

@@ -1,41 +1,46 @@
-import Button from "react-bootstrap/Button";
-import Form from "react-bootstrap/Form";
-import Modal from "react-bootstrap/Modal";
+import Button from "react-bootstrap/Button"
+import Form from "react-bootstrap/Form"
+import Modal from "react-bootstrap/Modal"
 
-function AuthModal() {
-  return (
-    <div
-      className="modal show"
-      style={{ display: "block", position: "initial" }}
-    >
-      <Modal.Dialog>
-        <Modal.Header closeButton>
-          <Modal.Title>Modal title</Modal.Title>
-        </Modal.Header>
+import React from "react"
 
-        <Modal.Body>
-          <Form>
-            <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>
+type AuthProps = {
+  doLogin: () => void;
+}
 
-            <Form.Group className="mb-3" controlId="formBasicPassword">
-              <Form.Label>Password</Form.Label>
-              <Form.Control type="password" placeholder="Password" />
-            </Form.Group>
-          </Form>
-        </Modal.Body>
+const AuthModal: React.FC<AuthProps> = ({ doLogin }) => {
+	return (
+		<div
+			className="modal show"
+			style={{ display: "block", position: "initial" }}
+		>
+			<Modal.Dialog>
+				<Modal.Header closeButton>
+					<Modal.Title>Modal title</Modal.Title>
+				</Modal.Header>
 
-        <Modal.Footer>
-          <Button variant="secondary">Close</Button>
-          <Button variant="primary">Save changes</Button>
-        </Modal.Footer>
-      </Modal.Dialog>
-    </div>
-  );
+				<Modal.Body>
+					<Form>
+						<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">
+							<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;