import { createStyles, IconButton, makeStyles } from "@material-ui/core"; import Button from "@material-ui/core/Button"; import Typography from "@material-ui/core/Typography"; import firebase from "firebase"; import { useState } from "react"; import { ArrowLeft } from "react-feather"; import { useHistory } from "react-router-dom"; import { useBooleanState } from "react-use-object-state"; import { Theme } from "../theme"; import EmailTextField from "./EmailTextField"; const useStyles = makeStyles((theme: Theme) => createStyles({ marginTop: { marginTop: theme.spacing(4), }, input: { width: "100%", maxWidth: 280, marginTop: theme.spacing(2), }, error: { marginTop: theme.spacing(2), }, }) ); const ResetPassword = () => { const classes = useStyles(); const history = useHistory(); const [email, setEmail] = useState(""); const emailValid = useBooleanState(true); const [success, setSuccess] = useState(false); const [error, setError] = useState(""); const handleSubmit = async () => { const emailNoSpaces = email.replace(/ /g, ""); try { // reset password sent to restored email await firebase.auth().sendPasswordResetEmail(emailNoSpaces); // success sending password setSuccess(true); } catch (error) { if (error.code === "auth/invalid-email") { setError("Please enter a valid email address."); } else if (error.code === "auth/user-not-found") { setError( "This email address does not correspond to an existing account. Either register for a new account or enter an email for an existing user." ); } else { setError(error.message); } } }; if (success) { return ( <> <Typography variant="h4">Check Your Mail</Typography> <Typography variant="subtitle1" align="center" className={classes.marginTop} > We sent password reset instructions to your email. <br /> If you have trouble finding the reset email, check your junk or spam folder. </Typography> </> ); } return ( <> <IconButton style={{ position: "absolute", left: 40 }} onClick={history.goBack} > <ArrowLeft /> </IconButton> <Typography variant="h4">Reset Password</Typography> <Typography variant="body1" align="center" className={classes.marginTop}> Enter the email associated with your account and we'll send an email with instructions to reset your password. </Typography> <EmailTextField email={email} onChangeEmail={setEmail} onChangeValid={emailValid.setState} valid={emailValid.state} className={classes.input} /> {error && ( <Typography color="error" className={classes.error}> {error} </Typography> )} <Button variant="contained" color="primary" className={classes.input} onClick={handleSubmit} disabled={!emailValid.state || !email} > Send reset link </Button> </> ); }; export default ResetPassword;