import React from "react";
import Link from "next/link";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import InputAdornment from "@material-ui/core/InputAdornment";
import Icon from "@material-ui/core/Icon";
// @material-ui/icons
import Email from "@material-ui/icons/Email";
import People from "@material-ui/icons/People";
// core components
import Header from "/components/Header/Header.js";
import HeaderLinks from "/components/Header/HeaderLinks.js";
import Footer from "/components/Footer/Footer.js";
import GridContainer from "/components/Grid/GridContainer.js";
import GridItem from "/components/Grid/GridItem.js";
import Button from "/components/CustomButtons/Button.js";
import Card from "/components/Card/Card.js";
import CardBody from "/components/Card/CardBody.js";
import CardHeader from "/components/Card/CardHeader.js";
import CardFooter from "/components/Card/CardFooter.js";
import CustomInput from "/components/CustomInput/CustomInput.js";
import { useAuth } from "../context/AuthContext";
import { useState } from "react";
import { useRouter } from "next/dist/client/router";
import styles from "/styles/jss/nextjs-material-kit/pages/loginPage.js";
const useStyles = makeStyles(styles);
/**
* The function `handleEmailChange` updates the value of `email` based on the input from an event.
* @param event - The `event` parameter in the `handleEmailChange` function typically represents the
* event that occurred, such as a change event on an input field. In this case, it is capturing the
* value entered by the user in an input field.
* @returns The `handleEmailChange` function updates the email state based on the user input in the
* email input field.
*/
export const handleEmailChange = (event) => {
const enteredEmail = event.target.value;
setEmail(enteredEmail);
};
/**
* The function `handleSubmit` is an asynchronous function that handles form submission for resetting
* a password, displaying alerts based on the outcome.
* @param event - The `event` parameter in the `handleSubmit` function is an event object that
* represents the event being handled, in this case, a form submission event. It is typically passed
* to event handler functions in JavaScript to provide information about the event, such as the
* target element and any user interaction details. In
*/
export const handleSubmit = async (event) => {
event.preventDefault();
try {
setLoading(true);
await resetPassword(email);
alert("Check your inbox for further instructions");
router.push("/login");
} catch (error) {
console.error("Error resetting password:", error.message);
alert(`Failed to reset password`);
setEmail("");
} finally {
setLoading(false);
}
};
/**
* The `ForgotPasswordPage` function handles the form submission for resetting a password and displays
* alerts based on the outcome.
* @param props - The `props` parameter in the `ForgotPasswordPage` function represents the properties
* passed to the component. In this case, it includes any additional props that might be passed to the
* `ForgotPasswordPage` component when it is used in another part of the application. These props can
* be accessed within the
* @returns The `ForgotPasswordPage` component is being returned. It consists of a form for resetting a
* password where the user can enter their email address. The form includes a header, input field for
* email, and a button to reset the password. The component also includes styling elements such as
* background images and card animations. Additionally, there are event handlers for email input change
* and form submission.
*/
export function PasswordRecoveryPage(props) {
// Form data confirmation
const router = useRouter();
const [email, setEmail] = useState("");
const { resetPassword } = useAuth();
const [loading, setLoading] = useState(false);
const [message, setMessage] = useState("");
const [cardAnimaton, setCardAnimation] = React.useState("cardHidden");
setTimeout(function () {
setCardAnimation("");
}, 700);
const classes = useStyles();
const { ...rest } = props;
return (
<div>
<Header
absolute
color="transparent"
brand="ThisIsNotFair"
rightLinks={
<HeaderLinks enableapps={false} login={false} loginButton={false} />
}
{...rest}
/>
<div
className={classes.pageHeader}
style={{
backgroundImage: "url('/img/bg7.jpg')",
backgroundSize: "cover",
backgroundPosition: "top center",
}}
>
<div className={classes.container}>
<GridContainer justify="center">
<GridItem xs={12} sm={6} md={4}>
<Card className={classes[cardAnimaton]}>
<form className={classes.form}>
<CardHeader color="primary" className={classes.cardHeader}>
<h3>Forgot Password</h3>
</CardHeader>
<CardBody>
<p style={{ textAlign: "center" }}>
Enter your email & we'll send you a link to reset your
password
</p>
<CustomInput
labelText="Email"
id="first"
formControlProps={{
fullWidth: true,
}}
inputProps={{
type: "text",
value: email,
onChange: handleEmailChange,
endAdornment: (
<InputAdornment position="end">
<People className={classes.inputIconsColor} />
</InputAdornment>
),
}}
/>
</CardBody>
<CardFooter className={classes.cardFooter}>
{/* Remove the href next time */}
<Button
simple
color="primary"
size="lg"
href="/mainmenu"
onClick={handleSubmit}
onKeyDown={(e) => e.key === "Enter" && handleSubmit(e)}
>
Reset Password
</Button>
</CardFooter>
</form>
</Card>
</GridItem>
</GridContainer>
</div>
<Footer whiteFont />
</div>
</div>
);
}