Scribd
Upload
10 views

App Using Local Storage

Uploaded by

rahod ganesh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
10 views

App Using Local Storage

Uploaded by

rahod ganesh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

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;

You might also like