75 lines
1.9 KiB
JavaScript
75 lines
1.9 KiB
JavaScript
import React, { useState } from "react";
|
|
import { Form, Button, Modal, Alert } from "react-bootstrap";
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import { sendPasswordReminder } from "../backend/backend";
|
|
import { errorOccured } from "../features/user/userSlice";
|
|
|
|
const PasswordReminderModal = (props) => {
|
|
const { show, onHide, onExit } = props;
|
|
|
|
const errorMsg = useSelector((state) => state.user.error);
|
|
const dispatch = useDispatch();
|
|
|
|
const [email, setEmail] = useState("");
|
|
|
|
function handleChange(e) {
|
|
e.preventDefault();
|
|
const input = e.target;
|
|
setEmail(input.value);
|
|
}
|
|
|
|
function handleClickSend() {
|
|
sendPasswordReminder(email)
|
|
.then(() => {
|
|
onHide();
|
|
})
|
|
.catch((error) => dispatch(errorOccured(error.message)));
|
|
}
|
|
|
|
return (
|
|
<Modal show={show} onHide={onHide} onExited={onExit}>
|
|
<Modal.Header>
|
|
<Modal.Title>
|
|
<strong className="fs-2">Password Reset Email</strong>
|
|
</Modal.Title>
|
|
</Modal.Header>
|
|
|
|
<Modal.Body>
|
|
{errorMsg !== "" && <Alert variant="danger">{errorMsg}</Alert>}
|
|
<Form.Group>
|
|
<Form.Label>
|
|
Please enter the email address associated to your account to receive
|
|
a password reset email.
|
|
</Form.Label>
|
|
<Form.Control
|
|
type="email"
|
|
placeholder="Email"
|
|
name="email"
|
|
size="lg"
|
|
onChange={handleChange}
|
|
value={email}
|
|
/>
|
|
</Form.Group>
|
|
</Modal.Body>
|
|
|
|
<Modal.Footer>
|
|
<hr />
|
|
<Button
|
|
variant="light"
|
|
onClick={() => {
|
|
onHide();
|
|
dispatch(errorOccured(""));
|
|
}}
|
|
>
|
|
<b>Cancel</b>
|
|
</Button>
|
|
<Button variant="primary" onClick={handleClickSend}>
|
|
<b className="px-2">Send</b>
|
|
</Button>
|
|
</Modal.Footer>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default PasswordReminderModal;
|