diff --git a/app/components/Login.tsx b/app/components/Login.tsx index 24e4a27..ade180b 100644 --- a/app/components/Login.tsx +++ b/app/components/Login.tsx @@ -1,7 +1,8 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import Settings from './Settings'; // Import the Settings component const Login: React.FC = () => { + // State to handle popup visibility const [showLoginPopup, setShowLoginPopup] = useState(false); const [showSignUpPopup, setShowSignUpPopup] = useState(false); @@ -16,10 +17,20 @@ const Login: React.FC = () => { const [newAccountPassword, setNewAccountPassword] = useState(''); const [newAccountName, setNewAccountName] = useState(''); - // Fixed credentials - const fixedEmail = ''; - const fixedPassword = ''; - const fixedAccount = ''; + // On component mount, check if there are credentials in localStorage + useEffect(() => { + const savedAccountName = localStorage.getItem('accountName'); + const savedAccountEmail = localStorage.getItem('accountEmail'); + const savedAccountPassword = localStorage.getItem('accountPassword'); + + // If credentials are found in localStorage, log the user in + if (savedAccountName && savedAccountEmail && savedAccountPassword) { + setAccountName(savedAccountName); + setEmail(savedAccountEmail); + setPassword(savedAccountPassword); + setIsLoggedIn(true); // Automatically log in + } + }, []); // Function to toggle the login popup const toggleLoginPopup = () => setShowLoginPopup(!showLoginPopup); @@ -32,22 +43,27 @@ const Login: React.FC = () => { // Function to handle login const handleLogin = () => { - if ((email === fixedEmail || accountName === fixedAccount) && password === fixedPassword) { + const savedAccountEmail = localStorage.getItem('accountEmail'); + const savedAccountPassword = localStorage.getItem('accountPassword'); + const savedAccountName = localStorage.getItem('accountName'); + + if ((email === savedAccountEmail || accountName === savedAccountName) && password === savedAccountPassword) { setIsLoggedIn(true); // Successful login setShowLoginPopup(false); // Close the login popup + // Save credentials to localStorage + localStorage.setItem('accountName', savedAccountName || accountName); + localStorage.setItem('accountEmail', savedAccountEmail || email); + localStorage.setItem('accountPassword', savedAccountPassword || password); } else { alert('Incorrect credentials'); } }; - const handleLogout = () => { - setIsLoggedIn(false); - setShowSettingsPopup(false); // Optionally close settings popup on logout - }; - // Function to handle account creation const handleCreateAccount = () => { - console.log('New Account Created:', newAccountEmail, newAccountPassword); + localStorage.setItem('accountName', newAccountName); + localStorage.setItem('accountEmail', newAccountEmail); + localStorage.setItem('accountPassword', newAccountPassword); alert('Account created successfully! You can now log in.'); toggleSignUpPopup(); // Close sign-up popup }; @@ -100,7 +116,7 @@ const Login: React.FC = () => { {/* Text for creating an account */}
- Don't have an account yet? Create one {' '}
+ Don't have an account yet? Create one{' '}
void; accountName: string }> = (
const [anthropic, setAnthropic] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-anthropic').trim());
const [google, setGoogle] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-google').trim());
+ const [isLoggedIn, setIsLoggedIn] = useState(false);
+ const handleLogout = () => {
+ setIsLoggedIn(false);
+ localStorage.removeItem('accountName');
+ localStorage.removeItem('accountEmail');
+ localStorage.removeItem('accountPassword');
+ };
+
// Effect hooks to update localStorage whenever any state changes
useEffect(() => {
const settings = {
@@ -851,6 +859,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (