148 lines
4.1 KiB
JavaScript
148 lines
4.1 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import { makeStyles } from "@material-ui/core/styles";
|
|
import DialogTitle from "@material-ui/core/DialogTitle";
|
|
import DialogContent from "@material-ui/core/DialogContent";
|
|
import Dialog from "@material-ui/core/Dialog";
|
|
import Divider from "@material-ui/core/Divider";
|
|
import ButtonSecondary from "../Input/ButtonSecondary";
|
|
import IconButton from "@material-ui/core/IconButton";
|
|
import TextField from "@material-ui/core/TextField";
|
|
import CloseIcon from "@material-ui/icons/Close";
|
|
import { useDispatch } from "react-redux";
|
|
import Link from "@material-ui/core/Link";
|
|
import validator from "validator";
|
|
import InputAdornment from "@material-ui/core/InputAdornment";
|
|
import AccountCircle from "@material-ui/icons/AccountCircle";
|
|
import { remindPassword, notification } from "../../actions";
|
|
import { useHistory } from "react-router-dom";
|
|
|
|
export default function ForgotPassword(props) {
|
|
useEffect(() => {
|
|
document.title = "Menui - Odzyskiwanie hasła";
|
|
});
|
|
const initialData = {
|
|
email: "",
|
|
emailError: false,
|
|
};
|
|
const [data, setData] = useState(initialData);
|
|
const dispatch = useDispatch();
|
|
const history = useHistory();
|
|
|
|
const loginStyles = makeStyles((theme) => ({
|
|
root: {
|
|
textAlign: "center",
|
|
"& .MuiPaper-root": {
|
|
backgroundColor: "#262626",
|
|
color: "#bbbbbb",
|
|
borderRadius: "24px"
|
|
},
|
|
},
|
|
closeButton: {
|
|
color: "#bbbbbb",
|
|
position: "absolute",
|
|
right: theme.spacing(1),
|
|
top: theme.spacing(1),
|
|
},
|
|
textInput: {
|
|
marginTop: "20px",
|
|
marginBottom: "10px",
|
|
width: "90%",
|
|
"& .MuiInputBase-root": {
|
|
color: "#01c3a9",
|
|
borderRadius: "14px"
|
|
},
|
|
"& .MuiInputLabel-root": {
|
|
color: "#bbbbbb",
|
|
},
|
|
},
|
|
link: {
|
|
fontSize: "0.9rem",
|
|
},
|
|
}));
|
|
|
|
const loginClass = loginStyles();
|
|
|
|
const validateLogin = () => {
|
|
var valid;
|
|
var validation = {
|
|
email: validator.isEmail(data.email),
|
|
};
|
|
setData({
|
|
...data,
|
|
emailError: !validation.email,
|
|
});
|
|
valid = validation.email;
|
|
return valid;
|
|
};
|
|
|
|
const handleRemind = () => {
|
|
if (validateLogin()) {
|
|
dispatch(remindPassword(data.email));
|
|
} else {
|
|
dispatch(notification("Podaj poprawne dane.", "error"));
|
|
}
|
|
};
|
|
|
|
// CODE
|
|
|
|
return (
|
|
<div>
|
|
<Dialog
|
|
className={loginClass.root}
|
|
onClose={() => history.push("/")}
|
|
open={true}
|
|
aria-labelledby="login-title"
|
|
>
|
|
<DialogTitle id="login-title">Odzyskiwanie hasła</DialogTitle>
|
|
<IconButton
|
|
className={loginClass.closeButton}
|
|
onClick={() => history.push("/")}
|
|
aria-label="close"
|
|
>
|
|
<CloseIcon />
|
|
</IconButton>
|
|
<Divider />
|
|
<DialogContent>
|
|
<p>
|
|
Podaj adres email do swojego konta. Link do zmiany hasła powinien
|
|
dotrzeć do Ciebie w ciągu maksymalnie 15 minut (sprawdź również
|
|
folder SPAM). Jeśli nie pamiętasz również adresu email, skontaktuj
|
|
się z obsługą klienta.
|
|
</p>
|
|
<TextField
|
|
className={loginClass.textInput}
|
|
required
|
|
id="email"
|
|
label="Email"
|
|
type="email"
|
|
variant="outlined"
|
|
error={data.emailError}
|
|
onChange={(event) => (data.email = event.target.value)}
|
|
InputProps={{
|
|
startAdornment: (
|
|
<InputAdornment position="start">
|
|
<AccountCircle color="primary" />
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
/>
|
|
<div className="login-dialog-buttons">
|
|
<ButtonSecondary
|
|
onClick={() => handleRemind()}
|
|
text="Wyślij email"
|
|
/>
|
|
</div>
|
|
<p>
|
|
Nie masz konta?{" "}
|
|
<span>
|
|
<Link href="#" onClick={() => history.push("/register")}>
|
|
Zarejestruj się.
|
|
</Link>
|
|
</span>
|
|
</p>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|