Started changes the file structure

2024-09-20 10:34:16 +02:00 · 2024-09-20 10:34:16 +02:00 · 89b3b824c7
commit 89b3b824c7
parent 464df4adac
17 changed files with 12 additions and 12 deletions
--- a/app/components/Login.tsx
+++ b/app/components/Login.tsx
@ -0,0 +1,138 @@
+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;