138 lines
4.2 KiB
TypeScript
138 lines
4.2 KiB
TypeScript
import React, { useState } from 'react';
|
|
import Settings from './Settings'; // Import the Settings component
|
|
|
|
const Login: React.FC = () => {
|
|
// State to handle popup visibility
|
|
const [showPopup, setShowPopup] = useState(false);
|
|
const [showSignInPopup, setShowSignInPopup] = useState(false);
|
|
const [isLoggedIn, setIsLoggedIn] = useState(false);
|
|
const [showSettingsPopup, setShowSettingsPopup] = useState(false);
|
|
|
|
// Credentials state
|
|
const [email, setEmail] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [accountName, setAccountName] = useState('Pluto'); // Set the account name
|
|
|
|
// Function to toggle the popup
|
|
const togglePopup = () => setShowPopup(!showPopup);
|
|
|
|
// Function to toggle the sign-in popup
|
|
const toggleSignInPopup = () => {
|
|
setShowSignInPopup(!showSignInPopup);
|
|
setShowPopup(false); // Hide login popup when opening the sign-in popup
|
|
};
|
|
|
|
// Function to handle login
|
|
const handleLogin = () => {
|
|
if ((email === 'pluto@imareal.planet' || accountName === 'Pluto') && password === 'fuckTheSun1234') {
|
|
setIsLoggedIn(true); // Successful login
|
|
setShowSignInPopup(false); // Close the sign-in popup
|
|
} else {
|
|
alert('Incorrect credentials');
|
|
}
|
|
};
|
|
|
|
// Function to toggle the settings popup
|
|
const toggleSettingsPopup = () => setShowSettingsPopup(!showSettingsPopup);
|
|
|
|
return (
|
|
<div>
|
|
{/* Login or Settings Button */}
|
|
<div className="login-button">
|
|
<button onClick={isLoggedIn ? toggleSettingsPopup : togglePopup}>
|
|
{isLoggedIn ? 'Settings' : 'Register'}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Conditional rendering of the initial Popup */}
|
|
{showPopup && (
|
|
<div className="popup-overlay">
|
|
<div className="popup-content">
|
|
<h2>Register</h2>
|
|
|
|
{/* Name or Email Input */}
|
|
<div>
|
|
<input
|
|
type="text"
|
|
placeholder="Name or Email"
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Password Input (displayed as asterisks) */}
|
|
<div>
|
|
<input
|
|
type="password"
|
|
placeholder="Password"
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Create Account and Sign In buttons */}
|
|
<div className="popup-footer">
|
|
<button onClick={() => alert('Create Account clicked')}>
|
|
Create Account
|
|
</button>
|
|
<p>
|
|
Already have an account? Sign in {' '}
|
|
<span
|
|
style={{ color: 'blue', cursor: 'pointer' }}
|
|
onClick={toggleSignInPopup}
|
|
>
|
|
here
|
|
</span>
|
|
</p>
|
|
</div>
|
|
|
|
{/* Close Button */}
|
|
<button className="close-popup" onClick={togglePopup}>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Conditional rendering of the Sign-In Popup */}
|
|
{showSignInPopup && (
|
|
<div className="popup-overlay">
|
|
<div className="popup-content">
|
|
<h2>Sign In</h2>
|
|
|
|
{/* Name or Email Input */}
|
|
<div>
|
|
<input
|
|
type="text"
|
|
placeholder="Name or Email"
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Password Input (displayed as asterisks) */}
|
|
<div>
|
|
<input
|
|
type="password"
|
|
placeholder="Password"
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Log In Button */}
|
|
<div>
|
|
<button className="log-into-account" onClick={handleLogin}>Log In</button>
|
|
</div>
|
|
|
|
{/* Close Button */}
|
|
<button className="close-popup" onClick={toggleSignInPopup}>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Conditional rendering of the Settings Popup */}
|
|
{showSettingsPopup && <Settings closeSettings={toggleSettingsPopup} accountName={accountName} />}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Login;
|