Save the username and password, show an alert to prove it.

src/App.tsx

@@ -22,7 +22,9 @@ const App = () => {
 				//setUsers(data)
 			});
 	};
-
+	const doLogin = (username: string, password: string) => {
+		alert("I be authin '" + username)
+	};
 	const loadAuth = () => {
 		const auth = localStorage.getItem("auth");
 		if (!auth) return;
@@ -40,7 +42,7 @@ const App = () => {
 
 	return (
 		<div className="App">
-			{state ? <p>{state.username}</p> : <AuthModal doLogin={() => alert("login")}></AuthModal>}
+			{state ? <p>{state.username}</p> : <AuthModal doLogin={doLogin}></AuthModal>}
 		</div>
 	);
 };

src/AuthModal.tsx

@@ -2,13 +2,16 @@ import Button from "react-bootstrap/Button"
 import Form from "react-bootstrap/Form"
 import Modal from "react-bootstrap/Modal"
 
-import React from "react"
+import React, {useState} from "react"
 
 type AuthProps = {
-  doLogin: () => void;
+  doLogin: (email: string, password: string) => void;
 }
 
 const AuthModal: React.FC<AuthProps> = ({ doLogin }) => {
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+
 	return (
 		<div
 			className="modal show"
@@ -23,7 +26,7 @@ const AuthModal: React.FC<AuthProps> = ({ doLogin }) => {
 					<Form>
 						<Form.Group className="mb-3" controlId="formBasicEmail">
 							<Form.Label>Email address</Form.Label>
-							<Form.Control type="email" placeholder="Enter email" />
+							<Form.Control type="email" placeholder="Enter email" onChange={e => setEmail(e.target.value)}/>
 							<Form.Text className="text-muted">
 								We'll never share your email with anyone else.
 							</Form.Text>
@@ -31,13 +34,13 @@ const AuthModal: React.FC<AuthProps> = ({ doLogin }) => {
 
 						<Form.Group className="mb-3" controlId="formBasicPassword">
 							<Form.Label>Password</Form.Label>
-							<Form.Control type="password" placeholder="Password" />
+							<Form.Control type="password" placeholder="Password" onChange={e => setPassword(e.target.value)}/>
 						</Form.Group>
 					</Form>
 				</Modal.Body>
 
 				<Modal.Footer>
-					<Button variant="primary" onClick={doLogin}>Login</Button>
+					<Button variant="primary" onClick={() => {doLogin(email, password)}}>Login</Button>
 				</Modal.Footer>
 			</Modal.Dialog>
 		</div>