import React, { useState,useEffect} from 'react';
import SignUpForm from './component/SignUpForm';
import LoginForm from './component/LoginForm';
import Timer from './component/Timer';
import './[Link]'
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 = [Link]('UserData');
if (userData) {
setUser([Link](userData));
}
}, []);
const handleSignUp = (userData) => {
// Save the user details in state (You can also store them in a database)
setUser((prevUser) => [...prevUser, userData]);
[Link]('UserData', [Link]([...user, userData]));
}
const handleGoogleSuccess = (credentialResponse) => {
// Handle successful Google sign-up
[Link](credentialResponse);
setIsLoggedIn(true);
}
const handleGoogleError = () => {
// Handle Google sign-up error
[Link]("Google Login Failed");
}
const handleLogin = (loginData) => {
const { email, password } = loginData;
// Perform login authentication if needed (e.g., check against saved user
details)
const getuserArr = [Link]("UserData");
if (email === "" || ![Link]("@") || ![Link](".com")) {
[Link]('Please enter a valid email address');
} else if (password === "") {
[Link]('Password field is required');
} else if ([Link] < 7) {
[Link]('Password length should be more than 7 characters');
} else {
if (getuserArr && [Link]) {
const userdata = [Link](getuserArr);
const userlogin = [Link]((el, k) => {
return [Link] === email && [Link] === password
});
if ([Link] === 0) {
alert("Invalid details");
} else {
[Link]("User login successfully");
setIsLoggedIn(true);
[Link]("user_login", [Link](userlogin));
}
}
}
}
const handleLogout = () => {
setUser([]);
setIsLoggedIn(false);
// [Link]('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-
[Link]'>
{/* <GoogleOAuthProvider> */}
{isLoggedIn ? (
<div>
<h1>Welcome to the App {[Link]}!</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;