Settings aprroch 1 login overhaul

This commit is contained in:
sageTheDM 2024-09-26 14:57:31 +02:00
parent 1876a3afd8
commit 727c5e540b
2 changed files with 25 additions and 12 deletions

View file

@ -11,7 +11,7 @@ const Login: React.FC = () => {
// Credentials state
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [accountName, setAccountName] = useState(''); // Set the account name
const [accountName, setAccountName] = useState('');
const [newAccountEmail, setNewAccountEmail] = useState('');
const [newAccountPassword, setNewAccountPassword] = useState('');
const [newAccountName, setNewAccountName] = useState('');
@ -27,7 +27,7 @@ const Login: React.FC = () => {
// Function to toggle the sign-up popup
const toggleSignUpPopup = () => {
setShowSignUpPopup(!showSignUpPopup);
setShowLoginPopup(false); // Hide login popup when opening the sign-up popup
setShowLoginPopup(false);
};
// Function to handle login
@ -42,7 +42,8 @@ const Login: React.FC = () => {
const handleLogout = () => {
setIsLoggedIn(false);
}
setShowSettingsPopup(false); // Optionally close settings popup on logout
};
// Function to handle account creation
const handleCreateAccount = () => {
@ -53,12 +54,10 @@ const Login: React.FC = () => {
// Function to toggle the settings popup
const toggleSettingsPopup = () => setShowSettingsPopup(!showSettingsPopup);
const isStartedAsLogOut = 'false'
return (
<div>
{/* Login or Settings Button */}
<button className='header-login-button' onClick={isLoggedIn ? toggleSettingsPopup : toggleLoginPopup}>
{isLoggedIn ? 'Settings' : 'Log In'}
</button>
@ -129,13 +128,13 @@ const Login: React.FC = () => {
/>
</div>
{/* New Account Name Input */}
<div>
{/* New Account Name Input */}
<div>
<input
type="text"
placeholder="Name"
value={newAccountName}
onChange={(e) => setAccountName(e.target.value)}
onChange={(e) => setNewAccountName(e.target.value)}
/>
</div>
@ -158,12 +157,12 @@ const Login: React.FC = () => {
<button className="close-popup" onClick={toggleSignUpPopup} aria-label="Close popup">
Close
</button>
</div>
</div>
</div>
)}
{/* Conditional rendering of the Settings Popup */}
{showSettingsPopup && <Settings closeSettings={toggleSettingsPopup} accountName={accountName} />}
{showSettingsPopup && <Settings closeSettings={toggleSettingsPopup} accountName={accountName}/>}
</div>
);
};