Eli Ribble
bab5d421d4
The goal here is to be able to augment the client with additional data as we get it. At this point I'm now augmenting with the mailbox data that the MailboxList is requesting and showing that. That's progress. There may be significant issues with making multiple requests in a single round-trip because my client library appears to do things like hard-coding the position of specific requests. I may have to work around this.
59 lines
1.4 KiB
TypeScript
59 lines
1.4 KiB
TypeScript
import Button from "react-bootstrap/Button";
|
|
import Form from "react-bootstrap/Form";
|
|
import Modal from "react-bootstrap/Modal";
|
|
|
|
import React, { useState } from "react";
|
|
|
|
type AuthProps = {
|
|
onLogin: (email: string, password: string) => void;
|
|
show: boolean;
|
|
};
|
|
|
|
const AuthModal: React.FC<AuthProps> = ({ onLogin, show }) => {
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
|
|
return (
|
|
<Modal show={show}>
|
|
<Modal.Header closeButton>
|
|
<Modal.Title>Modal title</Modal.Title>
|
|
</Modal.Header>
|
|
|
|
<Modal.Body>
|
|
<Form
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
onLogin(email, password);
|
|
}}
|
|
>
|
|
<Form.Group className="mb-3" controlId="formBasicEmail">
|
|
<Form.Label>Email address</Form.Label>
|
|
<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>
|
|
</Form.Group>
|
|
|
|
<Form.Group className="mb-3" controlId="formBasicPassword">
|
|
<Form.Label>Password</Form.Label>
|
|
<Form.Control
|
|
type="password"
|
|
placeholder="Password"
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
/>
|
|
</Form.Group>
|
|
<Button variant="primary" type="submit">
|
|
Login
|
|
</Button>
|
|
</Form>
|
|
</Modal.Body>
|
|
|
|
<Modal.Footer></Modal.Footer>
|
|
</Modal>
|
|
);
|
|
};
|
|
export default AuthModal;
|