Scribd
Upload
24 views3 pages

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
24 views3 pages

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

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy