import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import CssBaseline from '@mui/material/CssBaseline';
import TextField from '@mui/material/TextField';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import Link from '@mui/material/Link';
import Paper from '@mui/material/Paper';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
import Typography from '@mui/material/Typography';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { useState } from 'react';
import { useNavigate } from "react-router-dom";
import { signInWithEmailAndPassword } from 'firebase/auth';
import { auth } from '../../firebase';
/**
* @memberof LoginPage
* @function Copyright
* @description Renders a copyright message.
* @param {Object} props - Properties passed to the component.
* @returns {React.Component} Copyright component.
*/
function Copyright(props) {
return (
<Typography variant="body2" color="text.secondary" align="center" {...props}>
{'Copyright © '}
<Link color="inherit" href="/">
StudySync
</Link>{' '}
{new Date().getFullYear()}
{'.'}
</Typography>
);
}
// TODO remove, this demo shouldn't need to reset the theme.
const defaultTheme = createTheme();
/**
* @class LoginPage
* @classdesc LoginPage - A functional React component providing a user interface for login.
* It includes form inputs for email and password, and handles user authentication.
*
* @returns {React.Component} A component for user login.
*/
const LoginPage = () => {
const [_email, setEmail] = useState('');
const [_password, setPassword] = useState('');
const [error, setError] = useState('');
const navigate = useNavigate();
/**
* @memberof LoginPage
* @function handleSubmit
* @description Handles the submit event of the login form.
* It performs user authentication and navigates to the home page upon successful login.
* @param {Event} event - The event object.
*/
const handleSubmit = async (event) => {
event.preventDefault();
if (_email == '' || _password == '') {
alert('One or both of the fields are empty!');
return;
}
try {
await signInWithEmailAndPassword(auth, _email, _password);
navigate('/');
} catch (e) {
switch (e.code) {
case 'auth/invalid-email':
alert('Invalid Email!');
break;
case 'auth/invalid-login-credentials':
alert('Invalid Credentials!');
break;
case 'auth/invalid-password':
alert('Invalid password!');
break;
}
}
};
return (
<ThemeProvider theme={defaultTheme}>
<Grid container component="main" sx={{ height: '100vh' }}>
<CssBaseline />
<Grid
item
xs={false}
sm={4}
md={7}
sx={{
backgroundImage: 'url(https://source.unsplash.com/random?wallpapers)',
backgroundRepeat: 'no-repeat',
backgroundColor: (t) =>
t.palette.mode === 'light' ? t.palette.grey[50] : t.palette.grey[900],
backgroundSize: 'cover',
backgroundPosition: 'center',
}}
/>
<Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
<Box
sx={{
my: 8,
mx: 4,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: 1 }}>
<TextField
value={_email}
onChange={(e) => setEmail(e.target.value)}
margin="normal"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
autoFocus
/>
<TextField
margin="normal"
value={_password}
onChange={(e) => setPassword(e.target.value)}
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
/>
<Button
onClick={handleSubmit}
fullWidth
variant="contained"
sx={{ mt: 3, mb: 2 }}
>
Sign In
</Button>
<Grid container>
<Grid item xs>
<Link href="/passwordreset" variant="body2">
Forgot password?
</Link>
</Grid>
<Grid item>
<Link href="/signup" variant="body2">
{"Don't have an account?"}
</Link>
</Grid>
</Grid>
<Copyright sx={{ mt: 5 }} />
</Box>
</Box>
</Grid>
</Grid>
</ThemeProvider>
);
}
export default LoginPage;