Skip to content

Commit

Permalink
add remember me
Browse files Browse the repository at this point in the history
  • Loading branch information
YaoLiu010802 committed Sep 12, 2024
1 parent a96ce82 commit c3099e6
Showing 1 changed file with 175 additions and 133 deletions.
308 changes: 175 additions & 133 deletions frontend/src/public-components/Login.jsx
Original file line number Diff line number Diff line change
@@ -1,163 +1,205 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import AccountCircle from '@mui/icons-material/AccountCircle';
import Lock from '@mui/icons-material/Lock';
import { Button, Grid, FormControlLabel, Typography, Avatar, Paper, Checkbox, LoadingButton } from '@mui/material';
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
import { Link, useNavigate } from 'react-router-dom';
import * as React from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import {
Button,
Grid,
FormControlLabel,
Typography,
Avatar,
Paper,
Checkbox,
} from "@mui/material";
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import { Link, useNavigate } from "react-router-dom";
import { supabase } from "../supabase";
import { useState} from 'react';
import useGetAccountTypeByUUID from '../queries/Account Setup/useGetAccountTypeByUUID';
import { useSelector } from 'react-redux';
import { useState, useEffect } from "react";
import useGetAccountTypeByUUID from "../queries/Account Setup/useGetAccountTypeByUUID";

function Copyright(props) {
return (
<Typography variant="body2" color="text.secondary" align="center" {...props}>
{'Copyright © '}
<Typography
variant="body2"
color="text.secondary"
align="center"
{...props}
>
{"Copyright © "}
<Link color="inherit" href="https://mui.com/">
RentConnect
</Link>{' '}
</Link>{" "}
{new Date().getFullYear()}
{'.'}
{"."}
</Typography>
);
}



function LogIn(){
const [loading, setLoading] = useState(false)
const [email, setEmail] = useState('');
const handleEmailChange = f => {
setEmail(f.target.value);
}
const [password, setPassword] = useState('');
const handlePasswordChange = f => {
setPassword(f.target.value);
}
function LogIn() {
const [loading, setLoading] = useState(false);
const [email, setEmail] = useState("");
const [rememberMe, setRememberMe] = useState(false);
const [password, setPassword] = useState("");
const [errorText, setErrorText] = useState(false);
const navigate = useNavigate();

const fetchAccountSetup = useGetAccountTypeByUUID();

useEffect(() => {
const savedEmail = localStorage.getItem("email");
const savedPassword = localStorage.getItem("password");
if (savedEmail && savedPassword) {
setEmail(savedEmail);
setPassword(savedPassword);
setRememberMe(true);
}
}, []);

const handleRememberMeChange = (f) => setRememberMe(f.target.checked);
const handleEmailChange = (f) => setEmail(f.target.value);
const handlePasswordChange = (f) => setPassword(f.target.value);

const attemptLogIn = (e) => {
e.preventDefault()
supabase.auth.signInWithPassword({
e.preventDefault();
setLoading(true);

supabase.auth
.signInWithPassword({
email: email,
password: password,
}).then( async data=> {
if (!data.error){
var account_type = await fetchAccountSetup(data.data.user.id)
if (account_type.data[0]){
switch(account_type.data[0].account_type){
case 'Property Manager':
navigate('/AccountSetUpPM');
break;
case 'Renter':
navigate('/AccountSetUpR');
break;
default:
console.log('invalid account type found');
return;
}
}
else{
navigate('/dashboard');
})
.then(async (data) => {
setLoading(false);
if (!data.error) {
const user = data.data.user;
var account_type = await fetchAccountSetup(data.data.user.id);

if (rememberMe) {
localStorage.setItem("email", email);
localStorage.setItem("password", password);
localStorage.setItem("user", JSON.stringify(user));
} else {
localStorage.removeItem("email");
localStorage.removeItem("password");
sessionStorage.setItem("user", JSON.stringify(user));
}

if (account_type.data[0]) {
switch (account_type.data[0].account_type) {
case "Property Manager":
navigate("/AccountSetUpPM");
break;
case "Renter":
navigate("/AccountSetUpR");
break;
default:
console.log("Invalid account type found");
return;
}
} else {
navigate("/dashboard");
}
} else {
setErrorText(true);
setPassword("");
}
else{
setErrorText(true);
setPassword('');
}
})
.catch(error => {
})
.catch((error) => {
setLoading(false);
setErrorText(true);
setPassword('');
setPassword("");
console.log(error);
})
});
};

return (
<Grid container component="main" sx={{ height: '100vh' }}>
<Grid
item
xs={false}
sm={4}
md={6}
<Grid container component="main" sx={{ height: "100vh" }}>
<Grid
item
xs={false}
sm={4}
md={6}
sx={{
backgroundColor: "#4158D0",
backgroundImage:
"linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%)",
}}
/>
<Grid item xs={12} sm={8} md={6} component={Paper} elevation={6} square>
<Box
sx={{
backgroundColor: "#4158D0",
backgroundImage: "linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%)",
my: 8,
mx: 4,
display: "flex",
flexDirection: "column",
alignItems: "center",
height: "80%",
justifyContent: "center",
}}
/>
<Grid item xs={12} sm={8} md={6} component={Paper} elevation={6} square>
<Box
sx={{
my: 8,
mx: 4,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
height: "80%",
justifyContent: "center"
}}
>
<Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<Box component="form" noValidate sx={{ mt: 1 }}>
<TextField
margin="normal"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
autoFocus
value={email}
onChange={handleEmailChange}
/>
<TextField
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
value={password}
onChange={handlePasswordChange}
>
<Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<Box component="form" noValidate sx={{ mt: 1 }}>
<TextField
margin="normal"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
autoFocus
value={email}
onChange={handleEmailChange}
/>
<TextField
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
value={password}
onChange={handlePasswordChange}
/>
<FormControlLabel
control={
<Checkbox
value="remember"
color="primary"
checked={rememberMe}
onChange={handleRememberMeChange}
/>
<FormControlLabel
control={<Checkbox value="remember" color="primary" />}
label="Remember me"
/>
<Button
type="submit"
fullWidth
variant="contained"
sx={{ mt: 3, mb: 2 }}
disabled={loading}
onClick={attemptLogIn}
>
Sign In
</Button>
<Grid container>
<Grid item>
<Link to="/SignUp" href="#" variant="body2">
Don't have an account? Sign Up
</Link>
</Grid>
</Grid>
<Copyright sx={{ mt: 5 }} />
</Box>
</Box>
</Grid>
}
label="Remember me"
/>
<Button
type="submit"
fullWidth
variant="contained"
sx={{ mt: 3, mb: 2 }}
disabled={loading}
onClick={attemptLogIn}
>
Sign In
</Button>
<Grid container>
<Grid item>
<Link to="/SignUp" href="#" variant="body2">
Don't have an account? Sign Up
</Link>
</Grid>
</Grid>
<Copyright sx={{ mt: 5 }} />
</Box>
</Box>
</Grid>
</Grid>
);
}

export default LogIn;
export default LogIn;

0 comments on commit c3099e6

Please sign in to comment.