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,8 +1,14 @@
-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"
+
+type AuthProps = {
+  doLogin: () => void;
+}
+
+const AuthModal: React.FC<AuthProps> = ({ doLogin }) => {
 	return (
 		<div
 			className="modal show"
@@ -31,8 +37,7 @@ function AuthModal() {
 				</Modal.Body>
 
 				<Modal.Footer>
-          <Button variant="secondary">Close</Button>
+					<Button variant="primary" onClick={doLogin}>Login</Button>
-          <Button variant="primary">Save changes</Button>
 				</Modal.Footer>
 			</Modal.Dialog>
 		</div>