60 lines
1.4 KiB
TypeScript
60 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;
|