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 `handlePasswordChange` updates the password state with the value entered in an input
* field.
* @param event - The `event` parameter in the `handlePasswordChange` function is an object that
* represents the event that occurred, such as a user typing in an input field. It contains
* information about the event, including the target element (in this case, the input field where the
* password is being entered) and
*/
export const handlePasswordChange = (event) => {
const enteredPassword = event.target.value;
setPassword(enteredPassword);
};
/**
* The `handleEmailChange` function updates the email state with the value entered in an input field.
* @param event - The `event` parameter in the `handleEmailChange` function is an object that
* represents the event that occurred, in this case, a user typing in an input field.
*/
export const handleEmailChange = (event) => {
const enteredEmail = event.target.value;
setEmail(enteredEmail);
if (enteredEmail === "thisisnotfairswe@gmail.com") {
setIsAdmin(true);
} else {
setIsAdmin(false);
}
};
/**
* The function `handleFacebookLogin` attempts to log in with Facebook, sets loading and error states
* accordingly, and redirects to the main menu if successful.
* @param event - The `event` parameter in the `handleFacebookLogin` function is typically an event
* object that represents the event of clicking the Facebook icon for login.
*/
export const handleFacebookLogin = async (event) => {
try {
setLoginLoading(true); // Set loading state to true
await loginWithFacebook();
if (currentUser) {
router.push("/mainmenu");
}
} catch (error) {
setLoginError(error.message); // Set error state if login fails
} finally {
setLoginLoading(false); // Reset loading state regardless of success or failure
}
};
/**
* The `handleGoogleLogin` function attempts to log in with Google, sets loading and error states
* accordingly, and redirects to the main menu upon successful login.
* @param event - The `event` parameter in the `handleGoogleLogin` function is typically an event
* object that represents the event of clicking the Google icon for login.
*/
export const handleGoogleLogin = async (event) => {
try {
setLoginLoading(true); // Set loading state to true
await loginWithGoogle();
if (currentUser) {
router.push("/mainmenu");
}
} catch (error) {
setLoginError(error.message); // Set error state if login fails
} finally {
setLoginLoading(false); // Reset loading state regardless of success or failure
}
};
/**
* The `handleGithubLogin` function attempts to log in with GitHub, sets loading and error states
* accordingly, and redirects to the main menu upon successful login.
* @param event - The `event` parameter in the `handleGithubLogin` function is typically an event
* object that represents the event of clicking the GitHub icon for login.
*/
export const handleGithubLogin = async (event) => {
try {
setLoginLoading(true); // Set loading state to true
await loginWithGithub();
if (currentUser) {
router.push("/mainmenu");
}
} catch (error) {
setLoginError(error.message); // Set error state if login fails
} finally {
setLoginLoading(false); // Reset loading state regardless of success or failure
}
};
/**
* The `handleSubmit` function is an asynchronous function that handles form submission by attempting
* to log in with the provided email and password, redirecting to the main menu on success, and
* displaying an alert for invalid credentials.
* @param event - The `event` parameter in the `handleSubmit` function is an event object that
* represents the event of user clicking the login button.
*/
export const handleSubmit = async (event) => {
event.preventDefault();
try {
await login(email, password);
router.push("/mainmenu");
} catch (error) {
alert("Invalid email or password");
setEmail("");
setPassword("");
}
};
/**
* The `LoginPage` function handles user login functionality, including form submission, social media
* login options, and error handling.
* @param props - The `LoginPage` component you provided is a functional component that handles user
* login functionality.
* @returns The `LoginPage` component is being returned. It includes a form for user login with options
* to log in using Facebook, Google, or GitHub accounts. The form allows users to enter their email and
* password for login. There are also links for password recovery and signing up for a new account. The
* component is styled using CSS classes and includes a background image.
*/
export function LoginPage(props) {
// Form data confirmation
const router = useRouter();
const [password, setPassword] = useState("");
const [email, setEmail] = useState("");
const {
login,
loginWithFacebook,
loginWithGoogle,
loginWithGithub,
currentUser,
setIsAdmin,
} = useAuth();
const [loginLoading, setLoginLoading] = useState(false); // State to manage loading state of login
const [loginError, setLoginError] = useState(null); // State to manage login error
// const handleFormSubmit = (event) => {
// if (event.key === "Enter") {
// event.preventDefault();
// handleSubmit(event);
// }
// };
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}>
<h4>Login</h4>
<div className={classes.socialLine}>
<Button
justIcon
color="transparent"
onClick={handleGithubLogin}
>
<i className={"fab fa-github"} />
</Button>
<Button
justIcon
color="transparent"
onClick={handleFacebookLogin}
>
<i className={"fab fa-facebook"} />
</Button>
<Button
justIcon
color="transparent"
onClick={handleGoogleLogin}
>
<i className={"fab fa-google-plus-g"} />
</Button>
</div>
</CardHeader>
<CardBody>
<CustomInput
labelText="Email"
id="first"
formControlProps={{
fullWidth: true,
}}
inputProps={{
type: "text",
value: email,
onChange: handleEmailChange,
endAdornment: (
<InputAdornment position="end">
<People className={classes.inputIconsColor} />
</InputAdornment>
),
}}
/>
<CustomInput
labelText="Password"
id="pass"
formControlProps={{
fullWidth: true,
}}
inputProps={{
type: "password",
value: password,
onChange: handlePasswordChange,
endAdornment: (
<InputAdornment position="end">
<Icon className={classes.inputIconsColor}>
lock_outline
</Icon>
</InputAdornment>
),
autoComplete: "off",
}}
/>
<a
style={{
fontSize: "10px",
textAlign: "right",
marginLeft: "70%",
whiteSpace: "nowrap",
}}
href="/forgotpassword"
>
Forgot Password?
</a>
</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)}
>
Login
</Button>
</CardFooter>
</form>
<p className={classes.divider}>Don't have an account yet?</p>
<Link href="/signup">
<Button simple color="primary" size="lg" href="/signup">
Sign Up
</Button>
</Link>
</Card>
</GridItem>
</GridContainer>
</div>
<Footer whiteFont />
</div>
</div>
);
}