import React, { useState,useEffect} from 'react';
import SignUpForm from './component/SignUpForm';
import LoginForm from './component/LoginForm';
import Timer from './component/Timer';
import './styles.css'
import { GoogleOAuthProvider,GoogleLogin} from '@react-oauth/google';
const App = () => {
const [user, setUser] = useState([]);
const [isLoggedIn, setIsLoggedIn] = useState(false)
useEffect(() => {
// Retrieve user data from localStorage on app load
const userData = localStorage.getItem('UserData');
if (userData) {
setUser(JSON.parse(userData));
}
}, []);
const handleSignUp = (userData) => {
// Save the user details in state (You can also store them in a database)
setUser((prevUser) => [...prevUser, userData]);
localStorage.setItem('UserData', JSON.stringify([...user, userData]));
}
const handleGoogleSuccess = (credentialResponse) => {
// Handle successful Google sign-up
console.log(credentialResponse);
setIsLoggedIn(true);
}
const handleGoogleError = () => {
// Handle Google sign-up error
console.log("Google Login Failed");
}
const handleLogin = (loginData) => {
const { email, password } = loginData;
// Perform login authentication if needed (e.g., check against saved user
details)
const getuserArr = localStorage.getItem("UserData");
if (email === "" || !email.includes("@") || !email.includes(".com")) {
window.alert('Please enter a valid email address');
} else if (password === "") {
window.alert('Password field is required');
} else if (password.length < 7) {
window.alert('Password length should be more than 7 characters');
} else {
if (getuserArr && getuserArr.length) {
const userdata = JSON.parse(getuserArr);
const userlogin = userdata.filter((el, k) => {
return el.email === email && el.password === password
});
if (userlogin.length === 0) {
alert("Invalid details");
} else {
console.log("User login successfully");
setIsLoggedIn(true);
localStorage.setItem("user_login", JSON.stringify(userlogin));
}
}
}
}
const handleLogout = () => {
setUser([]);
setIsLoggedIn(false);
// localStorage.removeItem('UserData')
};
useEffect(() => {
// Auto-logout after 60 seconds of inactivity
let timer;
if (isLoggedIn) {
timer = setTimeout(() => {
handleLogout();
}, 60000);
}
return () => clearTimeout(timer);
}, [isLoggedIn]);
return (
<div className='container'>
<GoogleOAuthProvider clientId='224952569308-
hjdld0recriobu6cm7635oi8qqqp3et6.apps.googleusercontent.com'>
{/* <GoogleOAuthProvider> */}
{isLoggedIn ? (
<div>
<h1>Welcome to the App {user.name}!</h1>
<button
className='logout-btn'
onClick={handleLogout}
>
Log Out
</button>
<Timer onLogout={handleLogout} />
</div>
) : (
<div>
<h1>Sign Up with Google</h1>
<button className="google-signin-btn">
<GoogleLogin
onSuccess={handleGoogleSuccess}
onError={handleGoogleError}
/>
</button>
<h1>Sign Up</h1>
<div>
<SignUpForm onSignUp={handleSignUp}
/>
</div>
<h1>Login</h1>
<LoginForm onLogin={handleLogin} />
</div>
)}
</GoogleOAuthProvider>
</div>
);
};
export default App;
